/* ==========================================================================
   Forma 22 — Divi child theme
   Alles is gescoped op body.f22-page of op de CSS-klassen die in Divi aan
   secties/modules hangen (f22-hero, f22-ervaar, f22-maken, f22-werk, f22-slot).
   Teksten, knoppen, tabbladen en portfolio-items blijven gewone Divi-modules.
   ========================================================================== */

:root{
  --f22-g0:#111b16; --f22-g1:#16241d; --f22-g2:#1f3028; --f22-g3:#2a3f34;
  --f22-line:rgba(244,240,231,.10); --f22-line-2:rgba(244,240,231,.18);
  --f22-cream:#f4f0e7; --f22-cream-2:#fbf9f4; --f22-mute:#a3ab9f; --f22-dim:#7a857b;
  --f22-champ:#a8b65a; --f22-champ-2:#f4f0e7; --f22-gold:#a8b65a; --f22-esp:#4a352c; --f22-olive:#a8b65a;
  --f22-sans:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --f22-serif:"Instrument Serif","Lora",Georgia,serif;
  --f22-mono:"JetBrains Mono","DejaVu Sans Mono",ui-monospace,monospace;
}

/* ---------- Basis voor de Forma 22-pagina ---------- */
body.f22-page,
body.f22-page #page-container,
body.f22-page #et-main-area,
body.f22-page #main-content{background:var(--f22-g1)!important}
body.f22-page{color:var(--f22-cream);font-family:var(--f22-sans);-webkit-font-smoothing:antialiased}
body.f22-page #page-container{padding-top:0!important;margin-top:0!important}
body.f22-page #main-content .container:before{display:none}

/* Divi zet standaardopmaak op koppen/alinea's: hier neutraliseren binnen onze secties */
.f22-sec, .f22-sec *{box-sizing:border-box}
.f22-sec h1,.f22-sec h2,.f22-sec h3,.f22-sec h4,.f22-sec h5,.f22-sec h6{
  font-family:var(--f22-sans)!important;color:var(--f22-cream);padding:0;margin:0;font-weight:400;letter-spacing:-.035em;line-height:1}
.f22-sec p{padding:0;margin:0;color:inherit;font-family:var(--f22-sans)}
.f22-sec p + p{margin-top:.9em}
.f22-sec a{color:inherit;text-decoration:none}
.f22-sec .et_pb_text_inner{color:var(--f22-cream)}
.f22-sec em{font-family:var(--f22-serif)!important;font-style:italic;font-weight:400;color:var(--f22-champ-2);letter-spacing:-.01em}
.f22-sec.et_pb_section{padding:0!important;background-color:var(--f22-g2)}
.f22-sec .et_pb_row{width:min(1320px,calc(100% - 80px))!important;max-width:none!important;padding:0!important}
.f22-sec .et_pb_row{display:flow-root}
.f22-sec .et_pb_column{margin-bottom:0}
.f22-sec .et_pb_module{margin-bottom:0}

.f22-kicker,.f22-kicker .et_pb_text_inner{font-family:var(--f22-mono)!important;font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--f22-mute)!important;line-height:1.4!important}

/* ---------- Knoppen: liquid glass + champagne ---------- */
.f22-sec .et_pb_button,
.f22-btn{display:inline-flex!important;align-items:center;gap:10px;font-family:var(--f22-sans)!important;font-size:14px!important;font-weight:500!important;
  padding:13px 22px!important;border-radius:999px!important;line-height:1.2!important;border:0!important;letter-spacing:0!important;
  color:var(--f22-ink,#1f3028)!important;background:linear-gradient(180deg,#fdfcf9 0%,var(--f22-paper,#f4f0e7) 50%,#dfd9cb 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(0,0,0,.15),0 12px 34px -14px rgba(var(--f22-zc,244,240,231),.45)!important;transition:transform .3s,box-shadow .3s}
.f22-sec .et_pb_button:after{content:"↗"!important;font-family:var(--f22-sans)!important;position:static!important;opacity:1!important;margin:0!important;font-size:14px!important;line-height:1!important}
.f22-sec .et_pb_button:hover,.f22-btn:hover{transform:translateY(-2px);padding:13px 22px!important}
.f22-sec .et_pb_button.f22-glass,.f22-btn.f22-glass{color:var(--f22-cream)!important;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 30px -14px rgba(0,0,0,.6)!important;backdrop-filter:blur(14px) saturate(1.4)}

/* ==========================================================================
   MENUBALK — Divi's eigen header (Menu's in WordPress), los zwevend en meescrollend:
   links logo in champagne-glas · midden menu in glas · rechts "Start een project"
   ========================================================================== */
body.f22-page #main-header{position:fixed!important;top:18px!important;left:0!important;right:0!important;width:100%!important;
  background:transparent!important;box-shadow:none!important;border:0!important;z-index:99990;pointer-events:none;transition:top .4s,opacity .9s}
body.f22-page.admin-bar #main-header{top:50px!important}
body.f22-page #main-header .container{width:auto!important;max-width:none!important;padding:0 28px!important;display:flex!important;align-items:center;justify-content:space-between;min-height:0!important;height:auto!important}
body.f22-page #main-header .container > *{pointer-events:auto}
body.f22-page #main-header .logo_helper{display:none}
/* logo-pill: champagne liquid glass, logo in bosgroen */
body.f22-page #main-header .logo_container{position:relative!important;height:auto!important;width:auto!important;display:inline-flex!important;align-items:center;
  padding:9px 22px!important;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,254,251,.97) 0%,rgba(var(--f22-zc,244,240,231),.95) 52%,rgba(222,216,203,.96) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.14),0 14px 36px -16px rgba(var(--f22-zc,244,240,231),.4),0 2px 6px rgba(0,0,0,.18);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);transition:transform .35s}
body.f22-page #main-header .logo_container:before{content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:999px 999px 40% 40%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
body.f22-page #main-header .logo_container:hover{transform:translateY(-1px)}
body.f22-page #main-header .logo_container a{display:block;line-height:0}
body.f22-page #main-header img#logo{max-height:40px!important;height:40px!important;width:auto!important;position:relative;top:0!important;transform:none!important}
/* menu-pill: doorzichtig liquid glass (de knop "Start een project" staat er los naast) */
body.f22-page #et-top-navigation{padding:0!important;float:none!important;display:flex!important;align-items:center;flex:1;justify-content:flex-end}
body.f22-page #top-menu-nav{flex:1;display:block!important}
body.f22-page #top-menu{display:inline-flex!important;align-items:center;gap:2px;padding:5px!important;border-radius:999px;line-height:1.2!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.05),0 16px 40px -22px rgba(0,0,0,.65)}
body.f22-page #top-menu-nav{text-align:center}
body.f22-page #top-menu > li{padding:0!important;margin:0!important;position:relative;display:block!important;float:none!important}
body.f22-page #top-menu > li > a{display:block;font-family:var(--f22-sans);font-size:13.5px!important;line-height:1.2!important;font-weight:400!important;color:#d8d4c9!important;padding:10px 18px!important;border-radius:999px;opacity:1!important;transition:background .25s,color .25s}
body.f22-page #top-menu > li > a:hover,
body.f22-page #top-menu > li.current-menu-item > a{background:rgba(var(--f22-zc,244,240,231),.13);color:var(--f22-cream-2)!important}
/* "Start een project": menu-item met CSS-klasse f22-menu-cta. Het script zet hem los, rechts, in champagne. */
body.f22-page #top-menu-nav{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);float:none!important}
body.f22-page #et-top-navigation{flex:0 0 auto}
body.f22-page #top-menu > li.f22-menu-cta.is-moved{display:none!important}
body.f22-page .f22-cta,
body.f22-page #top-menu > li.f22-menu-cta > a{display:inline-flex!important;align-items:center;gap:8px;color:var(--f22-ink,#1f3028)!important;font-family:var(--f22-sans);font-weight:500!important;font-size:14px!important;line-height:1.2!important;
  padding:15px 24px!important;border-radius:999px;text-decoration:none;
  background:linear-gradient(180deg,#fdfcf9 0%,var(--f22-paper,#f4f0e7) 50%,#dfd9cb 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.14),0 14px 36px -16px rgba(var(--f22-zc,244,240,231),.45);transition:transform .3s}
body.f22-page .f22-cta:after,body.f22-page #top-menu > li.f22-menu-cta > a:after{content:"↗"}
body.f22-page .f22-cta:hover{transform:translateY(-1px)}
body.f22-page #top-menu .sub-menu{background:rgba(var(--f22-zd,14,32,25),.94)!important;backdrop-filter:blur(20px);border:1px solid var(--f22-line-2)!important;border-radius:16px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
body.f22-page #top-menu .sub-menu a{color:var(--f22-cream)!important}
body.f22-page #et_top_search,body.f22-page #et-secondary-nav,body.f22-page #top-header{display:none!important}
/* gescrold: alles iets compacter */
body.f22-page.f22-scrolled #main-header{top:10px!important}
body.f22-page.admin-bar.f22-scrolled #main-header{top:42px!important}
/* mobiel menu */
body.f22-page #et_mobile_nav_menu{display:none}
body.f22-page #main-header .mobile_nav{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(20px)}
body.f22-page #main-header .mobile_menu_bar{padding:0!important}
body.f22-page #main-header .mobile_menu_bar:before{color:var(--f22-champ)!important;top:0!important}
body.f22-page .et_mobile_menu{background:rgba(var(--f22-zd,14,32,25),.96)!important;border-top:1px solid var(--f22-line-2)!important;border-radius:20px;backdrop-filter:blur(20px);right:0;left:auto;width:min(320px,86vw)!important;top:58px!important}
body.f22-page .et_mobile_menu li a{color:var(--f22-cream)!important;border-bottom-color:var(--f22-line)!important}
/* Wie een Divi Theme Builder-header gebruikt: geef secties/modules deze klassen */
.f22-glass{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:999px;
  backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 40px -22px rgba(0,0,0,.65)}
.f22-champagne{background:linear-gradient(180deg,#fdfcf9 0%,var(--f22-paper,#f4f0e7) 50%,#dfd9cb 100%)!important;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 14px 36px -16px rgba(var(--f22-zc,244,240,231),.45)}

/* ==========================================================================
   1 · HERO met rook-achtergrond
   ========================================================================== */
.f22-hero.et_pb_section{position:relative;min-height:100vh;overflow:hidden;background:rgb(var(--f22-zd,22,36,29))!important;display:flex;flex-direction:column;justify-content:center;padding:150px 0 170px!important}
.f22-hero > .f22-fx{position:absolute;inset:0;z-index:0;pointer-events:none}
.f22-hero > .f22-fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.f22-hero > .f22-fx .f22-beam{position:absolute;left:50%;top:-30%;width:1100px;height:900px;transform:translateX(-50%);
  background:radial-gradient(50% 45% at 50% 40%,rgba(var(--f22-zc,244,240,231),.22),rgba(var(--f22-zo,168,182,90),.07) 45%,transparent 70%);filter:blur(20px);mix-blend-mode:screen}
.f22-hero > .f22-fx .f22-gridlines{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(var(--f22-line) 1px,transparent 1px),linear-gradient(90deg,var(--f22-line) 1px,transparent 1px);background-size:96px 96px;mask-image:radial-gradient(55% 45% at 50% 38%,#000,transparent 85%);-webkit-mask-image:radial-gradient(55% 45% at 50% 38%,#000,transparent 85%)}
.f22-hero > .f22-fx .f22-vign{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%,transparent 45%,rgba(var(--f22-zd,5,14,10),.75))}
.f22-hero > .f22-fx .f22-grain{position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.f22-hero .et_pb_row{position:relative;z-index:3;text-align:center}
.f22-hero .et_pb_column{display:flex;flex-direction:column;align-items:center}

.f22-pill .et_pb_text_inner{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid var(--f22-line-2);
  background:rgba(var(--f22-zd,10,26,20),.45);backdrop-filter:blur(12px);font-size:13px;color:#d6d1c6;line-height:1.3}
.f22-pill strong,.f22-pill b{font-family:var(--f22-mono);font-size:10.5px;letter-spacing:.08em;font-weight:500;color:var(--f22-ink,#1f3028);background:var(--f22-champ);padding:4px 8px;border-radius:999px}
.f22-pill p{display:inline}

.f22-h1{margin-top:26px!important}
.f22-h1 h1,.f22-h1 h2{font-size:clamp(46px,6.4vw,100px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:400!important;color:var(--f22-cream)!important}
.f22-h1 em{font-size:1.06em;background:linear-gradient(100deg,#cdd3a2 0%,var(--f22-paper,#f4f0e7) 28%,#ffffff 40%,#dfe3be 58%,var(--f22-paper,#f4f0e7) 78%,var(--f22-olive) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;background-size:160% 100%;animation:f22-shine 8s ease-in-out infinite;padding-right:.08em}
@keyframes f22-shine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.f22-sub{margin-top:20px!important;max-width:600px}
.f22-sub .et_pb_text_inner{font-size:18px;line-height:1.55;color:#c3c7bb;font-weight:300}

/* Invoerveld (Lovable-stijl) */
.f22-prompt{margin-top:28px!important;width:min(720px,100%)}
.f22-prompt form{border-radius:24px;padding:16px 16px 12px;text-align:left;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 80px -30px rgba(0,0,0,.7),0 0 0 6px rgba(var(--f22-zo,168,182,90),.05);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.f22-prompt textarea{width:100%;min-height:58px;resize:none;border:0!important;outline:0;background:transparent!important;color:var(--f22-cream-2)!important;
  font-family:var(--f22-sans)!important;font-size:18px!important;font-weight:300;padding:4px 6px!important;line-height:1.4;box-shadow:none!important}
.f22-prompt textarea::placeholder{color:#c9cdc1;opacity:1}
.f22-prompt .f22-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f22-chip{font-family:var(--f22-sans);font-size:13px;padding:8px 13px;border-radius:999px;border:1px solid var(--f22-line-2);color:#d7d3c8;background:rgba(var(--f22-zd,10,26,20),.35);cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:all .25s}
.f22-chip input{display:none}
.f22-chip:has(input:checked),.f22-chip.is-on{background:rgba(var(--f22-zo,168,182,90),.16);border-color:rgba(var(--f22-zo,168,182,90),.6);color:var(--f22-champ-2)}
.f22-send{margin-left:auto;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;font-size:18px;color:var(--f22-ink,#1f3028);
  background:linear-gradient(180deg,#fdfcf9,#dfd9cb);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 24px -8px rgba(var(--f22-zo,168,182,90),.7);transition:transform .25s}
.f22-send:hover{transform:translateY(-2px) scale(1.04)}
.f22-under{margin-top:14px!important}
.f22-under .et_pb_text_inner{font-size:13px;color:var(--f22-dim)}
.f22-under a{color:var(--f22-champ)!important;border-bottom:1px solid rgba(var(--f22-zo,168,182,90),.35)}

.f22-trust{position:absolute!important;left:0;right:0;bottom:44px;z-index:4}
.f22-trust .et_pb_text_inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.f22-trust p:first-child{font-family:var(--f22-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--f22-mute)}
.f22-trust p:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 42px;font-size:17px;color:rgba(var(--f22-zc,244,240,231),.42);font-weight:500}
.f22-trust p:last-child em{font-size:20px;color:rgba(var(--f22-zc,244,240,231),.42)}

/* ==========================================================================
   INTRO — rook trekt samen tot het 22-logo
   ========================================================================== */
.f22-intro{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;pointer-events:auto;background:rgb(var(--f22-zd,18,29,24))}
.f22-intro canvas{position:absolute;inset:0;width:100%;height:100%}
.f22-intro .f22-intro-word{position:absolute;left:0;right:0;top:calc(50% + 25vh);text-align:center;font-family:var(--f22-sans);
  font-size:13px;letter-spacing:.62em;padding-left:.62em;color:var(--f22-champ-2);opacity:0;transform:translateY(10px);transition:opacity .9s,transform .9s}
.f22-intro .f22-intro-word small{display:block;margin-top:10px;font-size:9px;letter-spacing:.9em;color:var(--f22-mute)}
.f22-intro.is-word .f22-intro-word{opacity:1;transform:none}
.f22-intro .f22-skip{position:absolute;right:28px;bottom:28px;font-family:var(--f22-sans);font-size:13px;color:var(--f22-cream);cursor:pointer;
  padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));backdrop-filter:blur(14px)}
.f22-intro .f22-intro-bar{position:absolute;left:50%;bottom:44px;width:180px;height:1px;transform:translateX(-50%);background:rgba(var(--f22-zc,244,240,231),.15);overflow:hidden}
.f22-intro .f22-intro-bar i{position:absolute;inset:0;background:var(--f22-champ);transform-origin:0 50%;transform:scaleX(0)}
.f22-intro.is-out{opacity:0;transition:opacity 1s ease;pointer-events:none}
body.f22-intro-on #main-header{opacity:0}
body.f22-page #main-header{transition:opacity .9s ease}
body.f22-intro-on .f22-hero .et_pb_module{opacity:0;transform:translateY(18px)}
.f22-hero .et_pb_module{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.f22-hero .et_pb_module:nth-child(2){transition-delay:.08s}.f22-hero .et_pb_module:nth-child(3){transition-delay:.16s}
.f22-hero .et_pb_module:nth-child(4){transition-delay:.24s}.f22-hero .et_pb_module:nth-child(5){transition-delay:.32s}

/* ==========================================================================
   2 · ERVAAR — Divi Tabs-module met graphics (zoals de eerste versie)
   ========================================================================== */
.f22-ervaar.et_pb_section{padding:130px 0 120px!important;background:radial-gradient(80% 60% at 85% 20%,rgba(var(--f22-zo,168,182,90),.08),transparent 60%),linear-gradient(180deg,rgb(var(--f22-zd,18,29,24)),var(--f22-g2) 30%)!important}
.f22-ervaar .f22-h2 h2,.f22-maken .f22-h2 h2,.f22-werk .f22-h2 h2,.f22-slot .f22-h2 h2{font-size:clamp(40px,5vw,78px)!important;line-height:.98!important;letter-spacing:-.04em!important}
.f22-ervaar .f22-kicker{margin-bottom:22px!important}
.f22-intro-text{margin-top:22px!important;max-width:640px}
.f22-intro-text .et_pb_text_inner{font-size:18px;line-height:1.6;color:#b9beb2;font-weight:300}

.f22-tabs.et_pb_tabs{margin-top:48px!important;border:0!important;background:none!important}
.f22-tabs .et_pb_tabs_controls{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px!important;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;
  border:1px solid var(--f22-line-2)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);backdrop-filter:blur(16px);margin:0 0 18px!important}
.f22-tabs .et_pb_tabs_controls:after{display:none!important}
.f22-tabs .et_pb_tabs_controls li{float:none!important;border:0!important;background:none!important;border-radius:999px;text-align:center;transition:background .3s}
.f22-tabs .et_pb_tabs_controls li a{display:block;padding:13px 10px!important;color:#b9beb2!important;font-family:var(--f22-sans)!important;font-size:14px!important;font-weight:400!important;line-height:1.2!important}
.f22-tabs .et_pb_tabs_controls li.et_pb_tab_active{background:linear-gradient(180deg,rgba(var(--f22-zc,244,240,231),.2),rgba(var(--f22-zo,168,182,90),.08))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px -14px rgba(0,0,0,.6)}
.f22-tabs .et_pb_tabs_controls li.et_pb_tab_active a{color:var(--f22-cream-2)!important}
.f22-tabs .et_pb_all_tabs{background:none!important;border:0!important}
.f22-tabs .et_pb_tab{padding:0!important}
.f22-tabs .et_pb_tab.et_pb_active_content{display:block}
.f22-tabs .et_pb_tab_content{display:grid;grid-template-columns:1.12fr 1fr;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--f22-line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 90px -40px rgba(0,0,0,.7)}
.f22-tabs .f22-copy{padding:56px 52px;align-self:center;color:#c0c4b8;font-size:16px;line-height:1.65;font-weight:300}
.f22-tabs .f22-copy > *:first-child{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-champ);font-weight:400}
.f22-tabs .f22-copy h3{font-size:clamp(28px,2.8vw,40px)!important;line-height:1.05!important;letter-spacing:-.03em!important;margin:16px 0 18px!important;color:var(--f22-cream)!important}
.f22-tabs .f22-copy a{display:inline-block;margin-top:14px;color:var(--f22-champ-2)!important;border-bottom:1px solid rgba(var(--f22-zo,168,182,90),.4);padding-bottom:2px}
.f22-tabs .f22-copy p.f22-note,.f22-tabs .f22-copy .f22-note{font-size:14px;color:var(--f22-dim)}
.f22-stage{position:relative;min-height:470px;margin:14px;border-radius:20px;overflow:hidden}

/* graphic 1 — merkgevoel */
.f22-g-brand{display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:var(--f22-pal-bg,#4a352c);transition:background .7s}
.f22-g-brand .f22-poster{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;color:var(--f22-pal-fg,var(--f22-paper,#f4f0e7));transition:color .7s}
.f22-g-brand .f22-poster span{font-family:var(--f22-mono);font-size:10px;letter-spacing:.24em;opacity:.8}
.f22-g-brand .f22-poster img{width:min(240px,56%);height:auto;transition:filter .7s;filter:var(--f22-pal-logo,none)}
.f22-g-brand .f22-poster b{font-family:var(--f22-serif);font-style:italic;font-weight:400;font-size:26px;line-height:1.15}
.f22-g-brand .f22-pal{display:flex;align-items:center;gap:10px;font-family:var(--f22-mono);font-size:10px;letter-spacing:.12em;color:var(--f22-pal-fg,var(--f22-paper,#f4f0e7));opacity:.9}
.f22-g-brand .f22-pal button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.4);cursor:pointer;padding:0;transition:transform .25s}
.f22-g-brand .f22-pal button.is-on{outline:2px solid var(--f22-champ);outline-offset:3px}
.f22-g-brand .f22-pal button:hover{transform:scale(1.1)}
.f22-g-brand .f22-pal small{margin-left:auto;font-size:10px}

/* graphic 2 — webervaring */
.f22-g-web{background:#e9e1d3;color:#1d2a24;display:flex;flex-direction:column}
.f22-g-web .f22-wbar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#ddd3c2;border-bottom:1px solid rgba(0,0,0,.06)}
.f22-g-web .f22-wbar i{width:10px;height:10px;border-radius:50%}
.f22-g-web .f22-wbar i:nth-child(1){background:#ff5f57}.f22-g-web .f22-wbar i:nth-child(2){background:#febc2e}.f22-g-web .f22-wbar i:nth-child(3){background:#28c840}
.f22-g-web .f22-wbar span{margin:0 auto;font-family:var(--f22-mono);font-size:10px;color:#6c6457;padding-right:40px}
.f22-g-web .f22-wnav{display:flex;align-items:center;gap:6px;padding:16px 22px}
.f22-g-web .f22-wnav b{font-size:12px;letter-spacing:.3em;margin-right:auto;font-weight:500}
.f22-g-web .f22-wnav button{font-family:var(--f22-sans);font-size:13px;padding:7px 13px;border-radius:999px;border:1px solid rgba(20,43,35,.18);background:none;color:#1d2a24;cursor:pointer}
.f22-g-web .f22-wnav button.is-on{background:var(--f22-ink,#1f3028);color:var(--f22-paper,#f4f0e7);border-color:var(--f22-ink,#1f3028)}
.f22-g-web .f22-wpage{position:relative;flex:1;margin:0 14px 14px;border-radius:14px;overflow:hidden;background:var(--f22-ink,#1f3028);color:var(--f22-paper,#f4f0e7);padding:34px}
.f22-g-web .f22-wpage .f22-wk{font-family:var(--f22-mono);font-size:10px;letter-spacing:.16em;color:var(--f22-champ)}
.f22-g-web .f22-wpage h4{font-size:44px!important;line-height:1!important;color:var(--f22-paper,#f4f0e7)!important;margin:14px 0!important;letter-spacing:-.035em!important;font-weight:400!important}
.f22-g-web .f22-wpage h4 em{font-size:1.05em}
.f22-g-web .f22-wpage p{font-size:14px;color:#b9c2b8;max-width:260px}
.f22-g-web .f22-wpage .f22-wcta{margin-top:20px;font-family:var(--f22-sans);font-size:13px;padding:10px 16px;border-radius:999px;border:0;cursor:pointer;color:var(--f22-ink,#1f3028);background:linear-gradient(180deg,#fdfcf9,#dfd9cb)}
.f22-g-web .f22-orb{position:absolute;right:-60px;bottom:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(var(--f22-zo,168,182,90),.35) 30%,rgba(var(--f22-zm,36,73,58),.2) 60%,transparent 70%);filter:blur(1px);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.f22-g-web .f22-wgrid{display:none;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.f22-g-web .f22-wgrid img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:8px}
.f22-g-web[data-page="werk"] .f22-wgrid{display:grid}
.f22-g-web[data-page="werk"] .f22-wstudio{display:none}
.f22-g-web[data-page="werk"] .f22-orb{transform:translate(-160px,-120px) scale(.6)}
.f22-g-web .f22-toast{position:absolute;left:34px;bottom:24px;font-size:13px;padding:9px 14px;border-radius:999px;background:rgba(var(--f22-zc,244,240,231),.12);border:1px solid rgba(var(--f22-zc,244,240,231),.2);opacity:0;transform:translateY(8px);transition:all .4s}
.f22-g-web .f22-toast.is-on{opacity:1;transform:none}
.f22-g-web .f22-whint{font-size:12px;color:#6c6457;padding:0 22px 14px}

/* graphic 3 — materiaal */
.f22-g-mat{background:radial-gradient(90% 80% at 50% 40%,#e9dfcf,#cbbba1);perspective:1000px;display:flex;flex-direction:column}
.f22-g-mat .f22-mobj{flex:1;display:grid;place-items:center;padding:30px}
.f22-g-mat .f22-mimg{position:relative;width:86%;aspect-ratio:3/2;border-radius:16px;overflow:hidden;transform-style:preserve-3d;transition:transform .2s;box-shadow:0 40px 60px -30px rgba(40,30,20,.55)}
.f22-g-mat .f22-mimg img{width:100%;height:100%;object-fit:cover}
.f22-g-mat .f22-mimg:after{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 35%,rgba(255,250,238,.55) 48%,transparent 60%);transform:translateX(var(--f22-sweep,0%));mix-blend-mode:screen}
.f22-g-mat label{display:block;padding:0 26px 24px;font-family:var(--f22-mono);font-size:10px;letter-spacing:.12em;color:#5e5446;text-transform:uppercase}
.f22-g-mat input[type=range]{width:100%;margin-top:10px;accent-color:var(--f22-ink,#1f3028)}

/* graphic 4 — logo in beweging */
.f22-g-motion{background:radial-gradient(70% 70% at 50% 45%,#1d3d30,rgb(var(--f22-zd,18,29,24)));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.f22-g-motion svg{width:min(250px,60%);height:auto;overflow:visible}
.f22-g-motion .f22-mark-stroke{fill:none;stroke:url(#f22-gold);stroke-width:1.6;stroke-linejoin:round}
.f22-g-motion .f22-mark-fill{fill:url(#f22-gold);opacity:0}
.f22-g-motion.is-draw .f22-mark-stroke{animation:f22-draw 2.4s cubic-bezier(.6,.1,.2,1) forwards}
.f22-g-motion.is-draw .f22-mark-fill{animation:f22-fill 1s 1.9s ease forwards}
.f22-g-motion.is-float svg{animation:f22-float 4s ease-in-out infinite}
.f22-g-motion.is-float .f22-mark-fill{opacity:1}
.f22-g-motion.is-pulse .f22-mark-fill{opacity:1;animation:f22-pulse 2.2s ease-in-out infinite}
@keyframes f22-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes f22-fill{to{opacity:1}}
@keyframes f22-float{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-12px) rotate(-2deg)}}
@keyframes f22-pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(var(--f22-zc,244,240,231),0))}50%{filter:drop-shadow(0 0 22px rgba(var(--f22-zc,244,240,231),.55))}}
.f22-g-motion .f22-mchoices{display:flex;gap:6px;padding:5px;border-radius:999px;border:1px solid var(--f22-line-2);background:rgba(255,255,255,.05)}
.f22-g-motion .f22-mchoices button{font-family:var(--f22-sans);font-size:13px;color:#cfd3c8;background:none;border:0;padding:8px 14px;border-radius:999px;cursor:pointer}
.f22-g-motion .f22-mchoices button.is-on{background:rgba(var(--f22-zo,168,182,90),.18);color:var(--f22-champ-2)}

/* ==========================================================================
   3 · WAT WE MAKEN — vier tegels met video
   ========================================================================== */
.f22-maken.et_pb_section{padding:120px 0!important;background:var(--f22-g2)!important}
.f22-maken .f22-head-row{display:grid!important;grid-template-columns:2fr 1fr;align-items:end;gap:40px}
.f22-maken .f22-head-row .et_pb_column{width:auto!important;margin:0!important;float:none!important}
.f22-maken .f22-side .et_pb_text_inner{font-size:16px;line-height:1.6;color:#b4b9ad;font-weight:300;max-width:400px;margin-left:auto}
.f22-maken .f22-tiles-row{margin-top:46px!important;display:grid!important;grid-template-columns:repeat(4,1fr);gap:14px}
.f22-maken .f22-tiles-row .et_pb_column{width:auto!important;margin:0!important;float:none!important}
.f22-tile{border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s}
.f22-tile:hover{transform:translateY(-6px);border-color:rgba(var(--f22-zo,168,182,90),.45)}
.f22-tile .f22-media{position:relative;margin:8px 8px 0!important;border-radius:16px;overflow:hidden;aspect-ratio:4/4.6;background:rgb(var(--f22-zd,22,36,29))}
.f22-tile .f22-media video,.f22-tile .f22-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.f22-tile .f22-media .f22-rec{position:absolute;left:12px;top:12px;z-index:2}
.f22-rec{display:inline-flex;gap:7px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(var(--f22-zd,10,26,20),.6);backdrop-filter:blur(10px);border:1px solid var(--f22-line);font-family:var(--f22-mono);font-size:10px;letter-spacing:.08em;color:#e1dccf}
.f22-rec i{width:6px;height:6px;border-radius:50%;background:var(--f22-champ);box-shadow:0 0 8px var(--f22-champ)}
.f22-tile .f22-tile-text{padding:18px 18px 22px!important}
.f22-tile .f22-tile-text .et_pb_text_inner{font-size:14px;line-height:1.5;color:#c0c4b8;font-weight:300}
.f22-tile .f22-tile-text h3{font-size:30px!important;letter-spacing:-.025em!important;margin:8px 0 6px!important;color:var(--f22-cream)!important}
.f22-tile .f22-tile-text p:first-child{font-family:var(--f22-mono);font-size:11px;color:var(--f22-champ);letter-spacing:.1em}
.f22-tile .f22-tile-text p.f22-tags,.f22-tile .f22-tile-text p:last-child{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.f22-tile .f22-tile-text p:last-child span{font-size:11.5px;padding:5px 9px;border-radius:999px;border:1px solid var(--f22-line-2);color:#dcd7cc}

/* ==========================================================================
   4 · WERK — zwart, 3D-boog met browservensters (Image-modules)
   ========================================================================== */
.f22-werk.et_pb_section{background:#000!important;padding:120px 0 80px!important;overflow:hidden;position:relative}
.f22-werk:before{content:"";position:absolute;left:0;right:0;top:0;height:160px;background:linear-gradient(var(--f22-g2),#000);pointer-events:none}
.f22-werk:after{content:"";position:absolute;left:50%;top:55%;width:1000px;height:560px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(var(--f22-zm,36,73,58),.55),transparent);filter:blur(10px);pointer-events:none}
.f22-werk .et_pb_row{position:relative;z-index:2;text-align:center}
.f22-werk .f22-kicker{margin-bottom:22px!important}
/* Zonder JavaScript of in de Visual Builder: een nette raster-weergave */
.f22-werk .f22-sites{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:50px!important}
.f22-werk .f22-sites .et_pb_column{display:contents}
.f22-werk .f22-sites .et_pb_image{margin:0!important;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.f22-werk .f22-sites .et_pb_image img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* Met JavaScript: 3D-boog */
.f22-werk.is-3d .f22-sites{display:none!important}
.f22-stage3d{position:relative;height:520px;margin-top:20px;perspective:1400px;cursor:grab;touch-action:pan-y;user-select:none}
.f22-stage3d.is-drag{cursor:grabbing}
.f22-ring{position:absolute;inset:0;transform-style:preserve-3d}
.f22-win{position:absolute;left:50%;top:50%;width:260px;border-radius:12px;overflow:hidden;background:rgba(20,30,26,.75);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s,filter .5s,box-shadow .5s;will-change:transform;display:block;color:inherit!important}
.f22-win .f22-wb{height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border-bottom:1px solid rgba(255,255,255,.08)}
.f22-win .f22-wb i{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.f22-win .f22-wb i:nth-child(1){background:#ff5f57}.f22-win .f22-wb i:nth-child(2){background:#febc2e}.f22-win .f22-wb i:nth-child(3){background:#28c840}
.f22-win .f22-wb span{margin:0 auto;font-family:var(--f22-mono);font-size:9px;color:#9aa298;padding-right:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f22-win .f22-wb b{font-family:var(--f22-sans);font-weight:400;font-size:12px;color:var(--f22-champ);opacity:0;transition:opacity .3s}
.f22-win img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
.f22-win:hover,.f22-win:focus-visible{z-index:5;filter:none!important;opacity:1!important;outline:0;
  box-shadow:0 0 0 1px rgba(var(--f22-zo,168,182,90),.7),0 50px 100px -20px rgba(0,0,0,.95),0 0 60px -10px rgba(var(--f22-zo,168,182,90),.35)}
.f22-win:hover .f22-wb b,.f22-win:focus-visible .f22-wb b{opacity:1}
.f22-werk-foot{position:relative;z-index:3;display:flex;justify-content:center;gap:12px;margin-top:6px}
.f22-werk-foot button{font-family:var(--f22-sans);cursor:pointer}
.f22-werk-meta{display:flex;justify-content:space-between;width:min(1320px,calc(100% - 80px));margin:30px auto 0;position:relative;z-index:3;font-family:var(--f22-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--f22-mute)}
.f22-werk-meta a{color:var(--f22-champ)!important}

/* ==========================================================================
   5 · SLOT
   ========================================================================== */
.f22-slot.et_pb_section{padding:130px 0!important;text-align:center;background:radial-gradient(60% 70% at 50% 100%,rgba(var(--f22-zm,36,73,58),.6),transparent 70%),#000!important}
.f22-slot .et_pb_column{display:flex;flex-direction:column;align-items:center}
.f22-slot .f22-sub{margin-bottom:30px!important}

/* ==========================================================================
   Footer van Divi op deze pagina
   ========================================================================== */
body.f22-page #main-footer{background:#000!important;border-top:1px solid var(--f22-line)}
body.f22-page #footer-bottom{background:#000!important}
body.f22-page #footer-info,body.f22-page #footer-info a{color:var(--f22-dim)!important}

/* ==========================================================================
   Responsief
   ========================================================================== */
@media (max-width:980px){
  body.f22-page #main-header{top:10px!important}
  body.f22-page #main-header .container{padding:0 12px!important}
  body.f22-page #main-header .logo_container{padding:8px 16px!important}
  body.f22-page #main-header img#logo{height:28px!important}
  body.f22-page #top-menu-nav{display:none!important}
  body.f22-page #et_mobile_nav_menu{display:block}
  body.f22-page #et-top-navigation{display:flex!important;gap:10px;flex-direction:row-reverse}
  body.f22-page .f22-cta{padding:12px 16px!important;font-size:13px!important}
  .f22-sec .et_pb_row{width:calc(100% - 32px)!important}
  .f22-hero.et_pb_section{padding:120px 0 150px!important}
  .f22-trust p:last-child{gap:8px 22px;font-size:14px}
  .f22-tabs .et_pb_tabs_controls{grid-template-columns:repeat(2,1fr);border-radius:22px}
  .f22-tabs .et_pb_tab_content{grid-template-columns:1fr}
  .f22-tabs .f22-copy{padding:30px 26px 34px}
  .f22-stage{min-height:380px}
  .f22-maken .f22-tiles-row{grid-template-columns:repeat(2,1fr)}
  .f22-maken .f22-head-row{grid-template-columns:1fr;gap:18px}
  .f22-maken .f22-side .et_pb_text_inner{margin:0}
  .f22-stage3d{height:440px}
  .f22-win{width:200px}
}
@media (max-width:600px){
  .f22-maken .f22-tiles-row{grid-template-columns:1fr}
  .f22-trust{bottom:26px}
  .f22-trust p:last-child{display:none}
  .f22-werk-meta{flex-direction:column;gap:8px;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .f22-h1 em{animation:none}
  .f22-g-motion.is-float svg,.f22-g-motion.is-pulse .f22-mark-fill{animation:none}
}

/* klantenregel onderin de hero: los van rij/kolom positioneren */
.f22-hero .f22-trust-row,.f22-hero .f22-trust-row .et_pb_column{position:static!important}

/* ==========================================================================
   VERSIE 2
   - rook achter de hele pagina · nieuwe hero (deeltjesgolf + groot woordmerk)
   - intro: logo uit deeltjes, door de rook, naar linksboven
   - tab 3 & 4 zoals de eerste versie · projecten als 3D-tunnel
   ========================================================================== */

/* ---------- Rook achter de hele pagina ---------- */
body.f22-page,body.f22-page.f22-has-bg{background:rgb(var(--f22-zd,22,36,29))!important}
body.f22-page #page-container,body.f22-page #et-main-area,body.f22-page #main-content,
body.f22-page .et-l--post,body.f22-page .et_builder_inner_content{background:transparent!important}
.f22-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.f22-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.f22-bg .f22-beam{position:absolute;left:50%;top:-30%;width:1100px;height:900px;transform:translateX(-50%);
  background:radial-gradient(50% 45% at 50% 40%,rgba(var(--f22-zc,244,240,231),.2),rgba(var(--f22-zo,168,182,90),.06) 45%,transparent 70%);filter:blur(20px);mix-blend-mode:screen}
.f22-bg .f22-vign{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%,transparent 45%,rgba(var(--f22-zd,5,14,10),.7))}
.f22-bg .f22-grain{position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.f22-has-bg #page-container{position:relative;z-index:1}
body.f22-has-bg .f22-sec.et_pb_section{background:transparent!important}
body.f22-has-bg .f22-hero > .f22-fx{display:none}
body.f22-has-bg .f22-ervaar.et_pb_section{background:linear-gradient(180deg,transparent,rgba(var(--f22-zd,8,22,16),.45) 25%,rgba(var(--f22-zd,8,22,16),.45) 75%,transparent)!important}
body.f22-has-bg .f22-maken.et_pb_section{background:linear-gradient(180deg,transparent,rgba(var(--f22-zd,8,22,16),.35) 20%,rgba(var(--f22-zd,8,22,16),.35) 80%,transparent)!important}
body.f22-has-bg .f22-werk.et_pb_section{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.92) 14%,#000 30%,#000 82%,rgba(0,0,0,.6) 100%)!important}
body.f22-has-bg .f22-slot.et_pb_section{background:radial-gradient(60% 70% at 50% 100%,rgba(var(--f22-zm,36,73,58),.35),transparent 70%)!important}
body.f22-page #main-footer{position:relative;z-index:1}

/* ---------- HERO v2: deeltjesgolf + groot woordmerk ---------- */
.f22-hero.f22-v2.et_pb_section{min-height:100vh;padding:0!important;display:block;overflow:hidden}
.f22-hero.f22-v2 .f22-wave{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.f22-hero.f22-v2 .et_pb_row{position:static!important;width:auto!important;text-align:left}
.f22-hero.f22-v2 .et_pb_column{position:static!important;display:block}
.f22-hero.f22-v2 .et_pb_module{position:absolute!important;z-index:3}
.f22-hero.f22-v2 .f22-label-l{left:28px;top:clamp(120px,18vh,170px);max-width:300px}
.f22-hero.f22-v2 .f22-label-r{right:28px;top:clamp(120px,18vh,170px);max-width:300px;text-align:right}
.f22-hero.f22-v2 .f22-label-l .et_pb_text_inner,.f22-hero.f22-v2 .f22-label-r .et_pb_text_inner{font-family:var(--f22-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:var(--f22-mute)}
.f22-hero.f22-v2 .f22-label-l strong,.f22-hero.f22-v2 .f22-label-r strong{color:var(--f22-champ);font-weight:500}
.f22-hero.f22-v2 .f22-statement{left:28px;bottom:calc(min(17vw,260px) + 70px);max-width:560px}
.f22-hero.f22-v2 .f22-statement .et_pb_text_inner{font-size:clamp(22px,2.2vw,32px);line-height:1.18;letter-spacing:-.02em;color:var(--f22-cream);font-weight:300}
.f22-hero.f22-v2 .f22-statement em{font-size:1.06em}
.f22-hero.f22-v2 .f22-hero-cta{right:28px;bottom:calc(min(17vw,260px) + 70px)}
.f22-hero.f22-v2 .f22-hero-cta .et_pb_button{margin:0}
.f22-hero.f22-v2 .f22-wordmark{left:0;right:0;bottom:-.06em;text-align:center;pointer-events:none;will-change:transform}
.f22-hero.f22-v2 .f22-wordmark h1,.f22-hero.f22-v2 .f22-wordmark p{font-size:min(17.5vw,300px)!important;line-height:.8!important;letter-spacing:-.065em!important;font-weight:500!important;white-space:nowrap;
  color:transparent!important;background:linear-gradient(180deg,#ffffff 0%,var(--f22-paper,#f4f0e7) 50%,rgba(var(--f22-zc,244,240,231),.45) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.f22-hero.f22-v2 .f22-wordmark sup,.f22-hero.f22-v2 .f22-wordmark small{font-size:.32em;vertical-align:.95em;letter-spacing:0;margin-right:.04em;font-weight:300}
.f22-hero.f22-v2 .f22-scroll{left:50%;bottom:calc(min(17vw,260px) + 76px);transform:translateX(-50%)}
.f22-hero.f22-v2 .f22-scroll .et_pb_text_inner{font-family:var(--f22-mono);font-size:10px;letter-spacing:.2em;color:var(--f22-mute);display:flex;flex-direction:column;align-items:center;gap:10px}
.f22-hero.f22-v2 .f22-scroll .et_pb_text_inner:after{content:"";width:1px;height:38px;background:linear-gradient(var(--f22-champ),transparent);animation:f22-drop 2.2s ease-in-out infinite}
@keyframes f22-drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
body.f22-intro-on .f22-hero.f22-v2 .et_pb_module{opacity:0}
.f22-hero.f22-v2 .et_pb_module{transition:opacity 1.1s ease}
body.f22-intro-done .f22-hero.f22-v2 .f22-wordmark{animation:f22-rise 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes f22-rise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}

/* ---------- INTRO v2 ---------- */
.f22-intro{background:radial-gradient(70% 70% at 50% 45%,rgba(18,42,32,.55),rgba(var(--f22-zd,6,16,12),.92))!important;transition:background .6s ease}
.f22-intro.is-flying{background:transparent!important}
.f22-intro .f22-intro-dots,.f22-intro .f22-intro-smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.f22-intro .f22-intro-logo{position:absolute;left:50%;top:50%;width:min(440px,62vw);margin-left:calc(min(440px,62vw) / -2);margin-top:calc(min(440px,62vw) * -.3);opacity:0;will-change:transform,opacity,filter;transform-origin:50% 50%}
.f22-intro .f22-intro-logo img{width:100%;height:auto;display:block}
.f22-intro .f22-intro-shine{position:absolute;inset:-10%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 40%,rgba(255,248,232,.85) 50%,transparent 60%);background-size:250% 100%;background-position:var(--sweep,-80%) 0;opacity:.55}
.f22-intro .f22-intro-meta{position:absolute;left:28px;right:28px;bottom:30px;display:flex;justify-content:space-between;font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;color:var(--f22-mute);transition:opacity .4s}
.f22-intro .f22-intro-meta .f22-intro-pct{color:var(--f22-champ);padding-right:180px}
.f22-intro.is-flying .f22-intro-meta,.f22-intro.is-flying .f22-skip{opacity:0}
.f22-intro .f22-skip{bottom:20px}
.f22-intro .f22-intro-word,.f22-intro .f22-intro-bar{display:none}
body.f22-intro-on #main-header{opacity:0!important}
body.f22-intro-on #main-header .logo_container{opacity:0}
body.f22-logo-landed #main-header .logo_container{animation:f22-land .5s ease both}
@keyframes f22-land{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* ---------- Tab 3: glazen object (eerste versie) ---------- */
.f22-g-glass{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px;background:radial-gradient(80% 80% at 50% 40%,#264434,#17301f)}
.f22-glass-stage{height:300px;display:grid;place-items:center;perspective:850px}
.f22-glass-obj{position:relative;width:200px;height:220px;transform-style:preserve-3d;transform:rotateY(var(--turn,-15deg)) rotateZ(-15deg);transition:transform .1s;animation:f22-float2 6s ease-in-out infinite}
@keyframes f22-float2{50%{translate:0 -10px}}
.f22-glass-obj i{position:absolute;inset:0;border-radius:43% 57% 45% 55%;border:1px solid rgba(250,231,201,.67);
  background:linear-gradient(135deg,rgba(255,243,216,.52),rgba(209,175,127,.05) 45%,rgba(245,221,182,.42));
  box-shadow:inset 4px 4px 10px rgba(255,247,227,.6),inset -10px -6px 20px rgba(66,41,27,.3);transform:translateZ(15px)}
.f22-glass-obj i:nth-child(2){inset:15px;transform:translateZ(-12px);border-radius:55% 45% 62% 38%}
.f22-glass-obj i:nth-child(3){inset:35px;transform:translateZ(35px);background:rgba(255,240,210,.13)}
.f22-glass-obj i:nth-child(4){inset:65px;transform:translateZ(55px);background:rgba(234,208,166,.3)}
.f22-g-glass label{display:grid;gap:10px;color:#e1c9ad;font-size:12px;text-align:center;padding:0 30px;font-family:var(--f22-sans)}
.f22-g-glass input{accent-color:#e3c9a6;width:100%;cursor:ew-resize}
.f22-g-glass label span{font-size:10px;color:#af9377}

/* ---------- Tab 4: vloeibare 22 (eerste versie) ---------- */
.f22-g-morph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:30px 20px;background:radial-gradient(80% 80% at 50% 40%,#264434,#17301f)}
.f22-fluid{width:min(290px,62vw);height:min(290px,62vw);overflow:visible;filter:drop-shadow(0 15px 24px rgba(32,18,10,.27))}
.f22-g-morph .f22-mchoices{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.f22-g-morph .f22-mchoices button{border:1px solid rgba(238,213,182,.2);border-radius:99px;padding:9px 14px;font-size:12px;background:rgba(245,223,191,.03);color:#d9bfa0;cursor:pointer;font-family:var(--f22-sans)}
.f22-g-morph .f22-mchoices button.is-on{background:rgba(241,218,186,.2);border-color:rgba(238,213,182,.48);color:#fff2df}

/* ---------- PROJECTEN: 3D-tunnel (Made with Forma 22) ---------- */
.f22-werk.is-tunnel{padding:150px 0 110px!important}
.f22-faces{display:flex;justify-content:center;margin-bottom:28px}
.f22-faces span{width:58px;height:58px;border-radius:50%;overflow:hidden;border:2px solid #000;margin-left:-14px;box-shadow:0 0 0 1px rgba(var(--f22-zo,168,182,90),.35)}
.f22-faces span:first-child{margin-left:0}
.f22-faces img{width:100%;height:100%;object-fit:cover;object-position:top}
.f22-werk .f22-werk-head h2{font-size:clamp(38px,4.4vw,64px)!important;line-height:1.02!important;letter-spacing:-.04em!important;text-align:center}
.f22-werk .f22-werk-sub{margin:20px auto 0!important;max-width:560px}
.f22-werk .f22-werk-sub .et_pb_text_inner{font-size:17px;line-height:1.6;color:#a9ada3;text-align:center;font-weight:300}
.f22-werk.is-tunnel .f22-sites{display:none!important}
.f22-tunnel{position:relative;height:min(92vh,860px);margin-top:70px;perspective:1000px;perspective-origin:50% 50%;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.f22-tun-scene{position:absolute;inset:0;transform-style:preserve-3d}
.f22-tun-col{position:absolute;left:50%;top:0;bottom:0;width:min(22vw,300px);margin-left:calc(min(22vw,300px) / -2);transform-style:preserve-3d;
  transform:translateZ(560px) rotateY(var(--a)) translateZ(-1000px)}
.f22-tun-track{display:flex;flex-direction:column;gap:22px;animation:f22-tun 80s linear infinite;will-change:transform}
.f22-tunnel.is-still .f22-tun-track{animation:none}
.f22-tun-col:hover .f22-tun-track{animation-play-state:paused}
@keyframes f22-tun{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 11px))}}
.f22-tun-card{display:block;position:relative;border-radius:10px;overflow:hidden;background:#111;color:inherit!important;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,filter .45s;filter:brightness(.82)}
.f22-tun-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.f22-tun-card span{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);
  font-family:var(--f22-mono);font-size:10px;letter-spacing:.06em;color:var(--f22-cream);opacity:0;transform:translateY(6px);transition:all .35s}
.f22-tun-card span b{color:var(--f22-champ);font-weight:400}
.f22-tun-card:hover,.f22-tun-card:focus-visible{transform:translateZ(70px) scale(1.06);filter:none;outline:0;
  box-shadow:0 0 0 1px rgba(var(--f22-zo,168,182,90),.75),0 40px 90px -20px rgba(0,0,0,.95),0 0 60px -10px rgba(var(--f22-zo,168,182,90),.4)}
.f22-tun-card:hover span,.f22-tun-card:focus-visible span{opacity:1;transform:none}
.f22-tun-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;text-align:center;
  padding:90px 130px;background:radial-gradient(closest-side,rgba(0,0,0,.94),rgba(0,0,0,.72) 55%,transparent)}
.f22-tun-center .f22-made{position:static!important;margin:0!important}
.f22-made .et_pb_text_inner,.f22-made{color:var(--f22-cream)}
.f22-made p{display:block;line-height:1!important;margin:0!important}
.f22-made p:first-child{font-family:var(--f22-serif)!important;font-size:clamp(34px,3.6vw,56px);font-style:normal;letter-spacing:-.01em}
.f22-made p:last-child{font-size:clamp(34px,3.6vw,56px);letter-spacing:-.04em;margin-top:4px!important;font-weight:400}
.f22-werk .f22-werk-cta{margin-top:56px!important;text-align:center;position:relative;z-index:6}
.f22-werk .f22-werk-cta .et_pb_button_module_wrapper,.f22-werk .f22-werk-cta{display:flex;justify-content:center}

/* ---------- Portfolio-pagina ---------- */
.f22-portfolio.et_pb_section{padding:170px 0 120px!important}
.f22-portfolio .f22-grid{display:grid!important;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px!important}
.f22-portfolio .f22-grid .et_pb_column{display:contents}
.f22-portfolio .f22-grid .et_pb_image{margin:0!important;border-radius:14px;overflow:hidden;background:#101a15;border:1px solid rgba(255,255,255,.12);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.f22-portfolio .f22-grid .et_pb_image:hover{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(var(--f22-zo,168,182,90),.6),0 40px 80px -30px rgba(0,0,0,.9)}
.f22-portfolio .f22-grid .et_pb_image img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block}
.f22-gbar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border-bottom:1px solid rgba(255,255,255,.08)}
.f22-gbar i{width:9px;height:9px;border-radius:50%}
.f22-gbar i:nth-child(1){background:#ff5f57}.f22-gbar i:nth-child(2){background:#febc2e}.f22-gbar i:nth-child(3){background:#28c840}
.f22-gbar span{margin:0 auto;font-family:var(--f22-mono);font-size:10px;color:#9aa298}
.f22-gbar b{font-weight:400;color:var(--f22-champ);font-size:12px}

/* ---------- Rustig infaden ---------- */
.f22-rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.f22-rv.is-in{opacity:1;transform:none}

@media (max-width:980px){
  .f22-hero.f22-v2 .f22-label-r{display:none}
  .f22-hero.f22-v2 .f22-statement{right:20px;left:20px;bottom:calc(17.5vw + 120px)}
  .f22-hero.f22-v2 .f22-hero-cta{left:20px;right:auto;bottom:calc(17.5vw + 50px)}
  .f22-hero.f22-v2 .f22-scroll{display:none}
  .f22-tun-col{width:38vw;margin-left:-19vw}
  .f22-portfolio .f22-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .f22-portfolio .f22-grid{grid-template-columns:1fr}
  .f22-tun-center{padding:40px 30px}
}
.f22-hero.f22-v2 .et_pb_button_module_wrapper{right:28px;bottom:calc(min(17.5vw,300px) + 70px)}
@media (max-width:980px){.f22-hero.f22-v2 .et_pb_button_module_wrapper{left:20px;right:auto;bottom:calc(17.5vw + 50px)}}

.f22-tun-col:nth-child(3) .f22-tun-card{filter:brightness(.6)}
.f22-tun-col:nth-child(3) .f22-tun-card:hover{filter:none}

/* ---------- PROJECTEN v3: 3D-boog (v1) × donkere kaarten (v2) ---------- */
.f22-werk.is-arc{padding:150px 0 110px!important}
.f22-werk.is-arc .f22-sites{display:none!important}
.f22-arc{position:relative;height:min(84vh,760px);margin-top:60px;perspective:1300px;cursor:grab;touch-action:pan-y;user-select:none}
.f22-arc.is-drag{cursor:grabbing}
.f22-arc-ring{position:absolute;inset:0;transform-style:preserve-3d}
.f22-arc-card{position:absolute;left:50%;top:50%;width:300px;border-radius:12px;overflow:hidden;background:#111;color:inherit!important;
  box-shadow:0 34px 70px -24px rgba(0,0,0,.95);filter:brightness(calc(var(--dim,1) * .9));
  transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s,filter .45s,box-shadow .45s;will-change:transform}
.f22-arc-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.f22-arc-card span{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:8px;align-items:center;padding:7px 11px;border-radius:999px;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);font-family:var(--f22-mono);font-size:10px;letter-spacing:.05em;color:var(--f22-cream);
  opacity:0;transform:translateY(6px);transition:all .35s;white-space:nowrap;overflow:hidden}
.f22-arc-card span em{font-family:var(--f22-sans)!important;font-style:normal;font-size:12px;letter-spacing:0;color:var(--f22-cream);margin-right:2px}
.f22-arc-card span b{margin-left:auto;color:var(--f22-olive,var(--f22-olive));font-weight:400}
.f22-arc-card:hover,.f22-arc-card:focus-visible{z-index:20;filter:none!important;opacity:1!important;outline:0;
  box-shadow:0 0 0 1px rgba(var(--f22-zo,168,182,90),.8),0 50px 100px -24px rgba(0,0,0,.95),0 0 70px -14px rgba(var(--f22-zo,168,182,90),.45)}
.f22-arc-card:hover span,.f22-arc-card:focus-visible span{opacity:1;transform:none}
.f22-arc-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;pointer-events:none;text-align:center;
  padding:70px 120px;background:radial-gradient(closest-side,rgba(0,0,0,.92),rgba(0,0,0,.55) 60%,transparent)}
.f22-arc-center .f22-made{position:static!important;margin:0!important}
.f22-werk-foot{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:10px;position:relative;z-index:5}
.f22-werk-foot .f22-idx{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;color:var(--f22-mute);min-width:70px;text-align:center}
.f22-arrow{width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--f22-cream);font-family:var(--f22-sans);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:transform .25s}
.f22-arrow:hover{transform:translateY(-2px)}
@media (max-width:980px){.f22-arc{height:560px}.f22-arc-card{width:210px}.f22-arc-center{padding:40px 50px}}

/* stilstaande beelden in de tegels bewegen rustig (geen parfumfles meer) */
.f22-tile .f22-media img{animation:f22-kb 14s ease-in-out infinite alternate;transform-origin:60% 45%}
@keyframes f22-kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-2%)}}
@media (prefers-reduced-motion:reduce){.f22-tile .f22-media img{animation:none}}

/* ==========================================================================
   MENU v3 — één doorlopende balk in crème liquid glass
   ========================================================================== */
body.f22-page #main-header{left:24px!important;right:24px!important;width:auto!important;top:16px!important;border-radius:999px!important;pointer-events:auto;
  background:linear-gradient(180deg,rgba(255,254,251,.97) 0%,rgba(var(--f22-zc,244,240,231),.93) 55%,rgba(236,231,219,.92) 100%)!important;
  border:1px solid rgba(255,255,255,.75)!important;
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(var(--f22-zd,31,48,40),.08),0 22px 50px -22px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.12)!important}
body.f22-page.admin-bar #main-header{top:48px!important}
body.f22-page.f22-scrolled #main-header{top:10px!important}
body.f22-page.admin-bar.f22-scrolled #main-header{top:42px!important}
body.f22-page #main-header:before{content:"";position:absolute;inset:1px 1px 50% 1px;border-radius:999px 999px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
body.f22-page #main-header:after{display:none}
body.f22-page #main-header .container{padding:8px 8px 8px 24px!important;min-height:0!important}
/* logo: geen aparte pill meer, gewoon groen in de balk */
body.f22-page #main-header .logo_container{padding:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.f22-page #main-header .logo_container:before{display:none}
body.f22-page #main-header img#logo{height:38px!important;max-height:38px!important}
/* links: diep groen, geen eigen glas-pill */
body.f22-page #top-menu{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important}
body.f22-page #top-menu > li > a{color:var(--f22-ink,#1f3028)!important;opacity:.78!important;font-weight:500!important}
body.f22-page #top-menu > li > a:hover,
body.f22-page #top-menu > li.current-menu-item > a{background:rgba(var(--f22-zd,31,48,40),.08)!important;color:var(--f22-ink,#1f3028)!important;opacity:1!important}
body.f22-page #top-menu .sub-menu{background:rgba(250,248,242,.96)!important;border-color:rgba(var(--f22-zd,31,48,40),.12)!important}
body.f22-page #top-menu .sub-menu a{color:var(--f22-ink,#1f3028)!important}
/* knop rechts: diep groen in de crème balk */
body.f22-page .f22-cta,
body.f22-page #top-menu > li.f22-menu-cta > a{color:var(--f22-paper,#f4f0e7)!important;background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)) 0%,var(--f22-ink,#1f3028) 60%,rgb(var(--f22-zd,24,38,31)) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px rgba(var(--f22-zd,31,48,40),.7)!important;padding:14px 22px!important}
body.f22-page #main-header .mobile_nav{background:rgba(var(--f22-zd,31,48,40),.08)!important;border:1px solid rgba(var(--f22-zd,31,48,40),.12)!important}
body.f22-page #main-header .mobile_menu_bar:before{color:var(--f22-ink,#1f3028)!important}
body.f22-page .et_mobile_menu{background:rgba(250,248,242,.97)!important}
body.f22-page .et_mobile_menu li a{color:var(--f22-ink,#1f3028)!important;border-bottom-color:rgba(var(--f22-zd,31,48,40),.1)!important}
@media (max-width:980px){
  body.f22-page #main-header{left:10px!important;right:10px!important;top:10px!important}
  body.f22-page #main-header .container{padding:6px 6px 6px 16px!important}
  body.f22-page #main-header img#logo{height:30px!important}
}

/* ---------- PROJECTEN v4: bol (Squarespace / eerste versie), donker ---------- */
.f22-werk.is-sphere{padding:150px 0 100px!important}
.f22-werk.is-sphere .f22-sites{display:none!important}
.f22-sphere{position:relative;height:clamp(560px,56vw,860px);margin-top:50px;perspective:var(--persp,1200px);perspective-origin:50% 50%;overflow:hidden;cursor:grab;touch-action:pan-y;outline:none}
.f22-sphere.is-drag{cursor:grabbing}
.f22-sphere-world{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.f22-sphere-card{position:absolute;left:50%;top:50%;width:var(--cw,300px);height:var(--ch,186px);margin-left:calc(var(--cw,300px) / -2);margin-top:calc(var(--ch,186px) / -2);
  backface-visibility:hidden;transform-style:preserve-3d;pointer-events:auto;will-change:transform;border-radius:10px;overflow:hidden;background:#0e0e0e;color:inherit!important;
  filter:brightness(var(--dim,1));box-shadow:0 30px 60px -24px rgba(0,0,0,.95);transition:box-shadow .35s,filter .35s}
.f22-sphere-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;pointer-events:none}
.f22-sphere-card span{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:7px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);
  font-family:var(--f22-mono);font-size:9.5px;letter-spacing:.05em;color:var(--f22-cream);opacity:0;transform:translateY(6px);transition:all .3s;white-space:nowrap;overflow:hidden}
.f22-sphere-card span em{font-family:var(--f22-sans)!important;font-style:normal;font-size:11.5px;letter-spacing:0}
.f22-sphere-card span b{margin-left:auto;color:var(--f22-olive,var(--f22-olive));font-weight:400}
.f22-sphere-card.is-lift,.f22-sphere-card:focus-visible{filter:none;z-index:5;outline:0;box-shadow:0 0 0 1px rgba(var(--f22-zo,168,182,90),.85),0 50px 100px -24px rgba(0,0,0,.95),0 0 70px -12px rgba(var(--f22-zo,168,182,90),.45)}
.f22-sphere-card.is-lift span,.f22-sphere-card:focus-visible span{opacity:1;transform:none}
.f22-sphere-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;text-align:center;pointer-events:none;padding:70px 110px;
  background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.45) 65%,transparent)}
.f22-sphere-title .f22-made{position:static!important;margin:0!important}
.f22-sphere-shade{position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(#000 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 84%,#000 100%)}
@media (max-width:980px){.f22-sphere{height:600px}.f22-sphere-title{padding:40px 50px}}

/* ---------- MENU v4: uitklapmenu "Diensten" in crème glas ---------- */
body.f22-page #top-menu li.menu-item-has-children > a{padding-right:30px!important}
body.f22-page #top-menu li.menu-item-has-children > a:after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);font-family:inherit!important}
body.f22-page #top-menu li{position:relative}
body.f22-page #top-menu .sub-menu{left:50%!important;top:calc(100% + 14px)!important;transform:translateX(-50%) translateY(6px);width:min(560px,90vw)!important;padding:12px!important;
  display:grid!important;grid-template-columns:1fr 1fr;gap:6px;border-radius:20px!important;border:1px solid rgba(255,255,255,.8)!important;border-top:1px solid rgba(255,255,255,.8)!important;
  background:linear-gradient(180deg,rgba(255,254,251,.97),rgba(var(--f22-zc,244,240,231),.95))!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 1px 0 #fff,0 30px 60px -24px rgba(0,0,0,.55)!important;opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
body.f22-page #top-menu li:hover > .sub-menu,body.f22-page #top-menu li:focus-within > .sub-menu,body.f22-page #top-menu li.et-show-dropdown > .sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
body.f22-page #top-menu .sub-menu:before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
body.f22-page #top-menu .sub-menu li{padding:0!important;width:auto!important}
body.f22-page #top-menu .sub-menu li a{display:block;width:auto!important;padding:14px 16px!important;border-radius:14px;color:var(--f22-ink,#1f3028)!important;font-family:var(--f22-sans);font-size:15px!important;font-weight:500!important;line-height:1.25!important;opacity:1!important;background:none}
body.f22-page #top-menu .sub-menu li a:hover{background:rgba(var(--f22-zo,168,182,90),.16)!important}
body.f22-page #top-menu .sub-menu li a:before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--f22-olive);margin-bottom:10px}
body.f22-page .f22-mdesc{display:block;margin-top:5px;font-size:12.5px;font-weight:400;line-height:1.4;color:rgba(var(--f22-zd,31,48,40),.68);letter-spacing:0}
body.f22-page #top-menu .sub-menu{position:absolute!important;z-index:9999}
body.f22-page #top-menu > li > a{white-space:nowrap}
body.f22-page #top-menu .sub-menu li a{text-align:left!important}

/* ==========================================================================
   VERSIE 6 — werkwijze · projectkaart · klantreacties · contact
   ========================================================================== */

/* projecten als Blurb (zichtbaar in de Visual Builder / zonder script) */
.f22-werk .f22-sites .et_pb_blurb{margin:0!important;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0e0e0e}
.f22-werk .f22-sites .et_pb_blurb .et_pb_main_blurb_image{margin:0!important;width:100%!important;max-width:none!important}
.f22-werk .f22-sites .et_pb_blurb img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.f22-werk .f22-sites .et_pb_blurb_container{padding:12px 14px;text-align:left}
.f22-werk .f22-sites .et_pb_blurb h4{font-size:15px!important;margin:0 0 4px!important;color:var(--f22-cream)!important}
.f22-werk .f22-sites .et_pb_blurb_description{font-size:12.5px;color:var(--f22-mute)}

/* ---------- Werkwijze ---------- */
.f22-werkwijze.et_pb_section{padding:140px 0!important}
.f22-werkwijze .f22-steps-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:70px;align-items:start}
.f22-werkwijze .f22-steps-row .et_pb_column{width:auto!important;margin:0!important;float:none!important}
.f22-werkwijze .f22-steps-head{position:sticky!important;top:130px}
.f22-werkwijze .f22-kicker{margin-bottom:20px!important}
.f22-steps{position:relative;padding-left:46px!important}
.f22-steps:before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:1px;background:rgba(var(--f22-zc,244,240,231),.14)}
.f22-steps:after{content:"";position:absolute;left:11px;top:10px;width:1px;height:calc((100% - 20px) * var(--fill,0));background:linear-gradient(var(--f22-olive),var(--f22-paper,#f4f0e7));box-shadow:0 0 12px rgba(var(--f22-zo,168,182,90),.6)}
.f22-step{position:relative;padding:6px 0 54px!important}
.f22-step:last-child{padding-bottom:0!important}
.f22-step:before{content:"";position:absolute;left:-41px;top:10px;width:13px;height:13px;border-radius:50%;background:rgb(var(--f22-zd,22,36,29));border:1px solid rgba(var(--f22-zc,244,240,231),.3);transition:all .5s}
.f22-step.is-on:before{background:var(--f22-olive);border-color:var(--f22-olive);box-shadow:0 0 0 6px rgba(var(--f22-zo,168,182,90),.15)}
.f22-step .et_pb_text_inner{color:#b9beb2;font-size:16.5px;line-height:1.6;font-weight:300;max-width:560px}
.f22-step p:first-child{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;color:var(--f22-mute)}
.f22-step h3{font-size:clamp(28px,2.8vw,40px)!important;letter-spacing:-.03em!important;margin:8px 0 10px!important;color:rgba(var(--f22-zc,244,240,231),.45)!important;transition:color .5s}
.f22-step.is-on h3{color:var(--f22-cream)!important}
.f22-steps:not(.is-live) .f22-step h3{color:var(--f22-cream)!important}

/* ---------- Projectkaart (case) ---------- */
.f22-noscroll{overflow:hidden}
.f22-case{position:fixed;inset:0;z-index:100001;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.f22-case.is-open{visibility:visible;opacity:1}
.f22-case-bg{position:absolute;inset:0;background:rgba(var(--f22-zd,6,12,9),.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.f22-case-card{position:relative;width:min(980px,100%);max-height:calc(100vh - 48px);overflow:auto;display:grid;grid-template-columns:1.3fr 1fr;border-radius:26px;
  background:linear-gradient(180deg,#fdfcf9,var(--f22-paper,#f4f0e7));color:var(--f22-ink,#1f3028);box-shadow:0 60px 120px -30px rgba(0,0,0,.8);transform:translateY(24px) scale(.98);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.f22-case.is-open .f22-case-card{transform:none}
.f22-case-img{background:var(--f22-ink,#1f3028);min-height:340px}
.f22-case-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.f22-case-body{padding:44px 40px;display:flex;flex-direction:column;gap:16px;font-family:var(--f22-sans)}
.f22-case-k{font-family:var(--f22-mono);font-size:10.5px;letter-spacing:.14em;color:rgba(var(--f22-zd,31,48,40),.6)}
.f22-case-k b{font-weight:400;color:#6f7d3c}
.f22-case-body h3{font-family:var(--f22-sans)!important;font-size:clamp(30px,3vw,42px)!important;line-height:1.02!important;letter-spacing:-.035em!important;font-weight:500!important;color:var(--f22-ink,#1f3028)!important;margin:0!important;padding:0!important}
.f22-case-d{font-size:16px;line-height:1.6;color:rgba(var(--f22-zd,31,48,40),.78)}
.f22-case-d p{padding:0!important;margin:0 0 8px!important}
.f22-case-d p:last-child{font-family:var(--f22-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6f7d3c}
.f22-case-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:10px}
.f22-case-go,.f22-case-start{display:inline-flex;align-items:center;padding:14px 20px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none!important}
.f22-case-go{color:var(--f22-paper,#f4f0e7)!important;background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)),var(--f22-ink,#1f3028) 60%,rgb(var(--f22-zd,24,38,31)))}
.f22-case-start{color:var(--f22-ink,#1f3028)!important;border:1px solid rgba(var(--f22-zd,31,48,40),.2)}
.f22-case-x{position:absolute;right:14px;top:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;font-size:24px;line-height:1;color:var(--f22-ink,#1f3028);background:rgba(253,252,249,.9);box-shadow:0 6px 18px -6px rgba(0,0,0,.4)}

/* ---------- Klantreacties ---------- */
.f22-quotes.et_pb_section{padding:120px 0!important}
.f22-quotes.is-empty{display:none!important}
.f22-quotes .f22-quotes-row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:46px!important}
.f22-quotes .f22-quotes-row .et_pb_column{width:auto!important;margin:0!important;float:none!important}
.f22-quote{height:100%;padding:34px 30px!important;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.f22-quote.is-placeholder{display:none}
body.et-fb .f22-quote.is-placeholder{display:block;outline:1px dashed rgba(var(--f22-zo,168,182,90),.6)}
.f22-quote .et_pb_text_inner{display:flex;flex-direction:column;gap:22px;height:100%}
.f22-quote .et_pb_text_inner:before{content:"\201C";font-family:var(--f22-serif);font-size:70px;line-height:.5;color:var(--f22-olive);height:24px}
.f22-quote p:first-child{font-family:var(--f22-serif)!important;font-size:22px;line-height:1.35;color:var(--f22-cream);font-style:italic}
.f22-quote p:last-child{margin-top:auto!important;font-family:var(--f22-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--f22-mute)}

/* ---------- Contact ---------- */
.f22-contact.et_pb_section{padding:140px 0 120px!important;text-align:left!important}
.f22-contact .f22-contact-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:60px;align-items:start}
.f22-contact .f22-contact-row .et_pb_column{width:auto!important;margin:0!important;float:none!important;display:block!important;align-items:initial!important}
.f22-contact .f22-kicker{margin-bottom:20px!important}
.f22-contact .f22-sub{margin:22px 0 0!important}
.f22-contact-lines{margin-top:40px!important}
.f22-contact-lines .et_pb_text_inner{display:grid;gap:0;border-top:1px solid rgba(var(--f22-zc,244,240,231),.14)}
.f22-contact-lines p{display:flex;justify-content:space-between;gap:20px;padding:18px 0!important;margin:0!important;border-bottom:1px solid rgba(var(--f22-zc,244,240,231),.14);font-size:17px}
.f22-contact-lines p span{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-mute);padding-top:4px}
.f22-contact-lines a{color:var(--f22-cream)!important;text-align:right}
.f22-contact-lines a:hover{color:var(--f22-olive)!important}
.f22-form.et_pb_contact_form_container{padding:34px!important;border-radius:26px;background:linear-gradient(180deg,rgba(255,254,251,.96),rgba(var(--f22-zc,244,240,231),.93))!important;
  box-shadow:inset 0 1px 0 #fff,0 40px 90px -40px rgba(0,0,0,.8);color:var(--f22-ink,#1f3028)}
.f22-form .et_pb_contact_main_title{display:none}
.f22-form .et_pb_contact_form{margin:0!important;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f22-form .et_pb_contact_field{width:auto!important;margin:0!important;padding:0!important;float:none!important}
.f22-form .et_pb_contact_field_last{margin:0!important}
.f22-form .et_pb_contact_field[data-type="text"],.f22-form .et_pb_contact_field.et_pb_contact_field_half:nth-last-child(1){grid-column:auto}
.f22-form .et_pb_contact_field:not(.et_pb_contact_field_half){grid-column:1/-1}
.f22-form label.et_pb_contact_form_label{display:block!important;position:static!important;font-family:var(--f22-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--f22-zd,31,48,40),.6);margin-bottom:8px;clip:auto!important;width:auto!important;height:auto!important}
.f22-form .input,.f22-form input.input,.f22-form textarea.input,.f22-form select.input{width:100%!important;border-radius:14px!important;border:1px solid rgba(var(--f22-zd,31,48,40),.14)!important;background:#fff!important;color:var(--f22-ink,#1f3028)!important;
  font-family:var(--f22-sans)!important;font-size:16px!important;padding:14px 16px!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s}
.f22-form textarea.input{min-height:150px}
.f22-form .input:focus{border-color:var(--f22-olive)!important;box-shadow:0 0 0 4px rgba(var(--f22-zo,168,182,90),.2)!important;outline:0}
.f22-form .input::placeholder{color:rgba(var(--f22-zd,31,48,40),.4)!important}
.f22-form .et_contact_bottom_container{grid-column:1/-1;float:none!important;display:flex!important;justify-content:space-between;align-items:center;gap:14px;margin-top:6px!important;text-align:left!important}
.f22-form .et_pb_contact_right{color:var(--f22-ink,#1f3028)}
.f22-form .et_pb_contact_submit.et_pb_button{margin:0 0 0 auto!important;color:var(--f22-paper,#f4f0e7)!important;background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)),var(--f22-ink,#1f3028) 60%,rgb(var(--f22-zd,24,38,31)))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px -14px rgba(var(--f22-zd,31,48,40),.8)!important}
.f22-form .et-pb-contact-message{grid-column:1/-1;color:var(--f22-ink,#1f3028);font-size:15px}
.f22-form .et-pb-contact-message p{padding:0!important}
.f22-form .et_pb_contact_captcha_question{color:var(--f22-ink,#1f3028)}

@media (max-width:980px){
  .f22-werkwijze .f22-steps-row,.f22-contact .f22-contact-row{grid-template-columns:1fr;gap:40px}
  .f22-werkwijze .f22-steps-head{position:static!important}
  .f22-quotes .f22-quotes-row{grid-template-columns:1fr}
  .f22-case-card{grid-template-columns:1fr}
  .f22-case-img{min-height:220px;max-height:260px}
  .f22-case-body{padding:28px 24px}
}
@media (max-width:600px){.f22-form .et_pb_contact_form{grid-template-columns:1fr}.f22-form.et_pb_contact_form_container{padding:22px!important}}
.f22-werkwijze .f22-h2 h2,.f22-quotes .f22-h2 h2,.f22-contact .f22-h2 h2{font-size:clamp(40px,4.6vw,72px)!important;line-height:.98!important;letter-spacing:-.04em!important}
.f22-werkwijze .f22-intro-text{margin-top:22px!important}

/* ==========================================================================
   VERSIE 8
   ========================================================================== */
/* Divi's clearfix in de header telde mee in de flex-rij → knop schoof naar het midden */
body.f22-page #main-header .container:before,body.f22-page #main-header .container:after{display:none!important;content:none!important}
body.f22-page #et-top-navigation{margin-left:auto}

/* "Teksten voor effecten": niet zichtbaar op de site, wel in de Visual Builder */
.f22-strings{display:none!important}
body.et-fb .f22-strings,body.et-bfb .f22-strings{display:block!important;position:relative!important;inset:auto!important;margin:40px auto!important;max-width:760px;padding:18px 20px!important;border:1px dashed rgba(var(--f22-zo,168,182,90),.7);border-radius:12px;background:rgba(0,0,0,.5);z-index:10}
body.et-fb .f22-strings .et_pb_text_inner{font-family:var(--f22-mono);font-size:12px;line-height:1.7;color:var(--f22-paper,#f4f0e7)}
body.et-fb .f22-strings .et_pb_text_inner:before{content:"Teksten voor effecten — pas de tekst na de dubbele punt aan";display:block;color:var(--f22-olive);margin-bottom:8px}

/* intro: glans alleen binnen het logo (geen grijze balk meer) */
.f22-intro .f22-intro-shine{inset:0;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ---------- FOOTER (Divi Theme Builder) ---------- */
.f22-footer.et_pb_section{position:relative;z-index:1;background:rgb(var(--f22-zd,13,22,18))!important;padding:90px 0 34px!important;border-top:1px solid rgba(var(--f22-zc,244,240,231),.08);overflow:hidden}
body.f22-has-bg .f22-footer.et_pb_section{background:rgb(var(--f22-zd,13,22,18))!important}
.f22-footer .f22-foot-row{display:grid!important;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px}
.f22-footer .f22-foot-row .et_pb_column,.f22-footer .f22-foot-bottom .et_pb_column{width:auto!important;margin:0!important;float:none!important}
.f22-foot-logo{max-width:150px;margin-bottom:22px!important}
.f22-foot-logo img{width:100%;height:auto}
.f22-foot-about .et_pb_text_inner{font-size:15px;line-height:1.6;color:#a9ada3;font-weight:300;max-width:300px}
.f22-foot-col .et_pb_text_inner{font-size:15px;line-height:1.9;color:#cfd2c7}
.f22-foot-col p:first-child{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-olive);margin-bottom:12px!important}
.f22-foot-col ul{list-style:none!important;padding:0!important;margin:0!important}
.f22-foot-col li{padding:0!important;list-style:none!important}
.f22-foot-col li:before{display:none!important}
.f22-foot-col a{color:#cfd2c7!important;transition:color .2s}
.f22-foot-col a:hover{color:var(--f22-olive)!important}
.f22-footer .f22-foot-cta{margin-top:16px!important;color:var(--f22-ink,#1f3028)!important;background:linear-gradient(180deg,#fff,var(--f22-paper,#f4f0e7) 55%,#e6e0d2)!important}
.f22-foot-mark{margin:70px 0 0!important}
.f22-foot-mark .et_pb_text_inner p{font-size:min(19vw,330px);line-height:.78;letter-spacing:-.065em;font-weight:500;white-space:nowrap;text-align:center;
  background:linear-gradient(180deg,rgba(var(--f22-zc,244,240,231),.9),rgba(var(--f22-zc,244,240,231),.08));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.f22-footer .f22-foot-bottom{display:grid!important;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px!important;padding-top:20px!important;border-top:1px solid rgba(var(--f22-zc,244,240,231),.1)}
.f22-foot-small .et_pb_text_inner{font-family:var(--f22-mono);font-size:11px;letter-spacing:.1em;color:#7a857b}
.f22-foot-small a{color:#a9ada3!important}
.f22-foot-right .et_pb_text_inner{text-align:right}
@media (max-width:980px){.f22-footer .f22-foot-row{grid-template-columns:1fr 1fr}.f22-footer .f22-foot-bottom{grid-template-columns:1fr}.f22-foot-right .et_pb_text_inner{text-align:left}}
@media (max-width:600px){.f22-footer .f22-foot-row{grid-template-columns:1fr}}
/* standaard WordPress-blokken (Archives, Categories …) in Divi's oude footer nooit tonen */
body.f22-page #footer-widgets{display:none!important}

/* ==========================================================================
   v3.2 — SECTIE 1 · SCROLLVERHAAL (3D-22 + projecten)
   Zonder JS / in de Divi Builder: de teksten gewoon onder elkaar.
   Met JS (.is-live): vastgezet beeld, 4 fases tijdens het scrollen.
   ========================================================================== */
.f22-story.et_pb_section{background:transparent!important}
.f22-story:not(.is-live) .et_pb_module{margin-bottom:28px!important}
.f22-story .f22-strings{display:none!important}

body.f22-page #page-container,body.f22-page #et-main-area,body.f22-page #main-content,body.f22-page article,body.f22-page .entry-content,body.f22-page .et-l--post,body.f22-page .et_builder_inner_content{overflow:visible!important}
body.f22-page{overflow-x:clip}

.f22-hero.f22-story.is-live.et_pb_section{height:520vh;min-height:0;padding:0!important;display:block!important;overflow:visible!important}
.f22-story.is-live .et_pb_row.f22-pin{position:sticky!important;top:0;height:100vh;height:100svh;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;overflow:hidden;display:block!important;text-align:left}
.f22-story.is-live .f22-pin > .et_pb_column{position:static!important;display:block!important;width:100%!important;height:100%;margin:0!important;padding:0!important}
.f22-story.is-live .f22-three{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.f22-story.is-live .et_pb_module{position:absolute!important;margin:0!important;z-index:3;transition:none!important;will-change:opacity,transform;opacity:0}
.f22-story.is-live .et_pb_text .et_pb_text_inner{position:static}
.f22-story.is-live .f22-kick,.f22-story.is-live .f22-ph1 p:nth-of-type(1),.f22-story.is-live .f22-ph1 p:nth-of-type(2),.f22-story.is-live .f22-ph2 p:first-child,.f22-story.is-live .f22-ph3 p:first-child{
  font-family:var(--f22-mono)!important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-mute);line-height:1.8}
.f22-story.is-live .f22-ph2 p:first-child:before,.f22-story.is-live .f22-ph3 p:first-child:before,.f22-story.is-live .f22-ph1 p:nth-of-type(1):before{content:"● ";color:var(--f22-olive)}

/* fase 1 — Vorm | 22 | met impact. */
.f22-story.is-live .f22-ph1{inset:0;pointer-events:none}
.f22-story.is-live .f22-ph1 p{position:absolute;margin:0!important}
.f22-story.is-live .f22-ph1 p:nth-of-type(1){left:40px;top:120px}
.f22-story.is-live .f22-ph1 p:nth-of-type(2){right:40px;top:120px;text-align:right}
.f22-story.is-live .f22-ph1 p:nth-of-type(3){left:40px;bottom:40px;max-width:380px;font-size:17px;line-height:1.5;color:#c9cdbf;font-weight:300;text-transform:none;letter-spacing:0;font-family:var(--f22-sans)!important}
.f22-story.is-live .f22-ph1 h1{position:absolute;left:40px;right:40px;top:41%;display:flex;justify-content:space-between;align-items:flex-start;font-size:clamp(70px,9vw,160px)!important;line-height:.86!important;letter-spacing:-.055em!important;font-weight:500!important}
.f22-story.is-live .f22-ph1 h1 .f22-r{text-align:right;max-width:4.2em}
.f22-story.is-live .f22-ph-scroll{right:40px;bottom:40px}
.f22-story.is-live .f22-ph-scroll .et_pb_text_inner{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-mute);display:flex;flex-direction:column;align-items:center;gap:8px}
.f22-story.is-live .f22-ph-scroll .et_pb_text_inner:after{content:"";width:1px;height:36px;background:linear-gradient(var(--f22-olive),transparent);animation:f22-drop 2.2s ease-in-out infinite}

/* fase 2 — De aanpak */
.f22-story.is-live .f22-ph2{inset:0}
.f22-story.is-live .f22-ph2 .et_pb_text_inner{padding:28vh 40px 0;max-width:680px}
.f22-story.is-live .f22-ph2 h2,.f22-story.is-live .f22-ph3 h2{font-size:clamp(46px,5.4vw,88px)!important;line-height:.96!important;letter-spacing:-.045em!important;font-weight:500!important;margin:20px 0 0!important}
.f22-story.is-live .f22-ph2 ul{position:absolute;left:40px;right:40px;bottom:46px;display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:40px;list-style:none;margin:0;padding:0}
.f22-story.is-live .f22-ph2 li{border-top:1px solid var(--f22-line-2);padding:16px 0 0;font-size:14px;line-height:1.5;color:#c9cdbf;font-weight:300;list-style:none}
.f22-story.is-live .f22-ph2 li strong{display:block;font-family:var(--f22-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-olive);margin-bottom:8px}

/* fase 3 — Het werk (foto's vliegen in een X rond het logo) */
.f22-story.is-live .f22-ph3{left:40px;top:16vh;max-width:540px}

/* fase 4 — Afsluiter + groot woordmerk */
.f22-story.is-live .f22-ph4{left:40px;top:30%;max-width:520px}
.f22-story.is-live .f22-ph4 h2{font-size:clamp(26px,2.6vw,40px)!important;line-height:1.15!important;letter-spacing:-.025em!important;font-weight:300!important}
.f22-story.is-live .et_pb_button_module_wrapper{right:40px;top:31%}
.f22-story.is-live .et_pb_button.f22-ph4-btn,.f22-story.is-live .f22-ph4-btn .et_pb_button{position:static!important;opacity:1!important;transform:none!important}
.f22-story.is-live .f22-ph4-mark{left:0;right:0;bottom:-.08em;text-align:center;pointer-events:none!important}
.f22-story.is-live .f22-ph4-mark p{font-size:min(18vw,320px)!important;line-height:.8!important;letter-spacing:-.065em!important;font-weight:500;white-space:nowrap;
  background:linear-gradient(180deg,#fff,var(--f22-paper,#f4f0e7) 55%,rgba(var(--f22-zc,244,240,231),.4));-webkit-background-clip:text;background-clip:text;color:transparent!important}
.f22-story.is-live .f22-ph4-mark sup{font-size:.3em;vertical-align:1em;font-weight:300}

/* voortgang */
.f22-story .f22-prog{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:4}
.f22-story .f22-prog i{width:2px;height:28px;background:rgba(var(--f22-zc,244,240,231),.18);border-radius:2px;transition:background .3s}
.f22-story .f22-prog i.on{background:var(--f22-olive)}

@media (max-width:760px){
  .f22-hero.f22-story.is-live.et_pb_section{height:440vh}
  .f22-story.is-live .f22-ph1 p:nth-of-type(1){left:20px;top:96px}
  .f22-story.is-live .f22-ph1 p:nth-of-type(2){display:none}
  .f22-story.is-live .f22-ph1 h1{left:20px;right:20px;top:auto;bottom:150px;flex-direction:column;font-size:clamp(56px,15vw,90px)!important}
  .f22-story.is-live .f22-ph1 h1 .f22-r{text-align:left}
  .f22-story.is-live .f22-ph1 p:nth-of-type(3){left:20px;right:20px;bottom:28px}
  .f22-story.is-live .f22-ph-scroll{display:none}
  .f22-story.is-live .f22-ph2 .et_pb_text_inner{padding:18vh 20px 0}
  .f22-story.is-live .f22-ph2 ul{left:20px;right:20px;bottom:28px;grid-template-columns:1fr;gap:14px}
  .f22-story.is-live .f22-ph3,.f22-story.is-live .f22-ph4{left:20px;right:20px}
  .f22-story.is-live .et_pb_button_module_wrapper{left:20px;right:auto;top:auto;bottom:24vh}
}

/* v3.3.1 — Divi 5-markup: code-module en 3D-bol */
.f22-tile .f22-media .et_pb_code_inner{position:static!important;height:auto}
.f22-werk .f22-sphere{width:100%;align-self:stretch;flex:0 0 auto}
.f22-sec.et_pb_section > .et_pb_row{flex-shrink:0}

/* v3.4 — intro: deeltjes vormen het 22-teken, daarna neemt het 3D-logo het over */
.f22-intro.f22-intro-v3{background:rgb(var(--f22-zd,18,29,24))!important;transition:opacity 1.1s ease}
.f22-intro.f22-intro-v3.is-out{opacity:0}
.f22-intro-v3 .f22-intro-meta{left:28px;right:auto;bottom:28px}
body.f22-intro-on .f22-story .f22-pin{opacity:0}
.f22-story .f22-pin{transition:opacity 1.2s ease}
body.f22-intro-on .f22-story.is-live .f22-three{transform:scale(.96)}
.f22-story.is-live .f22-three{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
/* v3.4 — sneller: geen dure overvloei-modus op een schermvullende laag */
.f22-bg .f22-grain{mix-blend-mode:normal!important;opacity:.035!important}
.f22-hero.f22-story.is-live.et_pb_section{height:440vh}
.f22-bg .f22-beam{filter:none!important;mix-blend-mode:normal!important;opacity:.7}
.f22-intro-v3 .f22-intro-glow{position:absolute;width:900px;height:700px;margin:-350px 0 0 -450px;border-radius:50%;pointer-events:none;opacity:var(--glow,0);background:radial-gradient(closest-side,rgba(var(--f22-zo,168,182,90),.22),rgba(var(--f22-zc,244,240,231),.06) 55%,transparent)}

/* v3.5 — projecten: kop met olijfgroen accent, diepe donkere achtergrond (ook op de portfoliopagina) */
.f22-werk .f22-werk-head em,.f22-portfolio .f22-h2 em{color:var(--f22-olive)!important;font-family:var(--f22-serif)!important;font-style:italic}
.f22-werk .f22-made p:last-child{color:var(--f22-olive)}
.f22-werk .f22-werk-sub .et_pb_text_inner{color:#a3ab9f}
body.f22-has-bg .f22-portfolio.et_pb_section,.f22-portfolio.et_pb_section{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 22%,#050806 100%)!important}
.f22-portfolio .f22-kicker .et_pb_text_inner{color:var(--f22-olive)}

/* ==========================================================================
   v3.6 — HEADER-LOGO: liggend logo (beeldmerk + FORMA 22), beter leesbaar
   ========================================================================== */
body.f22-page #main-header img#logo{height:30px!important;max-height:30px!important}
@media (max-width:980px){body.f22-page #main-header img#logo{height:24px!important;max-height:24px!important}}

/* ==========================================================================
   v3.6 — DIENSTPAGINA'S (Branding, Websites, Visuals & 3D, Motion)
   ========================================================================== */
.f22-svc.et_pb_section{padding:110px 0!important;border-top:1px solid var(--f22-line);background:transparent!important}
.f22-svc.f22-svc-hero{border-top:0;padding:170px 0 100px!important}
.f22-svc .f22-svc-hero-row{display:grid!important;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.f22-svc .et_pb_row .et_pb_column{width:auto!important;margin:0!important;float:none!important}
.f22-svc .f22-svc-crumb .et_pb_text_inner p{display:inline-flex;gap:8px;align-items:center;font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-mute);border:1px solid var(--f22-line-2);border-radius:999px;padding:8px 14px}
.f22-svc .f22-svc-crumb .et_pb_text_inner p:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--f22-olive)}
.f22-svc .f22-svc-h1 h1{font-size:clamp(48px,5vw,80px)!important;line-height:.98!important;letter-spacing:-.05em!important;font-weight:500!important;margin:26px 0 0!important}
.f22-svc .f22-svc-lead .et_pb_text_inner{font-size:19px;line-height:1.6;color:var(--f22-mute);font-weight:300;max-width:540px;margin:26px 0 34px}
.f22-svc .f22-svc-facts ul{display:flex;gap:34px;margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--f22-line);list-style:none}
.f22-svc .f22-svc-facts li{font-size:13px;color:var(--f22-mute);line-height:1.5;list-style:none;padding:0}
.f22-svc .f22-svc-facts strong{display:block;color:var(--f22-cream);font-weight:500;font-size:15px}
.f22-svc .f22-svc-media{position:relative;min-height:520px;perspective:1600px}
.f22-svc .f22-svc-shot{position:absolute!important;width:78%;margin:0!important;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08)}
.f22-svc .f22-svc-shot img{display:block;width:100%}
.f22-svc .f22-svc-shot1{right:0;top:0;transform:rotateY(-14deg) rotateX(4deg);opacity:.55}
.f22-svc .f22-svc-shot2{right:8%;top:90px;transform:rotateY(-12deg) rotateX(3deg);opacity:.8}
.f22-svc .f22-svc-shot3{right:16%;top:190px;transform:rotateY(-9deg) rotateX(2deg)}
.f22-svc .f22-svc-video{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/4.6;max-width:480px;margin:0 0 0 auto!important;box-shadow:0 40px 90px rgba(0,0,0,.3)}
.f22-svc .f22-svc-video .et_pb_code_inner{position:static!important}
.f22-svc .f22-svc-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f22-svc .f22-svc-video .f22-rec{position:absolute;left:14px;top:14px;z-index:2}
.f22-svc .f22-svc-head{display:grid!important;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:56px!important}
.f22-svc .f22-svc-side .et_pb_text_inner{font-size:17px;line-height:1.6;color:var(--f22-mute);font-weight:300;max-width:460px;margin-left:auto}
.f22-svc .f22-svc-right{display:flex!important;justify-content:flex-end;align-items:center}
.f22-svc .f22-svc-cards{display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px}
.f22-svc .f22-svc-card{margin:0!important;padding:30px;border-radius:22px;background:linear-gradient(180deg,rgba(var(--f22-zc,244,240,231),.06),rgba(var(--f22-zc,244,240,231),.02));border:1px solid var(--f22-line);min-height:230px}
.f22-svc .f22-svc-card .et_pb_text_inner{display:flex;flex-direction:column;height:100%}
.f22-svc .f22-svc-card p:first-child{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(var(--f22-zo,168,182,90),.14);color:var(--f22-olive);font-size:16px;margin:0 0 34px!important;font-family:var(--f22-mono)}
.f22-svc .f22-svc-card h3{font-size:22px!important;letter-spacing:-.02em!important;font-weight:500!important;margin:0 0 8px!important}
.f22-svc .f22-svc-card p{font-size:14.5px;line-height:1.6;color:var(--f22-mute);font-weight:300;margin:0!important}
.f22-svc .f22-svc-steps{display:grid!important;grid-template-columns:repeat(5,1fr);position:relative}
.f22-svc .f22-svc-steps:before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--f22-line-2)}
.f22-svc .f22-svc-step{margin:0!important;padding-right:28px;position:relative}
.f22-svc .f22-svc-step p:first-child{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:var(--f22-g1);border:1px solid var(--f22-olive);font-family:var(--f22-mono);font-size:11px;color:var(--f22-olive);position:relative;z-index:1}
.f22-svc .f22-svc-step h4{font-size:20px!important;font-weight:500!important;letter-spacing:-.02em!important;margin:26px 0 8px!important}
.f22-svc .f22-svc-step p{font-size:14px;line-height:1.6;color:var(--f22-mute);font-weight:300;margin:0!important}
.f22-svc .f22-svc-projects{display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px}
.f22-svc .f22-svc-projects .et_pb_blurb{margin:0!important;border-radius:20px;overflow:hidden;background:var(--f22-g0);border:1px solid var(--f22-line)}
.f22-svc .f22-svc-projects .et_pb_main_blurb_image{margin:0!important;max-width:none!important;width:100%}
.f22-svc .f22-svc-projects .et_pb_main_blurb_image img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top}
.f22-svc .f22-svc-projects .et_pb_blurb_container{padding:18px 20px}
.f22-svc .f22-svc-projects h4{font-size:17px!important;font-weight:500!important;margin:0 0 4px!important;padding:0!important}
.f22-svc .f22-svc-projects .et_pb_blurb_description p{font-size:13px;color:var(--f22-mute)}
.f22-svc .f22-svc-faq-row{display:grid!important;grid-template-columns:1fr 1.5fr;gap:60px}
.f22-svc .f22-faq{border:0!important;background:transparent!important}
.f22-svc .f22-faq .et_pb_toggle,.f22-svc .f22-faq .et_pb_accordion_item{background:transparent!important;border:0!important;border-top:1px solid var(--f22-line)!important;padding:24px 0!important;margin:0!important}
.f22-svc .f22-faq .et_pb_toggle_title,.f22-svc .f22-faq h5{font-family:var(--f22-sans)!important;font-size:19px!important;font-weight:400!important;letter-spacing:-.01em!important;color:var(--f22-cream)!important;padding-right:40px}
.f22-svc .f22-faq .et_pb_toggle_title:before{color:var(--f22-olive)!important;font-size:20px!important}
.f22-svc .f22-faq .et_pb_toggle_content{padding-top:12px!important;font-size:15px;line-height:1.65;color:var(--f22-mute);font-weight:300;max-width:640px}
.f22-svc .f22-svc-cta{display:grid!important;grid-template-columns:1.4fr 1fr;align-items:center;gap:40px;margin-top:110px!important;border-radius:30px;padding:70px!important;
  background:radial-gradient(80% 120% at 100% 0%,rgba(var(--f22-zo,168,182,90),.25),transparent 60%),linear-gradient(135deg,#24382d,rgb(var(--f22-zd,22,36,29)));border:1px solid rgba(var(--f22-zc,244,240,231),.12)}
.f22-svc .f22-svc-cta h2{font-size:clamp(36px,3.6vw,56px)!important;line-height:1!important;letter-spacing:-.04em!important;font-weight:500!important;color:var(--f22-paper,#f4f0e7)!important}
.f22-svc .f22-svc-cta em{color:var(--f22-paper,#f4f0e7)!important}
@media (max-width:980px){
  .f22-svc .f22-svc-hero-row,.f22-svc .f22-svc-head,.f22-svc .f22-svc-faq-row,.f22-svc .f22-svc-cta{grid-template-columns:1fr}
  .f22-svc .f22-svc-cards,.f22-svc .f22-svc-projects{grid-template-columns:1fr}
  .f22-svc .f22-svc-steps{grid-template-columns:1fr;gap:24px}.f22-svc .f22-svc-steps:before{display:none}
  .f22-svc .f22-svc-media{min-height:340px}.f22-svc .f22-svc-cta{padding:36px!important}
}
/* "Meer over …" in de tegels */
.f22-tile .f22-more{margin-top:14px!important}.f22-tile .f22-more a{color:var(--f22-olive)!important;font-size:13px}

/* ==========================================================================
   v3.6 — LICHT THEMA (crème met groen) · body.f22-light
   Probeer: forma22.nl/?f22thema=licht
   ========================================================================== */
body.f22-light{--f22-g0:#ebe5d7;--f22-g1:#f4f0e7;--f22-g2:#efe9dd;--f22-g3:#e5decf;
  --f22-cream:#1f3028;--f22-cream-2:#2c4337;--f22-champ-2:#2c4337;--f22-mute:#5d685f;--f22-dim:#7d8579;
  --f22-line:rgba(31,48,40,.12);--f22-line-2:rgba(31,48,40,.22);--f22-champ:#7c8a2f;--f22-gold:#7c8a2f;--f22-olive:#7c8a2f}
body.f22-light,body.f22-light #page-container,body.f22-light #et-main-area,body.f22-light #main-content{background:var(--f22-paper,#f4f0e7)!important;color:var(--f22-ink,#1f3028)}
body.f22-light .f22-bg .f22-vign{background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(var(--f22-zd,31,48,40),.08))}
body.f22-light .f22-bg .f22-grain{opacity:.05!important}
body.f22-light .f22-bg .f22-beam{opacity:.25}
body.f22-light .f22-sec .et_pb_text_inner{color:var(--f22-ink,#1f3028)}
body.f22-light .f22-sec p,body.f22-light .f22-sec li{color:inherit}
/* donkere eilanden blijven donker: projecten, footer, case, contact-knop */
body.f22-light .f22-werk,body.f22-light .f22-footer,body.f22-light .f22-case,body.f22-light .f22-svc-cta{
  --f22-g0:#0d1612;--f22-g1:#16241d;--f22-g2:#1f3028;--f22-g3:#2a3f34;--f22-cream:#f4f0e7;--f22-cream-2:#fbf9f4;--f22-champ-2:#f4f0e7;--f22-mute:#a3ab9f;
  --f22-line:rgba(244,240,231,.10);--f22-line-2:rgba(244,240,231,.18);--f22-champ:#a8b65a;--f22-olive:#a8b65a;color:#f4f0e7}
body.f22-light .f22-werk .et_pb_text_inner,body.f22-light .f22-footer .et_pb_text_inner{color:var(--f22-paper,#f4f0e7)}
body.f22-light.f22-has-bg .f22-werk.et_pb_section{background:linear-gradient(180deg,var(--f22-paper,#f4f0e7) 0,var(--f22-ink,#1f3028) 12%,rgb(var(--f22-zd,22,36,29)) 50%,var(--f22-ink,#1f3028) 88%,var(--f22-paper,#f4f0e7) 100%)!important}
body.f22-light .f22-footer.et_pb_section{background:var(--f22-ink,#1f3028)!important}
/* intro */
body.f22-light .f22-intro.f22-intro-v3{background:var(--f22-paper,#f4f0e7)!important}
body.f22-light .f22-intro .f22-skip{color:var(--f22-ink,#1f3028);border-color:rgba(var(--f22-zd,31,48,40),.25)}
body.f22-light .f22-intro-v3 .f22-intro-glow{background:radial-gradient(closest-side,rgba(var(--f22-zo,168,182,90),.25),rgba(var(--f22-zd,31,48,40),.05) 55%,transparent)}
/* scrollverhaal */
body.f22-light .f22-story.is-live .f22-ph4-mark p{background:linear-gradient(180deg,var(--f22-ink,#1f3028),rgb(var(--f22-zd,44,67,55)) 55%,rgba(var(--f22-zd,31,48,40),.35));-webkit-background-clip:text;background-clip:text}
body.f22-light .f22-story .f22-prog i{background:rgba(var(--f22-zd,31,48,40),.18)}
body.f22-light .f22-story.is-live .f22-ph1 p:nth-of-type(3){color:#4b564d}
body.f22-light .f22-story.is-live .f22-ph2 li{color:#4b564d}
/* knoppen: groen met crème tekst */
body.f22-light .f22-sec:not(.f22-werk):not(.f22-footer) .et_pb_button{background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)),var(--f22-ink,#1f3028) 60%,rgb(var(--f22-zd,24,38,31)))!important;color:var(--f22-paper,#f4f0e7)!important;border-color:transparent!important}
/* tegels, kaarten, formulier */
body.f22-light .f22-svc .f22-svc-card{background:linear-gradient(180deg,#fbf9f4,#f1ece1);border-color:rgba(var(--f22-zd,31,48,40),.1);box-shadow:0 20px 50px -30px rgba(var(--f22-zd,31,48,40),.35)}
body.f22-light .f22-svc .f22-svc-projects .et_pb_blurb{background:#fbf9f4}
/* licht: secties transparant op de crème zijde-achtergrond */
body.f22-light.f22-has-bg .f22-ervaar.et_pb_section,body.f22-light.f22-has-bg .f22-maken.et_pb_section,body.f22-light .f22-ervaar.et_pb_section,body.f22-light .f22-maken.et_pb_section{background:transparent!important}
body.f22-light.f22-has-bg .f22-slot.et_pb_section,body.f22-light .f22-slot.et_pb_section{background:radial-gradient(60% 70% at 50% 100%,rgba(var(--f22-zo,168,182,90),.18),transparent 70%)!important}
body.f22-light .f22-werk:before{background:linear-gradient(var(--f22-paper,#f4f0e7),rgba(var(--f22-zd,31,48,40),0))}
body.f22-light .f22-werk:after{background:radial-gradient(closest-side,rgba(var(--f22-zo,168,182,90),.18),transparent)}
body.f22-light .f22-tabs .et_pb_tabs_controls{background:rgba(var(--f22-zd,31,48,40),.06)!important;box-shadow:inset 0 0 0 1px rgba(var(--f22-zd,31,48,40),.1)!important}
body.f22-light .f22-tabs .et_pb_tabs_controls li a{color:#4b564d!important}
body.f22-light .f22-tabs .et_pb_tabs_controls li.et_pb_tab_active{background:var(--f22-ink,#1f3028)!important}
body.f22-light .f22-tabs .et_pb_tabs_controls li.et_pb_tab_active a{color:var(--f22-paper,#f4f0e7)!important}
body.f22-light .f22-tile{background:linear-gradient(180deg,#fbf9f4,#f1ece1)!important;border-color:rgba(var(--f22-zd,31,48,40),.1)!important;box-shadow:0 24px 60px -36px rgba(var(--f22-zd,31,48,40),.45)}
body.f22-light .f22-tabs .et_pb_tab_content{background:linear-gradient(180deg,#fbf9f4,#f1ece1)!important;border-color:rgba(var(--f22-zd,31,48,40),.1)!important;box-shadow:0 40px 90px -50px rgba(var(--f22-zd,31,48,40),.5)!important}
body.f22-light .f22-tabs .f22-copy{color:#4b564d}
body.f22-light .f22-tile-text .et_pb_text_inner p{color:#5d685f}
body.f22-light .f22-tile-text span{border-color:rgba(var(--f22-zd,31,48,40),.18)!important;color:#4b564d!important}
.f22-svc .f22-h2 h2{font-size:clamp(40px,4.4vw,68px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:500!important;margin:14px 0 0!important}
.f22-svc .f22-kicker .et_pb_text_inner{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-mute)}
.f22-svc .f22-kicker .et_pb_text_inner p:before{content:"● ";color:var(--f22-olive)}
/* knoppen nooit over twee regels */
.f22-sec .et_pb_button,.f22-sec .et_pb_button_module_wrapper{white-space:nowrap}
/* v3.7 — glas-achtergrond */
body.f22-bg-glas .f22-bg .f22-beam{display:none}
body.f22-bg-glas .f22-bg .f22-vign{background:radial-gradient(130% 100% at 35% 40%,transparent 50%,rgba(var(--f22-zd,5,12,9),.55))}
body.f22-bg-glas.f22-has-bg .f22-ervaar.et_pb_section,body.f22-bg-glas.f22-has-bg .f22-maken.et_pb_section{background:linear-gradient(180deg,transparent,rgba(var(--f22-zd,8,18,13),.55) 20%,rgba(var(--f22-zd,8,18,13),.55) 80%,transparent)!important}
body.f22-bg-glas .f22-sec:not(.f22-werk) .et_pb_text_inner{text-shadow:0 2px 30px rgba(var(--f22-zd,5,12,9),.65),0 1px 3px rgba(var(--f22-zd,5,12,9),.35)}
.f22-bg canvas{transition:opacity 1.2s ease}.f22-bg.is-loading canvas{opacity:0}

/* ==========================================================================
   v3.9 — HEADER IN GROEN VLOEIBAAR GLAS · logo en tekst in crème
   ========================================================================== */
body.f22-page #main-header{
  background:linear-gradient(180deg,rgba(var(--f22-zm,58,84,68),.78) 0%,rgba(var(--f22-zm,36,56,45),.72) 48%,rgba(var(--f22-zd,24,40,32),.78) 100%)!important;
  border:1px solid rgba(var(--f22-zc,244,240,231),.16)!important;
  backdrop-filter:blur(22px) saturate(1.6) brightness(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(1.05);
  box-shadow:inset 0 1px 0 rgba(var(--f22-zc,244,240,231),.28),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(var(--f22-zo,168,182,90),.06),0 24px 60px -24px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.18)!important}
body.f22-page #main-header:before{background:linear-gradient(180deg,rgba(var(--f22-zc,244,240,231),.16),rgba(var(--f22-zc,244,240,231),0))!important;inset:1px 18px 55% 18px!important}
body.f22-page #main-header:after{content:"";display:block!important;position:absolute;left:12%;right:12%;bottom:-1px;height:1px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--f22-zo,168,182,90),.55),transparent)}
body.f22-page #top-menu > li > a{color:var(--f22-paper,#f4f0e7)!important;opacity:.78!important}
body.f22-page #top-menu > li > a:hover,body.f22-page #top-menu > li.current-menu-item > a{background:rgba(var(--f22-zc,244,240,231),.12)!important;color:#fbf9f4!important;opacity:1!important}
body.f22-page .f22-cta,body.f22-page #top-menu > li.f22-menu-cta > a{color:var(--f22-ink,#1f3028)!important;background:linear-gradient(180deg,#fffdf8 0%,var(--f22-paper,#f4f0e7) 55%,#e4ddcc 100%)!important;box-shadow:inset 0 1px 0 #fff,0 8px 22px -10px rgba(0,0,0,.6)!important}
body.f22-page #main-header .mobile_nav{background:rgba(var(--f22-zc,244,240,231),.1)!important;border:1px solid rgba(var(--f22-zc,244,240,231),.18)!important}
body.f22-page #main-header .mobile_menu_bar:before{color:var(--f22-paper,#f4f0e7)!important}
/* uitklapmenu ook in groen glas */
body.f22-page #top-menu .sub-menu{background:linear-gradient(180deg,rgba(var(--f22-zm,44,67,55),.92),rgba(var(--f22-zd,24,40,32),.94))!important;border:1px solid rgba(var(--f22-zc,244,240,231),.14)!important;
  box-shadow:inset 0 1px 0 rgba(var(--f22-zc,244,240,231),.22),0 30px 60px -24px rgba(0,0,0,.7)!important}
body.f22-page #top-menu .sub-menu li a{color:var(--f22-paper,#f4f0e7)!important}
body.f22-page #top-menu .sub-menu li a:hover{background:rgba(var(--f22-zc,244,240,231),.08)!important}
body.f22-page .f22-mdesc{color:rgba(var(--f22-zc,244,240,231),.6)!important}

/* ==========================================================================
   v4.0 — MOGELIJKHEDEN-pagina: pakketten en snelkeuze
   ========================================================================== */
.f22-svc .f22-mog-hero{grid-template-columns:1.6fr 1fr!important}
.f22-svc .f22-jump ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f22-svc .f22-jump li{list-style:none;padding:0}
.f22-svc .f22-jump a{display:flex;gap:16px;align-items:center;padding:20px 22px;border-radius:18px;border:1px solid var(--f22-line-2);font-size:17px;color:var(--f22-cream)!important;transition:background .3s,transform .3s}
.f22-svc .f22-jump a:hover{background:rgba(var(--f22-zo,168,182,90),.12);transform:translateX(4px)}
.f22-svc .f22-jump strong{font-family:var(--f22-mono);font-weight:400;font-size:11px;color:var(--f22-olive);letter-spacing:.12em}
.f22-svc .f22-packs{display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px}
.f22-svc .f22-pack{margin:0!important;padding:34px 30px;border-radius:24px;border:1px solid var(--f22-line);background:linear-gradient(180deg,rgba(var(--f22-zc,244,240,231),.07),rgba(var(--f22-zc,244,240,231),.02))}
.f22-svc .f22-pack:nth-child(2){border-color:rgba(var(--f22-zo,168,182,90),.45);background:linear-gradient(180deg,rgba(var(--f22-zo,168,182,90),.16),rgba(var(--f22-zo,168,182,90),.03));box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.f22-svc .f22-pack p:first-child{font-family:var(--f22-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--f22-mute)}
.f22-svc .f22-pack h3{font-size:34px!important;letter-spacing:-.03em!important;font-weight:500!important;margin:14px 0 6px!important}
.f22-svc .f22-pack .f22-price{font-family:var(--f22-serif);font-style:italic;font-size:22px;color:var(--f22-olive);margin:0 0 22px!important}
.f22-svc .f22-pack ul{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--f22-line)}
.f22-svc .f22-pack li{list-style:none;position:relative;padding:0 0 12px 22px;font-size:14.5px;line-height:1.5;color:var(--f22-mute)}
.f22-svc .f22-pack li:before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--f22-olive)}
@media (max-width:980px){.f22-svc .f22-packs{grid-template-columns:1fr}.f22-svc .f22-mog-hero{grid-template-columns:1fr!important}}
body.f22-light .f22-svc .f22-pack{background:linear-gradient(180deg,#fbf9f4,#f1ece1)}

/* ==========================================================================
   v4.0 — HULP-CHAT (begeleide vragen, leidt naar het formulier)
   ========================================================================== */
.f22-chat-btn{position:fixed;right:22px;bottom:22px;z-index:9998;display:flex;align-items:center;gap:10px;padding:14px 18px 14px 14px;border-radius:999px;border:1px solid rgba(var(--f22-zc,244,240,231),.18);cursor:pointer;
  font:500 14px/1 var(--f22-sans);color:var(--f22-paper,#f4f0e7);background:linear-gradient(180deg,rgba(var(--f22-zm,58,84,68),.92),rgba(var(--f22-zd,24,40,32),.94));backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(var(--f22-zc,244,240,231),.25),0 20px 40px -16px rgba(0,0,0,.6);transition:transform .3s,opacity .4s}
.f22-chat-btn:hover{transform:translateY(-2px)}
.f22-chat-btn i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--f22-paper,#f4f0e7);color:var(--f22-ink,#1f3028);font-style:normal;font-size:15px}
body.f22-intro-on .f22-chat-btn{opacity:0;pointer-events:none}
.f22-chat{position:fixed;right:22px;bottom:90px;z-index:9999;width:min(380px,calc(100vw - 28px));max-height:min(560px,calc(100vh - 140px));display:flex;flex-direction:column;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--f22-zm,36,56,45),.97),rgba(var(--f22-zd,18,30,24),.98));border:1px solid rgba(var(--f22-zc,244,240,231),.14);box-shadow:inset 0 1px 0 rgba(var(--f22-zc,244,240,231),.2),0 40px 80px -30px rgba(0,0,0,.75);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;transition:opacity .3s,transform .3s;font-family:var(--f22-sans);color:var(--f22-paper,#f4f0e7)}
.f22-chat.is-open{opacity:1;transform:none;pointer-events:auto}
.f22-chat-head{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(var(--f22-zc,244,240,231),.1)}
.f22-chat-head img{height:22px}.f22-chat-head span{font-size:12px;color:#a3ab9f;display:block;margin-top:2px}
.f22-chat-head button{margin-left:auto;background:none;border:0;color:#a3ab9f;font-size:20px;cursor:pointer}
.f22-chat-body{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.f22-chat-msg{max-width:88%;padding:11px 14px;border-radius:16px 16px 16px 4px;background:rgba(var(--f22-zc,244,240,231),.08);font-size:14px;line-height:1.5}
.f22-chat-msg.me{align-self:flex-end;border-radius:16px 16px 4px 16px;background:var(--f22-paper,#f4f0e7);color:var(--f22-ink,#1f3028)}
.f22-chat-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.f22-chat-opts button,.f22-chat-opts a{border:1px solid rgba(var(--f22-zo,168,182,90),.5);background:rgba(var(--f22-zo,168,182,90),.1);color:var(--f22-paper,#f4f0e7);border-radius:999px;padding:9px 13px;font:400 13px/1.2 var(--f22-sans);cursor:pointer;text-decoration:none}
.f22-chat-opts button:hover,.f22-chat-opts a:hover{background:rgba(var(--f22-zo,168,182,90),.25)}
.f22-chat-opts a.is-main{background:var(--f22-paper,#f4f0e7);color:var(--f22-ink,#1f3028);border-color:var(--f22-paper,#f4f0e7);font-weight:500}
@media (max-width:600px){.f22-chat-btn span{display:none}.f22-chat-btn{padding:12px}}

/* ==========================================================================
   v4.0 — AANVRAAG IN DE BOL (zwart, projecten draaien rond het formulier)
   ========================================================================== */
.f22-contact.f22-orbit.et_pb_section,body.f22-has-bg .f22-contact.f22-orbit.et_pb_section,body.f22-light .f22-contact.f22-orbit.et_pb_section{background:#000!important;position:relative;overflow:hidden;min-height:100vh;padding:150px 0 140px!important;display:flex!important;flex-direction:column;justify-content:center}
.f22-orbit:before{content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:1;pointer-events:none;background:linear-gradient(rgba(0,0,0,0),#000)}
.f22-orbit-room{position:absolute;inset:0;z-index:0;perspective:1100px;perspective-origin:50% 50%;pointer-events:none}
.f22-orbit-world{position:absolute;inset:0;transform-style:preserve-3d}
.f22-orbit-card{position:absolute;left:50%;top:50%;width:220px;height:138px;margin:-69px 0 0 -110px;border-radius:12px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.12);backface-visibility:hidden;will-change:transform,opacity}
.f22-orbit-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.f22-orbit .f22-contact-row{position:relative;z-index:2;max-width:1080px!important;padding:56px!important;border-radius:32px;
  background:linear-gradient(180deg,rgba(var(--f22-zd,18,30,24),.82),rgba(6,10,8,.88))!important;border:1px solid rgba(var(--f22-zc,244,240,231),.12);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(var(--f22-zc,244,240,231),.14),0 60px 120px -40px rgba(0,0,0,.9)}
body.f22-light .f22-orbit .f22-contact-row{--f22-cream:#f4f0e7;--f22-mute:#a3ab9f;--f22-line:rgba(244,240,231,.12);--f22-line-2:rgba(244,240,231,.2);color:#f4f0e7}
body.f22-light .f22-orbit .et_pb_text_inner{color:var(--f22-paper,#f4f0e7)}
@media (max-width:760px){.f22-orbit .f22-contact-row{padding:28px 20px!important;border-radius:22px}.f22-orbit-card{width:150px;height:94px;margin:-47px 0 0 -75px}}
/* v4.1 — stippenbol */
.f22-orbit-room canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.f22-orbit:before{display:none}
.f22-orbit:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 55% at 50% 50%,transparent 55%,rgba(0,0,0,.75) 100%),linear-gradient(#000,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,#000)}
.f22-orbit .f22-contact-row{background:linear-gradient(180deg,rgba(14,22,18,.62),rgba(4,8,6,.7))!important;backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1)}

/* ==========================================================================
   v4.1 — SECTIE 3 ALS CARROUSEL
   ========================================================================== */
.f22-maken.is-carousel.et_pb_section{padding:0!important;display:block!important;overflow:visible!important}
.f22-maken.is-carousel .f22-car-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:5vh;padding:110px 0 60px;overflow:hidden}
.f22-maken.is-carousel .f22-head-row{margin:0 auto!important;width:min(1320px,calc(100% - 80px))!important}
.f22-maken.is-carousel .f22-car-view{width:min(1320px,calc(100% - 80px));margin:0 auto;overflow:visible}
.f22-maken.is-carousel .f22-tiles-row{display:flex!important;gap:24px;margin:0!important;width:max-content!important;max-width:none!important;will-change:transform}
.f22-maken.is-carousel .f22-tile{flex:0 0 min(860px,64vw)!important;width:min(860px,64vw)!important;display:grid!important;grid-template-columns:1.15fr 1fr;align-items:stretch;height:min(54vh,520px);
  transform:scale(calc(.94 + var(--f,1) * .06));opacity:calc(.45 + var(--f,1) * .55);transition:none}
.f22-maken.is-carousel .f22-tile:hover{transform:scale(calc(.94 + var(--f,1) * .06))}
.f22-maken.is-carousel .f22-tile .f22-media{aspect-ratio:auto;height:auto;margin:10px!important}
.f22-maken.is-carousel .f22-tile .f22-tile-text{align-self:center;padding:30px 34px 30px 18px!important}
.f22-maken.is-carousel .f22-tile .f22-tile-text h3{font-size:clamp(32px,3.2vw,48px)!important}
.f22-maken.is-carousel .f22-tile .f22-tile-text .et_pb_text_inner{font-size:16px}
.f22-car-bar{width:min(1320px,calc(100% - 80px));margin:0 auto;display:flex;align-items:center;gap:16px;font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;color:var(--f22-mute)}
.f22-car-bar i{flex:1;height:1px;background:var(--f22-line-2);position:relative}
.f22-car-bar b{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--f22-olive);transform-origin:0 50%;transform:scaleX(.04)}
.f22-car-bar .f22-car-n{color:var(--f22-olive)}
/* mobiel: vegen */
.f22-maken.is-carousel.is-swipe .f22-car-pin{position:static;height:auto;padding:90px 0 50px;overflow:visible}
.f22-maken.is-swipe .f22-car-view{width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 16px 10px;scrollbar-width:none}
.f22-maken.is-swipe .f22-car-view::-webkit-scrollbar{display:none}
.f22-maken.is-swipe .f22-tile{flex:0 0 82vw!important;width:82vw!important;display:block!important;height:auto;scroll-snap-align:center;transform:none;opacity:1}
.f22-maken.is-swipe .f22-tile .f22-media{aspect-ratio:4/4.2}
.f22-maken.is-swipe .f22-car-bar{display:none}

/* ==========================================================================
   v4.1 — FOOTER: afsluiter, nette kolommen, rustig woordmerk
   ========================================================================== */
.f22-footer-v2.et_pb_section{padding:0 0 30px!important;background:#0a120e!important;border-top:0}
.f22-footer-v2 .f22-foot-cta-row{display:grid!important;grid-template-columns:1.5fr 1fr;align-items:end;gap:40px;padding:90px 0 70px!important;border-bottom:1px solid rgba(var(--f22-zc,244,240,231),.1)}
.f22-footer-v2 .f22-foot-cta-h p{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-olive);margin-bottom:18px!important}
.f22-footer-v2 .f22-foot-cta-h h2{font-size:clamp(40px,4.8vw,76px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:500!important;color:var(--f22-paper,#f4f0e7)!important}
.f22-footer-v2 .f22-foot-cta-btns{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center}
.f22-footer-v2 .f22-foot-cta-btns .et_pb_button_module_wrapper{margin:0!important}
.f22-footer .f22-foot-cta2{background:transparent!important;color:var(--f22-paper,#f4f0e7)!important;border:1px solid rgba(var(--f22-zc,244,240,231),.25)!important}
.f22-footer-v2 .f22-foot-row{grid-template-columns:1.4fr 1fr 1fr 1fr!important;gap:48px;padding:70px 0 10px!important}
.f22-footer-v2 .f22-foot-logo{max-width:190px}
.f22-footer-v2 .f22-foot-col li{line-height:2.1}
.f22-footer-v2 .f22-foot-mark{margin:60px 0 0!important;opacity:.9}
.f22-footer-v2 .f22-foot-mark .et_pb_text_inner p{font-size:min(17vw,300px)!important;background:linear-gradient(180deg,rgba(var(--f22-zc,244,240,231),.16),rgba(var(--f22-zc,244,240,231),.02))!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
@media (max-width:980px){.f22-footer-v2 .f22-foot-cta-row{grid-template-columns:1fr}.f22-footer-v2 .f22-foot-cta-btns{justify-content:flex-start}.f22-footer-v2 .f22-foot-row{grid-template-columns:1fr 1fr!important}}
@media (max-width:600px){.f22-footer-v2 .f22-foot-row{grid-template-columns:1fr!important}}
.f22-footer-v2 .f22-foot-cta-row .et_pb_column{width:auto!important;margin:0!important;float:none!important}
.f22-footer-v2 .f22-foot-cta-btns .et_pb_button_module_wrapper{width:auto!important}
.f22-maken.is-carousel .f22-car-pin{padding-top:130px}
.f22-orbit .f22-contact-row{max-width:940px!important;background:linear-gradient(180deg,rgba(var(--f22-zd,10,16,13),.5),rgba(0,0,0,.58))!important}
.f22-orbit .f22-contact-row{background:linear-gradient(180deg,rgba(var(--f22-zd,10,16,13),.22),rgba(0,0,0,.3))!important;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* v4.2 — na de projecten alles zwart, geen glas meer */
body.f22-has-bg .f22-werk.et_pb_section{background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.92) 14%,#000 30%,#000 100%)!important}
body.f22-page:not(.f22-light){background:#000!important}
body.f22-page:not(.f22-light) #page-container,body.f22-page:not(.f22-light) #et-main-area,body.f22-page:not(.f22-light) #main-content{background:transparent!important}
.f22-bg{transition:opacity .2s linear}

/* ==========================================================================
   v4.2 — SECTIE 2: tabbladen als 3D-carrousel
   ========================================================================== */
.f22-tabs.is-flow .et_pb_all_tabs{position:relative;perspective:1800px;perspective-origin:50% 40%;transform-style:preserve-3d;overflow:visible!important;margin-top:26px}
.f22-tabs.is-flow .et_pb_tab{display:block!important;position:absolute!important;left:11%;top:0;width:78%;transition:transform .9s cubic-bezier(.2,.75,.15,1),opacity .7s ease;transform-origin:50% 50%;backface-visibility:hidden}
.f22-tabs.is-flow .et_pb_tab:not(.is-front){cursor:pointer;filter:saturate(.7) brightness(.8)}
.f22-tabs.is-flow .et_pb_tab:not(.is-front) *{pointer-events:none}
.f22-ervaar .f22-tabs.is-flow{overflow:visible!important}
.f22-ervaar.et_pb_section{overflow:hidden}

/* SECTIE 3: kaarten in een boog (coverflow) */
.f22-maken.is-carousel:not(.is-swipe) .f22-car-view{perspective:1600px}
.f22-maken.is-carousel:not(.is-swipe) .f22-tiles-row{transform-style:preserve-3d}
.f22-maken.is-carousel:not(.is-swipe) .f22-tile{transform:rotateY(calc(var(--o,0) * -26deg)) translateZ(calc(var(--a,0) * -180px)) scale(calc(.92 + var(--f,1) * .08))!important;transform-origin:50% 50%}

/* stippenbol op mobiel: boven het formulier, helemaal in beeld */
@media (max-width:760px){
  .f22-contact.f22-orbit.et_pb_section{padding:80px 0 60px!important;min-height:0}
  .f22-orbit-room{position:relative!important;inset:auto!important;height:92vw;margin:0 0 -24vw}
  .f22-orbit:after{background:linear-gradient(#000,rgba(0,0,0,0) 8%,rgba(0,0,0,0) 92%,#000)}
  .f22-orbit .f22-contact-row{background:linear-gradient(180deg,rgba(var(--f22-zd,10,16,13),.55),rgba(0,0,0,.75))!important}
}
@media (max-width:760px){.f22-orbit-room{width:100%!important;align-self:stretch!important;flex:0 0 auto}}
.f22-tabs.is-flow .et_pb_tab.is-front .et_pb_tab_content{background:linear-gradient(180deg,#1d2e26,#15231c)!important}
.f22-tabs.is-flow .et_pb_tab:not(.is-front){filter:saturate(.6) brightness(.6)}
.f22-maken.is-carousel:not(.is-swipe) .f22-tile{transform:rotateY(calc(var(--o,0) * -12deg)) translateZ(calc(var(--a,0) * -110px)) scale(calc(.94 + var(--f,1) * .06))!important}

/* ==========================================================================
   v4.3 — CONTACT IN GROEN (bol, teksten, lijnen en velden)
   ========================================================================== */
.f22-orbit .f22-contact-row{border-color:rgba(var(--f22-zo,168,182,90),.22)!important;background:linear-gradient(180deg,rgba(20,36,28,.55),rgba(var(--f22-zd,8,16,12),.62))!important}
.f22-orbit .f22-kicker .et_pb_text_inner{color:var(--f22-olive)!important}
.f22-orbit .f22-h2 h2{color:#dfe5c4!important}
.f22-orbit .f22-h2 em{color:var(--f22-olive)!important}
.f22-orbit .f22-sub .et_pb_text_inner,.f22-orbit .f22-intro-text .et_pb_text_inner{color:#b7c09a!important}
.f22-orbit .f22-contact-lines .et_pb_text_inner,.f22-orbit .f22-contact-lines p{border-color:rgba(var(--f22-zo,168,182,90),.25)!important}
.f22-orbit .f22-contact-lines p span{color:#8e9a5a!important}
.f22-orbit .f22-contact-lines a{color:#dfe5c4!important}
.f22-orbit .f22-form.et_pb_contact_form_container{background:linear-gradient(180deg,rgba(var(--f22-zm,44,67,55),.78),rgba(var(--f22-zd,24,40,32),.85))!important;border:1px solid rgba(var(--f22-zo,168,182,90),.3)!important;box-shadow:inset 0 1px 0 rgba(223,229,196,.18),0 40px 80px -30px rgba(0,0,0,.8)!important}
.f22-orbit .f22-form label.et_pb_contact_form_label{color:var(--f22-olive)!important}
.f22-orbit .f22-form .input,.f22-orbit .f22-form input.input,.f22-orbit .f22-form textarea.input,.f22-orbit .f22-form select.input{background:rgba(10,20,15,.55)!important;border:1px solid rgba(var(--f22-zo,168,182,90),.32)!important;color:#eef1e0!important}
.f22-orbit .f22-form select.input option{background:var(--f22-ink,#1f3028);color:#eef1e0}
.f22-orbit .f22-form .input::placeholder{color:rgba(223,229,196,.45)!important}
.f22-orbit .f22-form .input:focus{border-color:#c4cf7a!important;box-shadow:0 0 0 4px rgba(var(--f22-zo,168,182,90),.22)!important}
.f22-orbit .f22-form .et_pb_contact_submit.et_pb_button{color:rgb(var(--f22-zd,22,36,29))!important;background:linear-gradient(180deg,#c9d27f,var(--f22-olive) 60%,#8f9c45)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px -12px rgba(0,0,0,.7)!important}
.f22-orbit .f22-form .et_pb_contact_right,.f22-orbit .f22-form .et-pb-contact-message,.f22-orbit .f22-form .et_pb_contact_captcha_question{color:#dfe5c4!important}

/* ==========================================================================
   v4.3 — SECTIE 1 (stippen): opening met de websites-ring
   ========================================================================== */
.f22-story.is-live.is-dots .f22-ph1 h1{display:block!important;left:40px;right:auto;top:28%;max-width:min(52vw,760px);font-size:clamp(56px,6.6vw,118px)!important;line-height:.92!important;letter-spacing:-.055em!important}
.f22-story.is-live.is-dots .f22-ph1 h1 em{color:var(--f22-olive)!important}
.f22-story.is-live.is-dots .f22-ph1 p:nth-of-type(3){left:40px;bottom:116px;max-width:440px}
.f22-story.is-live.is-dots .et_pb_button_module_wrapper:has(.f22-ph1-btn){left:40px;bottom:40px;right:auto;top:auto}
.f22-story.is-live.is-dots .f22-ph1-btn{background:transparent!important;color:var(--f22-paper,#f4f0e7)!important;border:1px solid rgba(var(--f22-zc,244,240,231),.3)!important}
.f22-story.is-live.is-dots .f22-ph2{inset:auto!important;left:40px;top:15vh;max-width:560px}
.f22-story.is-live.is-dots .f22-ph2 .et_pb_text_inner{padding:0!important;max-width:none}
.f22-story.is-live.is-dots .f22-ph2 p:last-child{margin-top:18px!important;font-size:16px;line-height:1.55;color:#c9cdbf;font-weight:300;max-width:380px}
.f22-story.is-live.is-dots .f22-ph3{inset:0!important;left:0;top:0;max-width:none}
.f22-story.is-live.is-dots .f22-ph3 .et_pb_text_inner{padding:24vh 40px 0;max-width:680px}
.f22-story.is-live.is-dots .f22-ph3 h2{font-size:clamp(46px,5.4vw,88px)!important;line-height:.96!important;letter-spacing:-.045em!important;font-weight:500!important;margin:20px 0 0!important}
.f22-story.is-live.is-dots .f22-ph3 p:first-child{font-family:var(--f22-mono)!important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-mute)}
.f22-story.is-live.is-dots .f22-ph3 p:first-child:before{content:"● ";color:var(--f22-olive)}
.f22-story.is-live.is-dots .f22-ph3 ul{position:absolute;left:40px;right:40px;bottom:46px;display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:40px;list-style:none;margin:0;padding:0}
.f22-story.is-live.is-dots .f22-ph3 li{border-top:1px solid var(--f22-line-2);padding:16px 0 0;font-size:14px;line-height:1.5;color:#c9cdbf;font-weight:300;list-style:none}
.f22-story.is-live.is-dots .f22-ph3 li strong{display:block;font-family:var(--f22-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-olive);margin-bottom:8px}
@media (max-width:760px){
  .f22-story.is-live.is-dots .f22-ph1 h1{left:20px;max-width:none;right:20px;top:auto;bottom:220px;font-size:clamp(46px,13vw,72px)!important}
  .f22-story.is-live.is-dots .f22-ph1 p:nth-of-type(3){left:20px;right:20px;bottom:96px}
  .f22-story.is-live.is-dots .et_pb_button_module_wrapper:has(.f22-ph1-btn){left:20px;bottom:30px}
  .f22-story.is-live.is-dots .f22-ph2{left:20px;right:20px;top:12vh}
  .f22-story.is-live.is-dots .f22-ph3 .et_pb_text_inner{padding:16vh 20px 0}
  .f22-story.is-live.is-dots .f22-ph3 ul{left:20px;right:20px;bottom:24px;grid-template-columns:1fr;gap:12px}
}
.f22-story.is-live.is-dots .f22-ph1-btn.et_pb_button_module_wrapper{left:40px;bottom:40px;right:auto;top:auto}

/* ==========================================================================
   v4.3 — SECTIE 3: uitklappende panelen (hover/klik, wisselt vanzelf)
   ========================================================================== */
.f22-maken .f22-tiles-row.is-panels{display:flex!important;gap:12px;height:clamp(460px,62vh,640px);grid-template-columns:none}
.f22-tiles-row.is-panels .f22-tile{position:relative;flex:1 1 0;min-width:0;width:auto!important;margin:0!important;display:block!important;overflow:hidden;border-radius:26px;cursor:pointer;
  transition:flex-grow .8s cubic-bezier(.2,.75,.15,1),border-color .4s,box-shadow .4s;transform:none!important}
.f22-tiles-row.is-panels .f22-tile.is-open{flex-grow:4.2;cursor:default;border-color:rgba(var(--f22-zo,168,182,90),.45);box-shadow:0 40px 90px -40px rgba(0,0,0,.8)}
.f22-tiles-row.is-panels .f22-tile:hover{transform:none!important}
.f22-tiles-row.is-panels .f22-media{position:absolute!important;inset:0;margin:0!important;border-radius:0!important;aspect-ratio:auto!important;height:auto}
.f22-tiles-row.is-panels .f22-media video,.f22-tiles-row.is-panels .f22-media img{transition:transform 1.2s cubic-bezier(.2,.75,.15,1),filter .8s}
.f22-tiles-row.is-panels .f22-tile:not(.is-open) .f22-media video,.f22-tiles-row.is-panels .f22-tile:not(.is-open) .f22-media img{filter:saturate(.5) brightness(.45);transform:scale(1.12)}
.f22-tiles-row.is-panels .f22-tile:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--f22-zd,8,14,11),0) 35%,rgba(var(--f22-zd,8,14,11),.92) 100%)}
.f22-tiles-row.is-panels .f22-tile-text{position:absolute!important;left:0;right:0;bottom:0;z-index:2;padding:30px 32px!important;margin:0!important;opacity:0;transform:translateY(16px);transition:opacity .5s .25s,transform .6s .2s}
.f22-tiles-row.is-panels .f22-tile.is-open .f22-tile-text{opacity:1;transform:none}
.f22-tiles-row.is-panels .f22-tile-text .et_pb_text_inner{max-width:520px;color:#d8dccd}
.f22-tiles-row.is-panels .f22-tile-text h3{font-size:clamp(34px,3.4vw,52px)!important}
.f22-tiles-row.is-panels .f22-vlabel{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-size:22px;letter-spacing:-.01em;color:var(--f22-paper,#f4f0e7);transition:opacity .4s}
.f22-tiles-row.is-panels .f22-vlabel b{font-family:var(--f22-mono);font-weight:400;font-size:11px;letter-spacing:.14em;color:var(--f22-olive);margin-top:14px}
.f22-tiles-row.is-panels .f22-tile.is-open .f22-vlabel{opacity:0}
.f22-tiles-row.is-panels .f22-rec{z-index:3}
.f22-tiles-row.is-panels .f22-tile:not(.is-open) .f22-rec{opacity:0}
.f22-tiles-row.is-panels .f22-tile .f22-pbar{position:absolute;left:32px;right:32px;top:22px;height:2px;z-index:3;background:rgba(var(--f22-zc,244,240,231),.15);border-radius:2px;overflow:hidden;opacity:0}
.f22-tiles-row.is-panels .f22-tile.is-open .f22-pbar{opacity:1}
.f22-tiles-row.is-panels .f22-tile .f22-pbar i{position:absolute;inset:0;background:var(--f22-olive);transform-origin:0 50%;transform:scaleX(0)}
.f22-tiles-row.is-panels .f22-tile.is-open .f22-pbar i{animation:f22-pbar var(--dur,6s) linear forwards}
.f22-tiles-row.is-panels.is-paused .f22-tile.is-open .f22-pbar i{animation-play-state:paused}
@keyframes f22-pbar{to{transform:scaleX(1)}}
@media (max-width:900px){
  .f22-maken .f22-tiles-row.is-panels{flex-direction:column;height:auto}
  .f22-tiles-row.is-panels .f22-tile{flex:0 0 auto;height:86px;transition:height .7s cubic-bezier(.2,.75,.15,1)}
  .f22-tiles-row.is-panels .f22-tile.is-open{height:min(120vw,520px)}
  .f22-tiles-row.is-panels .f22-vlabel{writing-mode:horizontal-tb;transform:translateY(-50%);left:24px;bottom:auto;top:50%;display:flex;gap:12px;align-items:baseline}
  .f22-tiles-row.is-panels .f22-vlabel b{margin:0}
}
.f22-story.is-live.is-dots .f22-ph2{top:16vh!important;left:40px!important;right:auto!important;bottom:auto!important}
@media (max-width:760px){.f22-story.is-live.is-dots .f22-ph2{left:20px!important;top:12vh!important}}

/* ==========================================================================
   v4.4 — RUSTIGE ACHTERGROND
   ========================================================================== */
body.f22-bg-rustig .f22-bg{background:radial-gradient(90% 70% at 70% 0%,#24392e 0%,rgba(36,57,46,0) 60%),radial-gradient(80% 60% at 0% 60%,#1c2e25 0%,rgba(28,46,37,0) 60%),linear-gradient(180deg,#15231c,rgb(var(--f22-zd,15,25,20)))}
body.f22-bg-rustig .f22-bg .f22-beam{display:none}
body.f22-bg-rustig .f22-bg .f22-vign{background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(4,9,6,.55))}
body.f22-bg-rustig.f22-has-bg .f22-ervaar.et_pb_section,body.f22-bg-rustig.f22-has-bg .f22-maken.et_pb_section{background:transparent!important}

/* ==========================================================================
   v4.4 — LAADANIMATIE: 22 tekent zich, FORMA 22 verschijnt, logo vliegt naar het menu
   ========================================================================== */
.f22-intro.f22-intro-v4{position:fixed;inset:0;z-index:100000;background:rgb(var(--f22-zd,15,25,20))!important;display:block;transition:background .9s ease,opacity .5s ease}
.f22-intro-v4 .f22-i4-glow{position:absolute;left:50%;top:50%;width:1000px;height:700px;margin:-350px 0 0 -500px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--f22-zo,168,182,90),.14),transparent);opacity:0;transition:opacity 1.6s ease}
.f22-intro-v4.is-draw .f22-i4-glow{opacity:1}
.f22-intro-v4 .f22-i4-logo{position:absolute;left:50%;top:50%;width:min(580px,78vw);aspect-ratio:580/96;transform-origin:50% 50%;margin-left:calc(min(580px,78vw) / -2);margin-top:calc(min(580px,78vw) * 96 / 580 / -2);will-change:transform}
.f22-intro-v4 .f22-i4-logo img{position:absolute;inset:0;width:100%;height:100%;display:block;clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path 1s cubic-bezier(.65,0,.2,1),opacity .4s ease}
.f22-intro-v4 .f22-i4-logo svg{position:absolute;left:0;top:0;height:100%;width:auto;overflow:visible;transition:opacity .35s ease}
.f22-intro-v4 .f22-i4-logo path{fill:var(--f22-paper,#f4f0e7);fill-opacity:0;stroke:var(--f22-olive);stroke-width:2.2;stroke-linejoin:round;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.25,1),fill-opacity .5s ease,stroke-opacity .5s ease}
.f22-intro-v4.is-draw .f22-i4-logo path{stroke-dashoffset:0!important}
.f22-intro-v4.is-fill .f22-i4-logo path{fill-opacity:1;stroke-opacity:0}
.f22-intro-v4.is-word .f22-i4-logo img{clip-path:inset(0 0 0 0);opacity:1}
.f22-intro-v4.is-word .f22-i4-logo svg{opacity:0;transition-delay:.15s}
.f22-intro-v4 .f22-i4-line{position:absolute;left:50%;top:calc(50% + min(580px,78vw) * 96 / 580 / 2 + 34px);width:180px;height:1px;margin-left:-90px;background:rgba(var(--f22-zc,244,240,231),.12);overflow:hidden;transition:opacity .4s}
.f22-intro-v4 .f22-i4-line i{position:absolute;inset:0;background:var(--f22-olive);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.5s cubic-bezier(.5,0,.3,1)}
.f22-intro-v4.is-draw .f22-i4-line i{transform:scaleX(1)}
.f22-intro-v4.is-flying{background:rgba(var(--f22-zd,15,25,20),0)!important}
.f22-intro-v4.is-flying .f22-i4-line,.f22-intro-v4.is-flying .f22-i4-glow,.f22-intro-v4.is-flying .f22-intro-meta,.f22-intro-v4.is-flying .f22-skip{opacity:0!important}
.f22-intro-v4.is-out{opacity:0;pointer-events:none}
.f22-intro-v4 .f22-intro-meta{position:absolute;left:28px;bottom:28px;font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;color:#a3ab9f;transition:opacity .4s}
.f22-intro-v4 .f22-skip{position:absolute;right:28px;bottom:20px;transition:opacity .4s}
body.f22-intro-on #main-header{opacity:1!important}
body.f22-intro-on #main-header .logo_container{opacity:0!important}
body.f22-intro-on #main-header .container > *:not(.logo_container){opacity:0;transition:opacity .6s}
body.f22-intro-done #main-header .container > *{transition:opacity .8s ease}
body.f22-logo-landed #main-header .logo_container{opacity:1!important;animation:none!important}

/* ==========================================================================
   v4.4 — SECTIE 1 · PLANEET: opening met een planeet van stippen
   ========================================================================== */
.f22-story.is-live.is-planet .f22-ph1 h1{display:block!important;left:50%!important;right:auto!important;top:20%!important;transform:translateX(-50%);width:max-content;max-width:92vw;text-align:center;font-size:clamp(60px,8.4vw,150px)!important;line-height:.9!important;letter-spacing:-.06em!important}
.f22-story.is-live.is-planet .f22-ph1 h1 em{color:var(--f22-olive)!important}
.f22-story.is-live.is-planet .f22-ph1 p:nth-of-type(3){left:50%!important;transform:translateX(-50%);bottom:auto!important;top:calc(20% + clamp(60px,8.4vw,150px) * 1.95);width:min(520px,86vw);max-width:none;text-align:center;font-size:18px}
.f22-story.is-live.is-planet .et_pb_button_module_wrapper:has(.f22-ph1-btn),.f22-story.is-live.is-planet .f22-ph1-btn.et_pb_button_module_wrapper{left:50%!important;right:auto!important;top:calc(20% + clamp(60px,8.4vw,150px) * 1.95 + 92px)!important;bottom:auto!important;transform:translateX(-50%)!important}
.f22-story.is-live.is-planet .f22-ph1-btn{background:transparent!important;color:var(--f22-paper,#f4f0e7)!important;border:1px solid rgba(var(--f22-zc,244,240,231),.3)!important}
.f22-story.is-live.is-planet .f22-ph2{inset:auto!important;left:40px!important;top:16vh!important;max-width:560px;z-index:4}
.f22-story.is-live.is-planet .f22-ph2 .et_pb_text_inner{padding:0!important}
.f22-story.is-live.is-planet .f22-ph2 h2{font-size:clamp(46px,5.4vw,90px)!important;line-height:.96!important;letter-spacing:-.045em!important;font-weight:500!important;margin:18px 0 0!important}
.f22-story.is-live.is-planet .f22-ph2 p:first-child,.f22-story.is-live.is-planet .f22-ph3 p:first-child{font-family:var(--f22-mono)!important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-mute)}
.f22-story.is-live.is-planet .f22-ph2 p:first-child:before,.f22-story.is-live.is-planet .f22-ph3 p:first-child:before{content:"● ";color:var(--f22-olive)}
.f22-story.is-live.is-planet .f22-ph2 p:last-child{margin-top:18px!important;font-size:16px;line-height:1.55;color:#c9cdbf;font-weight:300;max-width:380px}
.f22-story.is-live.is-planet .f22-ph3{inset:0!important;max-width:none}
.f22-story.is-live.is-planet .f22-ph3 .et_pb_text_inner{padding:24vh 40px 0;max-width:720px}
.f22-story.is-live.is-planet .f22-ph3 h2{font-size:clamp(46px,5.4vw,90px)!important;line-height:.96!important;letter-spacing:-.045em!important;font-weight:500!important;margin:20px 0 0!important}
.f22-story.is-live.is-planet .f22-ph3 ul{position:absolute;left:40px;right:40px;bottom:46px;display:grid;grid-template-columns:repeat(3,minmax(0,260px));gap:40px;list-style:none;margin:0;padding:0}
.f22-story.is-live.is-planet .f22-ph3 li{border-top:1px solid var(--f22-line-2);padding:16px 0 0;font-size:14px;line-height:1.5;color:#c9cdbf;font-weight:300;list-style:none}
.f22-story.is-live.is-planet .f22-ph3 li strong{display:block;font-family:var(--f22-mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--f22-olive);margin-bottom:8px}
.f22-story.is-live.is-planet .f22-ph4 h2{font-size:clamp(40px,4.6vw,76px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:500!important}
.f22-story.is-live.is-planet .f22-ph4 em{color:var(--f22-olive)!important}
@media (max-width:760px){
  .f22-story.is-live.is-planet .f22-ph1 h1{top:16%!important;font-size:clamp(50px,15vw,76px)!important}
  .f22-story.is-live.is-planet .f22-ph1 p:nth-of-type(3){top:calc(16% + 30vw);font-size:16px}
  .f22-story.is-live.is-planet .et_pb_button_module_wrapper:has(.f22-ph1-btn){top:calc(16% + 30vw + 110px)!important}
  .f22-story.is-live.is-planet .f22-ph2{left:20px!important;right:20px;top:12vh!important}
  .f22-story.is-live.is-planet .f22-ph3 .et_pb_text_inner{padding:14vh 20px 0}
  .f22-story.is-live.is-planet .f22-ph3 ul{left:20px;right:20px;bottom:24px;grid-template-columns:1fr;gap:12px}
}

/* ==========================================================================
   v4.4 — SECTIE 3: grote lijst met zwevende video
   ========================================================================== */
.f22-maken.has-dlist.et_pb_section{position:relative;overflow:hidden}
.f22-dlist{width:min(1320px,calc(100% - 80px));margin:60px auto 0;border-top:1px solid var(--f22-line-2)}
.f22-ditem{position:relative;display:grid;grid-template-columns:70px minmax(0,1.2fr) minmax(0,1fr) 40px;align-items:center;gap:24px;padding:30px 0;border-bottom:1px solid var(--f22-line-2);color:var(--f22-cream)!important;text-decoration:none;cursor:pointer;transition:opacity .4s}
.f22-ditem .f22-dn{font-family:var(--f22-mono);font-size:12px;letter-spacing:.14em;color:var(--f22-olive)}
.f22-ditem .f22-dt{font-size:clamp(46px,6.4vw,112px);line-height:.95;letter-spacing:-.055em;font-weight:500;transition:transform .6s cubic-bezier(.2,.75,.15,1),color .4s}
.f22-ditem .f22-dt em{font-family:var(--f22-serif)}
.f22-ditem .f22-dd{font-size:15px;line-height:1.55;color:var(--f22-mute);font-weight:300;max-width:380px;opacity:.75;transition:opacity .4s}
.f22-ditem .f22-dtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.f22-ditem .f22-dtags span{font-size:11.5px;padding:5px 9px;border-radius:999px;border:1px solid var(--f22-line-2);color:#dcd7cc}
.f22-ditem .f22-da{font-size:26px;color:var(--f22-olive);transform:translateX(-10px);opacity:0;transition:transform .5s,opacity .4s}
.f22-dlist.has-on .f22-ditem:not(.is-on){opacity:.32}
.f22-ditem.is-on .f22-dt{transform:translateX(26px);color:#fbf9f4}
.f22-ditem.is-on .f22-dt em{color:var(--f22-olive)}
.f22-ditem.is-on .f22-dd{opacity:1}
.f22-ditem.is-on .f22-da{transform:none;opacity:1}
.f22-ditem .f22-dmob{display:none}
.f22-dprev{position:absolute;left:0;top:0;z-index:5;width:340px;height:420px;margin:-210px 0 0 -170px;pointer-events:none;border-radius:22px;overflow:hidden;opacity:0;
  transform:translate3d(-999px,-999px,0);transition:opacity .35s ease,width .4s,height .4s;box-shadow:0 50px 100px -30px rgba(0,0,0,.85),0 0 0 1px rgba(var(--f22-zc,244,240,231),.12);background:rgb(var(--f22-zd,13,22,18))}
.f22-dprev.is-vis{opacity:1}
.f22-dslot{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .45s ease,transform .8s cubic-bezier(.2,.75,.15,1)}
.f22-dslot.is-on{opacity:1;transform:none}
.f22-dslot .f22-media{position:absolute!important;inset:0;margin:0!important;border-radius:0!important;aspect-ratio:auto!important}
.f22-dslot .f22-media .et_pb_code_inner{position:static!important}
.f22-dslot video,.f22-dslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .f22-dlist{width:calc(100% - 32px);margin-top:36px}
  .f22-ditem{grid-template-columns:44px 1fr;gap:6px 14px;padding:22px 0}
  .f22-ditem .f22-dt{font-size:clamp(38px,11vw,60px)}
  .f22-ditem .f22-dd{grid-column:2;display:none}
  .f22-ditem .f22-da{display:none}
  .f22-ditem.is-on .f22-dd{display:block}
  .f22-ditem.is-on .f22-dt{transform:none}
  .f22-ditem .f22-dmob{grid-column:1/-1;position:relative;display:block;height:0;overflow:hidden;border-radius:18px;transition:height .6s cubic-bezier(.2,.75,.15,1)}
  .f22-ditem.is-on .f22-dmob{height:min(110vw,460px);margin-top:10px}
  .f22-ditem .f22-dmob .f22-media{position:absolute!important;inset:0;margin:0!important;aspect-ratio:auto!important}
  .f22-ditem .f22-dmob .et_pb_code_inner{position:static!important}
  .f22-ditem .f22-dmob video,.f22-ditem .f22-dmob img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .f22-dprev{display:none}
}
.f22-maken .f22-tiles-row.f22-hidden-row{display:none!important}

/* ==========================================================================
   v4.5 — SECTIE 1 · UNIVERSUM (voorwerpen tussen de sterren)
   ========================================================================== */
.f22-story.is-live.is-uni .f22-ph1{inset:0;pointer-events:none}
.f22-story.is-live.is-uni .f22-ph1 .et_pb_text_inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);width:min(980px,90vw);text-align:center}
.f22-story.is-live.is-uni .f22-ph1 p,.f22-story.is-live.is-uni .f22-ph1 h1{position:static!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;margin:0 auto!important}
.f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(1){font-family:var(--f22-mono)!important;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--f22-mute);text-align:center!important}
.f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(1):before{content:none!important}
.f22-story.is-live.is-uni .f22-ph1 h1{display:block!important;margin-top:22px!important;text-align:center;font-size:clamp(58px,8.6vw,152px)!important;line-height:.9!important;letter-spacing:-.06em!important}
.f22-story.is-live.is-uni .f22-ph1 h1 em{color:var(--f22-olive)!important}
.f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(2){margin-top:26px!important;max-width:520px!important;font-size:18px;line-height:1.55;color:#c9cdbf;font-weight:300;text-transform:none;letter-spacing:0;font-family:var(--f22-sans)!important}
.f22-story.is-live.is-uni .et_pb_button_module_wrapper:has(.f22-ph1-btn),.f22-story.is-live.is-uni .f22-ph1-btn.et_pb_button_module_wrapper{left:50%!important;right:auto!important;top:auto!important;bottom:13vh!important;transform:translateX(-50%)!important}
.f22-story.is-live.is-uni .f22-ph1-btn{background:linear-gradient(180deg,#fffdf8,var(--f22-paper,#f4f0e7) 55%,#e4ddcc)!important;color:var(--f22-ink,#1f3028)!important;border:0!important}
.f22-story.is-live.is-uni .f22-ph2,.f22-story.is-live.is-uni .f22-ph3{inset:auto!important;left:40px!important;top:50%!important;transform:translateY(-50%);max-width:520px;z-index:4}
.f22-story.is-live.is-uni .f22-ph2 .et_pb_text_inner,.f22-story.is-live.is-uni .f22-ph3 .et_pb_text_inner{padding:0!important;max-width:none}
.f22-story.is-live.is-uni .f22-ph2 h2,.f22-story.is-live.is-uni .f22-ph3 h2{font-size:clamp(44px,5vw,86px)!important;line-height:.96!important;letter-spacing:-.045em!important;font-weight:500!important;margin:18px 0 0!important}
.f22-story.is-live.is-uni .f22-ph2 h2 em,.f22-story.is-live.is-uni .f22-ph3 h2 em{color:var(--f22-olive)!important}
.f22-story.is-live.is-uni .f22-ph2 p:last-child,.f22-story.is-live.is-uni .f22-ph3 p:last-child{margin-top:20px!important;font-size:17px;line-height:1.55;color:#c9cdbf;font-weight:300;max-width:420px}
.f22-story.is-live.is-uni .f22-ph3 ul{display:none}
.f22-story.is-live.is-uni .f22-ph4{left:40px;top:50%!important;transform:translateY(-50%)}
.f22-story.is-live.is-uni .et_pb_button_module_wrapper:has(.f22-ph4-btn),.f22-story.is-live.is-uni .f22-ph4-btn.et_pb_button_module_wrapper{left:40px!important;right:auto!important;top:calc(50% + 110px)!important}
@media (max-width:760px){
  .f22-story.is-live.is-uni .f22-ph1 .et_pb_text_inner{top:30%;transform:translate(-50%,-50%)}
  .f22-story.is-live.is-uni .f22-ph1 h1{font-size:clamp(48px,14vw,72px)!important;margin-top:14px!important}
  .f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(1){font-size:10px;letter-spacing:.12em}
  .f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(2){font-size:15.5px;margin-top:16px!important;padding:0 6px}
  .f22-story.is-live.is-uni .et_pb_button_module_wrapper:has(.f22-ph1-btn){bottom:7vh!important}
  .f22-story.is-live.is-uni .f22-ph2,.f22-story.is-live.is-uni .f22-ph3,.f22-story.is-live.is-uni .f22-ph4{left:20px!important;right:20px!important;top:13vh!important;transform:none;max-width:none}
  .f22-story.is-live.is-uni .f22-ph2 h2,.f22-story.is-live.is-uni .f22-ph3 h2{font-size:clamp(38px,11vw,54px)!important}
  .f22-story.is-live.is-uni .f22-ph2 p:last-child,.f22-story.is-live.is-uni .f22-ph3 p:last-child{font-size:15px}
  .f22-story.is-live.is-uni .et_pb_button_module_wrapper:has(.f22-ph4-btn){left:20px!important;top:auto!important;bottom:10vh!important}
  .f22-story.is-live.is-uni .f22-ph-scroll{display:none}
}
/* tekstblokken niet met transform centreren (JS animeert transform) */
@media (min-width:768px){
.f22-story.is-live.is-uni .f22-ph2,.f22-story.is-live.is-uni .f22-ph3{top:calc(50% - 150px)!important}
.f22-story.is-live.is-uni .f22-ph4{top:calc(50% - 110px)!important}
}
@media (max-width:767px){
.f22-story.is-live.is-uni .f22-ph2,.f22-story.is-live.is-uni .f22-ph3,.f22-story.is-live.is-uni .f22-ph4{top:12vh!important}
.f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(2){display:block!important;opacity:1;color:#c9cdbf!important}
}
/* desktop fase 3: tekst iets breder vrij van voorwerpen */
.f22-story.is-live.is-uni .f22-ph3{z-index:5}
.f22-story.is-live.is-uni .et_pb_button_module_wrapper:has(.f22-ph4-btn),.f22-story.is-live.is-uni .f22-ph4-btn.et_pb_button_module_wrapper{top:calc(50% + 90px)!important}
.f22-story.is-live.is-uni .f22-ph1 .et_pb_text_inner{transform:translate(-50%,-56%)!important}
@media (max-width:760px){
  .f22-story.is-live.is-uni .f22-ph2,.f22-story.is-live.is-uni .f22-ph3,.f22-story.is-live.is-uni .f22-ph4{top:13vh!important}
  .f22-story.is-live.is-uni .et_pb_button_module_wrapper:has(.f22-ph4-btn){top:auto!important;bottom:10vh!important}
  .f22-story.is-live.is-uni .f22-ph1 .et_pb_text_inner{transform:translate(-50%,-50%)!important}
}
/* korte logo-animatie bij menu-klik */
.f22-intro-v4.is-fast .f22-i4-logo path{transition:stroke-dashoffset .55s cubic-bezier(.6,0,.25,1),fill-opacity .3s ease,stroke-opacity .3s ease}
.f22-intro-v4.is-fast .f22-i4-logo img{transition:clip-path .5s cubic-bezier(.65,0,.2,1),opacity .3s ease}
.f22-intro-v4.is-fast .f22-i4-line i{transition-duration:1.2s}
.f22-navcover{position:fixed;inset:0;z-index:100001;background:rgb(var(--f22-zd,15,25,20));opacity:0;transition:opacity .4s ease;display:grid;place-items:center;pointer-events:none}
.f22-navcover.is-in{opacity:1}
.f22-navcover img{width:min(580px,78vw);height:auto;transform:scale(.96);opacity:0;transition:opacity .35s ease .1s,transform 1s cubic-bezier(.76,0,.18,1)}
.f22-navcover.is-in img{opacity:1;transform:scale(1)}
.f22-navcover.is-fly{background:rgba(var(--f22-zd,15,25,20),0);transition:background .6s ease}
.f22-navcover.is-out{opacity:0}
/* v4.5 · losse pagina's: korte opening */
.f22-svc.f22-page-hero{padding:170px 0 40px!important}
.f22-page-hero .f22-page-hero-row{max-width:1180px}
.f22-page-hero .f22-svc-h1 h1{font-size:clamp(46px,6.4vw,104px)!important}
.f22-page-hero .f22-svc-lead .et_pb_text_inner{max-width:620px;margin-bottom:0}
.f22-page-hero + .f22-werkwijze,.f22-page-hero + .f22-ervaar,.f22-page-hero + .f22-werk,.f22-page-hero + .f22-contact{padding-top:60px!important}
@media (max-width:767px){.f22-svc.f22-page-hero{padding:130px 0 20px!important}}
/* v4.6 · SECTIE 1 ALS FILM (zoals een filmische startpagina) */
.f22-hero.f22-story.is-live.is-film.et_pb_section{height:200vh}
.f22-story.is-film .f22-film{position:absolute;inset:0;z-index:1;overflow:hidden;background:#13201a}
.f22-story.is-film .f22-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.02 + var(--f22-film-p,0) * .12));transform-origin:50% 45%}
.f22-story.is-film .f22-film-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--f22-zd,15,25,20),.5) 0%,rgba(var(--f22-zd,15,25,20),0) 22%,rgba(var(--f22-zd,15,25,20),0) 42%,rgba(var(--f22-zd,15,25,20),.9) 100%);opacity:calc(.35 + var(--f22-film-k,0) * .65)}
.f22-story.is-film .f22-prog,.f22-story.is-film .f22-ph2,.f22-story.is-film .f22-ph3,.f22-story.is-film .f22-ph4,.f22-story.is-film .et_pb_button_module_wrapper:has(.f22-ph4-btn){display:none!important}
.f22-story.is-film .f22-ph1{inset:auto 48px 64px 48px!important;top:auto!important;pointer-events:none}
.f22-story.is-film .f22-ph1 .et_pb_text_inner{position:static;display:grid;grid-template-columns:1fr minmax(0,380px);column-gap:60px;align-items:end;padding-right:140px}
.f22-story.is-film .f22-ph1 p,.f22-story.is-film .f22-ph1 h1{position:static!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;margin:0!important;max-width:none!important;width:auto!important}
.f22-story.is-film .f22-ph1 p:nth-of-type(1){grid-column:1/-1;font-family:var(--f22-mono)!important;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#c9cdbf!important;margin-bottom:22px!important;text-align:left}
.f22-story.is-film .f22-ph1 h1{grid-column:1;display:block!important;font-size:clamp(60px,9vw,150px)!important;line-height:.9!important;letter-spacing:-.055em!important;font-weight:500!important;color:var(--f22-paper,#f4f0e7)!important;text-align:left}
.f22-story.is-film .f22-ph1 h1 em{color:var(--f22-olive)!important}
.f22-story.is-film .f22-ph1 p:nth-of-type(2){grid-column:2;font-size:17px;line-height:1.55;color:#dcdccf!important;font-weight:300;text-transform:none;letter-spacing:0;font-family:var(--f22-sans)!important;padding-bottom:10px}
.f22-story.is-film .et_pb_button_module_wrapper:has(.f22-ph1-btn){left:48px!important;right:auto!important;top:auto!important;bottom:24px!important;transform:none}
.f22-story.is-film .f22-ph1-btn{background:transparent!important;border:0!important;border-bottom:1px solid var(--f22-paper,#f4f0e7)!important;border-radius:0!important;padding:0 0 6px!important;color:var(--f22-paper,#f4f0e7)!important;font-size:12px!important;letter-spacing:.24em!important;text-transform:uppercase;box-shadow:none!important}
.f22-story.is-film .f22-ph1-btn:after{display:none!important}
.f22-story.is-film .f22-ph-scroll{opacity:1;right:48px;bottom:28px;z-index:4}
.f22-story.is-film .f22-film-badge{position:absolute;right:44px;bottom:84px;width:104px;height:104px;z-index:4;pointer-events:none;animation:f22spin 22s linear infinite}
.f22-film-badge svg{width:100%;height:100%;overflow:visible}
.f22-film-badge text{font-family:var(--f22-mono),monospace;font-size:9.4px;letter-spacing:3.1px;fill:var(--f22-paper,#f4f0e7)}
.f22-film-badge g path{fill:var(--f22-olive)}
@keyframes f22spin{to{transform:rotate(360deg)}}
@media (max-width:767px){
  .f22-hero.f22-story.is-live.is-film.et_pb_section{height:170vh}
  .f22-story.is-film .f22-ph1{inset:auto 20px 120px 20px!important}
  .f22-story.is-film .f22-ph1 .et_pb_text_inner{grid-template-columns:1fr;padding-right:0;row-gap:18px}
  .f22-story.is-film .f22-ph1 p:nth-of-type(2){grid-column:1;font-size:15.5px}
  .f22-story.is-film .f22-ph1 h1{font-size:clamp(46px,13.5vw,64px)!important}
  .f22-story.is-film .et_pb_button_module_wrapper:has(.f22-ph1-btn){left:20px!important;bottom:70px!important}
  .f22-story.is-film .f22-film-badge{right:18px;bottom:auto;top:92px;width:76px;height:76px}
  .f22-story.is-film .f22-ph-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){.f22-film-badge{animation:none!important}}






/* >>> zand-kleuren (automatisch) */
body.f22-zand .f22-sec .et_pb_button,body.f22-zand .f22-btn{color:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-page .f22-cta,body.f22-zand.f22-page #top-menu > li.f22-menu-cta > a{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-pill strong,body.f22-zand .f22-pill b{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-h1 em{background:linear-gradient(100deg,#c1c8ad 0%,var(--f22-paper,#f4f0e7) 28%,#ffffff 40%,#d5dac7 58%,var(--f22-paper,#f4f0e7) 78%,var(--f22-olive) 100%)}
body.f22-zand .f22-prompt textarea::placeholder{color:#ccd2bc}
body.f22-zand .f22-send{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-g-web{color:#251e18}
body.f22-zand .f22-g-web .f22-wbar i:nth-child(3){background:#838f61}
body.f22-zand .f22-g-web .f22-wnav button{border:1px solid rgba(33,27,21,.18);color:#251e18}
body.f22-zand .f22-g-web .f22-wnav button.is-on{background:var(--f22-ink,#29211b);border-color:var(--f22-ink,#29211b)}
body.f22-zand .f22-g-web .f22-wpage{background:var(--f22-ink,#29211b)}
body.f22-zand .f22-g-web .f22-wpage .f22-wcta{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-g-mat input[type=range]{accent-color:var(--f22-ink,#29211b)}
body.f22-zand .f22-g-motion{background:radial-gradient(70% 70% at 50% 45%,#2b221c,rgb(var(--f22-zd,18,29,24)))}
body.f22-zand .f22-g-motion .f22-mchoices button{color:#d2d7c4}
body.f22-zand .f22-win{background:rgba(26,21,17,.75)}
body.f22-zand .f22-win .f22-wb i:nth-child(3){background:#838f61}
body.f22-zand .f22-intro{background:radial-gradient(70% 70% at 50% 45%,rgba(31,25,20,.55),rgba(var(--f22-zd,6,16,12),.92))!important}
body.f22-zand .f22-g-glass{background:radial-gradient(80% 80% at 50% 40%,#2b221c,#251e18)}
body.f22-zand .f22-g-morph{background:radial-gradient(80% 80% at 50% 40%,#2b221c,#251e18)}
body.f22-zand .f22-portfolio .f22-grid .et_pb_image{background:#16120e}
body.f22-zand .f22-gbar i:nth-child(3){background:#838f61}
body.f22-zand.f22-page #top-menu > li > a{color:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-page #top-menu > li > a:hover,body.f22-zand.f22-page #top-menu > li.current-menu-item > a{color:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-page #top-menu .sub-menu a{color:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-page .f22-cta,body.f22-zand.f22-page #top-menu > li.f22-menu-cta > a{background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)) 0%,var(--f22-ink,#29211b) 60%,rgb(var(--f22-zd,24,38,31)) 100%)!important}
body.f22-zand.f22-page #main-header .mobile_menu_bar:before{color:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-page .et_mobile_menu li a{color:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-page #top-menu .sub-menu li a{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-case-card{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-case-img{background:var(--f22-ink,#29211b)}
body.f22-zand .f22-case-k b{color:#656e4b}
body.f22-zand .f22-case-body h3{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-case-d p:last-child{color:#656e4b}
body.f22-zand .f22-case-go{background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)),var(--f22-ink,#29211b) 60%,rgb(var(--f22-zd,24,38,31)))}
body.f22-zand .f22-case-start{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-case-x{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-form.et_pb_contact_form_container{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-form .input,body.f22-zand .f22-form input.input,body.f22-zand .f22-form textarea.input,body.f22-zand .f22-form select.input{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-form .et_pb_contact_right{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-form .et_pb_contact_submit.et_pb_button{background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)),var(--f22-ink,#29211b) 60%,rgb(var(--f22-zd,24,38,31)))!important}
body.f22-zand .f22-form .et-pb-contact-message{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-form .et_pb_contact_captcha_question{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-foot-col .et_pb_text_inner{color:#d1d6c3}
body.f22-zand .f22-foot-col a{color:#d1d6c3!important}
body.f22-zand .f22-footer .f22-foot-cta{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-story.is-live .f22-ph1 p:nth-of-type(3){color:#cbd1bb}
body.f22-zand .f22-story.is-live .f22-ph2 li{color:#cbd1bb}
body.f22-zand.f22-has-bg .f22-portfolio.et_pb_section,body.f22-zand .f22-portfolio.et_pb_section{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,#000 22%,#070504 100%)!important}
body.f22-zand .f22-svc .f22-svc-cta{background:radial-gradient(80% 120% at 100% 0%,rgba(var(--f22-zo,168,182,90),.25),transparent 60%),linear-gradient(135deg,#2b221c,rgb(var(--f22-zd,22,36,29)))}
body.f22-zand.f22-light,body.f22-zand.f22-light #page-container,body.f22-zand.f22-light #et-main-area,body.f22-zand.f22-light #main-content{color:var(--f22-ink,#29211b)}
body.f22-zand.f22-light .f22-sec .et_pb_text_inner{color:var(--f22-ink,#29211b)}
body.f22-zand.f22-light.f22-has-bg .f22-werk.et_pb_section{background:linear-gradient(180deg,var(--f22-paper,#f4f0e7) 0,var(--f22-ink,#29211b) 12%,rgb(var(--f22-zd,22,36,29)) 50%,var(--f22-ink,#29211b) 88%,var(--f22-paper,#f4f0e7) 100%)!important}
body.f22-zand.f22-light .f22-footer.et_pb_section{background:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-light .f22-intro .f22-skip{color:var(--f22-ink,#29211b)}
body.f22-zand.f22-light .f22-story.is-live .f22-ph4-mark p{background:linear-gradient(180deg,var(--f22-ink,#29211b),rgb(var(--f22-zd,44,67,55)) 55%,rgba(var(--f22-zd,31,48,40),.35))}
body.f22-zand.f22-light .f22-sec:not(.f22-werk):not(.f22-footer) .et_pb_button{background:linear-gradient(180deg,rgb(var(--f22-zd,44,67,55)),var(--f22-ink,#29211b) 60%,rgb(var(--f22-zd,24,38,31)))!important}
body.f22-zand.f22-light .f22-tabs .et_pb_tabs_controls li.et_pb_tab_active{background:var(--f22-ink,#29211b)!important}
body.f22-zand.f22-page .f22-cta,body.f22-zand.f22-page #top-menu > li.f22-menu-cta > a{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-chat-btn i{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-chat-msg.me{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-chat-opts a.is-main{color:var(--f22-ink,#29211b)}
body.f22-zand .f22-orbit .f22-contact-row{background:linear-gradient(180deg,rgba(var(--f22-zd,18,30,24),.82),rgba(8,7,5,.88))!important}
body.f22-zand .f22-orbit .f22-contact-row{background:linear-gradient(180deg,rgba(19,15,12,.62),rgba(6,5,4,.7))!important}
body.f22-zand .f22-footer-v2.et_pb_section{background:#0f0c09!important}
body.f22-zand .f22-tabs.is-flow .et_pb_tab.is-front .et_pb_tab_content{background:linear-gradient(180deg,#272019,#1d1813)!important}
body.f22-zand .f22-orbit .f22-contact-row{background:linear-gradient(180deg,rgba(29,24,19,.55),rgba(var(--f22-zd,8,16,12),.62))!important}
body.f22-zand .f22-orbit .f22-h2 h2{color:#d8ddcc!important}
body.f22-zand .f22-orbit .f22-sub .et_pb_text_inner,body.f22-zand .f22-orbit .f22-intro-text .et_pb_text_inner{color:#b4bd9d!important}
body.f22-zand .f22-orbit .f22-contact-lines p span{color:#859262!important}
body.f22-zand .f22-orbit .f22-contact-lines a{color:#d8ddcc!important}
body.f22-zand .f22-orbit .f22-form.et_pb_contact_form_container{box-shadow:inset 0 1px 0 rgba(216,221,204,.18),0 40px 80px -30px rgba(0,0,0,.8)!important}
body.f22-zand .f22-orbit .f22-form .input,body.f22-zand .f22-orbit .f22-form input.input,body.f22-zand .f22-orbit .f22-form textarea.input,body.f22-zand .f22-orbit .f22-form select.input{background:rgba(16,13,10,.55)!important;color:#eaede4!important}
body.f22-zand .f22-orbit .f22-form select.input option{background:var(--f22-ink,#29211b);color:#eaede4}
body.f22-zand .f22-orbit .f22-form .input::placeholder{color:rgba(216,221,204,.45)!important}
body.f22-zand .f22-orbit .f22-form .input:focus{border-color:#adb693!important}
body.f22-zand .f22-orbit .f22-form .et_pb_contact_submit.et_pb_button{background:linear-gradient(180deg,#b0b998,var(--f22-olive) 60%,#7a865b)!important}
body.f22-zand .f22-orbit .f22-form .et_pb_contact_right,body.f22-zand .f22-orbit .f22-form .et-pb-contact-message,body.f22-zand .f22-orbit .f22-form .et_pb_contact_captcha_question{color:#d8ddcc!important}
body.f22-zand .f22-story.is-live.is-dots .f22-ph2 p:last-child{color:#cbd1bb}
body.f22-zand .f22-story.is-live.is-dots .f22-ph3 li{color:#cbd1bb}
body.f22-zand .f22-tiles-row.is-panels .f22-tile-text .et_pb_text_inner{color:#d8ddcc}
body.f22-zand.f22-bg-rustig .f22-bg{background:radial-gradient(90% 70% at 70% 0%,#2b221c 0%,rgba(43,34,28,0) 60%),radial-gradient(80% 60% at 0% 60%,#271f19 0%,rgba(39,31,25,0) 60%),linear-gradient(180deg,#1d1813,rgb(var(--f22-zd,15,25,20)))}
body.f22-zand.f22-bg-rustig .f22-bg .f22-vign{background:radial-gradient(130% 100% at 50% 40%,transparent 55%,rgba(7,5,4,.55))}
body.f22-zand .f22-story.is-live.is-planet .f22-ph2 p:last-child{color:#cbd1bb}
body.f22-zand .f22-story.is-live.is-planet .f22-ph3 li{color:#cbd1bb}
body.f22-zand .f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(2){color:#cbd1bb}
body.f22-zand .f22-story.is-live.is-uni .f22-ph1-btn{color:var(--f22-ink,#29211b)!important}
body.f22-zand .f22-story.is-live.is-uni .f22-ph2 p:last-child,body.f22-zand .f22-story.is-live.is-uni .f22-ph3 p:last-child{color:#cbd1bb}
@media (max-width:767px){body.f22-zand .f22-story.is-live.is-uni .f22-ph1 p:nth-of-type(2){color:#cbd1bb!important}}
body.f22-zand .f22-story.is-film .f22-film{background:#1b1611}
body.f22-zand .f22-story.is-film .f22-ph1 p:nth-of-type(1){color:#cbd1bb!important}
body.f22-zand .f22-story.is-film .f22-ph1 p:nth-of-type(2){color:#d9decd!important}
/* <<< zand-kleuren */
/* =====================================================================
   v4.7 · THEMA ZAND — beige start, zwarte secties, salie als accent,
   logo (FORMA + 22) in het midden van het menu
   ===================================================================== */
body.f22-zand{--f22-zd:34,28,22;--f22-zm:62,52,42;--f22-zo:142,155,107;--f22-zc:233,226,210;--f22-g0:#241d17;--f22-g1:#2a231c;--f22-g2:#31291f;--f22-g3:#3a3027;
  --f22-cream:#e9e2d2;--f22-cream-2:#f3eee3;--f22-paper:#e9e2d2;--f22-ink:#221b15;--f22-mute:#a19d90;--f22-dim:#77746a;
  --f22-olive:#8e9b6b;--f22-champ:#8e9b6b;--f22-gold:#8e9b6b;--f22-champ-2:#e9e2d2;--f22-zand:#e9e2d2;--f22-bos:#1d3a2a;
  --f22-line:rgba(233,226,210,.12);--f22-line-2:rgba(233,226,210,.2);background:#221b15!important}
body.f22-zand #page-container,body.f22-zand #et-main-area,body.f22-zand #main-content{background:#221b15!important}
body.f22-zand .f22-bg .f22-beam,body.f22-zand .f22-bg .f22-vign{display:none}
body.f22-zand ::selection{background:#8e9b6b;color:#221b15}

/* menu: transparant op het zand, bij scrollen een rustige zandkleurige balk */
body.f22-zand #main-header{top:0!important;left:0!important;right:0!important;width:100%!important;border-radius:0!important;border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:auto;transition:background .4s ease,box-shadow .4s ease!important}
body.f22-zand #main-header:before,body.f22-zand #main-header:after{display:none!important}
body.f22-zand.admin-bar #main-header{top:32px!important}
body.f22-zand.f22-scrolled #main-header{top:0!important;background:rgba(233,226,210,.9)!important;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(34,27,21,.08)!important}
body.f22-zand.admin-bar.f22-scrolled #main-header{top:32px!important}
body.f22-zand #main-header .container{position:relative;padding:22px 40px!important}
body.f22-zand #main-header .logo_container{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;padding:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0;z-index:3}
body.f22-zand #main-header .logo_container:before,body.f22-zand #main-header .logo_container:after{display:none!important}
body.f22-zand #main-header img#logo{height:28px!important;max-height:28px!important}
body.f22-zand #et-top-navigation{flex:1;display:flex!important;align-items:center;padding:0!important;float:none!important;background:none!important;box-shadow:none!important;border:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.f22-zand #et-top-navigation:before,body.f22-zand #et-top-navigation:after{display:none!important}
body.f22-zand #top-menu-nav{flex:1;position:static!important;transform:none!important;left:auto!important;top:auto!important;text-align:left}
body.f22-zand #et-top-navigation{margin-left:0!important}
body.f22-zand #top-menu.f22-split{display:flex!important;width:100%;align-items:center;gap:30px;background:none!important;padding:0!important}
body.f22-zand #top-menu.f22-split > li{padding:0!important}
body.f22-zand #top-menu.f22-split > li.f22-right-start{margin-left:auto}
body.f22-zand #top-menu.f22-split > li.is-moved{display:none!important}
body.f22-zand #top-menu a,body.f22-zand #main-header .f22-cta{color:#221b15!important;font-size:14px!important;font-weight:400!important;letter-spacing:.01em!important;opacity:1!important;padding:0!important;background:none!important;box-shadow:none!important}
body.f22-zand #top-menu > li > a:hover{opacity:.6!important}
body.f22-zand #top-menu li.current-menu-item > a{background:none!important;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
body.f22-zand #main-header .f22-cta{margin-left:30px;padding:10px 18px!important;border-radius:999px;background:#221b15!important;color:#e9e2d2!important;border:0!important}
body.f22-zand #main-header .f22-cta:hover{background:#1d3a2a!important}
body.f22-zand #top-menu .sub-menu{background:#e9e2d2!important;border:1px solid rgba(34,27,21,.1)!important;box-shadow:0 20px 40px -20px rgba(0,0,0,.3)!important}
body.f22-zand #top-menu .sub-menu a{color:#221b15!important}
body.f22-zand .mobile_menu_bar:before{color:#221b15!important}
@media (max-width:980px){
  body.f22-zand #main-header .container{padding:16px 20px!important}
  body.f22-zand #main-header .logo_container{left:20px!important;transform:translateY(-50%)!important}
  body.f22-zand #main-header img#logo{height:22px!important;max-height:22px!important}
  body.f22-zand #top-menu-nav{display:none}
  body.f22-zand #et-top-navigation{justify-content:flex-end}
}

/* sectie 1: zand met de film in een kader, die bij het scrollen schermvullend wordt */
body.f22-zand .f22-story.is-zandfilm .f22-pin{background:#e9e2d2}
body.f22-zand .f22-story.is-zandfilm .f22-film{--g:var(--f22-grow,0);inset:auto;left:calc((1 - var(--g)) * 40px);right:calc((1 - var(--g)) * 40px);top:calc((1 - var(--g)) * 56vh);bottom:calc((1 - var(--g)) * 28px);border-radius:calc((1 - var(--g)) * 20px);background:#2f271f}
body.f22-zand .f22-story.is-zandfilm .f22-film video{transform:none}
body.f22-zand .f22-story.is-zandfilm .f22-film-shade{opacity:calc(var(--f22-grow,0) * .85);background:linear-gradient(180deg,rgba(34,27,21,.55) 0%,rgba(34,27,21,.15) 45%,rgba(34,27,21,.35) 100%)}
body.f22-zand .f22-story.is-zandfilm .f22-ph1{inset:150px 40px auto 40px!important;bottom:auto!important;opacity:1!important;transform:none!important;color:color-mix(in srgb,#e9e2d2 calc(var(--f22-grow,0) * 100%),#221b15)}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 .et_pb_text_inner{padding-right:0}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 p,body.f22-zand .f22-story.is-zandfilm .f22-ph1 h1{color:inherit!important}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 p:nth-of-type(1){opacity:.75}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 p:nth-of-type(1):before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e9b6b;margin-right:10px;vertical-align:1px}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 h1 em{color:color-mix(in srgb,#8e9b6b calc(var(--f22-grow,0) * 100%),#221b15)!important}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 p:nth-of-type(2){opacity:.8}
body.f22-zand .f22-story.is-zandfilm .et_pb_button_module_wrapper:has(.f22-ph1-btn){left:auto!important;right:40px!important;top:calc(56vh - 64px)!important;bottom:auto!important;opacity:calc(1 - var(--f22-grow,0) * 2)!important}
body.f22-zand .f22-story.is-zandfilm .f22-ph1-btn{background:#221b15!important;color:#e9e2d2!important;border:0!important;border-radius:999px!important;padding:12px 22px!important;letter-spacing:.02em!important;text-transform:none;font-size:14px!important}
body.f22-zand .f22-story.is-zandfilm .f22-film-badge{bottom:56px;right:64px;opacity:calc(.4 + var(--f22-grow,0) * .6)}
body.f22-zand .f22-story.is-zandfilm .f22-film-badge g path{fill:#8e9b6b}
body.f22-zand .f22-story.is-zandfilm .f22-ph-scroll{display:none}
body.f22-zand .f22-hero.f22-story.is-live.is-film.et_pb_section{height:230vh}
@media (max-width:767px){
  body.f22-zand .f22-story.is-zandfilm .f22-ph1{inset:104px 20px auto 20px!important}
  body.f22-zand .f22-story.is-zandfilm .f22-film{left:calc((1 - var(--g)) * 16px);right:calc((1 - var(--g)) * 16px);top:calc((1 - var(--g)) * 60vh);bottom:calc((1 - var(--g)) * 16px)}
  body.f22-zand .f22-story.is-zandfilm .et_pb_button_module_wrapper:has(.f22-ph1-btn){left:20px!important;right:auto!important;top:calc(60vh - 62px)!important}
  body.f22-zand .f22-story.is-zandfilm .f22-film-badge{display:none}
  body.f22-zand .f22-hero.f22-story.is-live.is-film.et_pb_section{height:200vh}
}

/* laadscherm en menu-overgang in zand en zwart, logo FORMA + 22 */
body.f22-zand .f22-intro-v4 .f22-i4-logo{aspect-ratio:448/96;width:min(520px,76vw);margin-left:calc(min(520px,76vw) / -2);margin-top:calc(min(520px,76vw) * 96 / 448 / -2)}
body.f22-zand .f22-intro-v4 .f22-i4-logo svg{left:auto;right:0}
body.f22-zand .f22-intro-v4 .f22-i4-logo img{clip-path:inset(0 0 0 100%)}
body.f22-zand .f22-intro-v4.is-word .f22-i4-logo img{clip-path:inset(0 0 0 0)}

/* laadscherm zand: zandkleurig paneel, 22 tekent in zwart, FORMA schuift ernaast, paneel schuift omhoog als gordijn */
body.f22-zand .f22-intro-v4{background:transparent!important}
body.f22-zand .f22-intro-v4:before{content:"";position:absolute;inset:0;background:#e9e2d2;transform:translateY(0);transition:transform .85s cubic-bezier(.76,0,.24,1);box-shadow:0 1px 0 rgba(34,27,21,.12)}
body.f22-zand .f22-intro-v4.is-flying:before{transform:translateY(-100%)}
body.f22-zand .f22-intro-v4.is-out{opacity:0;transition:opacity .25s ease}
body.f22-zand .f22-intro-v4 .f22-i4-glow,body.f22-zand .f22-intro-v4 .f22-intro-meta,body.f22-zand .f22-intro-v4 .f22-skip{display:none!important}
body.f22-zand .f22-intro-v4 .f22-i4-logo path{fill:#221b15;stroke:#221b15;stroke-width:2.6;transition:stroke-dashoffset .6s cubic-bezier(.65,0,.35,1),fill-opacity .2s ease,stroke-opacity .2s ease}
body.f22-zand .f22-intro-v4 .f22-i4-logo img{transition:clip-path .6s cubic-bezier(.7,0,.2,1),opacity .15s ease}
body.f22-zand .f22-intro-v4.is-word .f22-i4-logo svg{opacity:0;transition-delay:.05s}
body.f22-zand .f22-intro-v4 .f22-i4-line{top:calc(50% + min(520px,76vw) * 96 / 448 / 2 + 28px);width:120px;margin-left:-60px;background:rgba(34,27,21,.12)}
body.f22-zand .f22-intro-v4 .f22-i4-line i{background:#8e9b6b;transition-duration:1.3s}
body.f22-zand .f22-intro-v4.is-flying .f22-i4-line{opacity:0;transition:opacity .2s}
body.f22-zand .f22-intro-v4.is-fast .f22-i4-logo path{transition:stroke-dashoffset .36s cubic-bezier(.65,0,.35,1),fill-opacity .15s ease,stroke-opacity .15s ease}
body.f22-zand .f22-intro-v4.is-fast .f22-i4-logo img{transition:clip-path .4s cubic-bezier(.7,0,.2,1),opacity .1s ease}
/* naar een andere pagina: zandpaneel schuift van onder omhoog over de pagina, logo verschijnt */
body.f22-zand .f22-navcover{background:#e9e2d2!important;opacity:1;transform:translateY(100%);transition:transform .45s cubic-bezier(.76,0,.24,1)}
body.f22-zand .f22-navcover.is-in{transform:translateY(0)}
body.f22-zand .f22-navcover img{width:min(520px,76vw);transition:opacity .2s ease .25s,transform .9s cubic-bezier(.76,0,.24,1)}
body.f22-zand .f22-navcover.is-fly{background:transparent!important}

body.f22-zand #top-menu > li > a{border-radius:0!important;box-shadow:none!important}
body.f22-zand #top-menu > li > a:hover{background:none!important}
body.f22-zand #top-menu .sub-menu li a{color:#221b15!important}
body.f22-zand #top-menu .sub-menu li a:before{background:#8e9b6b}
body.f22-zand #main-header .mobile_nav{background:none!important;border:0!important}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 h1 span{color:inherit!important;position:static!important}
/* zand: specificiteit omhoog voor het menu en de openingstekst */
body.f22-zand.f22-page #top-menu > li > a{color:#221b15!important;background:none!important;padding:6px 0!important;font-size:14px!important}
body.f22-zand.f22-page #top-menu > li.current-menu-item > a{color:#221b15!important;background:none!important}
body.f22-zand.f22-page #top-menu.f22-split{display:flex!important;width:100%!important;float:none!important}
body.f22-zand.f22-page #top-menu.f22-split > li{float:none!important;display:block!important}
body.f22-zand.f22-page #top-menu.f22-split > li.f22-right-start{margin-left:auto!important}
body.f22-zand.f22-page #top-menu-nav{width:100%}
body.f22-zand .f22-story.is-zandfilm .f22-ph1 .et_pb_text_inner,
body.f22-zand .f22-story.is-zandfilm .f22-ph1 p,
body.f22-zand .f22-story.is-zandfilm .f22-ph1 h1,
body.f22-zand .f22-story.is-zandfilm .f22-ph1 h1 span{color:color-mix(in srgb,#e9e2d2 calc(min(1,var(--f22-grow,0) * 2.2) * 100%),#221b15)!important}
@media (max-width:980px){
  body.f22-zand.f22-page #et-top-navigation{flex-direction:row!important;justify-content:flex-end!important}
  body.f22-zand #main-header .f22-cta{padding:9px 14px!important;font-size:13px!important;margin-left:0}
}
body.f22-zand.f22-page #top-menu > li.f22-menu-cta{display:none!important}
body.f22-zand .f22-story.is-zandfilm .f22-film-badge{bottom:110px}
body.f22-zand.f22-intro-on .f22-story .f22-pin,body.f22-zand .f22-story .f22-pin{opacity:1!important;transition:none!important}
body.f22-zand .f22-bg,body.f22-zand.f22-bg-rustig .f22-bg{background:radial-gradient(80% 60% at 75% 0%,rgba(142,155,107,.07),rgba(142,155,107,0) 60%),#221b15!important}

/* =====================================================================
   v4.8 · ZAND: één scherm per sectie, bruin vlak, kleuren, snelheid
   ===================================================================== */
body.f22-zand{--f22-esp:#2a231c;--f22-pad:clamp(56px,10svh,110px);--f22-h2:min(5vw,8.4svh,76px)}
/* rustiger en sneller: geen zware glas-filters, korte infade */
body.f22-zand .f22-sec *,body.f22-zand .f22-chat-btn{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.f22-zand.f22-scrolled #main-header{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important}
body.f22-zand .f22-rv{transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
body.f22-zand .f22-bg canvas{display:none}

/* koppen overal gelijk en passend in één scherm */
body.f22-zand .f22-h2 h2,body.f22-zand .f22-werk-head h2{font-size:var(--f22-h2)!important;line-height:.98!important;letter-spacing:-.045em!important}
body.f22-zand .f22-h2 h2 em,body.f22-zand .f22-werk-head h2 em,body.f22-zand h2 em,body.f22-zand h3 em{color:#8e9b6b!important}
body.f22-zand .f22-kicker p,body.f22-zand .f22-kicker .et_pb_text_inner{color:#a19d90!important}
body.f22-zand .f22-kicker p:before{color:#8e9b6b!important;background:#8e9b6b!important}

/* elke sectie één scherm */
body.f22-zand .f22-ervaar.et_pb_section,body.f22-zand .f22-maken.et_pb_section,body.f22-zand .f22-werkwijze.et_pb_section,
body.f22-zand .f22-werk.et_pb_section,body.f22-zand .f22-contact.et_pb_section{min-height:100svh;padding:var(--f22-pad) 0!important;display:flex!important;flex-direction:column;justify-content:center;box-sizing:border-box}

/* 2 · ERVAAR in warm espresso-bruin */
body.f22-zand .f22-ervaar.et_pb_section{background:#2a231c!important}
body.f22-zand .f22-ervaar .f22-intro-text{display:none}
body.f22-zand .f22-ervaar .f22-h2{margin-bottom:clamp(16px,3svh,34px)!important}
body.f22-zand .f22-ervaar .et_pb_all_tabs .et_pb_tab_content{max-height:calc(100svh - var(--f22-pad) * 2 - 200px);min-height:0}
body.f22-zand .f22-ervaar .f22-stage{max-height:calc(100svh - var(--f22-pad) * 2 - 220px)}
body.f22-zand .f22-ervaar .f22-copy h3{font-size:min(3vw,5svh,44px)!important}
body.f22-zand .f22-ervaar .et_pb_tabs_controls li a,body.f22-zand .f22-ervaar .et_pb_tabs_controls li{color:#e9e2d2!important}
body.f22-zand .f22-ervaar .et_pb_tabs_controls li.et_pb_tab_active{background:#e9e2d2!important}
body.f22-zand .f22-ervaar .et_pb_tabs_controls li.et_pb_tab_active a{color:#2a231c!important}
body.f22-zand .f22-ervaar .f22-copy p,body.f22-zand .f22-ervaar .f22-note{color:#c9bfae!important}
body.f22-zand .f22-ervaar .f22-copy a{color:#e9e2d2!important;border-color:#8e9b6b!important}

/* 3 · VIER DISCIPLINES: lijst links, vast beeldvak rechts */
body.f22-zand .f22-maken.et_pb_section{background:#221b15!important}
body.f22-zand .f22-maken .f22-head-row{margin-bottom:clamp(14px,3svh,40px)!important}
body.f22-zand .f22-maken.has-dlist .f22-dlist{width:56%}
body.f22-zand .f22-dlist .f22-ditem{padding:clamp(10px,2.2svh,24px) 0!important}
body.f22-zand .f22-dlist .f22-dt{font-size:min(5vw,8.5svh,84px)!important;color:rgba(233,226,210,.32)!important;transition:color .3s ease}
body.f22-zand .f22-dlist .f22-ditem.is-on .f22-dt{color:#e9e2d2!important}
body.f22-zand .f22-dlist .f22-dn{color:#8e9b6b!important}
body.f22-zand .f22-dlist .f22-dd{color:#a19d90!important}
body.f22-zand .f22-dprev.is-fixed{position:absolute!important;left:auto!important;right:clamp(20px,4vw,60px);top:50%!important;width:min(36vw,560px)!important;height:auto!important;aspect-ratio:4/5;max-height:calc(100svh - 160px);transform:translateY(-38%)!important;opacity:1!important;pointer-events:none;border-radius:20px;overflow:hidden;background:#2a231c;box-shadow:none!important}
body.f22-zand .f22-dprev.is-fixed .f22-dslot{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
body.f22-zand .f22-dprev.is-fixed .f22-dslot.is-on{opacity:1}
body.f22-zand .f22-dcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,40px);color:#e9e2d2;background:#2a231c}
body.f22-zand .f22-dcard .f22-dk{font-family:var(--f22-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#c9bfae}
body.f22-zand .f22-dcard .f22-dk:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e9b6b;margin-right:10px;vertical-align:1px}
body.f22-zand .f22-dcard h4{font-family:var(--f22-serif);font-style:italic;font-weight:400;font-size:min(4.4vw,7.5svh,72px)!important;line-height:1;letter-spacing:-.02em;color:#e9e2d2!important;margin:0!important}
body.f22-zand .f22-dcard ul{list-style:none;margin:0!important;padding:0!important;display:grid;gap:10px}
body.f22-zand .f22-dcard li{padding:12px 0!important;border-top:1px solid rgba(233,226,210,.14);font-size:15px;color:#e9e2d2;display:flex;justify-content:space-between}
body.f22-zand .f22-dcard li span{color:#8e9b6b;font-family:var(--f22-mono);font-size:11px;letter-spacing:.1em}
body.f22-zand .f22-dcard .f22-dshot{flex:1;margin:22px 0;border-radius:12px;background-size:cover;background-position:top center;min-height:0}
body.f22-zand .f22-dcard svg{position:absolute;right:-40px;top:-30px;width:62%;opacity:.07}
body.f22-zand .f22-dcard svg path{fill:#e9e2d2}

/* 4 · WERKWIJZE: vijf stappen naast elkaar */
body.f22-zand .f22-werkwijze .f22-steps-row{grid-template-columns:1fr!important;gap:clamp(20px,4svh,48px)!important}
body.f22-zand .f22-werkwijze .f22-steps-head .f22-intro-text{max-width:520px}
body.f22-zand .f22-werkwijze .f22-steps{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;position:relative}
body.f22-zand .f22-werkwijze .f22-steps:before,body.f22-zand .f22-werkwijze .f22-steps:after{display:none!important}
body.f22-zand .f22-werkwijze .f22-step{padding:22px 0 0!important;border-top:1px solid rgba(233,226,210,.18);margin:0!important;opacity:1!important}
body.f22-zand .f22-werkwijze .f22-step:before,body.f22-zand .f22-werkwijze .f22-step:after{display:none!important}
body.f22-zand .f22-werkwijze .f22-step p:first-child{color:#8e9b6b!important}
body.f22-zand .f22-werkwijze .f22-step h3{font-size:min(2.2vw,4svh,30px)!important;margin:10px 0 12px!important;color:#e9e2d2!important}
body.f22-zand .f22-werkwijze .f22-step p{font-size:15px!important;line-height:1.55!important;color:#a19d90!important}

/* 5 · PROJECTEN: bol past in het scherm */
body.f22-zand .f22-werk.et_pb_section{background:#221b15!important}
body.f22-zand .f22-werk .f22-werk-cta{margin-top:10px!important}

/* 6 · CONTACT: compact, de bol blijft */
body.f22-zand .f22-orbit .f22-contact-row{max-width:980px!important;padding:clamp(24px,4svh,44px) clamp(24px,3vw,44px)!important;background:rgba(34,27,21,.55)!important;border:1px solid rgba(233,226,210,.12)!important;border-radius:24px}
body.f22-zand .f22-contact .f22-h2 h2{font-size:min(4vw,7svh,56px)!important}
body.f22-zand .f22-contact .f22-sub{font-size:15px}
body.f22-zand .f22-contact .et_pb_contact_field{margin-bottom:10px!important}
body.f22-zand .f22-contact textarea{min-height:0!important;height:clamp(70px,12svh,120px)!important}
body.f22-zand .f22-contact input,body.f22-zand .f22-contact select,body.f22-zand .f22-contact textarea{padding:11px 14px!important;background:rgba(233,226,210,.04)!important;border:1px solid rgba(233,226,210,.14)!important;color:#e9e2d2!important}
body.f22-zand .f22-contact .et_pb_contact_submit,body.f22-zand .f22-form .et_pb_button{background:#8e9b6b!important;color:#221b15!important;border:0!important}

/* footer compact */
body.f22-zand .f22-footer-v2.et_pb_section,body.f22-zand .f22-footer.et_pb_section{background:#221b15!important;border-top:1px solid rgba(233,226,210,.1)!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-row{padding:clamp(40px,8svh,70px) 0 clamp(30px,5svh,50px)!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-h h2{font-size:min(4.2vw,7svh,60px)!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-h p{color:#8e9b6b!important}
body.f22-zand .f22-footer-v2 .f22-foot-row{padding:clamp(28px,5svh,50px) 0 0!important}
body.f22-zand .f22-footer-v2 .f22-foot-logo{max-width:170px}
body.f22-zand .f22-footer h4,body.f22-zand .f22-footer .f22-foot-col p:first-child{color:#8e9b6b!important}

/* knoppen en kleine accenten overal salie */
body.f22-zand .et_pb_button:not(.f22-ph1-btn){border-color:rgba(233,226,210,.3)!important}
body.f22-zand .f22-chat-btn{background:#e9e2d2!important;color:#221b15!important;border:0!important;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)!important}
body.f22-zand .f22-chat-btn i{background:#221b15!important;color:#e9e2d2!important}

/* tablet */
@media (max-width:1100px){
  body.f22-zand .f22-werkwijze .f22-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
}
/* telefoon: één scherm per sectie */
@media (max-width:767px){
  body.f22-zand{--f22-pad:clamp(70px,10svh,96px);--f22-h2:min(10.5vw,6.2svh,46px)}
  body.f22-zand .f22-maken.has-dlist .f22-dlist{width:100%}
  body.f22-zand .f22-dlist .f22-dt{font-size:min(10vw,6svh,44px)!important}
  body.f22-zand .f22-dlist .f22-dd,body.f22-zand .f22-dlist .f22-dmob{display:none!important}
  body.f22-zand .f22-dlist .f22-ditem.is-on .f22-dd{display:block!important;font-size:14px}
  body.f22-zand .f22-maken .f22-side{display:none}
  body.f22-zand .f22-werkwijze .f22-steps{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:0 20px 10px;scrollbar-width:none}
  body.f22-zand .f22-werkwijze .f22-steps::-webkit-scrollbar{display:none}
  body.f22-zand .f22-werkwijze .f22-step{flex:0 0 72%;scroll-snap-align:start}
  body.f22-zand .f22-werkwijze .f22-step h3{font-size:24px!important}
    body.f22-zand .f22-contact .f22-sub,body.f22-zand .f22-contact .f22-contact-lines{display:none}
  body.f22-zand .f22-contact .et_pb_contact_field[data-id="telefoon"],body.f22-zand .f22-contact .et_pb_contact_field[data-id="dienst"]{display:none!important}
  body.f22-zand .f22-contact .f22-h2 h2{font-size:34px!important}
  body.f22-zand .f22-contact textarea{height:90px!important}
  body.f22-zand .f22-ervaar .f22-copy p:not(:first-child){display:none}
  body.f22-zand .f22-footer-v2 .f22-foot-row{grid-template-columns:1fr 1fr!important;gap:20px}
  body.f22-zand .f22-footer-v2 .f22-foot-about{display:none}
}
/* telefoon-menu: hamburger links, logo midden, knop rechts */
@media (max-width:980px){
  body.f22-zand #main-header .logo_container{left:50%!important;transform:translate(-50%,-50%)!important}
  body.f22-zand.f22-page #et-top-navigation{justify-content:space-between!important;width:100%}
  body.f22-zand #et_mobile_nav_menu{order:0;display:block!important;margin:0!important;float:none!important}
  body.f22-zand #main-header .f22-cta{order:2}
  body.f22-zand .mobile_nav .mobile_menu_bar{padding:0!important}
  body.f22-zand .mobile_nav .mobile_menu_bar:before{color:#221b15!important;font-size:30px!important}
  body.f22-zand #mobile_menu{left:-20px!important;right:auto!important;width:calc(100vw)!important;background:#e9e2d2!important;border:0!important;top:60px!important;padding:16px 24px 24px!important}
  body.f22-zand #mobile_menu a{color:#221b15!important;font-size:22px!important;padding:12px 0!important;border-bottom:1px solid rgba(34,27,21,.08)}
}
/* menu kleurt mee met de sectie eronder */
body.f22-zand #main-header{transition:background .35s ease,box-shadow .35s ease!important}
body.f22-zand #main-header #top-menu a,body.f22-zand #main-header .mobile_menu_bar:before{transition:color .35s ease}
body.f22-zand.f22-scrolled.f22-h-zand #main-header{background:rgba(233,226,210,.92)!important;box-shadow:none!important}
body.f22-zand.f22-scrolled.f22-h-esp #main-header{background:rgba(42,35,28,.9)!important;box-shadow:none!important}
body.f22-zand.f22-scrolled.f22-h-dark #main-header{background:rgba(34,27,21,.86)!important;box-shadow:none!important}
body.f22-zand.f22-h-esp.f22-page #top-menu > li > a,body.f22-zand.f22-h-dark.f22-page #top-menu > li > a{color:#e9e2d2!important}
body.f22-zand.f22-h-esp .mobile_nav .mobile_menu_bar:before,body.f22-zand.f22-h-dark .mobile_nav .mobile_menu_bar:before{color:#e9e2d2!important}
body.f22-zand.f22-h-esp #main-header .f22-cta,body.f22-zand.f22-h-dark #main-header .f22-cta{background:#e9e2d2!important;color:#221b15!important}
/* SECTIE 1 · ZAND-HERO: kop links, espresso-vlak met rook rechts, vier disciplines onderaan */
body.f22-zand .f22-hero.f22-story.is-live.is-zandhero.et_pb_section{height:100svh!important;min-height:600px}
body.f22-zand .f22-story.is-zandhero .f22-pin{background:#e9e2d2;position:relative!important}
body.f22-zand .f22-story.is-zandhero .f22-prog,body.f22-zand .f22-story.is-zandhero .f22-ph2,body.f22-zand .f22-story.is-zandhero .f22-ph3,
body.f22-zand .f22-story.is-zandhero .f22-ph4,body.f22-zand .f22-story.is-zandhero .f22-ph-scroll,body.f22-zand .f22-story.is-zandhero .et_pb_button_module_wrapper:has(.f22-ph4-btn){display:none!important}
body.f22-zand .f22-story.is-zandhero .et_pb_module{opacity:1!important;transform:none!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1{inset:auto!important;left:40px!important;top:clamp(100px,16svh,170px)!important;width:calc(52% - 60px)!important;pointer-events:auto}
body.f22-zand .f22-story.is-zandhero .f22-ph1 .et_pb_text_inner{position:static;display:block}
body.f22-zand .f22-story.is-zandhero .f22-ph1 p,body.f22-zand .f22-story.is-zandhero .f22-ph1 h1{position:static!important;transform:none!important;margin:0!important;max-width:none!important;width:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;color:#221b15!important;text-align:left!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1 p:nth-of-type(1){font-family:var(--f22-mono)!important;font-size:11.5px!important;letter-spacing:.2em!important;text-transform:uppercase;color:#5a564c!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1 p:nth-of-type(1):before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e9b6b;margin-right:10px;vertical-align:1px}
body.f22-zand .f22-story.is-zandhero .f22-ph1 h1{display:block!important;font-size:min(8.2vw,13.5svh,132px)!important;line-height:.9!important;letter-spacing:-.06em!important;font-weight:500!important;margin-top:clamp(14px,2.4svh,24px)!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1 h1 span{position:static!important;display:inline!important;color:inherit!important;transform:none!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1 h1 em{color:#221b15!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1 p:nth-of-type(2){font-family:var(--f22-sans)!important;font-size:17px!important;line-height:1.55!important;color:#3d3a33!important;max-width:420px!important;margin-top:clamp(14px,2.6svh,26px)!important;text-transform:none;letter-spacing:0}
body.f22-zand .f22-story.is-zandhero .et_pb_button_module_wrapper:has(.f22-ph1-btn){position:absolute!important;left:40px!important;right:auto!important;bottom:auto!important;top:calc(clamp(100px,16svh,170px) + min(8.2vw,13.5svh,132px) * 1.8 + 150px)!important;transform:none!important;opacity:1!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1-btn{background:#221b15!important;color:#e9e2d2!important;border:0!important;border-radius:999px!important;padding:13px 22px!important;font-size:14px!important;text-transform:none!important;letter-spacing:.01em!important}
body.f22-zand .f22-story.is-zandhero .f22-ph1-btn:after{display:none!important}
.f22-zpanel{position:absolute;z-index:4;top:88px;right:40px;bottom:40px;left:54%;border-radius:22px;overflow:hidden;background:#2a231c;color:#e9e2d2;padding:clamp(24px,4svh,44px) clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between}
.f22-esmoke{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.f22-ervaar .f22-esmoke{z-index:0}.f22-ervaar.et_pb_section{position:relative}.f22-ervaar .et_pb_row{position:relative;z-index:1}
.f22-zpanel > *:not(canvas){position:relative;z-index:1}
.f22-zmk{position:absolute!important;right:-50px;top:-36px;width:56%;opacity:.07;z-index:0!important}.f22-zmk path{fill:#e9e2d2}
.f22-zk{font-family:var(--f22-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#c9bfae}
.f22-zk:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e9b6b;margin-right:10px;vertical-align:1px}
.f22-zwords{display:flex;flex-direction:column}
.f22-zwords a{font-family:var(--f22-serif);font-style:italic;font-size:min(6.6vw,11svh,108px);line-height:1.02;letter-spacing:-.03em;color:rgba(233,226,210,.2)!important;text-decoration:none;transition:color .5s ease,transform .5s ease;transform-origin:0 50%}
.f22-zwords a.is-on{color:#e9e2d2!important;transform:translateX(10px)}
.f22-zfoot{display:flex;align-items:center;gap:18px;font-size:14px;color:#c9bfae}
.f22-zline{flex:1}.f22-zmore{color:#e9e2d2!important;border-bottom:1px solid #8e9b6b;padding-bottom:3px}.f22-zcount{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;color:#8e9b6b}
.f22-zitems{position:absolute;z-index:4;left:40px;bottom:40px;width:calc(54% - 80px);display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-top:1px solid rgba(34,27,21,.14);padding-top:16px}
.f22-zitems a{color:#221b15!important;text-decoration:none;display:block}
.f22-zitems b{display:block;font-weight:500;font-size:clamp(15px,1.4vw,20px);letter-spacing:-.02em;transition:color .3s}
.f22-zitems span{display:block;font-size:12.5px;line-height:1.4;color:#6b675d;margin-top:4px}
.f22-zitems a.is-on b{color:#5d6747}
.f22-zitems a.is-on b:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#8e9b6b;margin-right:7px;vertical-align:3px}
@media (max-width:980px){
  .f22-zitems{display:none}
  .f22-zpanel{left:20px;right:20px;top:auto;bottom:20px;height:calc(100svh - 470px);min-height:220px;border-radius:18px}
  .f22-zwords a{font-size:min(11vw,6.6svh,56px)}
  body.f22-zand .f22-story.is-zandhero .f22-ph1{left:20px!important;width:calc(100% - 40px)!important;top:92px!important}
  body.f22-zand .f22-story.is-zandhero .f22-ph1 h1{font-size:min(13.5vw,8svh,64px)!important}
  body.f22-zand .f22-story.is-zandhero .f22-ph1 p:nth-of-type(2){font-size:15px!important}
  body.f22-zand .f22-story.is-zandhero .f22-ph1 p:nth-of-type(1){font-size:10px!important}
  body.f22-zand .f22-story.is-zandhero .et_pb_button_module_wrapper:has(.f22-ph1-btn){left:20px!important;top:auto!important;bottom:calc(100svh - 450px + 20px - 100svh + 100svh)!important;display:none!important}
}
/* disciplines: lijst en beeldvak naast elkaar, nooit over elkaar */
body.f22-zand .f22-maken.has-dlist .et_pb_row{max-width:none!important;width:100%!important;padding:0 40px!important}
body.f22-zand .f22-maken.has-dlist .f22-head-row .et_pb_column:last-child{display:none!important}
body.f22-zand .f22-maken.has-dlist .f22-dlist{width:calc(100% - min(32vw,500px) - 120px)!important;margin-left:40px!important;max-width:none!important}
body.f22-zand .f22-dprev.is-fixed{width:min(32vw,500px)!important;right:40px!important;top:50%!important;transform:translateY(-50%)!important;aspect-ratio:auto;height:min(68svh,620px)!important}
body.f22-zand .f22-dlist .f22-dt{font-size:min(4.6vw,7.4svh,76px)!important}
body.f22-zand .f22-dlist .f22-dtags{display:none!important}
body.f22-zand .f22-dlist .f22-ditem{grid-template-columns:44px minmax(0,1.2fr) minmax(0,1fr) 24px!important}
body.f22-zand .f22-maken .f22-head-row{width:calc(100% - min(32vw,500px) - 80px)!important}
body.f22-zand .f22-ervaar .et_pb_tab_content,body.f22-zand .f22-tabs.is-flow .et_pb_tab.is-front .et_pb_tab_content{background:#241d17!important;border-color:rgba(233,226,210,.1)!important}
@media (max-width:980px){
  body.f22-zand .f22-maken.has-dlist .f22-dlist,body.f22-zand .f22-maken .f22-head-row{width:100%!important;margin-left:0!important}
  body.f22-zand .f22-maken.has-dlist .et_pb_row{padding:0 20px!important}
}
@media (max-width:980px){body.f22-zand .f22-dlist .f22-ditem{grid-template-columns:40px 1fr!important}}
/* v4.8 fijnslijpen */
body.f22-zand .f22-dprev.is-fixed{margin:0!important}
body.f22-zand .f22-poster img.is-lockup{width:min(78%,300px)!important;height:auto!important;max-height:none!important;margin:18px auto!important}
/* tweede knoppen: lijn in zand-crème */
body.f22-zand .f22-werk-cta .et_pb_button,body.f22-zand .f22-glass.et_pb_button,body.f22-zand .f22-foot-cta-btns .et_pb_button_module_wrapper:last-child .et_pb_button{background:transparent!important;color:#e9e2d2!important;border:1px solid rgba(233,226,210,.45)!important;box-shadow:none!important}
body.f22-zand .f22-werk-cta .et_pb_button:hover,body.f22-zand .f22-foot-cta-btns .et_pb_button_module_wrapper:last-child .et_pb_button:hover{background:#e9e2d2!important;color:#221b15!important}
body.f22-zand .f22-foot-cta-btns .et_pb_button_module_wrapper:first-child .et_pb_button,body.f22-zand .f22-svc-btn,body.f22-zand .f22-svc .et_pb_button{background:#e9e2d2!important;color:#221b15!important;border:0!important}
/* eigen hamburger (werkt ook zonder Divi-iconen) */
body.f22-zand .mobile_nav .mobile_menu_bar:before{content:""!important;display:block;width:24px;height:14px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;color:#221b15}
body.f22-zand.f22-h-esp .mobile_nav .mobile_menu_bar:before,body.f22-zand.f22-h-dark .mobile_nav .mobile_menu_bar:before{color:#e9e2d2}
body.f22-zand .mobile_nav .mobile_menu_bar{display:block;width:28px;height:28px;padding:7px 2px!important;box-sizing:border-box}
@media (max-width:980px){
  body.f22-zand .f22-dlist .f22-dmob{display:none!important}
  body.f22-zand .f22-dlist .f22-dd{display:none!important}
  body.f22-zand .f22-dlist .f22-ditem.is-on .f22-dd{display:block!important}
  body.f22-zand .f22-dlist .f22-dt{font-size:min(10vw,7svh,64px)!important}
}
@media (min-width:768px) and (max-width:980px){
  .f22-zwords a{font-size:min(10vw,7.5svh,84px)}
  .f22-zpanel{height:calc(100svh - 500px)}
}
@media (max-width:767px){
  body.f22-zand #main-header .f22-cta{font-size:12px!important;padding:8px 12px!important}
  body.f22-zand #main-header img#logo{height:18px!important;max-height:18px!important}
  body.f22-zand .f22-werk .f22-werk-head h2{font-size:34px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-row .et_pb_column:nth-child(3){display:none!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta-h h2{font-size:30px!important}
}
body.f22-zand.f22-h-esp #main-header .mobile_nav .mobile_menu_bar:before,body.f22-zand.f22-h-dark #main-header .mobile_nav .mobile_menu_bar:before{color:#e9e2d2!important}
body.f22-zand.f22-h-zand #main-header .mobile_nav .mobile_menu_bar:before{color:#221b15!important}
@media (max-width:767px){
  body.f22-zand #main-header .f22-cta{font-size:0!important;padding:8px 14px!important;letter-spacing:0!important}
  body.f22-zand #main-header .f22-cta:before{content:"Start ↗";font-size:12.5px;letter-spacing:.01em}
  body.f22-zand #main-header .f22-cta *{display:none!important}
}

/* v4.8b · alleen zand en espresso als achtergrond, salie als accent */
body.f22-zand,body.f22-zand #page-container,body.f22-zand #et-main-area,body.f22-zand #main-content,body.f22-zand .f22-bg,body.f22-zand.f22-bg-rustig .f22-bg{background:#2a231c!important}
body.f22-zand .f22-werkwijze.et_pb_section,body.f22-zand .f22-werk.et_pb_section,body.f22-zand .f22-contact.et_pb_section,body.f22-zand .f22-help.et_pb_section,body.f22-zand .f22-ervaar.et_pb_section,
body.f22-zand .f22-footer-v2.et_pb_section,body.f22-zand .f22-footer.et_pb_section,body.f22-zand .f22-svc.et_pb_section,body.f22-zand .f22-portfolio.et_pb_section{background:#2a231c!important}
body.f22-zand.f22-has-bg .f22-werk.et_pb_section{background:#2a231c!important}
/* Vier disciplines op zand */
body.f22-zand .f22-maken.et_pb_section{background:#e9e2d2!important;color:#221b15}
body.f22-zand .f22-maken .f22-h2 h2,body.f22-zand .f22-maken .f22-h2 h2 *{color:#221b15!important}
body.f22-zand .f22-maken .f22-h2 h2 em{color:#6f7b52!important}
body.f22-zand .f22-maken .f22-kicker p,body.f22-zand .f22-maken .f22-kicker .et_pb_text_inner{color:#6b6255!important}
body.f22-zand .f22-dlist .f22-ditem{border-color:rgba(34,27,21,.14)!important;color:#221b15!important}
body.f22-zand .f22-dlist .f22-dt{color:rgba(34,27,21,.24)!important}
body.f22-zand .f22-dlist .f22-ditem.is-on .f22-dt{color:#221b15!important}
body.f22-zand .f22-dlist .f22-dd{color:#6b6255!important}
body.f22-zand .f22-dlist .f22-dn{color:#6f7b52!important}
body.f22-zand .f22-dlist .f22-ditem svg,body.f22-zand .f22-dlist .f22-ditem i,body.f22-zand .f22-dlist .f22-darr{color:#221b15!important;stroke:#221b15}

/* =====================================================================
   SECTIE 2 · WAAR KUNNEN WE JE BIJ HELPEN (scroll, één onderdeel per keer)
   ===================================================================== */
.f22-help.et_pb_section{position:relative;padding:0!important;background:#2a231c!important;color:#e9e2d2}
.f22-help.is-live.et_pb_section{height:420vh}
.f22-help.is-live .f22-help-pin{position:sticky!important;top:0;height:100vh;height:100svh;max-width:none!important;width:100%!important;margin:0!important;padding:0!important;z-index:1;overflow:hidden}
.f22-help.is-live .f22-help-pin > .et_pb_column{display:none!important}
.f22-help .f22-esmoke{position:sticky;top:0;height:100svh;margin-bottom:-100svh;z-index:0}
.f22-help-ui{position:absolute;inset:0;display:grid;grid-template-columns:1fr minmax(0,46%);gap:clamp(24px,4vw,70px);align-items:center;padding:clamp(90px,13svh,130px) clamp(20px,4vw,60px) clamp(40px,7svh,70px)}
.f22-help-l{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.f22-help-k{font-family:var(--f22-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#c9bfae}
.f22-help-k:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e9b6b;margin-right:10px;vertical-align:1px}
.f22-help-n{position:absolute;top:0;right:0;font-family:var(--f22-mono);font-size:12px;letter-spacing:.12em;color:#8e9b6b}
.f22-help-words{position:relative;height:min(30svh,260px);overflow:visible}
.f22-hw{position:absolute;left:0;right:0;top:0;transition:transform .7s cubic-bezier(.65,0,.25,1),opacity .5s ease;opacity:0}
.f22-hw b{display:block;font-weight:600;font-size:min(7.4vw,12svh,122px);line-height:.92;letter-spacing:-.05em;text-transform:uppercase;color:#e9e2d2}
.f22-hw b i{font-style:normal;color:#8e9b6b}
.f22-hw p{max-width:420px;font-size:17px;line-height:1.55;color:#c9bfae;margin:22px 0 0!important;opacity:0;transition:opacity .5s ease .15s}
.f22-hw.is-on{opacity:1}.f22-hw.is-on p{opacity:1}
.f22-hw.is-near{opacity:.13}.f22-hw.is-near p{display:none}
.f22-help-bar{height:2px;background:rgba(233,226,210,.14);width:min(320px,70%);overflow:hidden}
.f22-help-bar i{display:block;height:100%;background:#8e9b6b;transform-origin:0 50%;transform:scaleX(.04);transition:transform .2s linear}
.f22-help-l .et_pb_button_module_wrapper{position:absolute;left:0;bottom:34px;margin:0!important}
.f22-help-btn{background:#e9e2d2!important;color:#221b15!important;border:0!important;border-radius:999px!important;padding:12px 22px!important;font-size:14px!important}
.f22-help-btn:after{display:none!important}
.f22-help-r{height:100%;display:flex;align-items:center}
.f22-help-card{position:relative;width:100%;aspect-ratio:1/1.02;max-height:100%;border-radius:24px;background:linear-gradient(160deg,#3a3027,#2f271f 60%,#2a231c);border:1px solid rgba(233,226,210,.1);box-shadow:0 40px 80px -40px rgba(0,0,0,.6);overflow:hidden}
.f22-hc{position:absolute;inset:0;opacity:0;transform:scale(.97);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1);display:grid;place-items:center;padding:8%}
.f22-hc.is-on{opacity:1;transform:none}
.f22-ha{width:100%;height:100%;position:relative;display:flex;flex-direction:column;justify-content:center;gap:5%}
/* 1 · logo-constructie */
.f22-ha-logo svg{width:100%;height:auto;overflow:visible}
.f22-ha-logo .g line{stroke:rgba(233,226,210,.07);stroke-width:.6}
.f22-ha-logo .c{fill:none;stroke:rgba(142,155,107,.45);stroke-width:.7;stroke-dasharray:3 4}
.f22-ha-logo .m path{fill:#e9e2d2;fill-opacity:0;stroke:#e9e2d2;stroke-width:1.6;stroke-dasharray:1400;stroke-dashoffset:1400}
.f22-hc.is-on .f22-ha-logo .m path{animation:f22draw 1.6s cubic-bezier(.6,0,.25,1) .1s forwards,f22fill .6s ease 1.5s forwards}
@keyframes f22draw{to{stroke-dashoffset:0}}@keyframes f22fill{to{fill-opacity:1;stroke-opacity:0}}
.f22-ha-chips{display:flex;align-items:center;gap:8px;justify-content:center}
.f22-ha-chips i{width:22px;height:22px;border-radius:50%;border:1px solid rgba(233,226,210,.25)}
.f22-ha-chips span{margin-left:10px;font-family:var(--f22-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#c9bfae}
/* 2 · animatie-tijdlijn */
.f22-ha-view{position:relative;height:52%;border-radius:14px;background:#221b15;border:1px solid rgba(233,226,210,.08);overflow:hidden}
.f22-ha-view .path{position:absolute;inset:12% 6%;width:88%;height:76%}
.f22-ha-view .path path{fill:none;stroke:rgba(142,155,107,.6);stroke-width:1.4;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.f22-ha-view .mv{position:absolute;width:15%;left:4%;top:62%;fill:#e9e2d2}
.f22-hc.is-on .f22-ha-view .mv{animation:f22mv 3.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes f22mv{0%{left:4%;top:62%;transform:scale(.7) rotate(0)}40%{left:44%;top:6%;transform:scale(1.05) rotate(-8deg)}70%{left:62%;top:52%;transform:scale(.9) rotate(4deg)}100%{left:82%;top:4%;transform:scale(1) rotate(0)}}
.f22-ha-tl{position:relative;border-radius:14px;background:#221b15;border:1px solid rgba(233,226,210,.08);padding:12px 14px 14px}
.f22-ha-tl .hd{display:flex;justify-content:space-between;font-family:var(--f22-mono);font-size:10px;letter-spacing:.1em;color:#8e9b6b;margin-bottom:8px}
.f22-ha-tl .hd span:last-child{color:#c9bfae}
.f22-ha-tl .tr{display:grid;grid-template-columns:62px 1fr;align-items:center;height:22px}
.f22-ha-tl .tr b{font-weight:400;font-size:11px;color:#c9bfae}
.f22-ha-tl .ln{position:relative;height:1px;background:rgba(233,226,210,.12)}
.f22-ha-tl .ln i{position:absolute;top:-4px;width:8px;height:8px;margin-left:-4px;background:#e9e2d2;transform:rotate(45deg);border-radius:1px}
.f22-ha-tl .tr:nth-child(odd) .ln i{background:#8e9b6b}
.f22-ha-tl .ph{position:absolute;top:30px;bottom:10px;left:calc(14px + 62px);width:1px;background:#a65a3a}
.f22-ha-tl .ph:before{content:"";position:absolute;top:-4px;left:-4px;width:9px;height:9px;border-radius:2px;background:#a65a3a}
.f22-hc.is-on .f22-ha-tl .ph{animation:f22ph 3.2s linear infinite}
@keyframes f22ph{from{left:calc(14px + 62px)}to{left:calc(100% - 14px)}}
/* 3 · bedrijfsvideo */
.f22-ha-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#1d1712}
.f22-ha-frame .sky{position:absolute;inset:0;background:linear-gradient(180deg,#3a3027 0%,#6b5442 55%,#a65a3a 100%)}
.f22-ha-frame .sun{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;left:58%;top:34%;background:radial-gradient(circle,#f3e2c4 0%,#e9c79a 40%,rgba(233,199,154,0) 70%)}
.f22-hc.is-on .f22-ha-frame .sun{animation:f22sun 6s ease-in-out infinite alternate}
@keyframes f22sun{to{top:40%;left:52%}}
.f22-ha-frame .hill{position:absolute;left:-10%;right:-10%;border-radius:50% 50% 0 0}
.f22-ha-frame .h1{height:46%;bottom:-18%;background:#4b3d30}.f22-ha-frame .h2{height:40%;bottom:-24%;left:30%;right:-30%;background:#2a231c}
.f22-ha-frame .grid{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 33.2%,rgba(233,226,210,.18) 33.3%,transparent 33.5%,transparent 66.5%,rgba(233,226,210,.18) 66.6%,transparent 66.8%),linear-gradient(180deg,transparent 33.2%,rgba(233,226,210,.18) 33.3%,transparent 33.5%,transparent 66.5%,rgba(233,226,210,.18) 66.6%,transparent 66.8%)}
.f22-ha-frame .rec{position:absolute;left:4%;top:6%;font-family:var(--f22-mono);font-size:10px;letter-spacing:.12em;color:#e9e2d2;display:flex;align-items:center;gap:6px}
.f22-ha-frame .rec i{width:7px;height:7px;border-radius:50%;background:#e2483d}
.f22-hc.is-on .f22-ha-frame .rec i{animation:f22blink 1.2s steps(2) infinite}@keyframes f22blink{50%{opacity:0}}
.f22-ha-frame .ratio{position:absolute;right:4%;top:6%;font-family:var(--f22-mono);font-size:10px;letter-spacing:.12em;color:rgba(233,226,210,.8)}
.f22-ha-frame .bar{position:absolute;left:4%;right:4%;bottom:6%;display:flex;align-items:center;gap:10px;font-family:var(--f22-mono);font-size:10px;color:#e9e2d2}
.f22-ha-frame .play{width:0;height:0;border-left:9px solid #e9e2d2;border-top:6px solid transparent;border-bottom:6px solid transparent}
.f22-ha-frame .pg{flex:1;height:2px;background:rgba(233,226,210,.25);position:relative}
.f22-ha-frame .pg i{position:absolute;left:0;top:0;bottom:0;width:14%;background:#e9e2d2}
.f22-hc.is-on .f22-ha-frame .pg i{animation:f22pg 8s linear infinite}@keyframes f22pg{to{width:100%}}
.f22-ha-story{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.f22-ha-story i{display:block;aspect-ratio:16/10;border-radius:8px}
.f22-ha-story .s0{background:linear-gradient(160deg,#6b5442,#2a231c)}.f22-ha-story .s1{background:linear-gradient(160deg,#8e9b6b,#3a3027)}.f22-ha-story .s2{background:linear-gradient(160deg,#a65a3a,#3a3027)}.f22-ha-story .s3{background:linear-gradient(160deg,#e9e2d2,#8e7a62)}
.f22-ha-story span{display:block;margin-top:6px;font-family:var(--f22-mono);font-size:9.5px;letter-spacing:.08em;color:#c9bfae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 4 · app */
.f22-ha-app{flex-direction:row;align-items:center;justify-content:center;gap:7%}
.f22-ha-phone{position:relative;width:46%;aspect-ratio:9/19;border-radius:28px;background:#e9e2d2;border:6px solid #1d1712;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);padding:26px 12px 12px;display:flex;flex-direction:column;gap:8px;color:#221b15;overflow:hidden}
.f22-ha-phone .nt{position:absolute;top:6px;left:50%;width:34%;height:12px;margin-left:-17%;border-radius:8px;background:#1d1712}
.f22-ha-phone .sb{position:absolute;top:6px;left:14px;right:14px;display:flex;justify-content:space-between;font-size:8px;font-weight:600}
.f22-ha-phone .ah small{display:block;font-size:9px;color:#6b6255}.f22-ha-phone .ah b{font-size:15px;letter-spacing:-.02em}
.f22-ha-phone .cd{border-radius:12px;background:#2a231c;padding:10px;color:#e9e2d2}
.f22-ha-phone .cd small{font-size:8.5px;color:#c9bfae}
.f22-ha-phone .bars{display:flex;align-items:flex-end;gap:4px;height:46px;margin-top:6px}
.f22-ha-phone .bars i{flex:1;background:#8e9b6b;border-radius:3px;height:20%;transition:height .8s cubic-bezier(.2,.7,.2,1)}
.f22-hc.is-on .f22-ha-phone .bars i:nth-child(1){height:40%}.f22-hc.is-on .f22-ha-phone .bars i:nth-child(2){height:62%}.f22-hc.is-on .f22-ha-phone .bars i:nth-child(3){height:48%}.f22-hc.is-on .f22-ha-phone .bars i:nth-child(4){height:80%}.f22-hc.is-on .f22-ha-phone .bars i:nth-child(5){height:58%}.f22-hc.is-on .f22-ha-phone .bars i:nth-child(6){height:92%;background:#e9e2d2}.f22-hc.is-on .f22-ha-phone .bars i:nth-child(7){height:70%}
.f22-ha-phone .rw{display:flex;align-items:center;gap:8px;padding:7px;border-radius:10px;background:rgba(34,27,21,.06)}
.f22-ha-phone .rw i{width:22px;height:22px;border-radius:7px;background:#8e9b6b;flex:0 0 auto}.f22-ha-phone .rw:nth-of-type(2) i{background:#a65a3a}
.f22-ha-phone .rw b{display:block;font-size:9.5px}.f22-ha-phone .rw small{font-size:8px;color:#6b6255}
.f22-ha-phone .tb{margin-top:auto;display:flex;justify-content:space-around;padding-top:8px;border-top:1px solid rgba(34,27,21,.1)}
.f22-ha-phone .tb i{width:14px;height:14px;border-radius:4px;background:rgba(34,27,21,.2)}.f22-ha-phone .tb i.on{background:#221b15}
.f22-ha-icon{display:flex;flex-direction:column;align-items:center;gap:12px}
.f22-ha-icon svg{width:min(9vw,110px);height:auto;padding:22%;box-sizing:content-box;border-radius:26%;background:#8e9b6b;fill:#221b15;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.f22-ha-icon span{font-family:var(--f22-mono);font-size:10px;letter-spacing:.14em;color:#c9bfae}
/* telefoon en tablet */
@media (max-width:900px){
  .f22-help.is-live.et_pb_section{height:380vh}
  .f22-help-ui{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:stretch;padding:84px 20px 24px;gap:16px}
  .f22-help-l{height:auto;min-height:0}
  .f22-help-words{height:min(19svh,170px);margin-top:14px}
  .f22-hw b{font-size:min(13vw,7.5svh,64px)}
  .f22-hw p{font-size:14.5px;margin-top:10px!important}
  .f22-help-bar{margin-top:8px}
  .f22-help-l .et_pb_button_module_wrapper{display:none}
  .f22-help-r{min-height:0;align-items:flex-start;justify-content:center}
  .f22-help-card{width:auto;height:100%;max-width:100%;aspect-ratio:1/1.05}
}
.f22-hw b{white-space:nowrap;width:max-content;max-width:none}
.f22-help-words{width:100%}
.f22-hw.is-near{opacity:.12}
@media (max-width:900px){
  .f22-help-card{width:100%;height:100%;aspect-ratio:auto}
  .f22-hc{padding:6%}
  .f22-ha-logo svg{max-height:100%}
}
@media (max-width:900px){.f22-hw.is-near{opacity:0}.f22-help-n{position:static;display:block;margin-top:6px}}
/* subpagina's: opening in zand, rest in espresso */
body.f22-zand .f22-svc.f22-svc-hero.et_pb_section,body.f22-zand .f22-svc.f22-page-hero.et_pb_section{background:#e9e2d2!important;color:#221b15}
body.f22-zand .f22-svc-hero .f22-svc-h1 h1,body.f22-zand .f22-page-hero .f22-svc-h1 h1{color:#221b15!important}
body.f22-zand .f22-svc-hero .f22-svc-h1 h1 em,body.f22-zand .f22-page-hero .f22-svc-h1 h1 em{color:#6f7b52!important}
body.f22-zand .f22-svc-hero .f22-svc-lead .et_pb_text_inner,body.f22-zand .f22-page-hero .f22-svc-lead .et_pb_text_inner,body.f22-zand .f22-svc-hero .f22-svc-facts,body.f22-zand .f22-svc-hero .f22-svc-facts *{color:#4d463b!important}
body.f22-zand .f22-svc-hero .f22-svc-facts strong{color:#221b15!important}
body.f22-zand .f22-svc .f22-svc-crumb .et_pb_text_inner p{color:#6b6255!important;border-color:rgba(34,27,21,.18)!important}
body.f22-zand .f22-svc .f22-svc-crumb .et_pb_text_inner p:before{background:#8e9b6b!important}
body.f22-zand .f22-svc-hero .f22-svc-btn{background:#221b15!important;color:#e9e2d2!important}
body.f22-zand .f22-svc.f22-svc-hero.et_pb_section{min-height:100svh;display:flex!important;flex-direction:column;justify-content:center;padding:110px 0 50px!important}
body.f22-zand .f22-svc.f22-page-hero.et_pb_section{padding:150px 0 70px!important}
body.f22-zand .f22-svc-zpanel{position:relative;aspect-ratio:4/5;max-height:72svh;border-radius:22px;overflow:hidden;background:#2a231c;color:#e9e2d2;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between}
body.f22-zand .f22-svc-zpanel > *:not(canvas){position:relative;z-index:1}
body.f22-zand .f22-svc-zpanel b{font-family:var(--f22-serif);font-style:italic;font-weight:400;font-size:min(6vw,10svh,96px);line-height:1;letter-spacing:-.03em}
body.f22-zand .f22-svc-zpanel ul{list-style:none;margin:0!important;padding:0!important}
body.f22-zand .f22-svc-zpanel li{padding:12px 0!important;border-top:1px solid rgba(233,226,210,.14);display:flex;justify-content:space-between;font-size:15px}
body.f22-zand .f22-svc-zpanel li span{font-family:var(--f22-mono);font-size:11px;color:#8e9b6b}
body.f22-zand .f22-svc-media .f22-svc-video,body.f22-zand .f22-svc-media .f22-svc-shot{display:none!important}
body.f22-zand .f22-svc-card{background:rgba(233,226,210,.04)!important;border-color:rgba(233,226,210,.12)!important}
body.f22-zand .f22-svc-card p:first-child{color:#8e9b6b!important;background:rgba(142,155,107,.14)!important}
@media (max-width:980px){body.f22-zand .f22-svc-zpanel{aspect-ratio:auto;height:42svh}}
/* zwart eruit: projecten en contact in espresso */
body.f22-zand .f22-contact.f22-orbit.et_pb_section,body.f22-zand.f22-has-bg .f22-contact.f22-orbit.et_pb_section{background:#2a231c!important}
body.f22-zand .f22-orbit:before,body.f22-zand .f22-werk:before{display:none!important}
body.f22-zand .f22-orbit:after{background:radial-gradient(60% 55% at 50% 50%,transparent 55%,rgba(42,35,28,.8) 100%)!important}
body.f22-zand .f22-sphere-shade{background:linear-gradient(#2a231c 0%,rgba(42,35,28,0) 16%,rgba(42,35,28,0) 84%,#2a231c 100%)!important}
body.f22-zand .f22-werk .f22-werk-head,body.f22-zand .f22-werk .f22-werk-head *{background:none!important}
body.f22-zand .f22-sphere-card span{background:rgba(34,27,21,.8)!important}

/* v4.9 · zandrook achter lichte vlakken, projecten weer groot */
body.f22-zand .f22-story.is-zandhero .f22-pin > .f22-esmoke{z-index:0}
body.f22-zand .f22-story.is-zandhero .f22-pin > .et_pb_column{position:relative;z-index:2}
body.f22-zand .f22-maken.et_pb_section,body.f22-zand .f22-svc-hero.et_pb_section,body.f22-zand .f22-page-hero.et_pb_section{position:relative}
body.f22-zand .f22-maken > .f22-esmoke,body.f22-zand .f22-svc-hero > .f22-esmoke,body.f22-zand .f22-page-hero > .f22-esmoke{z-index:0}
body.f22-zand .f22-maken > .et_pb_row,body.f22-zand .f22-maken > .f22-dlist,body.f22-zand .f22-svc-hero > .et_pb_row,body.f22-zand .f22-page-hero > .et_pb_row{position:relative;z-index:1}
body.f22-zand .f22-maken > .f22-dprev{z-index:2}
body.f22-zand .f22-werk.et_pb_section{min-height:0;display:block!important}
body.f22-zand .f22-orbit .f22-contact-row{background:rgba(42,35,28,.3)!important}

/* ===== v4.10 · SECTIE 1 · ZO KRIJGT EEN MERK VORM (paginavullend, kop erin) ===== */
body.f22-zand .f22-hero.f22-story.is-live.is-make.et_pb_section{height:100svh!important;min-height:640px!important;background:#2a231c!important}
body.f22-zand .f22-story.is-make .f22-pin{height:100%!important;background:#2a231c!important;overflow:hidden}
body.f22-zand .f22-story.is-make .f22-pin > .et_pb_column{position:static!important}
.f22-mk-panel{position:absolute;inset:0;z-index:1;background:#2a231c;overflow:hidden}
.f22-mk-panel:before{content:"";position:absolute;inset:0;background:radial-gradient(45% 50% at 68% 45%,rgba(142,155,107,.2),transparent 70%);z-index:1;pointer-events:none}
.f22-mk-panel > canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.8}
body.f22-zand .f22-story.is-make .f22-mk-l{position:absolute;z-index:3;left:40px;bottom:44px;width:min(560px,38%)}
body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-l .f22-ph1{position:static!important;inset:auto!important;left:auto!important;top:auto!important;width:auto!important;opacity:1!important;transform:none!important;pointer-events:auto}
body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-l .f22-ph1 p:nth-of-type(1){color:#c9bfae!important}
body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-l .f22-ph1 p:nth-of-type(n+2){display:none!important}
body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-l .f22-ph1 h1{color:#e9e2d2!important;font-size:min(5.6vw,11svh,96px)!important;line-height:.98!important;letter-spacing:-.05em!important;margin-top:clamp(14px,2.4svh,22px)!important}
body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-l .f22-ph1 h1 em{font-family:var(--f22-serif)!important;font-style:italic!important;font-weight:400!important;letter-spacing:-.03em!important;color:#aab586!important}
body.f22-zand .f22-story.is-make .f22-mk-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3svh,28px)}
body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-btns .et_pb_button_module_wrapper{position:static!important;display:block!important;inset:auto!important;transform:none!important;opacity:1!important;margin:0!important;pointer-events:auto!important}
body.f22-zand .f22-story.is-make .f22-mk-btns .et_pb_button{display:inline-flex!important;border-radius:999px!important;padding:13px 22px!important;font-size:14px!important;line-height:1.2!important;text-transform:none!important;letter-spacing:.01em!important;border:1px solid #e9e2d2!important;transition:background .3s,color .3s}
body.f22-zand .f22-story.is-make .f22-mk-btns .et_pb_button:after{display:none!important}
body.f22-zand .f22-story.is-make .f22-mk-btns .f22-ph1-btn2{background:#e9e2d2!important;color:#221b15!important}
body.f22-zand .f22-story.is-make .f22-mk-btns .f22-ph1-btn{background:transparent!important;color:#e9e2d2!important;border-color:rgba(233,226,210,.4)!important}
body.f22-zand .f22-story.is-make .f22-mk-btns .f22-ph1-btn:hover{background:#e9e2d2!important;color:#221b15!important}
.f22-mk-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:clamp(22px,4svh,40px)}
.f22-mk-steps div{font:10px/1.3 var(--f22-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(233,226,210,.42);transition:color .3s;white-space:nowrap}
.f22-mk-steps div:before{content:"";display:block;height:2px;margin-bottom:9px;background:rgba(233,226,210,.15) linear-gradient(#8e9b6b,#8e9b6b) no-repeat;background-size:calc(var(--p,0) * 100%) 100%}
.f22-mk-steps div.on{color:#e9e2d2}
.f22-mk-st{position:absolute;z-index:2;left:0;top:0;width:760px;height:820px;transform-origin:0 0}
.f22-mk-st *{box-sizing:border-box}
.f22-mk-ab{position:absolute;left:110px;top:150px;width:540px;height:340px;background:#e9e2d2;border-radius:14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8);transform-origin:0 0}
.f22-mk-ab .gr{position:absolute;inset:0;border-radius:14px;background-image:linear-gradient(rgba(34,27,21,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,27,21,.06) 1px,transparent 1px);background-size:27px 27px}
.f22-mk-ab .nm{position:absolute;left:0;top:-26px;font-family:var(--f22-mono);font-size:11px;color:#a99d88;letter-spacing:.1em}
.f22-mk-ab .lg{position:absolute;left:100px;top:135px;width:340px;height:72.9px}
.f22-mk-ab .lg img{position:absolute;inset:0;width:100%!important;max-width:none!important;height:auto}
.f22-mk-ab .lg svg{position:absolute;left:265.6px;top:0;width:74.4px;height:72.9px;overflow:visible}
.f22-mk-ab .lg path{fill:transparent;stroke:#221b15;stroke-width:2.2;vector-effect:non-scaling-stroke}
.f22-mk-ab .ancs i{position:absolute;width:7px;height:7px;margin:-3.5px;background:#e9e2d2;border:1.4px solid #5f6b44}
.f22-mk-ab .sel{position:absolute;border:1px solid #8e9b6b;pointer-events:none}
.f22-mk-sw{position:absolute;left:110px;top:516px;display:flex;gap:10px;align-items:center;opacity:0}
.f22-mk-sw i{width:34px;height:34px;border-radius:50%;border:2px solid rgba(233,226,210,.2)}
.f22-mk-sw span{font-family:var(--f22-mono);font-size:11px;color:#a99d88;margin-left:6px;letter-spacing:.08em}
.f22-mk-tools{position:absolute;left:40px;top:150px;width:44px;background:#1b1611;border:1px solid rgba(233,226,210,.1);border-radius:12px;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.f22-mk-tools b{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#a99d88;font:500 13px/1 var(--f22-sans)}
.f22-mk-tools b.on{background:#5f6b44;color:#e9e2d2}
.f22-mk-cur{position:absolute;left:0;top:0;z-index:20;opacity:0}
.f22-mk-cur svg{width:20px;display:block}.f22-mk-cur path{fill:#8e9b6b;stroke:#2a231c;stroke-width:1.4}
.f22-mk-cur span{position:absolute;left:16px;top:18px;background:#8e9b6b;color:#221b15;font:500 12px/1 var(--f22-sans);padding:5px 9px;border-radius:999px;white-space:nowrap}
.f22-mk-cur.k path{fill:#e9e2d2}.f22-mk-cur.k span{background:#e9e2d2}
.f22-mk-bub{position:absolute;left:400px;top:64px;background:#e9e2d2;color:#221b15;font:14px/1.3 var(--f22-sans);padding:10px 14px;border-radius:14px 14px 14px 4px;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);white-space:nowrap;opacity:0}
.f22-mk-bub small{display:block;font-size:11px;color:#6b6255;margin-bottom:2px}
.f22-mk-phone{position:absolute;left:470px;top:110px;width:200px;height:410px;border-radius:34px;background:#14100c;padding:8px;box-shadow:0 40px 70px -30px rgba(0,0,0,.9);opacity:0}
.f22-mk-phone .scr{width:100%;height:100%;border-radius:27px;background:#5f6b44;position:relative;overflow:hidden;display:grid;place-items:center}
.f22-mk-phone .scr img{width:70%!important;height:auto}
.f22-mk-phone .scr i{position:absolute;bottom:40px;left:50%;width:40px;height:3px;margin-left:-20px;border-radius:2px;background:rgba(233,226,210,.3);overflow:hidden}
.f22-mk-phone .scr i:after{content:"";position:absolute;inset:0;background:#e9e2d2;transform-origin:0 0;transform:scaleX(var(--p,0))}
.f22-mk-phone .nt{position:absolute;top:10px;left:50%;width:60px;height:16px;margin-left:-30px;background:#14100c;border-radius:9px}
.f22-mk-c1,.f22-mk-c2{position:absolute;width:300px;height:176px;border-radius:10px;display:grid;place-items:center;box-shadow:0 40px 70px -30px rgba(0,0,0,.9);opacity:0}
.f22-mk-c1{left:300px;top:560px;background:#e9e2d2}.f22-mk-c2{left:130px;top:600px;background:#221b15}
.f22-mk-c1 img,.f22-mk-c2 img{width:58%!important;height:auto}
.f22-mk-c1 small{position:absolute;left:18px;bottom:14px;font:10px var(--f22-mono);color:#6b6255;letter-spacing:.12em}
/* stap 5 · website */
.f22-mk-web{position:absolute;left:40px;top:170px;width:500px;height:360px;border-radius:12px;background:#f3eee3;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);opacity:0;transform-origin:50% 100%}
.f22-mk-web .bar{height:28px;background:#ddd3bf;display:flex;align-items:center;gap:6px;padding:0 12px}
.f22-mk-web .bar i{width:8px;height:8px;border-radius:50%;background:#bdb29d}
.f22-mk-web .bar span{margin-left:12px;background:#ece5d6;border-radius:6px;padding:3px 40px 3px 10px;font:10px var(--f22-mono);color:#6b6255}
.f22-mk-web .pg{padding:16px 22px}
.f22-mk-web .nav{display:flex;align-items:center;gap:16px}
.f22-mk-web .nav img{width:90px!important;height:auto;margin-right:auto}
.f22-mk-web .nav u{width:34px;height:5px;border-radius:3px;background:#cfc5b1;text-decoration:none}
.f22-mk-web .nav b{width:56px;height:20px;border-radius:999px;background:#221b15}
.f22-mk-web .hh{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:26px;align-items:center}
.f22-mk-web .tx s{display:block;height:20px;border-radius:5px;background:#221b15;width:92%;margin-bottom:9px;text-decoration:none}
.f22-mk-web .tx s.s2{width:64%;background:#5f6b44}
.f22-mk-web .tx p{height:6px;border-radius:3px;background:#cfc5b1;margin:14px 0 0!important;padding:0!important;width:96%}
.f22-mk-web .tx p.p2{width:70%;margin-top:7px!important}
.f22-mk-web .tx em{display:block;width:92px;height:26px;border-radius:999px;background:#8e9b6b;margin-top:18px}
.f22-mk-web .im{height:150px;border-radius:10px;background:#5f6b44;display:grid;place-items:center}
.f22-mk-web .im svg{width:54px}.f22-mk-web .im path{fill:#e9e2d2}
.f22-mk-web .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.f22-mk-web .row i{height:52px;border-radius:8px;background:#e4dccb}
/* stap 5 · social media */
.f22-mk-soc{position:absolute;left:470px;top:250px;width:240px;border-radius:16px;background:#f3eee3;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);opacity:0}
.f22-mk-soc .hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.f22-mk-soc .av{width:28px;height:28px;border-radius:50%;background:#2a231c;display:grid;place-items:center}
.f22-mk-soc .av svg{width:14px}.f22-mk-soc .av path{fill:#e9e2d2}
.f22-mk-soc .hd b{font:600 12px/1 var(--f22-sans);color:#221b15}
.f22-mk-soc .dots{margin-left:auto;font-size:10px;color:#8a7f6c;letter-spacing:.1em}
.f22-mk-soc .im{aspect-ratio:1;border-radius:10px;background:#5f6b44;display:grid;place-items:center}
.f22-mk-soc .im img{width:66%!important;height:auto}
.f22-mk-soc .ft{display:flex;gap:12px;margin-top:10px;font-size:15px;color:#221b15}
.f22-mk-soc .ft span{display:inline-block;line-height:1}
.f22-mk-soc .hrt{transition:color .2s}.f22-mk-soc .hrt.on{color:#a65a3a}
.f22-mk-soc .cap s{display:block;height:5px;border-radius:3px;background:#cfc5b1;margin-top:9px;width:90%;text-decoration:none}.f22-mk-soc .cap s.s2{width:56%;margin-top:6px}
.f22-mk-tag{position:absolute;font:10px var(--f22-mono);letter-spacing:.18em;text-transform:uppercase;color:#e9e2d2;display:flex;gap:8px;align-items:center;opacity:0}
.f22-mk-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:#8e9b6b}
.f22-mk-tag.t1{left:470px;top:84px}.f22-mk-tag.t2{left:130px;top:574px}.f22-mk-tag.t3{left:40px;top:144px}.f22-mk-tag.t4{left:566px;top:224px}
@media (max-width:980px),(max-width:1200px) and (orientation:portrait){
  body.f22-zand .f22-story.is-make .f22-mk-l{left:20px;right:20px;bottom:24px;width:auto}
  body.f22-zand .f22-story.is-make .f22-mk-l:before{content:"";position:absolute;left:-20px;right:-20px;bottom:-24px;height:calc(100% + 90px);background:linear-gradient(transparent,#2a231c 38%);z-index:-1}
  body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-l .f22-ph1 h1{font-size:min(12vw,7svh,64px)!important}
  body.f22-zand .f22-story.is-make .f22-mk-btns .et_pb_button{padding:12px 18px!important;font-size:13.5px!important}
  .f22-mk-steps{gap:5px;margin-top:20px}.f22-mk-steps div{font-size:8.5px;letter-spacing:.04em}
}
@media (max-width:980px),(max-width:1200px) and (orientation:portrait){ .f22-mk-steps{padding-right:72px} }
@media (min-width:600px) and (max-width:1200px) and (orientation:portrait){ .f22-mk-steps{padding-right:190px} }

/* ===== v4.11 · OM EN OM BRUIN EN BEIGE ===== */
.f22-help.is-live.et_pb_section{height:var(--f22-help-h,420vh)}
/* — bruine openingen (pagina's en diensten) — */
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b{background:#2a231c!important;color:#e9e2d2}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-crumb p{color:#c9bfae!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b :is(h1,.f22-svc-h1 h1){color:#e9e2d2!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b :is(h1 em,h1 span em){color:#aab586!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-lead p,html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-facts li,html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-facts span{color:#c9bfae!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-facts strong{color:#e9e2d2!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-facts li{border-color:rgba(233,226,210,.14)!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-btn{background:#e9e2d2!important;color:#221b15!important;border-color:#e9e2d2!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-jump a{color:#e9e2d2!important;border-color:rgba(233,226,210,.14)!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-jump strong{color:#aab586!important}
html body.f22-zand .et_pb_section.f22-svc-hero.f22-tone-b .f22-svc-zpanel{background:#352c23!important;border:1px solid rgba(233,226,210,.1)}

/* — beige secties — */
html body.f22-zand .et_pb_section.f22-tone-z:not(.f22-maken){background:#e9e2d2!important;color:#221b15}
html body.f22-zand .et_pb_section.f22-tone-z:not(.f22-maken) :is(.f22-kicker p,.f22-svc-crumb p){color:#5a564c!important}
html body.f22-zand .et_pb_section.f22-tone-z:not(.f22-maken) :is(h1,h2,h3,h4){color:#221b15!important}
html body.f22-zand .et_pb_section.f22-tone-z:not(.f22-maken) :is(h1,h2,h3) em{color:#5f6b44!important}
html body.f22-zand .et_pb_section.f22-tone-z:not(.f22-maken) :is(.f22-svc-side p,.f22-intro-text p,.f22-sub p,.f22-svc-lead p){color:#4d463b!important}
/* kaarten, pakketten */
html body.f22-zand .et_pb_section.f22-tone-z :is(.f22-svc-card,.f22-pack,.f22-svc-step){background:rgba(255,253,248,.55)!important;border:1px solid rgba(34,27,21,.1)!important;box-shadow:none!important}
html body.f22-zand .et_pb_section.f22-tone-z :is(.f22-svc-card,.f22-pack,.f22-svc-step) :is(p,li){color:#4d463b!important}
html body.f22-zand .et_pb_section.f22-tone-z :is(.f22-svc-card,.f22-pack,.f22-svc-step) p:first-child{color:#5f6b44!important}
html body.f22-zand .et_pb_section.f22-tone-z .f22-pack .f22-price{color:#5f6b44!important}
html body.f22-zand .et_pb_section.f22-tone-z .f22-pack li:before{background:#8e9b6b!important}
html body.f22-zand .et_pb_section.f22-tone-z :is(.f22-pack,.f22-svc-card) :is(ul,li){border-color:rgba(34,27,21,.1)!important}
html body.f22-zand .et_pb_section.f22-tone-z :is(.f22-svc-btn,.f22-svc-btn2,.f22-help-btn){background:#221b15!important;color:#e9e2d2!important;border-color:#221b15!important}
/* vragen (accordeon) */
html body.f22-zand .et_pb_section.f22-tone-z .f22-faq :is(.et_pb_toggle,.et_pb_accordion_item){border-color:rgba(34,27,21,.14)!important;background:transparent!important}
html body.f22-zand .et_pb_section.f22-tone-z .f22-faq :is(.et_pb_toggle_title,h5,summary){color:#221b15!important}
html body.f22-zand .et_pb_section.f22-tone-z .f22-faq :is(.et_pb_toggle_title,h5):before{color:#5f6b44!important}
html body.f22-zand .et_pb_section.f22-tone-z .f22-faq :is(.et_pb_toggle_content,.et_pb_toggle_content p){color:#4d463b!important}
html body.f22-zand .et_pb_section.f22-tone-z .f22-svc-cta-h h2{color:#221b15!important}
/* werkwijze */
html body.f22-zand .et_pb_section.f22-werkwijze.f22-tone-z .f22-step p{color:#4d463b!important}
html body.f22-zand .et_pb_section.f22-werkwijze.f22-tone-z .f22-step p:first-child{color:#5f6b44!important}
html body.f22-zand .et_pb_section.f22-werkwijze.f22-tone-z .f22-step{border-top-color:rgba(34,27,21,.16)!important}
html body.f22-zand .et_pb_section.f22-werkwijze.f22-tone-z .f22-steps-head p{color:#4d463b!important}
/* portfolio */
html body.f22-zand .et_pb_section.f22-portfolio.f22-tone-z .f22-grid .et_pb_image{box-shadow:0 20px 40px -26px rgba(34,27,21,.45)}
/* sectie 2 (helpen) op beige */
html body.f22-zand .f22-help.f22-tone-z.et_pb_section{background:#e9e2d2!important;color:#221b15}
.f22-help.f22-tone-z .f22-help-k{color:#5a564c}
.f22-help.f22-tone-z .f22-help-n{color:#5f6b44}
.f22-help.f22-tone-z .f22-hw b{color:#221b15}
.f22-help.f22-tone-z .f22-hw b i{color:#8e9b6b}
.f22-help.f22-tone-z .f22-hw p{color:#4d463b}
.f22-help.f22-tone-z .f22-help-bar{background:rgba(34,27,21,.12)}
.f22-help.f22-tone-z .f22-help-card{box-shadow:0 50px 90px -40px rgba(34,27,21,.55)}

/* sectie 2 · websites: een site die zich opbouwt */
.f22-ha-web{position:absolute;inset:0;padding:8% 7% 7%;display:flex;flex-direction:column;justify-content:center;gap:18px}
.f22-ha-web .brw{position:relative;border-radius:12px;background:#f3eee3;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.f22-ha-web .bar{height:26px;background:#ddd3bf;display:flex;align-items:center;gap:5px;padding:0 10px}
.f22-ha-web .bar i{width:7px;height:7px;border-radius:50%;background:#bdb29d}
.f22-ha-web .bar span{margin-left:10px;background:#ece5d6;border-radius:6px;padding:2px 30px 2px 8px;font:9.5px var(--f22-mono);color:#6b6255}
.f22-ha-web .bar em{margin-left:auto;font:normal 9.5px var(--f22-mono);letter-spacing:.1em;text-transform:uppercase;color:#8a7f6c;display:flex;align-items:center;gap:6px}
.f22-ha-web .bar em:before{content:"";width:6px;height:6px;border-radius:50%;background:#bdb29d;transition:background .4s}
.f22-hc.is-on .f22-ha-web .bar em{animation:f22live .01s linear 2.4s forwards}
.f22-hc.is-on .f22-ha-web .bar em:before{animation:f22livedot .01s linear 2.4s forwards}
@keyframes f22live{to{color:#5f6b44}}@keyframes f22livedot{to{background:#8e9b6b}}
.f22-ha-web .pg{padding:5% 6% 6%}
.f22-ha-web .b{border:1px dashed rgba(95,107,68,.55);border-radius:5px;background:transparent;opacity:0}
.f22-hc.is-on .f22-ha-web .b{animation:f22wire .35s ease var(--d) forwards,f22wfill .45s ease calc(var(--d) + .35s) forwards}
@keyframes f22wire{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes f22wfill{to{background:var(--c,#e4dccb);border-color:transparent}}
.f22-ha-web .nav{display:flex;align-items:center;gap:10px;padding:6px 8px;--c:transparent}
.f22-ha-web .nav svg{width:18px;margin-right:auto}.f22-ha-web .nav svg path{fill:#221b15}
.f22-ha-web .nav u{width:24px;height:4px;border-radius:2px;background:#cfc5b1}
.f22-ha-web .nav b{width:38px;height:14px;border-radius:999px;background:#221b15}
.f22-ha-web .hh{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;margin-top:7%;align-items:center}
.f22-ha-web .h1{height:16px;margin-bottom:7px;--c:#221b15}.f22-ha-web .h2{height:16px;width:70%;--c:#5f6b44}
.f22-ha-web .ln{height:5px;margin-top:12px;width:94%;--c:#cfc5b1}.f22-ha-web .ln.s{width:66%;margin-top:6px}
.f22-ha-web .btn{width:44%;height:18px;border-radius:999px;margin-top:14px;--c:#8e9b6b}
.f22-ha-web .img{aspect-ratio:1.2;border-radius:8px;display:grid;place-items:center;--c:#5f6b44}
.f22-ha-web .img svg{width:32%}.f22-ha-web .img path{fill:#e9e2d2}
.f22-ha-web .row{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;margin-top:7%}
.f22-ha-web .c{height:36px;--c:#e4dccb}
.f22-ha-web .cur{position:absolute;left:30%;top:80%;width:16px;opacity:0}
.f22-ha-web .cur path{fill:#8e9b6b;stroke:#2a231c;stroke-width:1.4}
.f22-hc.is-on .f22-ha-web .cur{animation:f22wcur 2.6s cubic-bezier(.6,0,.3,1) .2s forwards}
@keyframes f22wcur{0%{opacity:0;left:20%;top:90%}10%{opacity:1}35%{left:55%;top:30%}60%{left:78%;top:55%}85%{left:38%;top:62%}100%{opacity:1;left:30%;top:66%}}
.f22-ha-web .ph{position:absolute;right:5%;bottom:13%;width:22%;aspect-ratio:9/18;border-radius:16px;background:#14100c;padding:5px;box-shadow:0 30px 50px -20px rgba(0,0,0,.8);display:flex;flex-direction:column;gap:6%;opacity:0;transform:translateY(20px)}
.f22-hc.is-on .f22-ha-web .ph{animation:f22wph .6s ease 2.2s forwards}
@keyframes f22wph{to{opacity:1;transform:none}}
.f22-ha-web .ph .pb{border-radius:4px;background:#e4dccb}.f22-ha-web .ph .pb:first-child{margin-top:12%}
.f22-ha-web .ph .n{height:6%;background:#ddd3bf}.f22-ha-web .ph .h{height:14%;background:#221b15}.f22-ha-web .ph .i{height:30%;background:#5f6b44}.f22-ha-web .ph .c{height:16%}
.f22-ha-web .f22-ha-chips{justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.f22-ha-web .b{opacity:1;background:var(--c,#e4dccb);border-color:transparent}.f22-ha-web .ph{opacity:1;transform:none}}

/* v4.11 · laadscherm bruin met beige logo; het logo landt in het (bruine) menu van de eerste sectie */
body.f22-zand .f22-intro-v4:before{background:#2a231c!important;box-shadow:none!important}
body.f22-zand .f22-intro-v4 .f22-i4-logo path{fill:#e9e2d2!important;stroke:#e9e2d2!important}
body.f22-zand .f22-intro-v4 .f22-i4-line{background:rgba(233,226,210,.14)!important}

/* v4.11.1 · bruine rook op elke beige sectie */
html body.f22-zand .et_pb_section.f22-tone-z{position:relative}
html body.f22-zand .et_pb_section.f22-tone-z > .f22-esmoke{z-index:0}
html body.f22-zand .et_pb_section.f22-tone-z > .et_pb_row{position:relative;z-index:1}

/* ===== v4.12 · PROJECTEN: eerst een eigen scherm met de tekst, dan de bol schermvullend ===== */
body.f22-zand .f22-werk.is-two.et_pb_section{padding:0!important}
body.f22-zand .f22-werk.is-two .f22-werk-intro{position:relative;min-height:100svh;max-width:none!important;width:100%!important;margin:0!important;padding:110px 24px 80px!important;display:flex!important;align-items:center;justify-content:center;overflow:hidden}
body.f22-zand .f22-werk.is-two .f22-werk-intro > .et_pb_column{position:relative;z-index:1;max-width:980px;width:100%!important;text-align:center}
body.f22-zand .f22-werk.is-two .f22-werk-intro > .f22-esmoke{z-index:0}
body.f22-zand .f22-werk.is-two .f22-werk-intro > .et_pb_column > *{will-change:transform,opacity}
body.f22-zand .f22-werk.is-two .f22-werk-head p{font-family:var(--f22-mono)!important;font-size:11.5px!important;letter-spacing:.2em!important;text-transform:uppercase;color:#c9bfae!important;margin:0 0 22px!important;text-align:center}
body.f22-zand .f22-werk.is-two .f22-werk-head p:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e9b6b;margin-right:10px;vertical-align:1px}
body.f22-zand .f22-werk.is-two .f22-werk-head h2{font-size:min(6vw,10svh,96px)!important;line-height:.98!important;color:#e9e2d2!important}
body.f22-zand .f22-werk.is-two .f22-werk-head h2 em{color:#aab586!important}
body.f22-zand .f22-werk.is-two .f22-werk-sub .et_pb_text_inner{color:#c9bfae!important;font-size:18px!important}
body.f22-zand .f22-werk.is-two .f22-faces{margin-bottom:34px}
body.f22-zand .f22-werk.is-two .f22-faces span{border-color:#2a231c}
.f22-werk-next{position:absolute;z-index:2;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f22-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#c9bfae!important;text-decoration:none!important}
.f22-werk-next i{font-style:normal;width:38px;height:38px;border-radius:50%;border:1px solid rgba(233,226,210,.3);display:grid;place-items:center;font-size:14px;color:#e9e2d2;animation:f22nudge 2s ease-in-out infinite}
@keyframes f22nudge{50%{transform:translateY(6px)}}
body.f22-zand .f22-werk.is-two .f22-sphere{height:calc(100svh - 150px)!important;min-height:520px;margin-top:0!important}
@media (max-width:980px){
  body.f22-zand .f22-werk.is-two .f22-werk-head h2{font-size:min(11vw,58px)!important}
  body.f22-zand .f22-werk.is-two .f22-sphere{height:calc(100svh - 170px)!important;min-height:460px}
}

/* ===== v4.12 · CONTACT: het formulier op een vel papier waar rook vanaf komt ===== */
body.f22-zand .f22-contact.is-paper.et_pb_section{background:#2a231c!important;position:relative;overflow:hidden;min-height:100svh;display:flex!important;align-items:center;padding:120px 0 90px!important}
body.f22-zand .f22-contact.is-paper:before,body.f22-zand .f22-contact.is-paper:after{display:none!important}
body.f22-zand .f22-contact.is-paper > .f22-esmoke{z-index:0}
html body.f22-zand .f22-contact.is-paper .f22-contact-row{position:relative;z-index:1;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0 40px!important;max-width:1200px!important;width:100%!important;grid-template-columns:minmax(0,.9fr) minmax(0,1fr)!important;gap:clamp(40px,7vw,110px)!important;align-items:center!important}
html body.f22-zand .f22-contact.is-paper .f22-kicker .et_pb_text_inner,html body.f22-zand .f22-contact.is-paper .f22-kicker p{color:#c9bfae!important}
html body.f22-zand .f22-contact.is-paper .f22-h2 h2{color:#e9e2d2!important}
html body.f22-zand .f22-contact.is-paper .f22-h2 h2 em{color:#aab586!important}
html body.f22-zand .f22-contact.is-paper .f22-sub .et_pb_text_inner,html body.f22-zand .f22-contact.is-paper .f22-sub p{color:#c9bfae!important}
html body.f22-zand .f22-contact.is-paper .f22-contact-lines p{border-color:rgba(233,226,210,.14)!important;color:#e9e2d2!important}
.f22-paper-col{position:relative}
.f22-paper-smoke{position:absolute;left:-14%;width:128%;bottom:calc(100% - 70px);height:min(70svh,560px);pointer-events:none;z-index:0}
html body.f22-zand .f22-contact.is-paper .f22-form{position:relative;z-index:1;background:#efe8da url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")!important;color:#221b15;padding:38px 42px 40px!important;border-radius:2px!important;border:0!important;transform:rotate(-1.6deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -30px 60px -40px rgba(120,96,70,.35),0 50px 80px -40px rgba(0,0,0,.85),0 14px 28px -14px rgba(0,0,0,.6)!important;backdrop-filter:none!important}
html body.f22-zand .f22-contact.is-paper .f22-form:after{content:"";position:absolute;right:0;top:0;width:34px;height:34px;background:linear-gradient(225deg,#2a231c 50%,#d9cfbc 50%,#e7dfcf 100%);box-shadow:-3px 3px 6px rgba(0,0,0,.18)}
.f22-paper-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:22px;border-bottom:1px dashed rgba(34,27,21,.25)}
.f22-paper-head img{height:20px!important;width:auto!important}
.f22-paper-head span{font-family:var(--f22-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6b6255;margin-right:30px}
html body.f22-zand .f22-contact.is-paper .f22-form .et_pb_contact_form_label{display:block!important;font-family:var(--f22-mono)!important;font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase;color:#6b6255!important;margin-bottom:4px!important}
html body.f22-zand .f22-contact.is-paper .f22-form :is(input.input,textarea.input,select.input,.input){background:transparent!important;border:0!important;border-bottom:1px solid rgba(34,27,21,.28)!important;border-radius:0!important;color:#221b15!important;padding:8px 0!important;box-shadow:none!important;font-size:16px!important}
html body.f22-zand .f22-contact.is-paper .f22-form .input::placeholder{color:rgba(34,27,21,.32)!important}
html body.f22-zand .f22-contact.is-paper .f22-form textarea.input{min-height:120px!important;background:repeating-linear-gradient(transparent 0 31px,rgba(34,27,21,.16) 31px 32px)!important;border-bottom:0!important;line-height:32px!important;padding-top:0!important}
html body.f22-zand .f22-contact.is-paper .f22-form select.input option{color:#221b15;background:#efe8da}
html body.f22-zand .f22-contact.is-paper .f22-form .et_pb_contact_field{margin-bottom:16px!important}
html body.f22-zand .f22-contact.is-paper .f22-form .et_pb_contact_submit{background:#221b15!important;color:#e9e2d2!important;border:0!important;border-radius:999px!important;padding:13px 24px!important;font-size:14px!important}
html body.f22-zand .f22-contact.is-paper .f22-form .et_pb_contact_submit:after{display:none!important}
html body.f22-zand .f22-contact.is-paper .f22-form .et-pb-contact-message,html body.f22-zand .f22-contact.is-paper .f22-form .et-pb-contact-message p{color:#221b15!important}
@media (max-width:980px){
  body.f22-zand .f22-contact.is-paper.et_pb_section{padding:100px 0 70px!important;min-height:0}
  html body.f22-zand .f22-contact.is-paper .f22-contact-row{grid-template-columns:1fr!important;padding:0 20px!important;gap:150px!important}
  html body.f22-zand .f22-contact.is-paper .f22-form{padding:28px 22px 30px!important;transform:rotate(-1deg)}
  .f22-paper-smoke{height:300px}
}

body.f22-zand .f22-werk.is-two .f22-werk-intro > .f22-esmoke{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
body.f22-zand .f22-werk.is-two .f22-werk-intro > .et_pb_column{max-width:1100px}
body.f22-zand .f22-contact.is-paper.et_pb_section{padding-top:clamp(160px,22svh,230px)!important}
.f22-paper-smoke{filter:blur(6px)}
html body.f22-zand .f22-contact.is-paper .f22-paper-col{min-width:0!important;max-width:100%!important}
html body.f22-zand .f22-contact.is-paper .f22-form{box-sizing:border-box!important;width:100%!important;max-width:100%!important}
@media (max-width:980px){ html body.f22-zand .f22-contact.is-paper .f22-form{width:calc(100% - 8px)!important;margin:0 auto!important} }

/* ===== v4.12.1 · geen zwart meer: elke bruine sectie is espresso ===== */
html body.f22-zand .et_pb_section.f22-tone-b:not(.f22-svc-hero):not(.f22-story){background-color:#2a231c!important}
html body.f22-zand .f22-portfolio.et_pb_section.f22-tone-b{background:#2a231c!important}
html body.f22-zand .f22-portfolio.f22-tone-b :is(h2,h3){color:#e9e2d2!important}
html body.f22-zand .f22-portfolio.f22-tone-b h2 em{color:#aab586!important}
html body.f22-zand .f22-portfolio.f22-tone-b :is(.f22-kicker p,.f22-intro-text p){color:#c9bfae!important}
html body.f22-zand .f22-werk.f22-tone-b.et_pb_section{background:#2a231c!important}

/* ===== v4.12.1 · laadanimatie: de rook loopt al, alleen het logo beweegt ===== */
body.f22-zand .f22-intro-v4{background:transparent!important}
body.f22-zand .f22-intro-v4:before{display:none!important}
body.f22-zand.f22-intro-on .f22-story .f22-pin,body.f22-zand.f22-intro-on .f22-story.is-make .f22-pin{opacity:1!important}
body.f22-zand .f22-story.is-make .f22-mk-l,body.f22-zand .f22-story.is-make .f22-mk-st{transition:opacity .7s ease .1s}
body.f22-zand.f22-intro-on .f22-story.is-make .f22-mk-l,body.f22-zand.f22-intro-on .f22-story.is-make .f22-mk-st{opacity:0!important;transition:none}
body.f22-zand.f22-intro-on .et_pb_section.f22-svc-hero > .et_pb_row{opacity:0!important}
body.f22-zand .et_pb_section.f22-svc-hero > .et_pb_row{transition:opacity .7s ease .1s}
body.f22-zand.f22-intro-on .f22-chat-btn,body.f22-zand.f22-intro-on .f22-chat{opacity:0!important}
/* menuklik: bruin (geen beige) scherm met het beige logo */
body.f22-zand .f22-navcover{background:#2a231c!important;transform:none!important;opacity:0;transition:opacity .35s ease!important}
body.f22-zand .f22-navcover.is-in{opacity:1}
body.f22-zand .f22-navcover.is-fly{background:transparent!important}
/* v4.12.1 · nergens meer zwart achter de pagina */
html body.f22-zand.f22-page,html body.f22-zand.f22-page #page-container,html body.f22-zand.f22-page #main-footer,html body.f22-zand.f22-page #footer-bottom{background:#2a231c!important}
/* rookvlak altijd met eigen ondergrond, zodat er nooit een gat in de sectie valt */
html body.f22-zand .et_pb_section.f22-tone-z > .f22-esmoke{background:#e9e2d2}
html body.f22-zand .et_pb_section.f22-tone-b > .f22-esmoke{background:#2a231c}

/* ===== v4.12.1 · sectie 2: rook binnen het vaste scherm ===== */
.f22-help.is-live .f22-help-pin > .f22-esmoke{position:absolute!important;inset:0;width:100%;height:100%;margin:0!important;z-index:0}
.f22-help.is-live .f22-help-ui{z-index:1}

/* ===== v4.12.1 · sectie 1: kop hoger (midden links), knoppen netjes ===== */
body.f22-zand .f22-story.is-make .f22-mk-l{top:50%!important;bottom:auto!important;transform:translateY(-44%)}
body.f22-zand .f22-story.is-make .f22-mk-btns .et_pb_button{box-shadow:none!important;text-shadow:none!important;height:46px!important;padding:0 22px!important;align-items:center!important;gap:8px;font-weight:500!important;white-space:nowrap}
body.f22-zand .f22-story.is-make .f22-mk-btns .et_pb_button:before{display:none!important}
body.f22-zand .f22-story.is-make .f22-mk-btns .f22-ph1-btn{border:1px solid rgba(233,226,210,.35)!important}
@media (max-width:980px),(max-width:1200px) and (orientation:portrait){
  body.f22-zand .f22-story.is-make .f22-mk-l{top:auto!important;bottom:26px!important;transform:none}
  body.f22-zand .f22-story.is-make .f22-mk-btns{flex-wrap:nowrap;gap:8px}
  body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-btns .et_pb_button_module_wrapper{flex:1 1 0;min-width:0}
  body.f22-zand .f22-story.is-make .f22-mk-btns .et_pb_button{width:100%!important;justify-content:center!important;height:44px!important;padding:0 10px!important;font-size:13px!important}
}

/* ===== v4.12.1 · footer: rustig en compact ===== */
body.f22-zand .f22-footer-v2.et_pb_section{padding:clamp(56px,8svh,90px) 0 28px!important;background:#221b15!important}
body.f22-zand .f22-footer-v2.no-cta .f22-foot-cta-row{display:none!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-row{padding-bottom:clamp(36px,5svh,56px)!important;margin-bottom:clamp(36px,5svh,56px)!important;border-bottom:1px solid rgba(233,226,210,.08)!important;align-items:end!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-h h2{font-size:clamp(30px,3.2vw,46px)!important;line-height:1.02!important;letter-spacing:-.04em!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-h p{font-size:10.5px!important;color:#8a7f6c!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta2{background:transparent!important;border:0!important;padding:0!important;color:#c9bfae!important;text-decoration:underline!important;text-underline-offset:4px;box-shadow:none!important}
body.f22-zand .f22-footer-v2 :is(.f22-foot-cta,.f22-foot-cta2){box-shadow:none!important;font-size:14px!important}
body.f22-zand .f22-footer-v2 .f22-foot-logo img{height:22px!important;width:auto!important}
body.f22-zand .f22-footer-v2 .f22-foot-about p{font-size:14px!important;line-height:1.6!important;color:#8a7f6c!important;max-width:300px}
body.f22-zand .f22-footer-v2 .f22-foot-col p:first-child{font-size:10px!important;letter-spacing:.18em!important;color:#8a7f6c!important;margin-bottom:12px!important}
body.f22-zand .f22-footer-v2 .f22-foot-col li{margin:0 0 6px!important}
body.f22-zand .f22-footer-v2 .f22-foot-col a{font-size:14px!important;color:#c9bfae!important;transition:color .2s}
body.f22-zand .f22-footer-v2 .f22-foot-col a:hover{color:#e9e2d2!important}
body.f22-zand .f22-footer-v2 .f22-foot-bottom{margin-top:clamp(36px,5svh,56px)!important;padding-top:20px!important;border-top:1px solid rgba(233,226,210,.08)!important}
body.f22-zand .f22-footer-v2 .f22-foot-small :is(p,a){font-size:11.5px!important;color:#7a705f!important}
@media (max-width:767px){
  body.f22-zand .f22-footer-v2.et_pb_section{padding:44px 0 90px!important}
  body.f22-zand .f22-footer-v2 .et_pb_row{padding-left:20px!important;padding-right:20px!important;width:100%!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta-h h2{font-size:26px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta-btns{display:flex!important;flex-direction:row!important;align-items:center!important;gap:18px!important;margin-top:18px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta-btns .et_pb_button_module_wrapper{margin:0!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta{padding:11px 18px!important;font-size:13px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta2{font-size:13px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta-row{padding-bottom:28px!important;margin-bottom:28px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px 16px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-row > .et_pb_column:first-child{grid-column:1 / -1}
  body.f22-zand .f22-footer-v2 .f22-foot-row .et_pb_column:nth-child(3){display:block!important}
  body.f22-zand .f22-footer-v2 .f22-foot-row > .et_pb_column:last-child{grid-column:1 / -1}
  body.f22-zand .f22-footer-v2 .f22-foot-about{display:none!important}
  body.f22-zand .f22-footer-v2 .f22-foot-logo img{height:18px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-col a{font-size:13.5px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-col li{margin:0 0 4px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-bottom{margin-top:28px!important;display:flex!important;justify-content:space-between;gap:10px}
  body.f22-zand .f22-footer-v2 .f22-foot-bottom .et_pb_column{width:auto!important;margin:0!important}
}

/* ===== v4.12.1 · telefoon: logo vaste maat, menu compact ===== */
@media (max-width:980px){
  body.f22-zand #main-header img#logo{height:20px!important;max-height:20px!important;width:auto!important}
  body.f22-zand #mobile_menu{background:#2a231c!important;top:58px!important;padding:8px 24px 20px!important;max-height:calc(100svh - 70px);overflow:auto;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)!important;border-radius:0 0 18px 18px!important}
  body.f22-zand #mobile_menu a{color:#e9e2d2!important;font-size:17px!important;line-height:1.3!important;padding:11px 0!important;border-bottom:1px solid rgba(233,226,210,.08)!important;font-weight:400!important}
  body.f22-zand #mobile_menu .sub-menu{padding:0 0 6px 14px!important;border-left:1px solid rgba(142,155,107,.4)!important;margin:2px 0 8px!important}
  body.f22-zand #mobile_menu .sub-menu a{font-size:14px!important;padding:6px 0!important;color:#c9bfae!important;border-bottom:0!important}
  body.f22-zand #mobile_menu .menu-item-description,body.f22-zand #mobile_menu .f22-mdesc{display:none!important}
  body.f22-zand #mobile_menu .f22-menu-cta a{margin-top:12px;display:inline-block!important;background:#e9e2d2!important;color:#221b15!important;border-radius:999px;padding:11px 20px!important;font-size:14px!important;border:0!important}
}

/* ===== v4.12.2 · fixes na controle op de live site (Divi 5 zet modulklassen op de knop zelf) ===== */
body.f22-zand .f22-story.is-zandhero.is-make .f22-mk-btns .et_pb_button_module_wrapper{width:auto!important;height:auto!important;position:static!important}
html body.f22-zand .f22-story.is-make .f22-mk-btns .et_pb_button{position:static!important;inset:auto!important;left:auto!important;top:auto!important;bottom:auto!important;right:auto!important;transform:none!important;margin:0!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;line-height:1!important;padding-top:0!important;padding-bottom:0!important;opacity:1!important}
/* tijdens de laadanimatie het hele menu verbergen (ook de knop rechts), daarna rustig infaden */
body.f22-zand.f22-intro-on #main-header .container,body.f22-zand.f22-intro-on #main-header .f22-cta{opacity:0!important;transition:none!important}
body.f22-zand #main-header .container{transition:opacity .6s ease .1s}
/* geen flits van de ruwe Divi-opmaak voordat sectie 1 is opgebouwd */
body.f22-zand .f22-hero.f22-story:not(.is-live) .et_pb_row{opacity:0}
body.f22-zand .f22-hero.f22-story.et_pb_section{background:#2a231c!important}
/* Divi 5: knoppen zijn flex-kolommen, waardoor het pijltje onder de tekst springt */
body.f22-zand .et_pb_button.et_flex_module,body.f22-zand a.et_pb_button{flex-direction:row!important;align-items:center!important;justify-content:center;flex-wrap:nowrap!important;white-space:nowrap}
/* footer: Divi 5-afstanden (60px tussen rijen, 30px in kolommen) terugbrengen */
body.f22-zand .f22-footer-v2.et_pb_section{gap:0!important}
body.f22-zand .f22-footer-v2 .et_pb_row{box-sizing:border-box!important;max-width:min(1200px,100%)!important;margin-left:auto!important;margin-right:auto!important}
body.f22-zand .f22-footer-v2 .et_pb_column{gap:10px!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-row{padding-top:0!important}
body.f22-zand .f22-footer-v2 .f22-foot-row{padding-top:0!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-btns{gap:14px!important;align-items:center!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta-btns .et_pb_button{margin:0!important}
@media (max-width:767px){
  body.f22-zand .f22-footer-v2 .et_pb_row{width:100%!important;max-width:100%!important;padding-left:20px!important;padding-right:20px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta-row{display:block!important;padding-bottom:26px!important;margin-bottom:26px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-cta-btns{margin-top:16px!important;flex-direction:row!important}
  body.f22-zand .f22-footer-v2 .f22-foot-row{gap:22px 16px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-row .et_pb_column{gap:6px!important}
  body.f22-zand .f22-footer-v2 .f22-foot-col ul{margin:0!important;padding:0!important}
  body.f22-zand .f22-footer-v2 .f22-foot-bottom{margin-top:22px!important}
}
body.f22-zand .f22-footer-v2 .et_pb_button:after{position:static!important;display:inline-block!important;margin:0 0 0 6px!important;transform:none!important;opacity:1!important;font-size:inherit!important;line-height:1!important;left:auto!important;right:auto!important;top:auto!important}
body.f22-zand .f22-footer-v2 .f22-foot-cta2{border:0!important;text-decoration:none!important;border-bottom:1px solid rgba(201,191,174,.5)!important;border-radius:0!important;padding:0 0 2px!important}
@media (max-width:980px){ body.f22-zand #mobile_menu{padding-bottom:30px!important} }

/* ===== v4.13 · secties in kleurgroepen: één achtergrond die blijft staan, de inhoud schuift eroverheen ===== */
.f22-group{position:relative}
.f22-group-b{background:#2a231c}
.f22-group-z{background:#e9e2d2}
.f22-gbg{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;pointer-events:none;overflow:hidden}
.f22-group-b .f22-gbg{background:#2a231c}.f22-group-z .f22-gbg{background:#e9e2d2}
.f22-gbg > .f22-esmoke{position:absolute;inset:0;width:100%;height:100%}
html body.f22-zand div.f22-group > .et_pb_section.et_pb_section.et_pb_section{background:transparent!important;background-image:none!important;position:relative;z-index:1}
html body.f22-zand div.f22-group > .et_pb_section.et_pb_section:before,html body.f22-zand div.f22-group > .et_pb_section.et_pb_section:after{display:none!important}
html body.f22-zand div.f22-group .f22-help.f22-help.f22-help.et_pb_section{background:transparent!important}
html body.f22-zand div.f22-group .f22-werk-intro{background:transparent!important}
/* kleinere laptops / tablet liggend: menu compacter zodat het logo nergens over een menu-item valt */
@media (min-width:981px) and (max-width:1240px){
  body.f22-zand #top-menu > li{padding-right:14px!important}
  body.f22-zand #top-menu > li > a{font-size:13px!important}
  body.f22-zand #main-header .f22-cta{padding:8px 14px!important;font-size:13px!important}
  body.f22-zand #main-header img#logo{height:22px!important;max-height:22px!important}
}

/* v4.18 · mooi én vindbaar */
.f22-gift{display:inline-block;margin-left:8px;background:#8e9b6b;color:#221b15;font:600 9px var(--f22-mono);letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:99px;vertical-align:middle}

/* ===== v4.19 · eigen compacte header en footer (Divi-header en -footer verborgen) ===== */
body.f22-zand #main-header,body.f22-zand #top-header,body.f22-zand .et-l--header,body.f22-zand .et-l--footer,body.f22-zand #main-footer{display:none!important}
body.f22-zand #page-container{padding-top:0!important;margin-top:0!important}
body.f22-zand.et_fixed_nav #page-container{padding-top:0!important}
.f22x-skip{position:absolute;left:-9999px;top:8px;z-index:100001;background:#e9e2d2;color:#221b15;padding:10px 14px;border-radius:8px}.f22x-skip:focus{left:12px}
.f22x-hd{position:fixed;left:0;right:0;top:0;z-index:9999;transition:background .35s,box-shadow .35s;font-family:var(--f22-sans);color:#e9e2d2}
body.admin-bar .f22x-hd{top:32px}
.f22x-hd .in{max-width:1360px;margin:0 auto;height:72px;padding:0 32px;display:flex;align-items:center;gap:24px;transition:height .35s}
.f22x-hd.sc{background:rgba(34,27,21,.8);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(233,226,210,.08)}
.f22x-hd.sc .in{height:58px}
.f22x-hd .lg{flex:0 0 auto;display:flex}.f22x-hd .lg img{height:22px;width:auto;display:block;transition:height .35s}.f22x-hd.sc .lg img{height:19px}
.f22x-hd .nv{display:flex;gap:2px;margin:0 auto}
.f22x-hd .it{position:relative}
.f22x-hd .nv a{display:block;font-size:14px;color:rgba(233,226,210,.8);padding:8px 13px;border-radius:99px;transition:.2s;text-decoration:none;position:relative}
.f22x-hd .nv a:hover,.f22x-hd .nv a:focus-visible{color:#e9e2d2;background:rgba(233,226,210,.08)}
.f22x-hd .nv a.ac{color:#e9e2d2}.f22x-hd .nv a.ac:after{content:'';position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#aab586}
.f22x-hd .it.dd>a:before{content:'';position:absolute;right:2px;top:50%;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.6}
.f22x-hd .it.dd>a{padding-right:20px}
.f22x-hd .mega{position:absolute;left:50%;top:calc(100% + 12px);transform:translate(-50%,8px);width:700px;background:#2e271f;border:1px solid rgba(233,226,210,.1);border-radius:20px;padding:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.25s}
.f22x-hd .mega:before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.f22x-hd .it.dd:hover .mega,.f22x-hd .it.dd.open .mega,.f22x-hd .it.dd:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.f22x-hd .mega a{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;color:#e9e2d2}
.f22x-hd .mega a:hover{background:rgba(233,226,210,.06)}
.f22x-hd .mega .ic{flex:0 0 36px;height:36px;border-radius:10px;background:rgba(142,155,107,.16);display:grid;place-items:center;color:#aab586}.f22x-hd .mega .ic svg{width:18px}
.f22x-hd .mega b{display:block;font-weight:500;font-size:14.5px}.f22x-hd .mega small{display:block;color:rgba(233,226,210,.55);font-size:12.5px;line-height:1.4}
.f22x-hd .mega a.all{display:flex;justify-content:space-between;align-items:center;background:rgba(233,226,210,.05);font-size:13px;color:#c9bfae}
.f22x-hd .rt{display:flex;align-items:center;gap:10px}
.f22x-hd .rt .ct{font-size:14px;color:rgba(233,226,210,.8);text-decoration:none;padding:8px 10px}
.f22x-btn{display:inline-flex;align-items:center;gap:8px;background:#e9e2d2;color:#221b15!important;font:500 14px var(--f22-sans);padding:10px 18px;border-radius:99px;white-space:nowrap;text-decoration:none!important;transition:transform .2s,background .2s}
.f22x-btn:hover{background:#fff}.f22x-btn svg{width:12px}
.f22x-btn.o{background:transparent;color:#e9e2d2!important;box-shadow:inset 0 0 0 1px rgba(233,226,210,.3)}.f22x-btn.o:hover{background:rgba(233,226,210,.08)}
.f22x-hd .burger{display:none;width:42px;height:42px;border-radius:50%;background:rgba(233,226,210,.08);border:0;position:relative;cursor:pointer}
.f22x-hd .burger i{position:absolute;left:13px;right:13px;height:1.5px;background:#e9e2d2}.f22x-hd .burger i:first-child{top:17px}.f22x-hd .burger i:last-child{top:24px}
.f22x-mm{position:fixed;inset:0;background:#221b15;z-index:100000;padding:14px 18px 24px;display:flex;flex-direction:column;color:#e9e2d2;font-family:var(--f22-sans);overflow:auto}
.f22x-mm[hidden]{display:none}
.f22x-mm .tp{display:flex;justify-content:space-between;align-items:center;height:42px}.f22x-mm .tp img{height:20px;width:auto}
.f22x-mm .x{width:42px;height:42px;border-radius:50%;background:rgba(233,226,210,.08);border:0;color:#e9e2d2;font-size:24px;line-height:1;cursor:pointer}
.f22x-mm ul{list-style:none;margin:28px 0 0;padding:0}
.f22x-mm ul>li>a{display:flex;justify-content:space-between;align-items:baseline;font:500 32px/1.15 var(--f22-sans);letter-spacing:-.04em;padding:6px 0;border-bottom:1px solid rgba(233,226,210,.07);color:#e9e2d2;text-decoration:none}
.f22x-mm ul small{font:500 11px var(--f22-mono);color:#aab586;letter-spacing:.18em}
.f22x-mm .sub{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}.f22x-mm .sub a{font-size:13px;padding:7px 12px;border-radius:99px;background:rgba(233,226,210,.07);color:#e9e2d2;text-decoration:none}
.f22x-mm .bo{margin-top:auto;padding-top:24px;display:grid;gap:14px}.f22x-mm .bo .f22x-btn{justify-content:center;padding:15px}
.f22x-mm .bo .row{display:flex;justify-content:space-between;align-items:center;color:#c9bfae;font-size:14px}.f22x-mm .bo .row a{color:#c9bfae}
.f22x-so{display:flex;gap:8px}.f22x-so a{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(233,226,210,.18);display:grid;place-items:center;color:#e9e2d2;transition:.2s}.f22x-so a:hover{background:#e9e2d2;color:#221b15}.f22x-so svg{width:15px;height:15px}
.f22x-ft{background:#221b15;color:#e9e2d2;border-top:1px solid rgba(233,226,210,.06);font-family:var(--f22-sans);position:relative;z-index:2}
.f22x-ft .w{max-width:1360px;margin:0 auto;padding:0 32px}
.f22x-ft .cta{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:40px 0 32px;border-bottom:1px solid rgba(233,226,210,.08)}
.f22x-ft .cta h2{font:500 40px/1 var(--f22-sans)!important;letter-spacing:-.045em;color:#e9e2d2!important;margin:0;padding:0}.f22x-ft .cta h2 em{color:#aab586!important}
.f22x-ft .cta .bt{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.f22x-ft .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding:32px 0 28px}
.f22x-ft .br img{height:24px;width:auto;display:block}
.f22x-ft .br p{color:rgba(233,226,210,.6);font-size:14px;max-width:300px;margin:12px 0 16px;padding:0}
.f22x-ft h4{font:500 11px var(--f22-mono)!important;letter-spacing:.22em;text-transform:uppercase;color:#aab586!important;margin:0 0 12px;padding:0}
.f22x-ft ul{list-style:none!important;display:grid;gap:6px;margin:0;padding:0!important}.f22x-ft li{padding:0!important}
.f22x-ft ul a{font-size:14.5px;color:rgba(233,226,210,.82);text-decoration:none}.f22x-ft ul a:hover{color:#e9e2d2}
.f22x-ft .cl a{display:flex;flex-direction:column}.f22x-ft .cl small{color:rgba(233,226,210,.5);font-size:11.5px}
.f22x-ft .bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0 20px;border-top:1px solid rgba(233,226,210,.08);font-size:12.5px;color:rgba(233,226,210,.5)}
.f22x-ft .bot nav{display:flex;gap:18px}.f22x-ft .bot a{color:rgba(233,226,210,.6);text-decoration:none}.f22x-ft .bot a:hover{color:#e9e2d2}
@media(max-width:980px){
 .f22x-hd .in{height:60px;padding:0 16px;gap:10px}.f22x-hd.sc .in{height:54px}.f22x-hd .lg img{height:19px}
 .f22x-hd .nv,.f22x-hd .rt .ct{display:none}.f22x-hd .rt{margin-left:auto}.f22x-hd .f22x-btn{padding:8px 14px;font-size:13px}.f22x-hd .burger{display:block}
 .f22x-ft .w{padding:0 18px}.f22x-ft .cta{flex-direction:column;align-items:flex-start;padding:30px 0 22px;gap:14px}.f22x-ft .cta h2{font-size:30px!important}.f22x-ft .cta .bt .o{display:none}
 .f22x-ft .cols{grid-template-columns:1fr 1fr;gap:20px 18px;padding:22px 0 18px}.f22x-ft .br{grid-column:1/3;display:flex;justify-content:space-between;align-items:center}.f22x-ft .br p{display:none}
 .f22x-ft .cl{grid-column:1/3}.f22x-ft .cl ul{grid-template-columns:1fr 1fr}.f22x-ft h4{margin-bottom:8px}.f22x-ft ul a{font-size:14px}
 .f22x-ft .bot{flex-wrap:wrap;gap:8px 16px;padding:14px 0 18px}
}
@media(max-width:600px){body.admin-bar .f22x-hd{top:0}}
body.f22-intro-on .f22x-hd{opacity:0;pointer-events:none}.f22x-hd{transition:opacity .6s .1s,background .35s,box-shadow .35s}
body.f22-zand .f22-footer,body.f22-zand .f22-footer-v2{display:none!important}
/* contentkaart in "Waar kunnen we je bij helpen?" */
.f22-ha-content{display:grid;place-items:center;height:100%}
.f22-ha-content .feed{width:min(300px,80%);background:#f6f2ea;border-radius:18px;padding:12px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.f22-ha-content .fh{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:600 12px var(--f22-sans);color:#221b15}.f22-ha-content .fh i{width:26px;height:26px;border-radius:50%;background:#2a231c}
.f22-ha-content .g9{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.f22-ha-content .g9 b{aspect-ratio:1;border-radius:4px;background:#3a3129 url(../img/pz-rook.jpg) center/cover;position:relative;opacity:0;transform:scale(.9);transition:.5s}
.f22-ha-content .g9 b:nth-child(3n+2){background-position:right}.f22-ha-content .g9 b:nth-child(4n){background:#8e9b6b}.f22-ha-content .g9 b:nth-child(5){background:#e9e2d2}
.f22-ha-content .g9 b.r:after{content:'▶';position:absolute;right:5px;top:4px;font-size:9px;color:#fff}
.f22-hc.is-on .f22-ha-content .g9 b{opacity:1;transform:none}
.f22-ha-content .g9 b:nth-child(1){transition-delay:.1s}.f22-ha-content .g9 b:nth-child(2){transition-delay:.2s}.f22-ha-content .g9 b:nth-child(3){transition-delay:.3s}.f22-ha-content .g9 b:nth-child(4){transition-delay:.4s}.f22-ha-content .g9 b:nth-child(5){transition-delay:.5s}.f22-ha-content .g9 b:nth-child(6){transition-delay:.6s}.f22-ha-content .g9 b:nth-child(7){transition-delay:.7s}.f22-ha-content .g9 b:nth-child(8){transition-delay:.8s}.f22-ha-content .g9 b:nth-child(9){transition-delay:.9s}
.f22-ha-content .pl{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}.f22-ha-content .pl span{font:500 10px var(--f22-sans);background:#fff;border:1px solid #e3dccf;color:#4d463b;border-radius:99px;padding:4px 8px}
/* v4.20 · mobiel menu: zwevend beige paneel met rook, tekst in espresso, rustige animatie */
.f22x-mm{inset:auto;top:8px;left:8px;right:8px;max-height:calc(100svh - 16px);border-radius:24px;background:#e9e2d2;color:#221b15;padding:14px 18px 20px;box-shadow:0 0 0 100vmax rgba(20,16,12,.45),0 30px 60px -20px rgba(0,0,0,.5);overflow:auto;
 clip-path:inset(0 0 100% 0 round 24px);opacity:0;transition:clip-path .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.f22x-mm.on{clip-path:inset(0 0 0 0 round 24px);opacity:1}
.f22x-mm>*:not(.f22-esmoke){position:relative;z-index:1}
.f22x-mm .tp img{filter:brightness(0) saturate(100%) invert(11%) sepia(14%) saturate(1200%) hue-rotate(345deg)}
.f22x-mm .x{background:rgba(34,27,21,.08);color:#221b15}
.f22x-mm ul{margin-top:18px}
.f22x-mm ul>li>a{color:#221b15;border-bottom-color:rgba(34,27,21,.1);font-size:28px}
.f22x-mm ul small{color:#5f6b44}
.f22x-mm .sub a{background:rgba(34,27,21,.07);color:#221b15}
.f22x-mm ul>li{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.f22x-mm.on ul>li{opacity:1;transform:none}
.f22x-mm.on ul>li:nth-child(1){transition-delay:.08s}.f22x-mm.on ul>li:nth-child(2){transition-delay:.13s}.f22x-mm.on ul>li:nth-child(3){transition-delay:.18s}.f22x-mm.on ul>li:nth-child(4){transition-delay:.23s}.f22x-mm.on ul>li:nth-child(5){transition-delay:.28s}.f22x-mm.on ul>li:nth-child(6){transition-delay:.33s}
.f22x-mm .bo{margin-top:22px;padding-top:0}
.f22x-mm .bo .f22x-btn{background:#221b15;color:#e9e2d2!important}
.f22x-mm .bo .row,.f22x-mm .bo .row a{color:#4d463b}
.f22x-mm .f22x-so a{color:#221b15;box-shadow:inset 0 0 0 1px rgba(34,27,21,.2)}
@media(prefers-reduced-motion:reduce){.f22x-mm,.f22x-mm ul>li{transition:none}}
/* Prijzen-uitklapmenu: Nieuwe klant / Bestaande klant */
.f22x-hd .mega.sm{width:380px;grid-template-columns:1fr}
/* intro landt in het eigen menu: het menulogo verschijnt pas als het vliegende logo er is */
body.f22-intro-on .f22x-hd .lg img,body.f22-intro-done:not(.f22-logo-landed) .f22x-hd .lg img{opacity:0}
body.f22-logo-landed .f22x-hd .lg img{opacity:1;transition:opacity .2s}
/* eerste bezoek: rook-intro */
.f22-intro-rook{position:fixed;inset:0;z-index:100000;background:#1b1511;transition:opacity .8s ease}
.f22-intro-rook canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.f22-intro-rook.is-flying canvas,.f22-intro-rook.is-out{opacity:0}
.f22-intro-rook.is-flying{background:transparent;transition:background .5s}
.f22-intro-rook.is-flying canvas{transition:opacity .45s}
.f22-ir-mark{position:absolute;fill:#e9e2d2;opacity:0;filter:blur(14px);transform-origin:0 0;transition:opacity 1.4s ease,filter 1.4s ease,transform .9s cubic-bezier(.76,0,.24,1)}
.f22-intro-rook.is-mark .f22-ir-mark{opacity:1;filter:blur(0)}
.f22-intro-rook.is-flying .f22-ir-mark{opacity:0;transition:opacity .25s}
.f22-ir-lock{position:absolute;transform-origin:50% 50%;transition:transform .85s cubic-bezier(.76,0,.24,1),opacity .2s}
.f22-ir-lock img{display:block;width:100%;height:auto}
.f22-ir-lock .fm{clip-path:inset(0 22% 0 0);opacity:0;transform:translateY(14px);transition:opacity .6s ease .35s,transform .7s cubic-bezier(.2,.8,.2,1) .35s}
.f22-intro-rook.is-word .f22-ir-lock .fm{opacity:1;transform:none}
.f22-ir-lock .full{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.f22-intro-rook.is-flying .f22-ir-lock .full{opacity:1}

/* ===== v4.29 · korte rook-intro (3,5 s) en een rustige paginawissel ===== */
/* eerste bezoek: rook-22 → strak teken → logo, alles korter */
.f22-ir-mark{transition:opacity .5s ease,filter .5s ease,transform .4s cubic-bezier(.76,0,.24,1)!important}
.f22-ir-lock .fm{transition:opacity .35s ease .05s,transform .4s cubic-bezier(.2,.8,.2,1) .05s!important}
/* paginawissel: alleen het bruine scherm, geen logo (het logo komt pas in de animatie op de nieuwe pagina) */
.f22-navcover:empty{display:block}
/* nieuwe pagina: bruin scherm blijft dicht tot de animatie klaar is; het scherm verdwijnt terwijl het logo naar het menu vliegt */
body.f22-zand .f22-intro-v4{background:#2a231c!important;transition:background .55s ease .2s,opacity .35s ease!important}
body.f22-zand .f22-intro-v4.is-flying{background:rgba(42,35,28,0)!important}

/* ===== v4.29 · Projectenpagina: espresso-rook, projectscherm bij klik, nettere kaarten ===== */
body.f22-zand .f22-portfolio.f22-pf-v2.et_pb_section{position:relative;background:#2a231c!important;overflow:hidden}
body.f22-zand .f22-portfolio.f22-pf-v2 > .et_pb_row{position:relative;z-index:1}
body.f22-zand .f22-portfolio.f22-pf-v2 > .f22-esmoke{position:absolute;inset:0;z-index:0;opacity:.95}
.f22-pf-v2 .f22-grid{gap:30px!important;grid-auto-flow:dense}
.f22-pf-v2 .f22-grid .et_pb_image.f22-pf-card{cursor:pointer;background:rgba(31,25,20,.72)!important;border:1px solid rgba(233,226,210,.1)!important;border-radius:18px!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(34px);transition:opacity .8s ease var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),box-shadow .45s,border-color .45s}
.f22-pf-v2 .f22-grid .et_pb_image.f22-pf-card.is-in{opacity:1;transform:none}
.f22-pf-v2 .f22-grid .et_pb_image.f22-pf-card.is-in:hover{transform:translateY(-8px);border-color:rgba(170,181,134,.5)!important;box-shadow:0 40px 80px -36px rgba(0,0,0,.85),0 0 0 1px rgba(170,181,134,.25)}
.f22-pf-v2 .f22-grid .f22-pf-card .et_pb_image_wrap{display:block;overflow:hidden}
.f22-pf-v2 .f22-grid .f22-pf-card img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.f22-pf-v2 .f22-grid .f22-pf-card:hover img{transform:scale(1.035)}
.f22-pf-v2 .f22-gbar{height:34px;padding:0 14px;background:rgba(233,226,210,.05);border-bottom:1px solid rgba(233,226,210,.08)}
.f22-pf-v2 .f22-gbar span{color:#c9bfae;letter-spacing:.06em}
.f22-pf-v2 .f22-gbar b{color:#aab586}
.f22-pf-cap{display:flex;align-items:center;gap:14px;padding:16px 18px 18px;border-top:1px solid rgba(233,226,210,.08)}
.f22-pf-cap .f22-pf-n{font-family:var(--f22-mono);font-size:11px;letter-spacing:.14em;color:#aab586}
.f22-pf-cap b{font-weight:500;font-size:16px;color:#e9e2d2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f22-pf-cap em{margin-left:auto;font-style:normal;font-size:12px;color:#c9bfae;padding:7px 12px;border:1px solid rgba(233,226,210,.18);border-radius:99px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.f22-pf-cap em i{font-style:normal;display:inline-block;transition:transform .3s}
.f22-pf-card:hover .f22-pf-cap em{background:#e9e2d2;color:#2a231c;border-color:#e9e2d2}
.f22-pf-card:hover .f22-pf-cap em i{transform:translate(2px,-2px)}
@media (max-width:640px){.f22-pf-cap em{display:none}}
.f22-pf-cap,.f22-pf-cap b,.f22-pf-cap em,.f22-pf-cap span{line-height:1.25!important;height:auto!important}
.f22-pf-cap b{display:block;min-width:0}
.f22-pf-cap em{font-family:var(--f22-sans,"Inter Tight",Inter,system-ui,sans-serif)!important}
.f22-pf-v2 .f22-grid .et_pb_image.f22-pf-card{gap:0!important}

/* v4.30 — werkwijze zonder sticky-overlap, universum volledig in beeld, rook-intro beige */
body.f22-zand .f22-werkwijze .f22-steps-head{position:static!important;top:auto!important}
body.f22-zand .f22-werk.is-two .f22-sphere{height:calc(100svh - 90px)!important;min-height:560px}
body.f22-zand .f22-sphere-shade{display:none!important}
body.f22-zand .f22-sphere-title{background:none!important;padding:30px 40px}
body.f22-zand .f22-sphere-title .f22-made p{text-shadow:0 2px 30px rgba(42,35,28,.9),0 0 60px rgba(42,35,28,.7)}
.f22-paper-col{position:relative}
.f22-paper-smoke,body.f22-zand .f22-paper-smoke{position:absolute!important;left:-110px!important;right:-110px!important;top:-110px!important;bottom:-110px!important;width:auto!important;height:auto!important;filter:blur(8px)!important;z-index:0;pointer-events:none}

/* v4.31 — sectie 2 als 3D-carrousel, gewone hoogte, niets vastgezet */
.f22-help.is-live.is-3d.et_pb_section{height:auto!important;min-height:0}
.f22-help.is-3d .f22-help-pin{position:relative!important;height:auto!important;min-height:min(100svh,900px);overflow:visible!important}
.f22-help.is-3d .f22-help-pin > .f22-esmoke{overflow:hidden}
.f22-help.is-3d .f22-help-ui{position:relative;inset:auto;min-height:min(100svh,900px);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:clamp(80px,12svh,120px) clamp(20px,5vw,90px)}
.f22-help.is-3d .f22-help-words{height:auto!important;overflow:visible!important;display:flex;flex-direction:column;gap:2px;margin-top:18px}
.f22-help.is-3d .f22-hw{position:relative!important;inset:auto!important;transform:none!important;opacity:1!important;cursor:pointer;padding:6px 0;transition:none}
.f22-help.is-3d .f22-hw b{display:block;font-size:clamp(38px,4.6vw,74px)!important;line-height:1!important;letter-spacing:-.055em;color:rgba(34,27,21,.16);transition:color .45s ease,transform .5s cubic-bezier(.2,.7,.2,1);transform-origin:0 50%}
.f22-help.is-3d .f22-hw b i{font-family:var(--f22-serif);font-style:italic;font-weight:400;color:transparent;transition:color .45s}
.f22-help.is-3d .f22-hw:hover b{color:rgba(34,27,21,.34)}
.f22-help.is-3d .f22-hw.is-on b{color:#221b15;transform:translateX(10px)}
.f22-help.is-3d .f22-hw.is-on b i{color:#5f6b44}
.f22-help.is-3d .f22-hw p{max-height:0;overflow:hidden;opacity:0;margin:0!important;max-width:440px;font-size:15px!important;line-height:1.55!important;color:#4d463b!important;transition:max-height .5s ease,opacity .4s ease,margin .4s}
.f22-help.is-3d .f22-hw.is-on p{max-height:90px;opacity:1;margin:10px 0 8px 10px!important}
.f22-help.is-3d .f22-help-bar{margin-top:22px}
.f22-help.is-3d .f22-help-r{height:auto;justify-content:center}
.f22-h3-stage{position:relative;width:100%;height:clamp(420px,60svh,600px);perspective:1500px;perspective-origin:50% 42%;cursor:grab;touch-action:pan-y;user-select:none}
.f22-h3-stage:active{cursor:grabbing}
.f22-h3-ring{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.f22-h3-face{position:absolute;width:var(--cw,400px);aspect-ratio:1/1.02;left:calc(var(--cw,400px) / -2);top:calc(var(--cw,400px) * -.51);border-radius:22px;background:linear-gradient(160deg,#3a3027,#2f271f 60%,#2a231c);border:1px solid rgba(233,226,210,.12);box-shadow:0 40px 70px -36px rgba(34,27,21,.6);overflow:hidden;backface-visibility:hidden;filter:brightness(var(--lit,1));cursor:pointer}
.f22-h3-face .f22-hc{transition:none;opacity:1!important;transform:none!important}
.f22-h3-face:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 40%);pointer-events:none}
.f22-h3-lbl{position:absolute;left:14px;bottom:12px;font:500 10.5px var(--f22-mono);letter-spacing:.18em;text-transform:uppercase;color:#c9bfae;background:rgba(34,27,21,.7);padding:6px 10px;border-radius:99px;opacity:0;transition:opacity .4s}
.f22-h3-face.is-front .f22-h3-lbl{opacity:1}
.f22-h3-floor{position:absolute;left:12%;right:12%;bottom:2%;height:60px;background:radial-gradient(closest-side,rgba(34,27,21,.32),transparent);filter:blur(8px)}
@media (max-width:980px){
  .f22-help.is-3d .f22-help-ui{grid-template-columns:1fr;grid-template-rows:auto auto;padding:90px 20px 50px;gap:10px}
  .f22-help.is-3d .f22-hw b{font-size:clamp(34px,10vw,52px)!important}
  .f22-h3-stage{height:clamp(360px,95vw,480px)}
}
.f22-help.is-3d .f22-hw b{text-transform:none!important;font-weight:500!important;white-space:nowrap}
.f22-help.is-3d .f22-hw{padding:3px 0}
.f22-help.is-3d .f22-help-l .et_pb_button_module_wrapper{margin-top:30px!important}
.f22-help.is-3d .f22-h3-stage{perspective:1800px}

/* v4.32 — sectie 2 kaarten als dikke 3D-platen, universum groter, knop onder projecten heel */
.f22-h3-face{background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important;transform-style:preserve-3d;backface-visibility:visible!important}
.f22-h3-face:after{display:none}
.f22-h3-in{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#3a3027,#2f271f 60%,#2a231c);border:1px solid rgba(233,226,210,.14);box-shadow:0 50px 80px -40px rgba(34,27,21,.65);backface-visibility:hidden}
.f22-h3-in:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.09),transparent 38%);pointer-events:none}
.f22-h3-edge{position:absolute;inset:0;border-radius:22px;background:#1c1611;border:1px solid rgba(233,226,210,.06)}
.f22-h3-face .f22-h3-lbl{z-index:3}
.f22-h3-stage{height:clamp(460px,66svh,660px)}
body.f22-zand .f22-werk.is-two.et_pb_section{padding-bottom:90px!important}
body.f22-zand .f22-werk.is-two .f22-werk-foot{margin-top:18px}
@media (max-width:980px){body.f22-zand .f22-werk.is-two .f22-sphere{height:calc(100svh - 170px)!important;min-height:460px}}
@media (max-width:980px){body.f22-zand .f22-sphere-shade{display:block!important}}
body.f22-zand .f22-werk .et_pb_row.f22-werk-cta{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;justify-content:center!important;padding-top:10px!important}
/* v4.33 — mobiel-scan fixes */
html,body{overflow-x:clip}
@media (max-width:980px){html,body{overflow-x:hidden}}
html body.f22-zand .f22-svc .f22-kicker .et_pb_text_inner p:before{background:none!important;margin-right:4px}
.f22-help.is-3d .f22-help-words{margin-bottom:6px}
@media (max-width:980px){
  .f22-help.is-3d .f22-help-pin,.f22-help.is-3d .f22-help-ui{min-height:0!important}
  .f22-help.is-3d .f22-help-ui{align-items:start;align-content:start;padding:96px 20px 30px!important;gap:0}
  .f22-help.is-3d .f22-hw b{font-size:clamp(32px,9vw,46px)!important}
  .f22-help.is-3d .f22-hw.is-on p{max-height:120px}
  .f22-h3-stage{height:clamp(330px,88vw,440px)!important;margin-top:4px}
  .f22-h3-lbl{display:none}
  .f22-h3-face .f22-ha-chips span{font-size:9px!important;letter-spacing:.1em!important;white-space:nowrap}
  body.f22-zand .f22-werk.is-two .f22-werk-intro{padding-bottom:40px!important;flex-direction:column}
  body.f22-zand .f22-werk-next{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;margin:34px auto 0}
  body.f22-zand .f22-sphere-title{padding:10px 16px!important}
  body.f22-zand .f22-sphere-title .f22-made p{font-size:30px!important;white-space:nowrap}
}
/* ===== v4.38 · elke sectie in één scherm (laptop + telefoon) ===== */
/* laptop: dienstpagina's compacter */
@media (min-width:981px){
  html body.f22-zand .f22-svc.et_pb_section:not(.f22-svc-hero):not(.f22-pz-sec):not(.f22-bk-sec){padding:clamp(56px,9vh,90px) 0!important}
  html body.f22-zand .f22-svc .f22-svc-head{margin-bottom:clamp(18px,3vh,34px)!important}
  html body.f22-zand .f22-svc .f22-svc-card{min-height:0!important;padding:clamp(18px,2.6vh,26px) 24px!important}
  html body.f22-zand .f22-svc .f22-svc-card p:first-child{margin-bottom:clamp(10px,2vh,20px)!important;width:38px;height:38px}
  html body.f22-zand .f22-svc .f22-svc-card h3{font-size:20px!important}
  html body.f22-zand .f22-svc .f22-svc-cards{gap:12px}
  html body.f22-zand .f22-svc .f22-svc-projects .et_pb_main_blurb_image img{aspect-ratio:16/9}
  html body.f22-zand .f22-svc .f22-svc-projects .et_pb_blurb_container{padding:12px 18px}
  html body.f22-zand .f22-svc-hero.et_pb_section{min-height:100svh;padding-top:96px!important;padding-bottom:40px!important;display:flex!important;align-items:center}
  html body.f22-zand .f22-svc-hero .f22-svc-facts ul{margin-top:28px!important}
  html body.f22-zand .f22-contact.et_pb_section:not(.c2){padding-top:96px!important;padding-bottom:40px!important;min-height:100svh}
}
/* telefoon */
@media (max-width:980px){
  /* veegbare kaartrijen */
  html body.f22-zand .f22-svc .f22-svc-cards,html body.f22-zand .f22-svc .f22-svc-projects{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px!important;padding:4px 16px 6px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;width:auto!important}
  html body.f22-zand .f22-svc .f22-svc-cards::-webkit-scrollbar,html body.f22-zand .f22-svc .f22-svc-projects::-webkit-scrollbar{display:none}
  html body.f22-zand .f22-svc .f22-svc-cards>*,html body.f22-zand .f22-svc .f22-svc-projects>*{flex:0 0 80%!important;max-width:80%!important;scroll-snap-align:start;margin:0!important}
  html body.f22-zand .f22-svc .f22-svc-card{min-height:0!important;padding:20px!important}
  html body.f22-zand .f22-svc .f22-svc-card p:first-child{margin-bottom:14px!important;width:36px;height:36px}
  html body.f22-zand .f22-svc .f22-svc-card h3{font-size:19px!important}
  html body .f22-swdots{display:flex;align-items:center;gap:6px;margin:14px 0 0}
  .f22-swdots i{width:6px;height:6px;border-radius:6px;background:currentColor;opacity:.25;transition:all .3s}
  .f22-swdots i.on{width:18px;opacity:.8;background:#8e9b6b}
  .f22-swdots span{margin-left:auto;font:500 10px var(--f22-mono,monospace);letter-spacing:.2em;text-transform:uppercase;opacity:.55;transition:opacity .4s}
  .f22-swdots.moved span{opacity:0}
  /* secties: minder lucht */
  html body.f22-zand .f22-svc.et_pb_section:not(.f22-pz-sec){padding:72px 0 44px!important}
  html body.f22-zand .f22-svc .f22-svc-head{margin-bottom:16px!important;gap:10px!important}
  html body.f22-zand .f22-svc .f22-h2 h2{font-size:clamp(32px,9vw,42px)!important}
  /* dienst-hero: alles in één scherm */
  html body.f22-zand .f22-svc-hero.et_pb_section{padding:84px 0 28px!important;min-height:0}
  html body.f22-zand .f22-svc-hero .f22-svc-h1 h1{font-size:clamp(34px,10vw,44px)!important;line-height:1!important}
  html body.f22-zand .f22-svc-hero .f22-svc-lead p{font-size:15px!important;line-height:1.5!important}
  html body.f22-zand .f22-svc-hero .f22-svc-lead{margin-top:10px!important}
  html body.f22-zand .f22-svc-hero .f22-svc-crumb{margin-bottom:12px!important}
  html body.f22-zand .f22-svc .f22-svc-facts ul{margin:18px 0 0!important;padding-top:14px!important;gap:16px!important}
  html body.f22-zand .f22-svc .f22-svc-facts li{font-size:12px!important}
  html body.f22-zand .f22-svc .f22-svc-facts strong{font-size:13.5px!important}
  html body.f22-zand .f22-svc-hero .f22-svc-media{display:none!important}
  html body.f22-zand .f22-svc .f22-svc-hero-row{gap:0!important}
  /* homepage */
  html body.f22-zand .f22-vindbaar .f22-svc-head .f22-svc-side{display:none}
  html body.f22-zand .f22-werkwijze.et_pb_section{padding:72px 0 40px!important}
  html body.f22-zand .f22-werkwijze .f22-steps{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:0 20px 10px;scrollbar-width:none}
  html body.f22-zand .f22-werkwijze .f22-steps::-webkit-scrollbar{display:none}
  html body.f22-zand .f22-werkwijze .f22-step{flex:0 0 72%;scroll-snap-align:start;padding-left:0!important}
  /* formulier homepage: normale tekstgrootte, minder lege ruimte */
  html body.f22-zand .f22-contact.et_pb_section:not(.c2){padding:76px 0 36px!important;min-height:0}
  html body.f22-zand .f22-contact:not(.c2) .et_pb_row{zoom:1!important}
  html body.f22-zand .f22-contact:not(.c2) .f22-contact-row{gap:18px!important}
  html body.f22-zand .f22-contact:not(.c2) .f22-h2 h2{font-size:34px!important}
  html body.f22-zand .f22-contact:not(.c2) .et_pb_column:first-child p:not(:first-child){display:none}
  html body.f22-zand .f22-contact .f22-form{padding:20px 18px!important}
  html body.f22-zand .f22-contact .c2-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body.f22-zand .f22-contact .c2-tiles button{padding:8px 7px;font-size:12px;gap:6px}
  html body.f22-zand .f22-contact .c2-tiles button i{width:12px;height:12px}
  html body.f22-zand .f22-contact .c2-chips button{font-size:11.5px;padding:6px 10px}
  /* contactpagina */
  html body.f22-c2 .et_pb_section.f22-contact.c2{padding-top:84px!important;padding-bottom:40px!important;min-height:0}
  html body.f22-c2 .c2-steps{display:none}
  html body.f22-c2 .c2-l>p{font-size:15px}
  /* veelgestelde vragen compacter */
  html body.f22-zand .f22-svc-end .f22-svc-faq-row{gap:16px!important}
}
@media (max-width:980px){
  html body.f22-zand .f22-svc .f22-svc-cards,html body.f22-zand .f22-svc .f22-svc-projects,html body.f22-zand .f22-werkwijze .f22-steps{flex-wrap:nowrap!important;flex-direction:row!important;align-items:stretch!important}
  html body.f22-zand .f22-werkwijze .f22-step{flex:0 0 72%!important;max-width:72%!important}
  html body.f22-zand .f22-svc .f22-svc-cards>*,html body.f22-zand .f22-svc .f22-svc-projects>*{width:auto!important}
}
@media (max-width:980px){html body.f22-zand .f22-svc .f22-svc-cards,html body.f22-zand .f22-svc .f22-svc-projects,html body.f22-zand .f22-werkwijze .f22-steps{scroll-padding-left:16px;scroll-padding-inline:16px}}
@media (max-width:980px){
  .f22-help.is-3d .f22-help-ui{padding:84px 20px 16px!important}
  .f22-help.is-3d .f22-hw b{font-size:30px!important}
  .f22-help.is-3d .f22-hw.is-on b{font-size:40px!important}
  .f22-help.is-3d .f22-hw{padding:1px 0}
  .f22-help.is-3d .f22-help-bar{margin-top:12px}
  .f22-h3-stage{height:clamp(300px,80vw,380px)!important}
  .f22-help.is-3d .f22-help-l .et_pb_button_module_wrapper{display:none!important}
}

.f22-swdots{display:none}

/* header op lichte secties */
.f22x-hd{transition:opacity .6s .1s,background .35s,box-shadow .35s,color .35s}
.f22x-hd.lt{color:#221b15}
.f22x-hd.lt.sc{background:rgba(239,233,221,.84);box-shadow:0 1px 0 rgba(34,27,21,.08)}
.f22x-hd.lt .nv a,.f22x-hd.lt .rt .ct{color:rgba(34,27,21,.78)}
.f22x-hd.lt .nv a:hover,.f22x-hd.lt .nv a:focus-visible,.f22x-hd.lt .nv a.ac{color:#221b15;background:rgba(34,27,21,.06)}
.f22x-hd.lt .nv a.ac:after{background:#5e6b3c}
.f22x-hd.lt .lg img{filter:brightness(0) saturate(100%);opacity:.88;transition:filter .35s,opacity .35s,height .35s}
.f22x-hd.lt .burger{background:rgba(34,27,21,.08)}.f22x-hd.lt .burger i{background:#221b15}
.f22x-hd.lt .f22x-btn{background:#221b15;color:#efe9dd!important}

/* v4.44 · mobiel menu: dikke bewegende rook die vanuit de menuknop openrolt; woorden komen uit de rook */
#f22x-mm{inset:0;top:0;left:0;right:0;max-height:none;border-radius:0;box-shadow:none;background:#140F0B;color:#ECE4D2;padding:0 0 22px;opacity:1;overflow-x:hidden;overflow-y:auto;
 --cx:calc(100% - 37px);--cy:30px;clip-path:circle(0 at var(--cx) var(--cy));transition:clip-path .55s cubic-bezier(.7,0,.3,1)}
#f22x-mm.on{clip-path:circle(150% at var(--cx) var(--cy));transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
#f22x-mm>.mmr{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
#f22x-mm>.mmr.fr{z-index:3;mix-blend-mode:screen;opacity:.5}
#f22x-mm>*:not(.mmr){position:relative;z-index:2}
#f22x-mm .tp{height:60px;padding:0 16px;z-index:4}
#f22x-mm .tp img{filter:none;height:19px}
#f22x-mm .x{position:relative;background:rgba(236,228,210,.1);color:#ECE4D2;font-size:0}
#f22x-mm .x i{position:absolute;left:12px;right:12px;top:20px;height:1.5px;background:#ECE4D2;transition:transform .5s .45s cubic-bezier(.6,0,.2,1)}
#f22x-mm .x i:first-child{transform:translateY(-3.5px)}#f22x-mm .x i:last-child{transform:translateY(3.5px)}
#f22x-mm.on .x i:first-child{transform:rotate(45deg)}#f22x-mm.on .x i:last-child{transform:rotate(-45deg)}
#f22x-mm ul{margin:22px 0 0;padding:0 22px}
#f22x-mm ul>li{opacity:1;transform:none;transition:none}
#f22x-mm ul>li>a{display:flex;justify-content:flex-start;align-items:flex-start;gap:10px;border:0;padding:4px 0;color:#ECE4D2;font:600 44px/1.04 var(--f22-sans);letter-spacing:-.055em;
 text-shadow:0 0 28px rgba(20,15,11,.9),0 0 2px rgba(20,15,11,.6);opacity:0;filter:blur(16px);transform:translateY(24px) scale(1.05)}
#f22x-mm ul>li>a[aria-current],#f22x-mm ul>li.cur>a{color:#B9C48F}
#f22x-mm ul small{font:500 11px var(--f22-mono);color:#B9C48F;letter-spacing:.18em;margin-top:9px}
#f22x-mm .sub{margin:6px 0 10px;gap:6px}
#f22x-mm .sub a{background:rgba(20,15,11,.45);color:#ECE4D2;box-shadow:inset 0 0 0 1px rgba(236,228,210,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transform:translateY(10px) scale(.9)}
#f22x-mm.on ul>li>a{animation:f22mmRise 1.05s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.4s + var(--i,0)*.08s)}
#f22x-mm.on .sub a{animation:f22mmChip .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.75s + var(--i,0)*.08s + var(--j,0)*.04s)}
@keyframes f22mmRise{0%{opacity:0;filter:blur(16px);transform:translateY(24px) scale(1.05)}55%{opacity:1;filter:blur(3px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes f22mmChip{to{opacity:1;transform:none}}
#f22x-mm .bo{margin-top:auto;padding:24px 22px 0;opacity:0;transform:translateY(18px)}
#f22x-mm.on .bo{animation:f22mmChip .7s 1s cubic-bezier(.2,.7,.2,1) forwards}
#f22x-mm .bo .f22x-btn{background:#ECE4D2;color:#221b15!important}
#f22x-mm .bo .row,#f22x-mm .bo .row a{color:#c9bfae}
#f22x-mm .f22x-so a{color:#ECE4D2;box-shadow:inset 0 0 0 1px rgba(236,228,210,.22)}
@media(prefers-reduced-motion:reduce){#f22x-mm,#f22x-mm.on{transition:none;clip-path:none}#f22x-mm ul>li>a,#f22x-mm .sub a,#f22x-mm .bo{animation:none!important;opacity:1;filter:none;transform:none}}
#f22x-mm .x:focus:not(:focus-visible),.f22x-hd .burger:focus:not(:focus-visible){outline:none}

/* één doorlopende rook achter alle bruine vlakken (geen nieuwe rook per sectie) */
.f22-onesmoke{position:fixed;inset:0;z-index:0;pointer-events:none}
.f22-onesmoke .f22-esmoke{position:absolute;inset:0;width:100%;height:100%}
html body.f22-zand.f22-one,html body.f22-zand.f22-page.f22-one{background:#1B1510!important}
html body.f22-zand.f22-one #page-container,html body.f22-zand.f22-one #et-main-area,html body.f22-zand.f22-one #main-content,html body.f22-zand.f22-page.f22-one #page-container,html body.f22-zand.f22-page.f22-one #main-footer,html body.f22-zand.f22-page.f22-one #footer-bottom{background:transparent!important}
html body.f22-one #page-container{position:relative;z-index:1}
html body.f22-zand.f22-one .et_pb_section.f22-tone-b,html body.f22-zand.f22-one .et_pb_section.f22-tone-b:not(.f22-svc-hero):not(.f22-story),html body.f22-zand.f22-one .f22-portfolio.et_pb_section.f22-tone-b,html body.f22-zand.f22-one .f22-werk.f22-tone-b.et_pb_section,html body.f22-zand.f22-one .et_pb_section.f22-svc-hero.f22-tone-b,html body.f22-one .f22-group-b,html body.f22-one .f22-one-see{background:transparent!important;background-color:transparent!important;background-image:none!important}
html body.f22-one .f22-group-b>.f22-gbg{display:none}
html body.f22-zand.f22-one .et_pb_section.f22-tone-b>.f22-esmoke{display:none}
/* de sticky rook van een groep mag niet over de volgende groep heen lopen (zichtbaar nu bruine vlakken transparant zijn) */
html body .f22-group{overflow:clip}
/* v4.49 · dienstpagina's compacter en levendiger: minder lucht, kaarten kleiner, rustig binnenkomen */
@media (min-width:861px){
 html body .f22-svc.et_pb_section{padding:76px 0!important}
 html body .f22-svc.f22-svc-hero{padding:130px 0 70px!important}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-cards{gap:12px!important}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-card{padding:20px 22px!important;border-radius:18px!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-card .et_pb_text_inner{display:grid!important;grid-template-columns:40px 1fr;column-gap:14px;align-items:start}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-card p:first-child{grid-row:1 / span 2;width:40px!important;height:40px!important;margin:0!important;transition:transform .4s cubic-bezier(.2,.9,.3,1.3),background .3s}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-card h3{font-size:18px!important;margin:2px 0 4px!important}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-card p{font-size:13.5px!important;line-height:1.5!important}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -26px rgba(0,0,0,.45)!important}
 html body .f22-svc:not(.f22-vindbaar) .f22-svc-card:hover p:first-child{transform:rotate(-8deg) scale(1.12);background:#B9C48F!important;color:#221B15!important}
 html body .f22-svc .f22-svc-cta{margin-top:56px!important;padding:44px!important}
 html body .f22-svc .f22-faq .et_pb_toggle,html body .f22-svc .f22-faq .et_pb_accordion_item{padding:16px 0!important}
 html body .f22-svc .f22-faq .et_pb_toggle_title,html body .f22-svc .f22-faq h5{font-size:17px!important}
 html body .f22-svc .f22-svc-media{min-height:380px!important}
}
/* kaarten komen één voor één binnen als ze in beeld komen */
.f22-svc .f22-svc-cards.f22-cin .f22-svc-card{animation:f22cardIn .6s cubic-bezier(.2,.7,.2,1) both}
.f22-svc .f22-svc-cards.f22-cin .f22-svc-card:nth-child(2){animation-delay:.07s}.f22-svc .f22-svc-cards.f22-cin .f22-svc-card:nth-child(3){animation-delay:.14s}.f22-svc .f22-svc-cards.f22-cin .f22-svc-card:nth-child(4){animation-delay:.21s}.f22-svc .f22-svc-cards.f22-cin .f22-svc-card:nth-child(5){animation-delay:.28s}.f22-svc .f22-svc-cards.f22-cin .f22-svc-card:nth-child(6){animation-delay:.35s}
@keyframes f22cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.f22-svc .f22-svc-cards.f22-cin .f22-svc-card{animation:none}}

/* projecten op de homepage: geen zwarte band of lijn meer, de doorlopende rook loopt eronder door */
html body.f22-one .f22-werk.et_pb_section{background:transparent!important}
html body.f22-one .f22-werk:before,html body.f22-one .f22-werk:after{display:none!important}
html body.f22-one .f22-werk-intro{background:transparent!important;border:0!important}
html body.f22-one .f22-werk .et_pb_row{border:0!important}
html body.f22-one .f22-sphere-shade{display:none!important}
html body.f22-one .f22-sphere{-webkit-mask-image:linear-gradient(transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(transparent 0,#000 9%,#000 91%,transparent 100%)}

/* homepage: korte startkaart in plaats van het grote formulier */
.f22-form.f22-mini-hide{display:none!important}
.f22-mini{position:relative;max-width:460px;margin-left:auto;background:#EFE8DA;color:#221B15;border-radius:22px;padding:24px;box-shadow:0 40px 80px -36px rgba(0,0,0,.75);transform:rotate(1.2deg)}
.f22-mini .k{display:block;font:500 10.5px var(--f22-mono);letter-spacing:.16em;text-transform:uppercase;color:#6b6152;margin-bottom:8px}
.f22-mini .t{display:block;font:600 24px/1.1 var(--f22-sans);letter-spacing:-.03em;margin-bottom:16px}
.f22-mini .g{display:grid;gap:8px}
.f22-mini .g a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(34,27,21,.05);box-shadow:inset 0 0 0 1px rgba(34,27,21,.09);color:#221B15!important;text-decoration:none!important;font:500 15px var(--f22-sans);transition:background .25s,transform .25s}
.f22-mini .g a svg{width:20px;height:20px;color:#5f6b44;flex:none}.f22-mini .g a i{margin-left:auto;font-style:normal;opacity:.4;transition:transform .25s,opacity .25s}
.f22-mini .g a:hover{background:#B9C48F;transform:translateX(4px)}.f22-mini .g a:hover i{opacity:1;transform:translateX(3px)}
.f22-mini .r{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.f22-mini .go{background:#221B15;color:#ECE4D2!important;padding:12px 18px;border-radius:99px;font:500 14px var(--f22-sans);text-decoration:none!important}
.f22-mini .m{color:#4d463b!important;font-size:13.5px;text-decoration:underline!important;text-underline-offset:3px}
.f22-mini small{display:block;margin-top:10px;color:#6b6152;font-size:12px}
@media (max-width:860px){.f22-mini{margin:24px auto 0;transform:none;padding:20px}.f22-mini .t{font-size:21px}.f22-mini .g{grid-template-columns:1fr 1fr}.f22-mini .g a{padding:11px 12px;font-size:14px}.f22-mini .g a:last-child{grid-column:1/3}.f22-mini .g a i{display:none}}

/* rook vloeiend bij scrollen: de rooklagen liggen in de pagina in plaats van vast op het scherm */
.f22-onesmoke{position:absolute!important;left:0;right:0;bottom:auto!important;height:150vh;height:150lvh}
html body .f22-gbg{position:absolute!important;left:0;right:0;top:0;bottom:0;height:auto!important;margin:0!important}

/* v4.55 · rooklaag = precies de hele pagina (body), dus niets onder de footer en geen verspringen */
html body.f22-one{position:relative}
html body .f22-onesmoke{position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:0!important;height:auto!important;z-index:0}

/* v4.55 · dienstpagina's: levend voorbeeld in het vlak, blijft staan */
body.f22-zand .f22-svc-zpanel.f22-has-zv{justify-content:flex-start;gap:0}
body.f22-zand .f22-svc-zpanel.f22-has-zv b{font-size:min(4.2vw,7svh,64px);margin-top:auto;padding-top:14px}
.f22-zv{position:relative;flex:1 1 auto;min-height:0;margin:16px 0 4px;display:flex;align-items:center;justify-content:center;transition:opacity .35s ease}
.f22-zv-wait .f22-zv{opacity:0}
.f22-zv img,.f22-zv video{display:block}
/* websites: browser die zelf door echte sites bladert */
.zv-br{width:100%;max-width:440px;aspect-ratio:16/10.4;border-radius:12px;background:#F5F1EA;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);transform:rotate(-1.5deg);animation:zvFloat 7s ease-in-out infinite}
.zv-br .bar{height:22px;background:#E3DBCB;display:flex;gap:5px;align-items:center;padding:0 9px}.zv-br .bar i{width:7px;height:7px;border-radius:50%;background:#CFC6B4}.zv-br .bar i:first-child{background:#B9C48F}
.zv-br .bar span{margin-left:8px;flex:1;height:13px;border-radius:7px;background:#efe8da;font:500 8.5px/13px var(--f22-sans);color:#7a6f60;padding-left:8px}
.zv-br .vp{position:relative;height:calc(100% - 22px);overflow:hidden}
.zv-br .vp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;animation:zvSlide 12s infinite}
.zv-br .vp img:nth-child(2){animation-delay:4s}.zv-br .vp img:nth-child(3){animation-delay:8s}
@keyframes zvSlide{0%{opacity:0;transform:scale(1.04)}4%{opacity:1}30%{opacity:1}36%{opacity:0;transform:scale(1)}100%{opacity:0}}
.zv-tag{position:absolute;background:#ECE4D2;color:#221B15;border-radius:10px;padding:7px 10px;font:600 11px var(--f22-sans);box-shadow:0 14px 30px -12px rgba(0,0,0,.6);animation:zvFloat 6s ease-in-out infinite}
.zv-tag.t1{left:-6px;bottom:6%}.zv-tag.t2{right:-6px;top:8%;animation-delay:-3s}
@keyframes zvFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* apps: telefoon met melding die steeds binnenkomt */
.zv-ph{height:100%;max-height:300px;aspect-ratio:1/2;background:#0F0B08;border-radius:26px;padding:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.85),0 0 0 1.5px rgba(236,228,210,.18);animation:zvFloat 7s ease-in-out infinite}
.zv-ph .sc{position:relative;height:100%;border-radius:20px;background:#F5F1EA;overflow:hidden;color:#221B15;padding:30px 10px 0;font-family:var(--f22-sans)}
.zv-ph .hd2{display:flex;align-items:center;gap:6px;margin-bottom:10px}.zv-ph .hd2 i{width:16px;height:16px;border-radius:50%;background:#B9C48F}.zv-ph .hd2 b{font:600 12px var(--f22-sans)!important;letter-spacing:-.02em}
.zv-ph .ca{background:#221B15;color:#ECE4D2;border-radius:12px;padding:10px;margin-bottom:8px}.zv-ph .ca b{display:block;font:600 20px var(--f22-sans)!important;letter-spacing:-.03em;color:#B9C48F}.zv-ph .ca span{font-size:9.5px;opacity:.8}
.zv-ph .rw{height:26px;border-radius:8px;background:#E3DBCB;margin-bottom:6px}.zv-ph .rw.s{width:70%}
.zv-ph .nt{position:absolute;left:6px;right:6px;top:6px;padding:8px;border-radius:12px;background:rgba(34,27,21,.94);color:#ECE4D2;font:600 9.5px var(--f22-sans);animation:zvNote 6s cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes zvNote{0%,8%{transform:translateY(-120%);opacity:0}16%,60%{transform:none;opacity:1}70%,100%{transform:translateY(-120%);opacity:0}}
.zv-ph .tb{position:absolute;left:0;right:0;bottom:0;height:34px;display:flex;justify-content:space-around;align-items:center;border-top:1px solid #E3DBCB}.zv-ph .tb i{width:16px;height:4px;border-radius:2px;background:#CFC6B4}.zv-ph .tb i.on{background:#221B15}
/* content: feed die blijft vullen */
.zv-ig{width:100%;max-width:300px;background:#F5F1EA;border-radius:14px;padding:10px;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);position:relative;color:#221B15;font-family:var(--f22-sans);animation:zvFloat 7s ease-in-out infinite}
.zv-ig .top{display:flex;align-items:center;gap:7px;margin-bottom:8px}.zv-ig .top i{width:22px;height:22px;border-radius:50%;background:conic-gradient(#B9C48F,#6f7d4c,#B9C48F);box-shadow:0 0 0 2px #F5F1EA,0 0 0 3.5px #B9C48F}
.zv-ig .top b{font:600 11px var(--f22-sans)!important;letter-spacing:0;flex:1}.zv-ig .top span{font-size:9.5px;color:#7a6f60}
.zv-ig .g{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.zv-ig .g i{aspect-ratio:1;border-radius:3px;background:#5a4a3a;animation:zvTile 9s calc(var(--k)*-1s) infinite}
.zv-ig .g i:nth-child(3n+1){background:#B9C48F}.zv-ig .g i:nth-child(4n+2){background:#2A231C}.zv-ig .g i:nth-child(5){background:#ECE4D2 url() center/cover;box-shadow:inset 0 0 0 1px #E3DBCB}
.zv-ig .g i:nth-child(2),.zv-ig .g i:nth-child(7){background:#6f7d4c}
@keyframes zvTile{0%,88%,100%{transform:none;filter:none}92%{transform:scale(.86);filter:brightness(1.2)}}
.zv-ig .lk{position:absolute;right:-10px;bottom:22%;background:#221B15;color:#ECE4D2;font:600 11px var(--f22-sans);padding:6px 10px;border-radius:99px;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);animation:zvFloat 5s ease-in-out infinite}
/* animatie: de echte Formi */
.zv-vid{position:relative;height:100%;max-height:320px;aspect-ratio:1;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.85),inset 0 0 0 1px rgba(236,228,210,.12)}
.zv-vid video{width:100%;height:100%;object-fit:cover}
.zv-vid .rec,.zv-cam .rec{position:absolute;left:10px;top:10px;font:500 9.5px var(--f22-mono);letter-spacing:.14em;text-transform:uppercase;color:#ECE4D2;background:rgba(27,21,16,.6);padding:4px 7px;border-radius:6px}
/* foto & video: zoeker die scherpstelt, tijd loopt */
.zv-cam{position:relative;width:100%;max-width:400px;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#2a231c center/cover;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);animation:zvFocus 6s ease-in-out infinite}
@keyframes zvFocus{0%,100%{filter:blur(0)}44%{filter:blur(0)}48%{filter:blur(3px)}56%{filter:blur(0)}}
.zv-cam i{position:absolute;width:16px;height:16px;border:2px solid #ECE4D2}.zv-cam .c1{left:10px;top:10px;border-right:0;border-bottom:0}.zv-cam .c2{right:10px;top:10px;border-left:0;border-bottom:0}.zv-cam .c3{left:10px;bottom:10px;border-right:0;border-top:0}.zv-cam .c4{right:10px;bottom:10px;border-left:0;border-top:0}
.zv-cam .af{position:absolute;left:50%;top:46%;width:48px;height:48px;margin:-24px;border:1.5px solid #B9C48F;border-radius:6px;animation:zvAf 6s ease-in-out infinite}
@keyframes zvAf{0%,44%{transform:none;opacity:1}48%{transform:scale(1.5);opacity:.4}56%{transform:none;opacity:1}100%{opacity:1}}
.zv-cam .rec{left:34px;top:12px;background:none;color:#ECE4D2}.zv-cam .rec em{font-style:normal;margin-left:4px}
.zv-cam .rec{animation:zvBlink 1s steps(2) infinite}@keyframes zvBlink{50%{color:#e98a6b}}
.zv-cam .ex{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:500 9px var(--f22-mono);letter-spacing:.1em;color:rgba(236,228,210,.85)}
@media (max-width:980px){body.f22-zand .f22-svc-zpanel.f22-has-zv{height:auto;min-height:0;aspect-ratio:auto}.f22-zv{height:250px;flex:none}body.f22-zand .f22-svc-zpanel.f22-has-zv b{font-size:40px}}
@media (prefers-reduced-motion:reduce){.f22-zv *{animation:none!important}}
/* v4.55 · levend voorbeeld: content-feed past binnen het vlak; op de telefoon ook zichtbaar (compact, onder de feiten) */
.zv-ig{height:100%;max-height:300px;width:auto;max-width:100%;aspect-ratio:.86;display:flex;flex-direction:column;overflow:hidden}
.zv-ig .g{flex:1;min-height:0;grid-template-rows:repeat(3,1fr)}.zv-ig .g i{aspect-ratio:auto}
@media (max-width:980px){
  html body.f22-zand .f22-svc-hero .f22-svc-media:has(.f22-has-zv){display:block!important;width:100%!important;margin-top:22px!important}
  html body.f22-zand .f22-svc-hero .f22-svc-zpanel.f22-has-zv{height:300px!important;padding:18px!important;background:rgba(42,35,28,.55)!important}
  html body.f22-zand .f22-svc-zpanel.f22-has-zv>.f22-zk,html body.f22-zand .f22-svc-zpanel.f22-has-zv>b,html body.f22-zand .f22-svc-zpanel.f22-has-zv>ul{display:none!important}
  .f22-zv{height:auto;flex:1;margin:0}
  .zv-tag.t1{left:0}.zv-tag.t2{right:0}
}
/* v4.55.1 · voorbeeld past altijd binnen het vlak, ook op lage schermen */
.f22-zv{overflow:visible}
.zv-br,.zv-cam{height:100%;width:auto;max-width:100%;max-height:270px}
.zv-ph{max-height:min(300px,100%)}.zv-vid{max-height:min(320px,100%)}

/* v4.55.2: zachte overgang hero -> volgende sectie (geen harde lijn) */
html body .et_pb_section_0.f22-hero{-webkit-mask-image:linear-gradient(#000 calc(100% - 90px),transparent);mask-image:linear-gradient(#000 calc(100% - 90px),transparent)}
/* v4.62 · "Bekijk …"-link in de dienstkaarten onder de tekst (niet in de smalle nummerkolom) */
html body .f22-svc .f22-svc-card p:has(> a.f22-more){grid-column:2;margin-top:10px!important}
html body .f22-svc .f22-svc-card a.f22-more{font-weight:500;color:inherit;text-decoration:none;border-bottom:1px solid currentColor}

/* ==========================================================================
   v4.69 · Logo & huisstijl (dienstpagina), juridische pagina's, cookiemelding
   ========================================================================== */
.zv-lg{position:relative;width:100%;max-width:330px;aspect-ratio:4/3.1;border-radius:14px;background:#F5F1EA;color:#221B15;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);transform:rotate(-1.5deg);animation:zvFloat 7s ease-in-out infinite;background-image:linear-gradient(rgba(34,27,21,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,27,21,.05) 1px,transparent 1px);background-size:22px 22px}
.zv-lg .ab{position:absolute;left:12px;top:10px;font:500 9px var(--f22-mono);letter-spacing:.14em;color:rgba(34,27,21,.5)}
.zv-lg svg{width:22%;max-width:84px;height:auto;flex:none}
.zv-lg .nm{font:500 22px/1.1 Georgia,"Instrument Serif",serif;letter-spacing:-.01em;color:#221B15}
.zv-lg small{font:500 8.5px var(--f22-mono);letter-spacing:.24em;color:rgba(34,27,21,.6)}
.zv-lg .sw{display:flex;align-items:center;gap:7px;margin-top:10px}
.zv-lg .sw i{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(34,27,21,.08)}
.zv-lg .sw em{font:500 15px Georgia,serif;font-style:normal;margin-left:6px;color:#221B15}

/* juridische pagina's: rustig leesbare kolom */
html body .et_pb_section.f22-legal{padding:0 0 clamp(70px,9vw,120px)!important}
.f22-legal .f22-legal-row{width:min(760px,calc(100% - 48px))!important;max-width:760px!important;margin:0 auto!important}
.f22-legal-text{font:400 17px/1.7 var(--f22-sans);color:inherit}
.f22-legal-text h2{font:500 clamp(22px,2.6vw,28px)/1.2 var(--f22-sans);letter-spacing:-.01em;padding:0;margin:44px 0 12px}
.f22-legal-text h2:first-child{margin-top:0}
.f22-legal-text p{margin:0 0 14px;padding:0;font-size:17px;line-height:1.7}
.f22-legal-text ul{list-style:disc;margin:0 0 14px;padding:0 0 0 22px}
.f22-legal-text li{margin:0 0 8px;font-size:17px;line-height:1.65}
.f22-legal-text a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.f22-legal-text .f22-legal-intro{font-size:19px;opacity:.9;margin-bottom:8px}
.f22-legal-text .f22-legal-date{margin-top:36px;font:500 12px var(--f22-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.f22x-ft .bot nav a+a{margin-left:18px}

/* cookiemelding: klein, linksonder, één keer */
.f22-ck{position:fixed;left:16px;bottom:16px;z-index:99990;display:flex;align-items:center;gap:14px;max-width:420px;padding:12px 12px 12px 16px;border-radius:16px;background:#ECE4D2;color:#221B15;box-shadow:0 24px 50px -20px rgba(0,0,0,.7),inset 0 0 0 1px rgba(34,27,21,.08);font:400 13.5px/1.45 var(--f22-sans,Inter,sans-serif);opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .35s ease}
.f22-ck[hidden]{display:none}
.f22-ck.on{opacity:1;transform:none}
.f22-ck p{margin:0;padding:0;font-size:13.5px;line-height:1.45;color:#221B15}
.f22-ck a{color:#221B15;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.f22-ck button{flex:none;border:0;border-radius:99px;background:#221B15;color:#ECE4D2;font:500 13px var(--f22-sans,Inter,sans-serif);padding:9px 16px;cursor:pointer}
.f22-ck button:hover{background:#5F6B44}
@media (max-width:600px){.f22-ck{right:88px;max-width:none;bottom:14px;left:12px;padding:10px 10px 10px 13px;gap:10px;font-size:12.5px}.f22-ck p{font-size:12.5px}}
@media (max-width:600px){.f22-ck p span{display:none}.f22-ck{right:auto;max-width:calc(100% - 100px)}}
/* v4.69 · contactformulier: duidelijke melding vlak boven de knop */
form.f22-cform>.et-pb-contact-message{grid-column:1/-1;margin:6px 0 10px;padding:12px 14px;border-radius:12px;font:500 14.5px/1.4 var(--f22-sans);background:rgba(34,27,21,.06);color:#221B15!important}
form.f22-cform>.et-pb-contact-message.is-err{background:rgba(201,96,60,.14);color:#8a3a1e!important}
form.f22-cform>.et-pb-contact-message.is-sent{background:#B9C48F;color:#221B15!important}
form.f22-cform>.et-pb-contact-message.is-sent:before{content:"✓ ";font-weight:700}

/* (v4.71) vindbaarheid: Limburg-pagina, Over, Tips */
html body .et_pb_section.f22-landing-hero .et_pb_button_module_wrapper{display:inline-block;margin:26px 10px 0 0!important;vertical-align:top}
html body .et_pb_section.f22-prose{padding-top:clamp(56px,7vw,96px)!important}
.f22-tone-z .f22-legal-text,.f22-group-z .f22-legal-text,.f22-tone-z .f22-legal-text .et_pb_text_inner,.f22-group-z .f22-legal-text .et_pb_text_inner{color:#2a231c}
.f22-tone-z .f22-legal-text h2,.f22-group-z .f22-legal-text h2{color:#221b15}
.f22-tone-z .f22-legal-text strong,.f22-group-z .f22-legal-text strong{color:#221b15;font-weight:600}
.f22-tone-b .f22-legal-text strong,.f22-group-b .f22-legal-text strong{font-weight:600}
.f22-svc-card a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.f22-svc-card a.f22-more{text-decoration:none;font-weight:500}