/* Lettertypes lopen via Global Font "Label" (var(--e-global-typography-accent-font-family)).\n   FÈN: alleen nog header, menu-overlay, het contactvenster.
   Alle secties van de homepage zijn native Elementor (Site Settings + Royal Custom CSS per widget).
   Backup van de oude, volledige stylesheet: uploads/fen-site/backup-2026-09-24/fen.css */
:root{--fn-ease:cubic-bezier(.22,.61,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:32px}
::selection{background:var(--e-global-color-secondary);color:var(--e-global-color-primary)}
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid currentColor;outline-offset:5px}
button{cursor:pointer}

/* Header */
.fn-header{position:absolute!important;inset:0 0 auto;z-index:10;height:116px;width:100%;padding:22px 4.3%!important;background:transparent}
.fn-wordmark{width:auto!important}
.fn-wordmark .elementor-heading-title{line-height:.9!important;letter-spacing:-.05em}
.fn-agency{display:block;font-family:var(--e-global-typography-accent-font-family),serif;font-size:8px;line-height:1;letter-spacing:.5em;margin:12px 0 0 7px}
.fn-toggle{position:absolute!important;left:50%;transform:translateX(-50%);width:58px!important}
.fen-menu-toggle{width:58px;height:54px;display:flex;flex-direction:column;justify-content:center;gap:9px;border:0;padding:6px 3px;background:transparent!important;color:var(--e-global-color-primary)!important;border-radius:0}
.fen-menu-toggle span{height:3px;background:currentColor;width:100%;transition:transform .4s var(--fn-ease)}
.fen-menu-toggle:hover span:nth-child(2){transform:translateX(7px)}
.fn-header-contact{width:auto!important;margin-left:auto}
.fn-header-contact .elementor-button{background:var(--e-global-color-donkerbruin)!important;color:var(--e-global-color-paper)!important;border-radius:50px!important;padding:17px 42px!important;font:400 18px/1.1 var(--e-global-typography-accent-font-family),serif!important;transition:background .3s,color .3s,transform .3s}
.fn-header-contact .elementor-button:hover{background:var(--e-global-color-warmbrown)!important;transform:translateY(-2px)}
.fen-menu-source{display:none!important}


/* Menu-overlay (opgebouwd uit de native menuknoppen) */
#fen-menu-dialog{position:fixed;inset:0 0 auto auto;margin:0;padding:40px 48px 50px;width:40%;max-width:600px;min-width:390px;max-height:90dvh;overflow-y:auto;background:var(--e-global-color-primary);color:var(--e-global-color-secondary);border:1px solid var(--e-global-color-beige);border-radius:0 0 0 26px}
#fen-menu-dialog::backdrop{background:color-mix(in srgb,var(--e-global-color-primary) 35%,transparent);backdrop-filter:blur(3px)}
#fen-menu-dialog[open]{animation:fn-menu-in .45s var(--fn-ease)}
.fn-menu-heading{font:400 45px/1 'Italiana',serif;margin-bottom:45px;letter-spacing:-.05em}
.fen-menu-close{position:absolute;right:26px;top:24px;width:52px;height:52px;font:300 48px/1 var(--e-global-typography-accent-font-family),serif;border:0;background:transparent!important;color:inherit!important;padding:0}
#fen-menu-dialog .fen-menu-source{display:flex!important;flex-direction:column!important;align-items:center;width:100%;gap:12px!important}
#fen-menu-dialog .elementor-button{color:var(--e-global-color-secondary);font:400 clamp(22px,2.4vw,32px)/1.3 var(--e-global-typography-accent-font-family),serif;padding:8px 12px;background:transparent;min-height:48px}
#fen-menu-dialog .elementor-button:hover{color:var(--e-global-color-paper)}
#fen-menu-dialog .fen-contact-trigger .elementor-button{border:1px solid currentColor;border-radius:50px;margin-top:15px;padding:12px 36px;font-size:28px}
body.fen-menu-open,body.fen-dialog-open{overflow:hidden}

/* Contactvenster (inhoud = Elementor-template "FÈN | Contact popup") */
.fen-skip{position:fixed;top:-100px;left:16px;z-index:100001;padding:12px 20px;background:var(--e-global-color-paper);color:var(--e-global-color-primary)}
.fen-skip:focus{top:16px}
#fen-contact-dialog{padding:0;border:0;background:var(--e-global-color-paper);color:var(--e-global-color-primary);width:min(600px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;margin:auto}
#fen-contact-dialog::backdrop{background:color-mix(in srgb,var(--e-global-color-primary) 65%,transparent);backdrop-filter:blur(7px)}
#fen-contact-dialog[open]{animation:fn-menu-in .25s ease-out}
.fen-modal-close{position:absolute;right:16px;top:16px;z-index:5;width:44px;height:44px;border:1px solid var(--e-global-color-secondary);border-radius:10px;background:transparent;color:inherit;font-size:28px;line-height:1;cursor:pointer}
.fen-modal-close:hover,.fen-modal-close:focus{background:var(--e-global-color-primary);color:var(--e-global-color-paper)}
.fen-modal-intro{margin:22px 0}
.fen-contact-example{margin-top:12px;border-top:1px solid color-mix(in srgb,var(--e-global-color-primary) 25%,transparent)}
.fen-contact-example .elementor-button{font-size:20px;padding-bottom:0;width:100%;text-align:left}
.fen-contact-example .elementor-button-content-wrapper{justify-content:flex-start}
.fen-contact-detail p,.fen-demo-note p{margin:0}
.fen-demo-note{margin-top:28px}
.fen-demo-note.is-highlighted{outline:1px solid currentColor;outline-offset:8px}
.fen-modal-title .elementor-heading-title{margin:20px 0}

@keyframes fn-menu-in{from{opacity:0;transform:translate(20px,-10px)}to{opacity:1;transform:none}}

/* Editor: header niet absoluut, menulinks zichtbaar */
.elementor-editor-active .fn-header{position:relative!important;height:auto;flex-wrap:wrap}
.elementor-editor-active .fen-menu-source{display:flex!important;flex-direction:column!important;width:100%}

@media(min-width:768px) and (max-width:1050px){.fn-header{height:95px}}
@media(max-width:767px){
 html{scroll-padding-top:20px}
 .fn-header{height:82px;padding:15px 20px!important}
 .fn-toggle{left:auto;right:20px;transform:none;width:47px!important}
 .fen-menu-toggle{width:47px;height:48px;gap:7px}
 .fn-header-contact{display:none!important}
 #fen-menu-dialog{width:100%;min-width:0;max-width:420px;padding:32px 28px 40px}
 #fen-menu-dialog .elementor-button{font-size:28px}
 .fen-menu-close{right:17px;top:15px}
 .fn-menu-heading{margin-bottom:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#fen-menu-dialog[open],#fen-contact-dialog[open]{animation:none}}

/* Zacht scrollen (Lenis, zie fen-smooth.js) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* Motion (zie fen-motion.js). Verborgen beginstanden gelden alleen met html.fen-motion, dus zonder script is alles zichtbaar. */
:root{--fm-ease:cubic-bezier(.16,1,.3,1);--fm-dur:1.25s;--fm-dist:28px}
.fen-wm{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .16em;margin:0 -.04em -.16em}
.fen-wi{display:inline-block}
.fen-motion .fen-m-lines .fen-wi{transform:translateY(135%)}
.fen-motion .fen-m-up{opacity:0;transform:translateY(var(--fm-dist))}
.fen-motion .fen-m-img img{clip-path:inset(100% 0 0 0 round var(--fm-radius,0px));scale:1.12}
.fen-motion-go .fen-m-lines .fen-wi{transition:transform var(--fm-dur) var(--fm-ease)}
.fen-motion-go .fen-m-up{transition:opacity 1s ease,transform var(--fm-dur) var(--fm-ease);transition-delay:var(--d,0s)}
.fen-motion-go .fen-m-img img{transition:clip-path 1.4s var(--fm-ease),scale 1.8s var(--fm-ease);transition-delay:var(--d,0s)}
.fen-motion .fen-m-lines.is-in .fen-wi{transform:none}
.fen-motion .fen-m-up.is-in{opacity:1;transform:none}
.fen-motion .fen-m-img.is-in img{clip-path:inset(0 0 0 0 round var(--fm-radius,0px));scale:1}
/* Hero: achtergrond zakt rustig op zijn plek, header fadet in */
/* Hero-foto als eigen laag (erft de responsive Elementor-achtergrond: duo op desktop, zijaanzicht op tablet/mobiel).
   Warme toon op het zwart-wit zodat de foto in het espresso/zand-palet valt; zachte gloed achter de kop voor leesbaarheid. */
#usp.fen-hero-layered{isolation:isolate;overflow:hidden}
/* 1px overlap met de volgende sectie: voorkomt een lichte haarlijn (subpixel-kier) bij Windows-schaling */
#usp{margin-bottom:-1px}
#usp+section{position:relative;z-index:1}
.fen-hero-bg{position:absolute;inset:-6% 0 0;z-index:-1;background-image:inherit;background-size:cover;background-position:inherit;pointer-events:none;filter:sepia(.3) saturate(.75) contrast(.9) brightness(1.04)}
.fen-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(234,230,222,.7) 0,rgba(234,230,222,0) 22%),radial-gradient(ellipse 38% 34% at 50% 52%,rgba(234,230,222,.62),rgba(234,230,222,0) 72%),linear-gradient(90deg,rgba(234,230,222,0) 44%,rgba(234,230,222,.38) 50%,rgba(234,230,222,0) 56%)}
#usp.fen-hero-layered::before{z-index:0;bottom:-2px}
#usp.fen-hero-layered>.e-con,#usp.fen-hero-layered>.e-con-inner{position:relative;z-index:1}
@media(max-width:1024px){.fen-hero-bg::after{background:linear-gradient(180deg,rgba(234,230,222,.7) 0,rgba(234,230,222,0) 18%),radial-gradient(ellipse 70% 30% at 50% 50%,rgba(234,230,222,.6),rgba(234,230,222,0) 75%)}}
.fen-motion .fen-hero-bg{scale:1.1}
.fen-motion-go .fen-hero-bg{scale:1;transition:scale 2.8s var(--fm-ease)}
.fen-motion .fn-header{opacity:0}
.fen-motion-go .fn-header{opacity:1;transition:opacity 1.2s ease .5s}
@media(max-width:767px){:root{--fm-dur:1s;--fm-dist:18px}}
/* Een open popup (Premium Modal) in een bewegend blok: beweging direct afronden, anders staat de popup verschoven */
.fen-m-up:has(.premium-modal-box-modal.premium-in),.fen-m-up:has(.premium-modal-box-modal[style*="display: block"]){transform:none!important;opacity:1!important;transition:none!important}

/* Service-iconen: SVG als blok, zodat de cirkel precies rond is (geen extra ruimte onder de basislijn) */
.fen-flip-front .elementor-icon{display:flex;align-items:center;justify-content:center;line-height:0}
.fen-flip-front .elementor-icon svg{display:block}

/* Meet FEN (moodboard): sage-blok grenst aan de staande foto, abstract beeld rechtsonder tegen de schermrand */
#meet-fen{position:relative}
.fen-meet-visual{position:relative}
.fen-meet-sage{position:relative;z-index:0;margin-right:-24px!important;padding-right:72px!important}
.fen-meet-photo{position:relative;z-index:1}
.fen-meet-abstract{position:absolute!important;right:0;bottom:0;width:min(27vw,440px)!important;height:230px;z-index:0}
.fen-meet-abstract>.e-con,.fen-meet-abstract>.elementor-widget{height:100%}
.fen-meet-abstract-img img{width:100%!important;height:230px!important;object-fit:cover;display:block}
#meet-fen>.e-con-inner{position:static}
@media(max-width:1024px){.fen-meet-abstract{height:180px;width:32vw!important}.fen-meet-abstract-img img{height:180px!important}}
@media(max-width:767px){.fen-meet-sage{margin-right:0!important;padding-right:28px!important;margin-top:-16px!important;padding-top:56px!important}}
/* Meet FEN: verticale tekst links naast de titel (moodboard), leest van onder naar boven */
.fen-meet-side{position:absolute!important;left:clamp(20px,3vw,48px);top:118px;width:auto!important;margin:0!important;z-index:1;pointer-events:none}
.fen-meet-side p{margin:0;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;letter-spacing:.32em!important;font-size:11px!important;line-height:1!important}