/*
 * Poortgenoten – thema-CSS
 * Desktop (>=1025px): 1:1 met het Figma-ontwerp van 1440px. Alles schaalt proportioneel mee met de
 *   schermbreedte (--u = 1 ontwerp-pixel) en blijft gecentreerd boven 1440px.
 * Tablet (768–1024px) en mobiel (<768px): afgeleide, gestapelde indeling (Figma bevat alleen desktop).
 * Alle kleuren/lettertypes staan hieronder; tekst, afbeeldingen, links en knoppen bewerk je in Elementor.
 */
:root{
  --green:#00d66f; --black:#010101;
  --vw:100vw;
  --u:calc(min(var(--vw),1440px) / 1440);
  --o:max(0px,calc((100% - 1440px) / 2));
  --pad:24px;
}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;overflow-x:clip;-webkit-font-smoothing:antialiased;font-family:'Inter',sans-serif}
.pg-sec[id]{scroll-margin-top:72px}

/* ---------- reset van Elementor-standaarden voor onze secties ---------- */
.pg-sec,.pg-sec *{box-sizing:border-box}
.elementor .pg-sec{position:relative;width:100%;max-width:none;margin:0;padding:0;gap:0;overflow:hidden;--gap:0px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px}
.pg-sec .elementor-widget{margin:0;max-width:100%}
.pg-sec p{margin:0}
.pg-sec .elementor-widget-container{margin:0;padding:0}
.pg-sec hr{border:0;margin:0}
.pg-sec img{display:block;max-width:none}
.pg-sec .elementor-widget-image img{max-width:none!important}
.pg-sec .elementor-widget-image a{display:block}
.pg-sec a{text-decoration:none}

/* ---------- typografie (mobiel/tablet eerst) ---------- */
.pg-sec .pg-h2 .elementor-heading-title{font:700 30px/1.15 'Montserrat',sans-serif;color:#000;margin:0}
.pg-sec .pg-body,.pg-sec .pg-body p{font:400 15px/1.75 'Inter',sans-serif;color:var(--black)}
.pg-sec .pg-body p+p{margin-top:1.2em}

/* ---------- knoppen ---------- */
.pg-sec .pg-btn{--arrow:currentColor}
.pg-sec .pg-btn .elementor-button,.pg-sec .pg-submit,.pg-sec .pg-aanmelden{
  display:flex;align-items:center;justify-content:space-between;width:100%;height:54px;padding:0 24px 0 21px;
  border:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;cursor:pointer;
  font:700 14px/14px 'Inter',sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;color:var(--black)}
.pg-sec .pg-btn .elementor-button::after,.pg-sec .pg-submit::after,.pg-sec .pg-aanmelden::after{
  content:"";flex:none;width:11px;height:11px;background:var(--arrow);
  -webkit-mask:url(../img/arrow.svg) no-repeat center/contain;mask:url(../img/arrow.svg) no-repeat center/contain}
.pg-sec .pg-btn .elementor-button-content-wrapper{display:block}
.pg-sec .pg-btn{width:220px}
.pg-sec .pg-btn-outline .elementor-button{border-color:#fff;color:#fff;font-family:'Montserrat',sans-serif;--arrow:var(--green)}
.pg-sec .pg-btn-outline{--arrow:var(--green)}
.pg-sec .pg-btn-green{--arrow:#000}
.pg-sec .pg-btn-green .elementor-button{background:var(--green);color:#000}
.pg-sec .pg-btn-white{--arrow:#000}
.pg-sec .pg-btn-white .elementor-button{background:#fff;border-color:var(--black);color:var(--black)}
.pg-sec .pg-btn-black{--arrow:var(--green)}
.pg-sec .pg-btn-black .elementor-button{background:#000;color:#fff}
/* Knoppen: kleur loopt vol (van boven naar beneden) i.p.v. bewegen; pijl verandert mee van kleur en schuift iets naar rechts. */
.pg-sec .pg-btn{--fill:var(--green);--fill-ink:#000}
.pg-sec .pg-btn .elementor-button,.pg-sec .pg-submit,.pg-sec .pg-aanmelden,.pg-sec .pg-tickets .elementor-button{
  --fill: var(--green); --fill-ink: #000; position:relative; overflow:hidden; isolation:isolate;
  -webkit-tap-highlight-color:transparent; transition:border-color .3s ease
}
.pg-sec .pg-btn-black .elementor-button{--fill:var(--green);--fill-ink:#000}
.pg-sec .pg-btn-green .elementor-button{--fill:#000;--fill-ink:#fff}
.pg-sec .pg-btn-white .elementor-button{--fill:#000;--fill-ink:var(--green)}
.pg-sec .pg-tickets .elementor-button{--fill:#000;--fill-ink:#fff}
.pg-sec .pg-submit{--fill:#fff;--fill-ink:#000}
.pg-sec .pg-aanmelden{--fill:var(--green);--fill-ink:#000}
.pg-sec .pg-btn .elementor-button::before,.pg-sec .pg-submit::before,.pg-sec .pg-aanmelden::before,.pg-sec .pg-tickets .elementor-button::before{
  content:"";position:absolute;inset:0;background:var(--fill);transform:scaleY(0);transform-origin:top;transition:transform .32s ease;z-index:0
}
.pg-sec .pg-btn .elementor-button-content-wrapper,.pg-sec .pg-submit>span,.pg-sec .pg-aanmelden>span{position:relative;z-index:1;transition:color .3s ease}
.pg-sec .pg-btn .elementor-button::after,.pg-sec .pg-submit::after,.pg-sec .pg-aanmelden::after{position:relative;z-index:1;transition:transform .3s ease,background-color .3s ease}
.pg-sec .pg-btn .elementor-button:focus-visible,.pg-sec .pg-btn .elementor-button:active,.pg-sec .pg-submit:focus-visible,.pg-sec .pg-submit:active,.pg-sec .pg-aanmelden:focus-visible,.pg-sec .pg-aanmelden:active,.pg-sec .pg-tickets .elementor-button:focus-visible,.pg-sec .pg-tickets .elementor-button:active{border-color:var(--fill-ink)}
@media (hover:hover){
.pg-sec .pg-btn .elementor-button:hover,.pg-sec .pg-submit:hover,.pg-sec .pg-aanmelden:hover,.pg-sec .pg-tickets .elementor-button:hover{border-color:var(--fill-ink)}
}
.pg-sec .pg-btn .elementor-button:focus-visible::before,.pg-sec .pg-btn .elementor-button:active::before,.pg-sec .pg-submit:focus-visible::before,.pg-sec .pg-submit:active::before,.pg-sec .pg-aanmelden:focus-visible::before,.pg-sec .pg-aanmelden:active::before,.pg-sec .pg-tickets .elementor-button:focus-visible::before,.pg-sec .pg-tickets .elementor-button:active::before{transform:scaleY(1)}
@media (hover:hover){
.pg-sec .pg-btn .elementor-button:hover::before,.pg-sec .pg-submit:hover::before,.pg-sec .pg-aanmelden:hover::before,.pg-sec .pg-tickets .elementor-button:hover::before{transform:scaleY(1)}
}
.pg-sec .pg-btn .elementor-button:focus-visible .elementor-button-content-wrapper,.pg-sec .pg-btn .elementor-button:active .elementor-button-content-wrapper,.pg-sec .pg-submit:focus-visible>span,.pg-sec .pg-submit:active>span,.pg-sec .pg-aanmelden:focus-visible>span,.pg-sec .pg-aanmelden:active>span{color:var(--fill-ink)}
@media (hover:hover){
.pg-sec .pg-btn .elementor-button:hover .elementor-button-content-wrapper,.pg-sec .pg-submit:hover>span,.pg-sec .pg-aanmelden:hover>span{color:var(--fill-ink)}
}
.pg-sec .pg-btn .elementor-button:focus-visible::after,.pg-sec .pg-btn .elementor-button:active::after,.pg-sec .pg-submit:focus-visible::after,.pg-sec .pg-submit:active::after,.pg-sec .pg-aanmelden:focus-visible::after,.pg-sec .pg-aanmelden:active::after{background-color:var(--fill-ink);transform:translateX(4px)}
@media (hover:hover){
.pg-sec .pg-btn .elementor-button:hover::after,.pg-sec .pg-submit:hover::after,.pg-sec .pg-aanmelden:hover::after{background-color:var(--fill-ink);transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .pg-sec .pg-btn .elementor-button::before,.pg-sec .pg-submit::before,.pg-sec .pg-aanmelden::before,.pg-sec .pg-tickets .elementor-button::before{transition:none}
  .pg-sec .pg-btn .elementor-button::after,.pg-sec .pg-submit::after,.pg-sec .pg-aanmelden::after{transition:none}
}
.pg-sec .pg-tickets{width:auto}
.pg-sec .pg-tickets .elementor-button{height:40px;padding:0 22px;border-radius:200px;background:var(--green);color:#000;justify-content:center;font-family:'Montserrat',sans-serif}
.pg-sec .pg-tickets .elementor-button::after{display:none}
.pg-sec .pg-mailbtn{width:40px}
.pg-sec .pg-mailbtn .elementor-button{position:relative;width:40px;height:40px;padding:0;border-radius:50%;background:var(--green);font-size:0;line-height:0;transition:background-color .25s ease}
.pg-sec .pg-mailbtn .elementor-button::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:12px;transform:translate(-50%,-50%);background:#000;transition:background-color .25s ease;-webkit-mask:url(../img/mail.svg) no-repeat center/contain;mask:url(../img/mail.svg) no-repeat center/contain}
.pg-sec .pg-mailbtn .elementor-button::before{display:none}
.pg-sec .pg-mailbtn .elementor-button:focus-visible,.pg-sec .pg-mailbtn .elementor-button:active{background:#000;border-color:var(--green)}
@media (hover:hover){
.pg-sec .pg-mailbtn .elementor-button:hover{background:#000;border-color:var(--green)}
}
.pg-sec .pg-mailbtn .elementor-button:focus-visible::after,.pg-sec .pg-mailbtn .elementor-button:active::after{background:var(--green)}
@media (hover:hover){
.pg-sec .pg-mailbtn .elementor-button:hover::after{background:var(--green)}
}
.pg-sec .pg-mailbtn .elementor-button:focus-visible::after,.pg-sec .pg-mailbtn .elementor-button:active::after{transform:translate(-50%,-50%)!important}
@media (hover:hover){
.pg-sec .pg-mailbtn .elementor-button:hover::after{transform:translate(-50%,-50%)!important}
}
.pg-sec .pg-mailbtn .elementor-button-text,.pg-sec .pg-mailbtn .elementor-button-content-wrapper{display:none}
.pg-sec .pg-submit{width:220px;max-width:100%;background:#000;color:#fff;border:2px solid #fff;--arrow:#fff}
.pg-sec .pg-aanmelden{width:184px;max-width:100%;border:2px solid var(--green);color:#fff;padding:0 18px;--arrow:var(--green)}

/* ---------- formulieren ---------- */
.pg-sec .pg-form{display:grid;gap:10px;width:100%}
.pg-sec .pg-hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
.pg-sec .pg-contact-form input,.pg-sec .pg-contact-form textarea{
  width:100%;height:54px;padding:0 21px;border:0;border-radius:0;background:var(--green);color:#000;
  font:700 14px/14px 'Inter',sans-serif;outline:0;box-shadow:none}
.pg-sec .pg-contact-form textarea{height:174px;padding:19px 21px;resize:none}
.pg-sec .pg-contact-form input::placeholder,.pg-sec .pg-contact-form textarea::placeholder{color:#000;opacity:1}
.pg-sec .pg-news-form input[type=text],.pg-sec .pg-news-form input[type=email]{
  width:100%;height:30px;padding:0;border:0;border-bottom:1px solid #fff;border-radius:0;background:transparent;color:#fff;
  font:400 14px/26px 'Montserrat',sans-serif;outline:0;box-shadow:none}
.pg-sec .pg-news-form input::placeholder{color:#fff;opacity:1}
.pg-sec .pg-form-msg{color:#fff;font:400 14px/1.4 'Inter',sans-serif;grid-column:1/-1}
.pg-sec .pg-form-msg:empty{display:none}
.pg-sec .pg-submit{justify-self:center}

/* ============================================================
   SECTIES – mobiel/tablet (<1025px)
   ============================================================ */
/* Hero */
.elementor .pg-hero{display:flex;flex-direction:column;justify-content:flex-end;min-height:680px;padding:120px var(--pad) 56px;background-color:#000;background-repeat:no-repeat;background-size:cover;background-position:62% top;gap:20px}
.pg-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.35) 30%,rgba(0,0,0,.9) 100%);pointer-events:none}
.pg-hero>*{position:relative;z-index:2}
.pg-sec .pg-hero-title .elementor-heading-title{font:700 clamp(40px,11vw,62px)/.95 'Montserrat',sans-serif;color:#fff;margin:0}
.pg-sec .pg-hero-title span{color:var(--green)}
.pg-sec .pg-hero-sub,.pg-sec .pg-hero-sub p{font:400 16px/1.4 'Inter',sans-serif;color:#fff}
.elementor .pg-hero>.pg-header{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;grid-auto-flow:column;align-items:center;column-gap:8px;row-gap:0;padding:14px var(--pad);background:rgba(0,0,0,0);transition:background-color .3s ease;--pg-logo-w:136px}
.elementor .pg-hero>.pg-header.is-scrolled{background:rgba(0,0,0,.9)}
body.admin-bar .elementor .pg-hero>.pg-header{top:32px}
@media (max-width:782px){body.admin-bar .elementor .pg-hero>.pg-header{top:46px}}
@media (max-width:1024px){
  .pg-header>.elementor-element{width:auto!important;max-width:none!important;min-width:0;margin:0!important;flex:none}
  .pg-header>.pg-logo{width:min(var(--pg-logo-w,136px),100%)!important;justify-self:start;position:relative;z-index:60}
  .pg-header>.pg-logo img{width:100%!important;height:auto!important}
  .pg-header .pg-tickets .elementor-button{height:38px;padding:0 16px;font-size:13px}
  .pg-header .pg-mailbtn,.pg-header .pg-mailbtn .elementor-button{width:38px;height:38px}
  .pg-header .pg-burger-btn{width:38px;height:38px}
}
.pg-header .pg-logo img{width:100%;height:auto}
.pg-header .pg-burger{position:relative;z-index:60}
.pg-burger-btn{display:block;box-sizing:border-box;width:40px;height:40px;border-radius:50%;border:1px solid var(--green);background:transparent;padding:0;margin:0;line-height:0;cursor:pointer;position:relative}
.pg-burger-btn span{position:absolute;left:50%;top:50%;width:18px;height:2px;margin-left:-9px;background:#fff;transition:transform .25s,margin .25s}
.pg-burger-btn span:first-child{margin-top:-4px}
.pg-burger-btn span:last-child{margin-top:2px}
body.pg-menu-open .pg-burger-btn span:first-child{margin-top:-1px;transform:rotate(45deg)}
body.pg-menu-open .pg-burger-btn span:last-child{margin-top:-1px;transform:rotate(-45deg)}
body.pg-menu-open{overflow:hidden}
.pg-header .pg-tickets,.pg-header .pg-mailbtn{position:relative;z-index:60}
@media (max-width:767px){
  .elementor .pg-hero>.pg-header{grid-template-columns:minmax(0,1fr) auto auto}
  .pg-header>.pg-mailbtn{display:none!important}
}
.pg-sec .pg-nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:var(--black);padding:96px 32px 40px;overflow:auto}
body.pg-menu-open .pg-sec .pg-nav{display:flex;flex-direction:column;justify-content:flex-start}
.pg-nav .elementor-icon-list-items{display:flex;flex-direction:column;gap:18px}
.pg-nav .elementor-icon-list-item{display:block;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.25)}
.pg-nav .elementor-icon-list-item:last-child a,.pg-nav .elementor-icon-list-item:last-child .elementor-icon-list-text{color:var(--green)}
.pg-nav .elementor-icon-list-item a,.pg-nav .elementor-icon-list-text{font:700 30px/1.2 'Montserrat',sans-serif;color:#fff}

/* Welkom */
.elementor .pg-welkom{display:flex;flex-direction:column;gap:22px;padding:72px 0 0;overflow:visible}
.pg-welkom>*{position:relative}
.pg-sec .pg-welkom-title{order:1;margin:0 var(--pad);padding-left:44px}
.pg-rings{position:absolute!important;left:var(--pad);top:72px;width:26px;z-index:2}
.pg-rings img{width:26px;height:auto;transform:rotate(-30deg)}
.pg-sec .pg-welkom-text{order:2;margin:0 var(--pad)}
.pg-sec .pg-welkom-cta{order:3;margin:0 var(--pad)}
.pg-welkom-cta{margin-bottom:50px!important}
.pg-sec .pg-welkom-photo{order:4;margin-top:18px;margin-bottom:0}
.pg-welkom-photo img{width:100%;aspect-ratio:603/590;object-fit:cover;object-position:11% center}
.pg-sec .pg-side-logo{order:5;margin-top:-22px}
.pg-sec .pg-side-logo{background:var(--green);padding:22px var(--pad);position:relative;overflow:hidden;text-align:center}
/* Alleen mobiel/tablet: klein driehoekje tegen de bovenrand, aansluitend op de foto erboven. Op
   desktop uitgezet (zie verderop) — daar zat 'm in de weg van het logo-element in Elementor. */
.pg-side-logo::before{content:"";position:absolute;left:0;top:0;width:56px;height:56px;background:#000;clip-path:polygon(0 0,100% 0,0 100%)}
.pg-side-logo img{display:block;width:min(300px,70%);height:auto;margin:0 auto}
.pg-welkom-circle{position:absolute!important;top:-40px;right:var(--pad);width:80px;z-index:5}
.pg-welkom-circle img{width:100%;height:auto}

/* Missie */
.elementor .pg-missie{display:flex;flex-direction:column;gap:22px;padding:0 0 64px}
.pg-missie::before{content:"";display:none;position:absolute;left:0;top:0;height:100%;background:var(--green)}
/* display:none is hier bewust: dit hoekje is alleen voor desktop bedoeld (zie de aparte
   display:block hieronder in het desktop-blok). De diashow (foto) hoort hier gewoon overheen te
   lopen — dit hoekje is alleen zichtbaar in de groene marge NAAST de foto, niet erover — dus
   z-index lager dan de foto (die staat op 1 via de gedeelde .pg-a-regel). translateZ dwingt nog
   wel een eigen compositor-laag af, zodat de animerende (opacity-fade) diashow de browser niet
   in de war brengt en het driehoekje in die groene marge willekeurig laat verdwijnen. */
.pg-missie::after{content:"";display:none;position:absolute;z-index:0;transform:translateZ(0);left:0;top:0;width:110px;height:98px;background:#000;clip-path:polygon(0 0,100% 0,0 100%)}
.pg-missie>*{position:relative;z-index:1}
.pg-sec .pg-missie-photo{margin:0;background:var(--green);position:relative;overflow:hidden;height:0;padding:0;padding-top:59.37%}
.pg-missie-slider{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;margin:0!important;max-width:none!important}
.pg-missie-slider img{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center!important;margin:0!important;padding:0!important;border:0!important;aspect-ratio:auto!important;opacity:0}
.pg-missie-slider img:first-child{opacity:1}
.pg-sec .pg-rocket{margin:42px var(--pad) 0;width:44px}
.pg-sec .pg-missie-title,.pg-sec .pg-missie-text{margin:0 var(--pad)}
.pg-missie-title .elementor-heading-title{white-space:normal}
/* Mobiel: GEEN eigen padding-top hier (die introduceerde juist een ongewenste witte kloof tussen
   het einde van Welkom — het groene logo-vak — en het begin van deze sectie, zie LEES-MIJ/geschie-
   denis). Onder de tekst (vóór de logoband) precies zo groot als de ruimte van de slider tot het
   raketje erboven — dát is de vergelijking die telt: de ruimte RONDOM het raketje zelf, niet de
   ruimte vóór de hele sectie. Beide zijn nu 64px, gelijk aan de padding die de andere secties op
   mobiel gebruiken (was eerder allebei 36px: kleiner dan de rest van de site, terecht gemeld). */

/* Partners */
.elementor .pg-partners{display:flex;flex-direction:row;flex-wrap:nowrap!important;align-items:center;gap:0;overflow:hidden;background:#000;padding:0;height:132px;--pg-marquee-speed:1}
/* bewust NIET op :root: als deze custom properties met --vw (dat bij elke resize opnieuw gezet
   wordt, o.a. door de adresbalk van mobiel Safari) dezelfde ouder zouden delen, kan een browser
   de animatie die via calc() van deze properties afhangt onnodig laten herstarten/haperen. */
@media (max-width:767px){.elementor .pg-partners{--pg-marquee-speed:.35}}
/* will-change/backface-visibility bewust weggelaten: dat dwingt permanent een eigen GPU-laag af
   voor deze track (met 25 vrij gedetailleerde vector-logo's erin) — op WebKit (Safari, dus zowel
   iPhone als Mac) kan zo'n blijvend vastgehouden laag na lange tijd tot geheugendruk leiden
   waarbij de browser de laag weggooit en er niets meer getekend wordt. Moderne browsers zetten
   een lopende transform-animatie ook zonder deze hint prima op de GPU. */
.elementor .pg-partners-track{display:flex;flex-wrap:nowrap!important;flex:none;width:max-content;max-width:none;flex-direction:row;align-items:center;gap:56px;position:relative;animation:pg-marquee calc(var(--pg-marquee,40s) * var(--pg-marquee-speed,1)) linear infinite}
@media (hover:hover){.pg-partners:hover .pg-partners-track{animation-play-state:paused}}
@keyframes pg-marquee{from{transform:translateX(0) translateZ(0)}to{transform:translateX(-20%) translateZ(0)}}
@media (prefers-reduced-motion:reduce){.elementor .pg-partners-track{animation:none}.elementor .pg-partners{overflow-x:auto}}
.elementor-editor-active .pg-partners-track{animation:none}
.elementor-editor-active .pg-partners{overflow-x:auto}
.pg-partner{flex:none;display:flex;align-items:center}
.pg-partner img{height:46px;width:auto;max-width:none}

/* ---------- herbouwde logobalk: zie de uitgebreide toelichting in main.src.css. Kale, eigen
   marquee met maar 2 kopieën van de logoset (translateX(-50%) voor een naadloze lus), bewust
   zonder will-change (zie de toelichting hierboven bij de oude balk). main.js verbergt de oude
   balk (zonder de Elementor-data aan te raken) en zet deze ernaast. */
.pg-partners-clean{overflow:hidden;width:100%}
.pg-partners-clean-track{display:flex;flex-wrap:nowrap;flex:none;width:max-content;align-items:center;gap:56px}
.pg-partners-clean-item{flex:none;display:flex;align-items:center}
.pg-partners-clean-item img{height:46px;width:auto;max-width:none}
@media (min-width:1025px){.pg-partners-clean-item img{height:calc(54 * var(--u))}}

/* Aftermovie */
.elementor .pg-after{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;min-height:560px;padding:80px var(--pad);background-color:#000;background-size:cover;background-position:center}
.pg-after::before{content:"";position:absolute;inset:0;background:rgba(1,1,1,.55)}
.pg-after>*{position:relative;z-index:1}
.pg-sec .pg-after-title .elementor-heading-title{font:700 clamp(24px,7vw,32px)/1.1 'Montserrat',sans-serif;color:#fff;text-align:center;margin:0}
.pg-after-title span{color:var(--green)}
.elementor .pg-playwrap{padding:0;position:relative;width:96px;height:96px;display:block}
.pg-playwrap .pg-play-ring{position:absolute;inset:0;background:rgba(0,214,111,.2);border-radius:50%;box-sizing:border-box;transition:background-color .25s ease}
.pg-playwrap .pg-play{position:absolute;left:19px;top:19px}
.pg-play-btn{display:block;line-height:0}
/* hover/focus/tap: de ring vult helemaal met groen (mobiel-safe: alleen echte hover-apparaten krijgen de :hover-variant) */
.pg-playwrap:focus-within .pg-play-ring,.pg-playwrap:active .pg-play-ring{background-color:var(--green)}
@media (hover:hover){.pg-playwrap:hover .pg-play-ring{background-color:var(--green)}}

/* ---------- video-overlay: opent bij klik op de play-knop, wordt door main.js in de pagina
   gezet (geen Elementor-widget, dus dit blijft werken zonder de pagina opnieuw te hoeven
   importeren als er ooit iets aan de video zelf verandert) ---------- */
.pg-video-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.92);padding:24px}
.pg-video-modal.is-open{display:flex}
.pg-video-modal-inner{position:relative;width:100%;max-width:1100px}
.pg-video-player{width:100%;max-height:85vh;aspect-ratio:16/9;display:block;background:#000;border:0}
.pg-video-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border:none;background:transparent;color:#fff;font-size:32px;line-height:1;cursor:pointer;padding:0}
body.pg-video-open{overflow:hidden}

/* ---------- juridische pop-up: algemene voorwaarden / privacybeleid, geopend via de bestaande
   footer-links (die al "#" als href hadden — dus geen Elementor-wijziging nodig). De tekst zelf
   staat in main.js, niet hier, zodat er maar één plek is om bij te werken. ---------- */
.pg-legal-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:24px}
.pg-legal-modal.is-open{display:flex}
.pg-legal-modal-inner{position:relative;width:100%;max-width:720px;max-height:85vh;background:#fff;border-radius:8px;display:flex;flex-direction:column;overflow:hidden}
.pg-legal-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #eee;flex:0 0 auto}
.pg-legal-modal-head h2{font:700 20px/1.2 'Montserrat',sans-serif;color:#000;margin:0}
.pg-legal-close{border:none;background:transparent;color:#000;font-size:28px;line-height:1;cursor:pointer;padding:0 0 0 16px}
.pg-legal-modal-body{padding:20px 24px 28px;overflow-y:auto;font:400 15px/1.6 'Inter',sans-serif;color:#000}
.pg-legal-modal-body h3{font:700 16px/1.3 'Montserrat',sans-serif;color:#000;margin:22px 0 8px}
.pg-legal-modal-body h3:first-child{margin-top:0}
.pg-legal-modal-body p{margin:0 0 10px}
.pg-legal-modal-body ul{margin:0 0 10px;padding-left:20px}
.pg-legal-modal-body a{color:var(--green)}
body.pg-legal-open{overflow:hidden}

/* ---------- eenvoudige cookiemelding: alleen een melding + wegklik-knop (geen los "weigeren",
   dat is bewust zo gehouden — "eenvoudig" was de vraag). Onthouden via localStorage zodat hij na
   het eerste bezoek niet meer terugkomt. Geen Elementor-widget, dus main.js bouwt 'm net als de
   video- en juridische pop-up hierboven. ---------- */
.pg-cookie-notice{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;background:#000;color:#fff;padding:18px 24px;gap:16px 24px;align-items:center;justify-content:center;flex-wrap:wrap}
.pg-cookie-notice.is-open{display:flex}
.pg-cookie-text{font:400 14px/1.5 'Inter',sans-serif;margin:0;max-width:640px}
.pg-cookie-text a{color:var(--green)}
.pg-cookie-ok{flex:0 0 auto;border:none;border-radius:4px;background:var(--green);color:#000;font:700 14px/1 'Inter',sans-serif;padding:12px 22px;cursor:pointer}

/* Reviews */
.elementor .pg-reviews{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:64px 0 120px;background:#fff}
.elementor .pg-quote{padding:0;position:relative;display:block;width:64px;height:64px;margin-left:var(--pad)}
.pg-quote-r{display:none!important}
.pg-quote-circle{position:absolute;inset:0}
.pg-quote-circle img{width:100%;height:100%}
.pg-sec .pg-quote-glyph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pg-sec .pg-quote-glyph img{display:block;width:28px;height:28px;max-width:none}
.pg-sec .pg-reviews-title{margin:0 var(--pad)}
.pg-reviews-rule{display:none}
.pg-sec .pg-reviews-text{margin:0 var(--pad)}
.pg-sec .pg-reviews-text,.pg-sec .pg-reviews-text p{font:400 15px/1.5 'Inter',sans-serif;color:#000}
.elementor .pg-cards{display:flex;flex-wrap:nowrap!important;flex-direction:row;gap:16px;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px var(--pad) 16px;margin-top:8px;scrollbar-width:none}
.pg-cards::-webkit-scrollbar{display:none}
.elementor .pg-card{position:relative;flex:0 0 min(84vw,360px);scroll-snap-align:center;display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px 12px;background:#000;padding:38px 32px 30px;min-height:330px;overflow:visible}
.pg-card::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:var(--green)}
.pg-sec .pg-quote-text{grid-column:1/-1;align-self:start}
/* was 30px/1: paste vaak niet meer bij nu er echte (langere) reviews in staan i.p.v. de korte
   voorbeeldtekst — de quote liep dan door tot over het lijntje en de naam eronder heen. */
.pg-sec .pg-quote-text .elementor-heading-title{font:400 20px/26px 'Syne',sans-serif;color:var(--green);margin:0}
.pg-card-line{grid-column:1/-1}
.pg-card-line hr{height:1px;background:#fff}
.pg-sec .pg-card-name,.pg-sec .pg-card-name p{font:700 14px/14px 'Inter',sans-serif;color:#fff}
.pg-card-pj img{width:41px;height:34px}
.pg-tabs{display:flex;justify-content:center;align-items:center;gap:22px;min-height:20px}
.pg-tab{border:0;background:none;padding:0;cursor:pointer;line-height:0}
.pg-tab svg{display:block;width:15px;height:15px}
.pg-tab path{fill:var(--green);transition:fill .2s}
.pg-tab.is-active path{fill:#000}
.pg-tab{min-width:15px;min-height:15px}
.pg-arrows{align-self:center}

/* Team */
/* Team: zelfde kaart-ontwerp op elk formaat (foto, half overlappend naamkaartje, afgekapte bio
   met "Lees meer"-knop) — alleen het aantal kolommen verandert per breakpoint. Bewust gewone,
   responsieve CSS i.p.v. Figma-pixelpositionering: dit onderdeel is een vrij op zichzelf staand
   herhaald kaartje, geen 1-op-1 desktop-vertaling van een vast Figma-canvas nodig. */
.elementor .pg-team{display:grid;grid-template-columns:1fr;gap:40px;padding:64px var(--pad);background:var(--green)}
.pg-team::after{content:"";position:absolute;right:0;top:0;width:96px;height:107px;background:#000;clip-path:polygon(0 0,100% 0,100% 100%)}
.pg-team>.pg-team-title,.pg-team>.pg-team-sub{grid-column:1/-1}
.pg-sec .pg-team-title{margin:0}
.pg-sec .pg-team-sub,.pg-sec .pg-team-sub p{font:700 15px/1.6 'Inter',sans-serif;color:var(--black);margin-top:4px}

.elementor .pg-member{padding:0;display:block;position:relative}
.pg-sec .pg-member-photo{position:relative;width:100%;aspect-ratio:280/237;background:#000;overflow:hidden;margin:0}
.pg-sec .pg-member-photo img{position:relative;display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover}
.pg-sec .pg-member-card{position:relative;z-index:2;background:#fff;width:58%;margin:-14px 0 0;padding:14px 16px 16px;box-sizing:border-box}
.pg-sec .pg-member-name{font:700 15px/1.3 'Inter',sans-serif;color:var(--black);margin:0 0 8px}
.pg-member-card hr{border:none;border-top:1px solid rgba(1,1,1,.25);margin:0 0 8px}
.pg-sec .pg-member-role{font:italic 400 13px/1.4 'Inter',sans-serif;color:var(--black);margin:0}
.pg-sec .pg-member-bio-wrap{margin:20px 0 0}
.pg-sec .pg-member-bio,.pg-sec .pg-member-bio p{font-size:14px;line-height:1.7;color:var(--black)}
/* "Lees meer": zuivere CSS (checkbox + label), geen JavaScript nodig — werkt dus ook gegarandeerd
   in de Elementor-editor. De knop blijft staan; alleen het pijltje draait om bij het openklappen. */
.pg-bio-toggle{position:absolute;opacity:0;pointer-events:none}
.pg-bio-toggle:focus-visible ~ .pg-bio-more{outline:2px solid var(--green);outline-offset:-2px}
.pg-member-bio{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.pg-bio-toggle:checked + .pg-member-bio{display:block;-webkit-line-clamp:unset;overflow:visible}
/* Zelfde hoogte/opmaak als de andere CTA-knoppen op de site (.pg-btn), alleen dan over de volle
   breedte van de kaart i.p.v. een vaste 220px. */
.pg-bio-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;height:54px;padding:0 24px 0 21px;background:#000;color:#fff;font:700 14px/14px 'Inter',sans-serif;cursor:pointer;width:100%;box-sizing:border-box}
.pg-bio-more svg{flex:none;transition:transform .2s ease}
.pg-bio-toggle:checked ~ .pg-bio-more svg{transform:rotate(180deg)}
@media (min-width:768px){
  .elementor .pg-team{grid-template-columns:1fr 1fr}
}
@media (min-width:1025px){
  .elementor .pg-team{grid-template-columns:1fr 1fr 1fr}
}

/* Agenda */
.elementor .pg-agenda{display:flex;flex-direction:column;gap:24px;padding:72px var(--pad) 64px;background:#fff}
.pg-sec .pg-agenda-title{margin:0}
.elementor .pg-agenda-item{padding:0;display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto;column-gap:22px;row-gap:10px;align-items:center}
.pg-agenda-circle{grid-area:1/1/3/2;width:104px}
.pg-agenda-circle img{width:104px;height:104px}
.pg-sec .pg-agenda-date{grid-area:1/1/3/2;justify-self:center;align-self:center}
.pg-sec .pg-agenda-date .elementor-heading-title{font:700 28px/.85 'Inter',sans-serif;color:var(--black);text-align:center;margin:0}
.pg-sec .pg-agenda-event{grid-column:2;grid-row:1;align-self:end}
.pg-sec .pg-agenda-event .elementor-heading-title{font:700 clamp(22px,6vw,30px)/1.1 'Inter',sans-serif;color:var(--black);margin:0}
.pg-agenda-note{grid-column:2;grid-row:2;align-self:start}
.pg-sec .pg-agenda-note,.pg-sec .pg-agenda-note p{font:700 14px/1.9 'Inter',sans-serif;color:var(--black)}
.pg-agenda-rule hr{height:1px;background:#000}
.pg-agenda-rule{width:100%}
.pg-sec .pg-party{position:relative;margin-top:14px;width:100%;aspect-ratio:624/520;overflow:hidden;-webkit-mask:url(../img/party-mask.svg) center/100% 100% no-repeat;mask:url(../img/party-mask.svg) center/100% 100% no-repeat}
.pg-sec .pg-party img{position:absolute!important;left:-10.83%!important;top:-4.04%!important;width:132.1%!important;height:105.2%!important;max-width:none!important;object-fit:fill!important}

/* Contact */
.elementor .pg-contact{display:flex;flex-direction:column;align-items:center;gap:30px;padding:72px var(--pad);background:var(--black)}
.pg-contact-title{order:1}
.pg-contact-form-w{order:2}
.pg-contact::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:url(../img/pattern-tile.svg) -18px -29px/78.153px 1168.268px repeat;opacity:.1;pointer-events:none}
.pg-contact>*{position:relative}
.pg-sec .pg-contact-title .elementor-heading-title{font:700 32px/1.1 'Montserrat',sans-serif;color:#fff;text-align:center;margin:0}
.pg-contact-title span{color:var(--green)}

.pg-contact-form-w{width:100%;max-width:640px}
.pg-contact-form{grid-template-columns:1fr;row-gap:8px}
.pg-sec .pg-contact-form .pg-submit{margin-top:14px}

/* Foto's */
.elementor .pg-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--black)}
.pg-photo,.pg-photo .elementor-widget-container{height:100%;position:relative;overflow:hidden;aspect-ratio:1/1}
.pg-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pg-photo-img{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;opacity:0;transition:opacity 1.1s ease;will-change:opacity}
.pg-photo-img.is-visible{opacity:1}
.pg-photo-1 img{object-position:50% 50%}

/* Footer */
.elementor .pg-footer{display:flex;flex-direction:column;align-items:flex-start;gap:26px;padding:56px var(--pad) 48px;background:var(--black)}
.pg-footer-logo{width:136px}
.pg-footer-logo img{width:100%;height:auto}
.pg-sec .pg-address,.pg-sec .pg-address p{font:400 14px/26px 'Montserrat',sans-serif;color:#fff}
.pg-sec .pg-address strong{font-weight:700}
.pg-sec .pg-news-title .elementor-heading-title{font:700 30px/1.15 'Montserrat',sans-serif;color:#fff;margin:0}
.pg-sec .pg-news-sub{margin-top:-14px}
.pg-sec .pg-news-sub,.pg-sec .pg-news-sub p{font:500 14px/1.6 'Montserrat',sans-serif;color:var(--green)}
.pg-news-form-w{width:100%;max-width:420px}
.pg-news-form{grid-template-columns:1fr;row-gap:18px}
.pg-sec .pg-news-form .pg-aanmelden{margin-top:6px}
.pg-sec .pg-follow,.pg-sec .pg-follow p{font:700 14px/18px 'Inter',sans-serif;color:#fff}
/* justify-content:flex-end: nu alleen Instagram overblijft, moet 'm rechts uitgelijnd staan in
   zijn vak (waar voorheen, met 3 iconen, LinkedIn stond) i.p.v. links waar hij anders vanzelf
   (als enige, eerste kind) zou blijven staan. */
.pg-social-in{display:flex;justify-content:flex-end;gap:8px}
.pg-social-in a{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;width:45px;height:45px;border:1px solid var(--green);border-radius:50%;color:#fff;-webkit-tap-highlight-color:transparent}
.pg-social-in a::before{content:"";position:absolute;inset:0;background:var(--green);transform:scaleY(0);transform-origin:bottom;transition:transform .32s ease;z-index:0}
.pg-social-in a:focus-visible::before,.pg-social-in a:active::before{transform:scaleY(1)}
@media (hover:hover){
.pg-social-in a:hover::before{transform:scaleY(1)}
}
.pg-social-in svg{position:relative;z-index:1}
.pg-social-in svg path{transition:fill .2s ease}
.pg-social-in a:focus-visible svg path,.pg-social-in a:active svg path{fill:#000}
@media (hover:hover){
.pg-social-in a:hover svg path{fill:#000}
}
@media (prefers-reduced-motion:reduce){.pg-social-in a::before{transition:none}}

.elementor .pg-bottom{display:flex;flex-direction:column;gap:8px;padding:28px var(--pad);background:var(--green)}
.pg-sec .pg-copy,.pg-sec .pg-copy p,.pg-sec .pg-credit,.pg-sec .pg-credit p{font:400 14px/18px 'Inter',sans-serif;color:#000}
.pg-sec .pg-copy a{color:#000;margin-right:22px;white-space:nowrap}
/* Mobiel: alles gecentreerd, en Copyright/Algemene voorwaarden/Privacy Policy elk op een eigen
   regel i.p.v. naast elkaar. */
@media (max-width:767px){
  .elementor .pg-bottom{align-items:center;text-align:center}
  .pg-sec .pg-copy a{display:block;margin:4px 0 0}
  .pg-sec .pg-credit,.pg-sec .pg-credit p{text-align:center}
}

/* ---------- tablet ---------- */
@media (min-width:768px) and (max-width:1024px){
  :root{--pad:40px}
  .elementor .pg-hero{min-height:760px;padding-bottom:80px}
  .elementor .pg-hero>.pg-header{--pg-logo-w:151px}
  .pg-sec .pg-hero-sub,.pg-sec .pg-hero-sub p{font-size:18px}
  .elementor .pg-welkom{padding-top:88px}
  /* Alleen tablet (768-1024px): hier gold nog de mobiele opzet (icoon los gepositioneerd, titel met
     extra padding-left ernaast) — daardoor stond de titel 44px verder naar rechts dan de tekst/CTA
     eronder. Titel terug naar dezelfde inspringing als tekst/CTA/icoon (var(--pad)) — precies zoals
     op mobiel, waar icoon, titel, tekst en knop al wél allemaal op dezelfde lijn staan. Bewust niet
     op mobiel (<768px) toegepast: die stand is al goedgekeurd en blijft ongemoeid. */
  .pg-sec .pg-welkom-title{padding-left:0}
  /* het icoon staat los (position:absolute) met een vaste top:72px die alleen op mobiel toevallig
     overeenkomt met de padding-top van .pg-welkom (ook 72px) — vandaar dat icoon en titel daar
     precies gelijk beginnen. Hier op tablet is die padding-top opgehoogd naar 88px zonder het
     icoon mee te tillen, dus liep het 16px voor op de titel en kwam het (nu titel ook geen
     padding-left meer heeft) over de "W" heen te hangen. Icoon terug op dezelfde lijn als de titel. */
  .pg-rings{top:88px}

  .elementor .pg-cards{gap:20px}
  .elementor .pg-card{flex-basis:min(46vw,380px)}
  .pg-contact-form{grid-template-columns:1fr 1fr;grid-template-rows:54px 54px 54px auto;column-gap:8px;row-gap:6px}
  .pg-sec .pg-contact-form textarea{height:auto;align-self:stretch}
  .pg-contact-form .pg-f-msg{grid-column:2;grid-row:1/4}
  .pg-sec .pg-contact-form .pg-submit{grid-column:1/3;margin-top:22px}
  .pg-contact-form .pg-form-msg{grid-column:1/3}
  .elementor .pg-photos{grid-template-columns:repeat(4,1fr)}
  .elementor .pg-contact{padding:96px var(--pad)}
  .elementor .pg-footer{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px;align-items:start}
  .pg-footer>.pg-news-title,.pg-footer>.pg-news-sub,.pg-footer>.pg-news-form-w{grid-column:2}
  .pg-footer>.pg-footer-logo,.pg-footer>.pg-address,.pg-footer>.pg-follow,.pg-footer>.pg-social{grid-column:1}
  .pg-footer>.pg-footer-logo{grid-row:1}.pg-footer>.pg-address{grid-row:2}
  .pg-footer>.pg-follow{grid-row:3}.pg-footer>.pg-social{grid-row:4}
  .pg-footer>.pg-news-title{grid-row:1}.pg-footer>.pg-news-sub{grid-row:2;margin-top:-20px}.pg-footer>.pg-news-form-w{grid-row:3/5}
  .elementor .pg-bottom{flex-direction:row;justify-content:space-between}
}

/* ============================================================
   DESKTOP (>=1025px) – 1:1 Figma (1440px)
   ============================================================ */
@media (min-width:1025px){
  .pg-sec .pg-a{position:absolute!important;z-index:1;margin:0!important}
  .elementor .pg-playwrap{display:contents}
  .pg-burger{display:none!important}

  /* typografie */
  .pg-sec .pg-h2 .elementor-heading-title{font-size:max(22px,calc(36 * var(--u)));line-height:calc(36 * var(--u));white-space:nowrap}
  .pg-sec .pg-body,.pg-sec .pg-body p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(28 * var(--u))}
  .pg-sec .pg-body p+p{margin-top:calc(28 * var(--u))}

  /* knoppen */
  .pg-sec .pg-btn .elementor-button,.pg-sec .pg-submit,.pg-sec .pg-aanmelden{height:calc(54 * var(--u));padding:0 calc(24 * var(--u)) 0 calc(21 * var(--u));font-size:max(12px,calc(14 * var(--u)));line-height:1}
  .pg-sec .pg-btn .elementor-button::after,.pg-sec .pg-submit::after,.pg-sec .pg-aanmelden::after{width:calc(11 * var(--u));height:calc(11 * var(--u))}
  .pg-sec .pg-btn{width:calc(220 * var(--u))}
  .pg-sec .pg-tickets{width:calc(101 * var(--u))}
  .pg-sec .pg-tickets .elementor-button{height:calc(45 * var(--u));padding:0;font-size:max(12px,calc(14 * var(--u)))}
  .pg-sec .pg-mailbtn{width:calc(45 * var(--u))}
  .pg-sec .pg-mailbtn .elementor-button{width:calc(45 * var(--u));height:calc(45 * var(--u))}
  .pg-sec .pg-mailbtn .elementor-button::after{width:calc(21 * var(--u));height:calc(14 * var(--u))}
  .pg-sec .pg-submit{width:calc(220 * var(--u))}
  .pg-sec .pg-aanmelden{width:calc(184 * var(--u));padding:0 calc(18 * var(--u))}

  /* afbeeldingen vullen hun ontwerp-vak */
  .pg-sec .pg-a.elementor-widget-image .elementor-widget-container{height:100%}
  .pg-sec .pg-a.elementor-widget-image a{width:100%;height:100%}
  .pg-sec .pg-a.elementor-widget-image img{width:100%;height:100%;object-fit:contain}
  .pg-sec .pg-a.pg-welkom-photo img{aspect-ratio:auto;object-fit:cover}
  .pg-sec .pg-a.pg-welkom-photo img{object-position:11.3% center}
  .pg-sec .pg-a.pg-party img{position:absolute!important;left:-10.83%!important;top:-4.04%!important;width:132.1%!important;height:105.2%!important;max-width:none!important;object-fit:fill!important}

  /* header + hero */
  .elementor .pg-hero{display:block;min-height:0;padding:0;background-size:108.38% auto;background-position:center top;background-repeat:no-repeat}
  .pg-hero::before{inset:auto;left:0;top:0;bottom:0;width:75%;background:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}
  .pg-hero>*{z-index:auto}
  .elementor .pg-hero>.pg-header{left:0;right:0;height:calc(80 * var(--u));display:block;padding:0;gap:0}
  .pg-sec[id]{scroll-margin-top:calc(80 * var(--u))}
  .pg-sec .pg-header .pg-logo,.pg-header .pg-tickets,.pg-header .pg-mailbtn{margin:0}
  .pg-header .pg-logo{width:calc(151 * var(--u))}
  .pg-sec .pg-nav{display:block;position:absolute;right:auto;bottom:auto;z-index:2;background:none;padding:0;overflow:visible}
  .pg-nav .elementor-icon-list-items{flex-direction:row;gap:calc(22 * var(--u))}
  .pg-nav .elementor-icon-list-item{padding-bottom:0;border-bottom:0}
  .pg-nav .elementor-icon-list-item a,.pg-nav .elementor-icon-list-text{font:400 max(11px,calc(14 * var(--u)))/1 'Montserrat',sans-serif;white-space:nowrap}
  .pg-nav .elementor-icon-list-item:last-child a,.pg-nav .elementor-icon-list-item:last-child .elementor-icon-list-text{color:#fff}
  .pg-sec .pg-hero-title .elementor-heading-title{font-size:max(34px,calc(62 * var(--u)));line-height:calc(57 * var(--u));white-space:nowrap}
  .pg-sec .pg-hero-sub,.pg-sec .pg-hero-sub p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(18 * var(--u))}
  .pg-sec .pg-hero-cta{margin:0}

  /* welkom: titel/tekst/knop lopen hier voortaan gewoon in het document mee i.p.v. een vaste
     Figma-hoogte per element — nodig zodra hier écht ingevulde, langere tekst in komt te staan
     (bij een vaste top-positie loopt langere tekst dwars door de knop eronder heen, want die twee
     weten dan niets van elkaars werkelijke hoogte). Volgens het leidende Figma-bestand staat het
     icoon NAAST "Welkom" (dezelfde regel), met het icoon zelf op dezelfde beginlijn als de tekst/
     knop eronder — de titel start daardoor wat verder naar rechts (na icoon+tussenruimte). Kolom 1
     = icoon, kolom 2 = titel; tekst/knop lopen daaronder over de volle breedte door. Het geheel
     wordt verticaal gecentreerd binnen de vaste sectiehoogte (align-content:center), ongeacht
     hoeveel regels de tekst telt. Foto/logo/cirkel blijven gewoon los, vast gepositioneerd
     decoratief beeld. */
  /* kolom 1-breedte = icoon-marge(calc(var(--o) + 64 * var(--u))) + eigen breedte(26*u) i.p.v. "auto": een grid-kolom die
     "auto" is en zelf van de marge van zijn item afhangt, laat het percentage-deel van die marge
     (var(--o)) onbetrouwbaar op 0 vallen boven 1440px breed — vandaar hier een vaste berekening. */
  .elementor .pg-welkom{display:grid;grid-template-columns:calc(var(--o) + 90 * var(--u)) 1fr;column-gap:calc(18 * var(--u));row-gap:calc(24 * var(--u));align-content:center;justify-items:start;padding:0}
  .pg-welkom>*{position:absolute}
  /* left+width i.p.v. left+right: die laatste combinatie (breedte laten "oplossen" uit twee
     dubbel-geneste custom-property calc()'s) bleek in de praktijk soms een verkeerde breedte op
     te leveren (tot 1728px breed i.p.v. de bedoelde ~117px!) — dat duwde de hele pagina breder
     dan het scherm, met een horizontale scrollbalk en daardoor overal witruimte rechts tot
     gevolg. left+width (zoals verder overal in dit bestand) is hier het bewezen betrouwbare
     patroon. Dit blok loopt door tot de rand van de 1440px-canvas (1440-1323=117px breed). */
  /* Op heel brede schermen: width breidt hier uit met var(--o) erbij, zodat de rand ECHT tot de
     ware rand van het scherm loopt (var(--o)+1440 i.p.v. te stoppen bij de rand van het gecentreerde
     1440px-canvas) — dit blok is bewust "full bleed", in tegenstelling tot de tekst/knoppen ernaast
     die wél netjes binnen het canvas blijven. */
  .pg-welkom::before{content:"";position:absolute;left:calc(var(--o) + 1323 * var(--u));width:calc(117 * var(--u) + var(--o));top:0;height:calc(590 * var(--u));background:var(--green)}
  /* Volgens het leidende Figma-bestand: precies ÉÉN klein driehoekje, alleen rechtsonder, aansluitend
     aan de onderrand — en aan de ware schermrand op brede schermen (left krijgt daarom nog een
     tweede var(--o) erbij, zodat hij meeschuift met de nu ook full-bleed groene band hierboven,
     zonder zelf breder te worden). Geen driehoek bovenin. */
  /* was top:399/height:191: reikte daarmee tot in de laatste tekstregel van het logo (sneed de
     "N" van GENOTEN af). Kleiner en dus lager (nog steeds aansluitend op de onderrand: 590-110=480),
     zodat hij onder de tekst blijft. */
  .pg-welkom::after{content:"";position:absolute;left:calc(2 * var(--o) + 1320 * var(--u));top:calc(480 * var(--u));width:calc(120 * var(--u));height:calc(110 * var(--u));background:#000;clip-path:polygon(100% 0,100% 100%,0 100%);z-index:3}
  .pg-side-logo{transform:rotate(90deg);transform-origin:center}
  .pg-sec .pg-side-logo{background:none;padding:0}
  .pg-side-logo::before{display:none}
  .pg-side-logo img{width:100%!important}
  .pg-sec .pg-welkom-title,.pg-sec .pg-welkom-text,.pg-sec .pg-welkom-cta{position:static!important;margin:0!important;padding:0}
  .pg-sec .pg-welkom-title{grid-column:2;grid-row:1;align-self:center}
  .pg-sec .pg-welkom-text{grid-column:1/-1;margin-left:calc(var(--o) + 64 * var(--u))!important}
  .pg-sec .pg-welkom-cta{grid-column:1/-1;margin-left:calc(var(--o) + 64 * var(--u))!important}
  .pg-welkom-circle{z-index:5}
  /* icoon op dezelfde beginlijn als tekst/knop (calc(var(--o) + 64 * var(--u)), i.p.v. de eerdere calc(var(--o) + 20 * var(--u))) — daarmee komt de
     titel (kolom 2, na icoon+tussenruimte) vanzelf verder naar rechts te staan dan tekst/knop,
     precies zoals in het leidende Figma-bestand. Geen margin-left hiervoor gebruiken: een
     percentage (var(--o)) in de margin van een grid-item lost onbetrouwbaar op (zelfde
     eigenaardigheid als eerder bij kolom 1 zelf, maar dan op item-niveau — bleek zelfs met een
     vaste, niet-"auto" kolombreedte nog steeds fout te gaan). Kolom 1 is precies zo breed gemaakt
     (calc(var(--o) + 64 * var(--u)) + iconbreedte) dat justify-self:end het icoon zonder marge exact op calc(var(--o) + 64 * var(--u)) uitlijnt. */
  .pg-sec .pg-rings{position:static!important;margin:0!important;justify-self:end;grid-column:1;grid-row:1;align-self:center}
  .pg-rings img{width:100%;height:100%}
  .pg-sec .pg-welkom-photo{margin:0}

  /* missie: groene kader + hoekje zijn bewust "full bleed" tot de ware linkerrand van het scherm
     (zelfde reden als bij welkom hierboven) — de foto ERIN blijft wel netjes op zijn eigen, binnen
     het 1440px-canvas gecentreerde positie staan (die gebruikt nog gewoon calc(var(--o) + 64 * var(--u)), ongemoeid). */
  .elementor .pg-missie{display:block;padding:0}
  .pg-missie::before{display:block;left:0;width:calc(720 * var(--u) + var(--o));height:100%}
  .pg-missie::after{display:block;left:0;width:calc(213 * var(--u));height:calc(191 * var(--u))}
  .pg-missie>*{z-index:auto}
  .pg-sec .pg-missie-photo,.pg-sec .pg-rocket,.pg-sec .pg-missie-title,.pg-sec .pg-missie-text{margin:0}
  .pg-sec .pg-a.pg-missie-photo{background:none;padding:0}
  .pg-missie-title .elementor-heading-title{white-space:nowrap}

  /* partners */
  .elementor .pg-partners{height:calc(149 * var(--u))}
  .elementor .pg-partners-track{gap:calc(64 * var(--u))}
  .pg-sec .pg-partner{width:auto;height:auto}
  .pg-partner img{width:auto;height:calc(54 * var(--u));max-width:none;object-fit:contain}

  /* aftermovie */
  .elementor .pg-after{display:block;padding:0;min-height:0}
  .pg-after>*{z-index:auto}
  .pg-sec .pg-after-title .elementor-heading-title{font-size:calc(32 * var(--u));line-height:calc(32 * var(--u))}
  .pg-playwrap .pg-play-ring{inset:auto;border:2px solid var(--green)} /* volledig dekkend, want los van de vulling hierboven */
  .pg-playwrap .pg-play{left:auto}

  /* reviews: titel/lijntje/tekst vormen visueel één rij en moeten daarom ECHT verticaal gecentreerd
     zijn t.o.v. elkaar — dat lukt met vaste Figma-topposities alleen toevallig, precies zo lang de
     tekst evenveel regels beslaat als de placeholder. Bewust GEEN flex hier: de sectie zelf heeft
     een vaste hoogte (nodig voor de losstaande, absoluut gepositioneerde kaarten/pijltjes eronder),
     dus align-items:center zou t.o.v. die hele sectiehoogte centreren i.p.v. t.o.v. elkaar. In
     plaats daarvan blijven titel/lijntje/tekst gewoon absoluut, maar met z'n drieën op dezelfde
     verticale middellijn (top:50% van hun eigen hoogte, via translateY) — zo vallen hun middens
     altijd samen, ongeacht hoeveel regels de tekst nu telt. */
  .pg-sec .pg-reviews-title,.pg-sec .pg-reviews-rule,.pg-sec .pg-reviews-text{top:calc(141 * var(--u))!important;transform:translateY(-50%)}
  .pg-reviews-rule{display:block}
  .pg-reviews-rule hr{height:calc(54 * var(--u));width:100%;background:#000}
  .pg-sec .pg-reviews-text,.pg-sec .pg-reviews-text p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(18 * var(--u))}
  /* .pg-quote zelf draagt nu de Figma-positie/-afmeting (zie .pg-a hierboven); circle en glyph
     blijven 'm net als op mobiel gewoon met inset:0 vullen — alleen het icoon schaalt mee. */
  .pg-quote-r{display:block!important}
  .pg-sec .pg-quote-glyph img{width:calc(42 * var(--u));height:calc(42 * var(--u))}
  .elementor .pg-cards{display:flex;flex-direction:row;gap:calc(48.5 * var(--u));overflow-x:auto;overflow-y:hidden;padding:0;margin:0;scroll-snap-type:x mandatory}
  /* was: display:block + vaste hoogte, met quote/lijn/naam/logo elk los op vaste Figma-coördinaten
     (.pg-qt-N/.pg-cl-N/.pg-cn-N/.pg-cp-N verderop in dit bestand) absoluut gepositioneerd binnen
     die vaste hoogte — werkte alleen zolang quotes kort genoeg bleven. Nu, net als mobiel/tablet,
     een grid die vanzelf meegroeit met de tekst (min-height als ondergrens i.p.v. vaste hoogte).
     equalizeCardHeights() in main.js trekt daarna alle kaarten gelijk op de hoogte van de langste. */
  .elementor .pg-card{display:grid;grid-template-columns:1fr auto;align-items:end;gap:calc(28 * var(--u)) calc(12 * var(--u));flex:0 0 calc(403 * var(--u));width:calc(403 * var(--u));height:auto;min-height:calc(341 * var(--u));box-sizing:border-box;padding:calc(44 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u));scroll-snap-align:start;background:#000}
  .elementor .pg-card:nth-child(2){margin-left:calc(-4.5 * var(--u))}
  .elementor .pg-card:nth-child(3){margin-left:calc(4.5 * var(--u))}
  .pg-card::after{bottom:calc(-10 * var(--u));top:auto;height:calc(10 * var(--u))}
  .pg-sec .pg-quote-text,.pg-sec .pg-card-line,.pg-sec .pg-card-name,.pg-sec .pg-card-pj{position:static!important;margin:0!important}
  .pg-sec .pg-quote-text,.pg-sec .pg-card-line,.pg-sec .pg-card-name{width:auto!important}
  .pg-sec .pg-quote-text{grid-column:1/-1!important}
  .pg-sec .pg-card-name{grid-column:1!important;align-self:center}
  .pg-sec .pg-card-pj{grid-column:2!important;align-self:center}
  /* was calc(32 * var(--u))/calc(32 * var(--u)): de kaart groeit nu vanzelf mee met de tekst. */
  .pg-sec .pg-quote-text .elementor-heading-title{font-size:max(16px,calc(22 * var(--u)));line-height:max(20px,calc(26 * var(--u)))}
  .pg-card-line hr{height:1px;width:100%}
  .pg-sec .pg-card-name,.pg-sec .pg-card-name p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(14 * var(--u))}
  .pg-card-pj img{width:100%;height:100%}
  .pg-arrows{align-self:auto}
  .pg-tabs{gap:calc(22 * var(--u));min-height:calc(20 * var(--u))}
  .pg-tab svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}

  /* team: zelfde kaart-opbouw, alleen iets grotere tekst op het grotere scherm. Deze sectie is
     geen Figma-pixelpositionering (zie build.rb) en trekt dus niet vanzelf gelijk met de
     1440px-canvas waar de rest van de site zich aan houdt — op heel brede schermen daarom hier
     extra zijruimte (--o) erbij, zodat de kaarten netjes binnen diezelfde 1440px blijven i.p.v.
     over het hele, veel bredere scherm uit te rekken. De groene achtergrond blijft wel gewoon
     randloos doorlopen. */
  /* was calc(var(--pad) + var(--o)): --pad is de mobiele/tablet-inspringing (24-40px), niet de
     70px die de rest van de site op desktop gebruikt (zie agenda/reviews/welkom hieronder) —
     daardoor stond dit blok merkbaar dichter tegen de rand dan de andere secties. */
  .elementor .pg-team{padding-left:calc(var(--o) + 70 * var(--u));padding-right:calc(var(--o) + 70 * var(--u))}
  /* was right:var(--o): dat hield de driehoek binnen het gecentreerde 1440px-canvas i.p.v. tegen de
     ware schermrand — op brede monitors bleef daardoor een groene marge zichtbaar. Nu bewust ook
     full-bleed (right:0), zelfde behandeling als de andere hoek-driehoekjes hierboven. */
  .pg-team::after{right:0;width:calc(191 * var(--u));height:calc(213 * var(--u))}
  /* Alleen desktop: titel->tekst en tekst->foto's gelijkgetrokken en verkleind (was 44px/40px,
     nu allebei 24px) zodat de tekst dichter naar de titel toe komt, met behoud van gelijke
     padding. Mobiel blijft op de eigen, al goedgekeurde waarde staan (aparte, ongemoeide regel). */
  .elementor .pg-team{gap:calc(24 * var(--u))}
  .pg-sec .pg-team-sub{margin-top:0}
  .pg-sec .pg-team-sub,.pg-sec .pg-team-sub p{font-size:max(12px,calc(16 * var(--u)));line-height:calc(28 * var(--u))}
  /* Alleen desktop: kaart verder omhoog (was -14px) zodat de lijn tussen naam en functie precies op
     de onderrand van de foto uitkomt i.p.v. er 28,6px onder (gemeten) — mobiel blijft op -14px staan. */
  .pg-sec .pg-member-card{margin-top:-43px}
  .pg-sec .pg-member-name{font-size:max(13px,calc(16 * var(--u)))}
  .pg-sec .pg-member-role{font-size:max(12px,calc(14 * var(--u)))}
  .pg-sec .pg-member-bio,.pg-sec .pg-member-bio p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(26 * var(--u))}
  /* Alleen desktop: ruimte boven de knop gelijk aan de ruimte onder de knop (64px, de
     padding-bottom van .pg-team) — stond op mobiel al goed op 16px, dus daar ongemoeid. */
  .pg-bio-more{margin-top:64px}

  /* agenda: zelfde reden als bij welkom/reviews hierboven — titel, intro-tekst, de datumkaart en de
     regel+knop lopen nu gewoon in het document mee (position:static) in plaats van vaste
     Figma-coördinaten. Vooral .pg-agenda-note had daardoor een bug: die had NOOIT een breedte
     gekregen (de placeholder "One year anniversary." was kort genoeg om nooit op te vallen), dus
     zodra hier een echte, volledige zin kwam te staan liep die zonder breedtebeperking dwars over de
     foto heen. De interne opmaak van het datumkaart-item (rondje/datum/titel/tekst) hergebruikt
     hetzelfde CSS-grid dat op mobiel al goed werkte, alleen iets groter. */
  .elementor .pg-agenda{display:flex;flex-direction:column;gap:calc(24 * var(--u));padding:calc(72 * var(--u)) 0 calc(64 * var(--u))}
  .pg-sec .pg-agenda-title,.pg-sec .pg-agenda-text{position:static!important;margin:0 0 0 calc(var(--o) + 70 * var(--u))!important}
  .pg-agenda-item{display:grid;grid-template-columns:calc(128 * var(--u)) 1fr;grid-template-rows:auto auto;column-gap:calc(22 * var(--u));row-gap:calc(10 * var(--u));align-items:center;margin-left:calc(var(--o) + 70 * var(--u))!important;width:calc(615 * var(--u))}
  .pg-sec .pg-agenda-circle,.pg-sec .pg-agenda-date,.pg-sec .pg-agenda-event,.pg-sec .pg-agenda-note{position:static!important;margin:0!important;width:auto}
  .pg-agenda-circle{width:calc(128 * var(--u));height:calc(128 * var(--u))}
  .pg-agenda-circle img{width:100%;height:100%}
  .pg-sec .pg-agenda-date .elementor-heading-title{font-size:calc(36 * var(--u));line-height:calc(28 * var(--u))}
  .pg-sec .pg-agenda-event .elementor-heading-title{font-size:calc(36 * var(--u));line-height:calc(36 * var(--u));white-space:nowrap}
  .pg-sec .pg-agenda-note,.pg-sec .pg-agenda-note p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(28 * var(--u))}
  .pg-sec .pg-agenda-rule{position:static!important;margin:0 0 0 calc(var(--o) + 74 * var(--u))!important}
  .pg-agenda-rule hr{height:1px;width:100%}
  .pg-sec .pg-agenda-cta{position:static!important;margin:0 0 0 calc(var(--o) + 469 * var(--u))!important}
  .pg-sec .pg-party{margin:0;aspect-ratio:auto}

  /* contact */
  .elementor .pg-contact{display:block;padding:0}
  .pg-contact::before{background-size:calc(78.153 * var(--u)) calc(1168.268 * var(--u));background-position:calc(-17.73 * var(--u)) calc(-29 * var(--u))}
  .pg-contact>*{position:absolute}
  .pg-sec .pg-contact-title .elementor-heading-title{font-size:calc(36 * var(--u));line-height:calc(36 * var(--u))}
  .pg-contact-form-w{max-width:none}
  .pg-contact-form{grid-template-columns:calc(384 * var(--u)) calc(384 * var(--u));column-gap:calc(5 * var(--u));row-gap:calc(6 * var(--u));grid-template-rows:calc(54 * var(--u)) calc(54 * var(--u)) calc(54 * var(--u)) auto}
  .pg-contact-form input,.pg-contact-form textarea{height:calc(54 * var(--u))!important;padding:0 calc(21 * var(--u))!important;font-size:max(12px,calc(14 * var(--u)))!important}
  .pg-contact-form textarea{height:auto!important;align-self:stretch;padding:calc(19 * var(--u)) calc(21 * var(--u))!important}
  .pg-contact-form .pg-f-msg{grid-column:2;grid-row:1/4}
  .pg-sec .pg-contact-form .pg-submit{grid-column:1/3;justify-self:start;margin:calc(51 * var(--u)) 0 0 calc(274 * var(--u))}
  .pg-contact-form .pg-form-msg{grid-column:1/3}

  /* foto's */
  .elementor .pg-photos{grid-template-columns:repeat(4,1fr);height:calc(352 * var(--u))}
  .pg-photo,.pg-photo .elementor-widget-container{height:100%;aspect-ratio:auto}
  .pg-photo img{height:100%;aspect-ratio:auto}

  /* footer: logo/adres/volg-ons/social blijven gewoon los, vast gepositioneerd (linkerkolom, geen
     variabele tekst). De nieuwsbrief-kolom rechts wel: news-sub had nooit een breedte (de placeholder
     "Meld je aan voor onze nieuwsbrief." was kort genoeg om nooit op te vallen) — een echte, langere
     zin liep daardoor rechtdoor tot voorbij het inschrijfformulier. Nu net zo breed als dat formulier
     eronder (388px) en met een normale regelhoogte (36px was bedoeld voor precies 1 regel, niet voor
     een afbrekende zin van 2+ regels). Titel/subtekst/formulier lopen daarom ook in het document mee
     (position:static) i.p.v. een vaste top-positie, zodat het formulier automatisch meeschuift als
     de subtekst nu 2 regels beslaat i.p.v. 1. */
  /* padding-bottom was 0: zolang de sectie een vaste (te korte) hoogte had, viel dat niet op omdat
     de knop toch al voorbij de eigen rand liep. Nu de sectie meegroeit met de inhoud (zie hierboven)
     moet er hier zelf ademruimte onder de knop komen, anders staat hij direct tegen de groene balk
     eronder aan. */
  .elementor .pg-footer{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 calc(48 * var(--u))}
  .pg-footer>*{position:absolute}
  .pg-sec .pg-address,.pg-sec .pg-address p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(26 * var(--u))}
  .pg-sec .pg-news-title .elementor-heading-title{font-size:max(22px,calc(36 * var(--u)));line-height:calc(36 * var(--u));white-space:nowrap}
  /* .pg-news-form-w miste hier de .pg-sec-prefix die .pg-news-title/.pg-news-sub wel hebben — daardoor
     verloor deze regel de specificiteitsstrijd van de algemene ".pg-sec .pg-a{position:absolute!important}"
     regel, bleef het element toch absoluut gepositioneerd op zijn oude, vaste top, en liep de
     (nu 2 regels tellende) tekst erboven er dwars doorheen zodra hij ver genoeg groeide. */
  .pg-sec .pg-news-title,.pg-sec .pg-news-sub,.pg-sec .pg-news-form-w{position:static!important;margin:0!important;margin-left:calc(var(--o) + 526 * var(--u))!important}
  /* title kreeg bij het losmaken van zijn vaste top-positie geen vervangende top-ruimte mee, dus
     schoof hij tegen de bovenrand van de footer aan i.p.v. op zijn oorspronkelijke top:59 —
     hersteld via margin-top. */
  .pg-sec .pg-news-title{margin-top:calc(59 * var(--u))!important}
  /* title/sub/formulier/knop kregen alle drie een andere marge (8, 28, en 32+20 voor de knop) —
     nu gelijk getrokken naar 40px overal, zoals gevraagd. */
  .pg-sec .pg-news-sub{margin-top:calc(14 * var(--u))!important;width:calc(388 * var(--u))}
  .pg-sec .pg-news-form-w{margin-top:calc(14 * var(--u))!important}
  .pg-sec .pg-news-sub,.pg-sec .pg-news-sub p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(21 * var(--u))}
  .pg-news-form-w{max-width:none}
  .pg-news-form{grid-template-columns:calc(183 * var(--u)) calc(183 * var(--u));column-gap:calc(20 * var(--u));row-gap:calc(32 * var(--u))}
  .pg-news-form input[type=text],.pg-news-form input[type=email]{height:calc(30 * var(--u))!important;font-size:max(12px,calc(14 * var(--u)))!important;line-height:calc(26 * var(--u))!important}
  .pg-sec .pg-news-form .pg-aanmelden{grid-column:2;margin-top:calc(30 * var(--u))}
  .pg-sec .pg-follow,.pg-sec .pg-follow p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(18 * var(--u));text-align:right}
  .pg-social-in{gap:calc(8 * var(--u))}
  .pg-social-in a{width:calc(45 * var(--u));height:calc(45 * var(--u))}

  .elementor .pg-bottom{display:block;padding:0}
  .pg-bottom>*{position:absolute}
  .pg-sec .pg-copy,.pg-sec .pg-copy p,.pg-sec .pg-credit,.pg-sec .pg-credit p{font-size:max(12px,calc(14 * var(--u)));line-height:calc(18 * var(--u))}
  .pg-sec .pg-credit,.pg-sec .pg-credit p{text-align:right}
  .pg-sec .pg-copy a{margin:0 0 0 calc(18 * var(--u))}
}

/* ===== Desktop posities (gegenereerd uit Figma: 1440px ontwerp) ===== */
@media (min-width: 1025px) {
.pg-hero{height:calc(811 * var(--u));}
.pg-welkom{height:calc(590 * var(--u));}
.pg-missie{height:calc(613 * var(--u));}
.pg-partners{height:calc(149 * var(--u));}
.pg-after{height:calc(811 * var(--u));}
.pg-reviews{height:calc(777 * var(--u));}
.pg-agenda{height:calc(737 * var(--u));}
.pg-contact{height:calc(581 * var(--u));}
.pg-photos{height:calc(352 * var(--u));}
.pg-bottom{height:calc(101 * var(--u));}
}
@media (min-width: 1025px) {
.pg-sec .pg-logo, .pg-card .pg-logo{left:calc(var(--o) + 64 * var(--u));top:calc(22 * var(--u));width:calc(151 * var(--u));height:calc(40 * var(--u));}
.pg-sec .pg-nav, .pg-card .pg-nav{left:calc(var(--o) + 398 * var(--u));top:calc(34 * var(--u));}
.pg-sec .pg-tickets, .pg-card .pg-tickets{left:calc(var(--o) + 1002 * var(--u));top:calc(20 * var(--u));width:calc(101 * var(--u));height:calc(45 * var(--u));}
.pg-sec .pg-mailbtn, .pg-card .pg-mailbtn{left:calc(var(--o) + 1331 * var(--u));top:calc(20 * var(--u));width:calc(45 * var(--u));height:calc(45 * var(--u));}
.pg-sec .pg-hero-title, .pg-card .pg-hero-title{left:calc(var(--o) + 64 * var(--u));top:calc(289 * var(--u));width:calc(535 * var(--u));}
.pg-sec .pg-hero-sub, .pg-card .pg-hero-sub{left:calc(var(--o) + 64 * var(--u));top:calc(491 * var(--u));width:calc(453 * var(--u));}
.pg-sec .pg-hero-cta, .pg-card .pg-hero-cta{left:calc(var(--o) + 64 * var(--u));top:calc(549 * var(--u));width:calc(220 * var(--u));height:calc(54 * var(--u));}
.pg-sec .pg-welkom-photo, .pg-card .pg-welkom-photo{left:calc(var(--o) + 720 * var(--u));top:calc(0 * var(--u));width:calc(603 * var(--u));height:calc(590 * var(--u));}
.pg-sec .pg-side-logo, .pg-card .pg-side-logo{left:calc(var(--o) + 1106.5 * var(--u));top:calc(215.5 * var(--u));width:calc(512 * var(--u));height:calc(159 * var(--u));}
.pg-sec .pg-welkom-circle, .pg-card .pg-welkom-circle{left:calc(var(--o) + 672 * var(--u));top:calc(-48 * var(--u));width:calc(96 * var(--u));height:calc(96 * var(--u));}
.pg-sec .pg-rings, .pg-card .pg-rings{left:calc(var(--o) + 69 * var(--u));top:calc(128.5 * var(--u));width:calc(26 * var(--u));height:calc(47 * var(--u));}
.pg-sec .pg-welkom-title, .pg-card .pg-welkom-title{left:calc(var(--o) + 113 * var(--u));top:calc(135 * var(--u));}
.pg-sec .pg-welkom-text, .pg-card .pg-welkom-text{left:calc(var(--o) + 64 * var(--u));top:calc(232 * var(--u));width:calc(513 * var(--u));}
.pg-sec .pg-welkom-cta, .pg-card .pg-welkom-cta{left:calc(var(--o) + 64 * var(--u));top:calc(405 * var(--u));width:calc(220 * var(--u));height:calc(54 * var(--u));}
.pg-sec .pg-missie-photo, .pg-card .pg-missie-photo{left:calc(var(--o) + 64 * var(--u));top:calc(62 * var(--u));width:calc(827 * var(--u));height:calc(491 * var(--u));}
.pg-sec .pg-rocket, .pg-card .pg-rocket{left:calc(var(--o) + 948 * var(--u));top:calc(88 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u));}
.pg-sec .pg-missie-title, .pg-card .pg-missie-title{left:calc(var(--o) + 946 * var(--u));top:calc(177 * var(--u));}
.pg-sec .pg-missie-text, .pg-card .pg-missie-text{left:calc(var(--o) + 946 * var(--u));top:calc(281 * var(--u));width:calc(430 * var(--u));}
.pg-sec .pg-after-title, .pg-card .pg-after-title{left:calc(var(--o) + 0 * var(--u));top:calc(298 * var(--u));width:calc(1440 * var(--u));}
.pg-sec .pg-play-ring, .pg-card .pg-play-ring{left:calc(var(--o) + 672 * var(--u));top:calc(422 * var(--u));width:calc(96 * var(--u));height:calc(96 * var(--u));}
.pg-sec .pg-play, .pg-card .pg-play{left:calc(var(--o) + 691 * var(--u));top:calc(441 * var(--u));width:calc(58 * var(--u));height:calc(58 * var(--u));}
.pg-sec .pg-quote-l, .pg-card .pg-quote-l{left:calc(var(--o) + 70 * var(--u));top:calc(93 * var(--u));width:calc(96 * var(--u));height:calc(96 * var(--u));}
.pg-sec .pg-quote-r, .pg-card .pg-quote-r{left:calc(var(--o) + 1278 * var(--u));top:calc(93 * var(--u));width:calc(96 * var(--u));height:calc(96 * var(--u));}
.pg-sec .pg-reviews-title, .pg-card .pg-reviews-title{left:calc(var(--o) + 369 * var(--u));top:calc(120 * var(--u));}
.pg-sec .pg-reviews-rule, .pg-card .pg-reviews-rule{left:calc(var(--o) + 558 * var(--u));top:calc(114 * var(--u));width:calc(1 * var(--u));height:calc(54 * var(--u));}
.pg-sec .pg-reviews-text, .pg-card .pg-reviews-text{left:calc(var(--o) + 587 * var(--u));top:calc(123 * var(--u));width:calc(513 * var(--u));}
.pg-sec .pg-qt-1, .pg-card .pg-qt-1{left:calc(52 * var(--u));top:calc(44 * var(--u));width:calc(280 * var(--u));}
.pg-sec .pg-cl-1, .pg-card .pg-cl-1{left:calc(54 * var(--u));top:calc(257 * var(--u));width:calc(292 * var(--u));height:calc(1 * var(--u));}
.pg-sec .pg-cn-1, .pg-card .pg-cn-1{left:calc(52 * var(--u));top:calc(286 * var(--u));width:calc(199 * var(--u));}
.pg-sec .pg-cp-1, .pg-card .pg-cp-1{left:calc(305 * var(--u));top:calc(277 * var(--u));width:calc(41 * var(--u));height:calc(34 * var(--u));}
.pg-sec .pg-qt-2, .pg-card .pg-qt-2{left:calc(52 * var(--u));top:calc(44 * var(--u));width:calc(280 * var(--u));}
.pg-sec .pg-cl-2, .pg-card .pg-cl-2{left:calc(54 * var(--u));top:calc(257 * var(--u));width:calc(292 * var(--u));height:calc(1 * var(--u));}
.pg-sec .pg-cn-2, .pg-card .pg-cn-2{left:calc(52 * var(--u));top:calc(286 * var(--u));width:calc(199 * var(--u));}
.pg-sec .pg-cp-2, .pg-card .pg-cp-2{left:calc(305 * var(--u));top:calc(277 * var(--u));width:calc(41 * var(--u));height:calc(34 * var(--u));}
.pg-sec .pg-qt-3, .pg-card .pg-qt-3{left:calc(52 * var(--u));top:calc(44 * var(--u));width:calc(280 * var(--u));}
.pg-sec .pg-cl-3, .pg-card .pg-cl-3{left:calc(54 * var(--u));top:calc(257 * var(--u));width:calc(292 * var(--u));height:calc(1 * var(--u));}
.pg-sec .pg-cn-3, .pg-card .pg-cn-3{left:calc(52 * var(--u));top:calc(286 * var(--u));width:calc(199 * var(--u));}
.pg-sec .pg-cp-3, .pg-card .pg-cp-3{left:calc(305 * var(--u));top:calc(277 * var(--u));width:calc(41 * var(--u));height:calc(34 * var(--u));}
.pg-sec .pg-cards, .pg-card .pg-cards{left:calc(var(--o) + 70 * var(--u));top:calc(253 * var(--u));width:calc(1306 * var(--u));height:calc(361 * var(--u));}
.pg-sec .pg-arrows, .pg-card .pg-arrows{left:calc(var(--o) + 0 * var(--u));top:calc(659 * var(--u));width:calc(1440 * var(--u));height:calc(20 * var(--u));}
.pg-sec .pg-agenda-title, .pg-card .pg-agenda-title{left:calc(var(--o) + 70 * var(--u));top:calc(128 * var(--u));}
.pg-sec .pg-agenda-text, .pg-card .pg-agenda-text{left:calc(var(--o) + 70 * var(--u));top:calc(205 * var(--u));width:calc(488 * var(--u));}
.pg-sec .pg-agenda-circle, .pg-card .pg-agenda-circle{left:calc(var(--o) + 70 * var(--u));top:calc(356 * var(--u));width:calc(128 * var(--u));height:calc(128 * var(--u));}
.pg-sec .pg-agenda-date, .pg-card .pg-agenda-date{left:calc(var(--o) + 74 * var(--u));top:calc(386 * var(--u));width:calc(122 * var(--u));}
.pg-sec .pg-agenda-event, .pg-card .pg-agenda-event{left:calc(var(--o) + 227 * var(--u));top:calc(373 * var(--u));width:calc(440 * var(--u));}
.pg-sec .pg-agenda-note, .pg-card .pg-agenda-note{left:calc(var(--o) + 232 * var(--u));top:calc(456 * var(--u));}
.pg-sec .pg-agenda-rule, .pg-card .pg-agenda-rule{left:calc(var(--o) + 74 * var(--u));top:calc(517 * var(--u));width:calc(615 * var(--u));height:calc(1 * var(--u));}
.pg-sec .pg-agenda-cta, .pg-card .pg-agenda-cta{left:calc(var(--o) + 469 * var(--u));top:calc(517 * var(--u));width:calc(220 * var(--u));height:calc(54 * var(--u));}
.pg-sec .pg-party, .pg-card .pg-party{left:calc(var(--o) + 752 * var(--u));top:calc(96 * var(--u));width:calc(624 * var(--u));height:calc(520 * var(--u));}
.pg-sec .pg-contact-title, .pg-card .pg-contact-title{left:calc(var(--o) + 0 * var(--u));top:calc(105 * var(--u));width:calc(1440 * var(--u));}
.pg-sec .pg-contact-form-w, .pg-card .pg-contact-form-w{left:calc(var(--o) + 351 * var(--u));top:calc(198 * var(--u));width:calc(773 * var(--u));}
.pg-sec .pg-footer-logo, .pg-card .pg-footer-logo{left:calc(var(--o) + 64 * var(--u));top:calc(76 * var(--u));width:calc(151 * var(--u));height:calc(40 * var(--u));}
.pg-sec .pg-address, .pg-card .pg-address{left:calc(var(--o) + 64 * var(--u));top:calc(229 * var(--u));}
.pg-sec .pg-news-title, .pg-card .pg-news-title{left:calc(var(--o) + 526 * var(--u));top:calc(59 * var(--u));}
.pg-sec .pg-news-sub, .pg-card .pg-news-sub{left:calc(var(--o) + 526 * var(--u));top:calc(95 * var(--u));}
.pg-sec .pg-news-form-w, .pg-card .pg-news-form-w{left:calc(var(--o) + 526 * var(--u));top:calc(153 * var(--u));width:calc(388 * var(--u));}
.pg-sec .pg-follow, .pg-card .pg-follow{left:calc(var(--o) + 814 * var(--u));top:calc(177 * var(--u));width:calc(562 * var(--u));}
.pg-sec .pg-social, .pg-card .pg-social{left:calc(var(--o) + 1225 * var(--u));top:calc(227 * var(--u));width:calc(152 * var(--u));height:calc(45 * var(--u));}
.pg-sec .pg-copy, .pg-card .pg-copy{left:calc(var(--o) + 64 * var(--u));top:calc(39 * var(--u));width:calc(513 * var(--u));}
.pg-sec .pg-credit, .pg-card .pg-credit{left:calc(var(--o) + 814 * var(--u));top:calc(39 * var(--u));width:calc(562 * var(--u));}
}