/* FÈN v2: de one-pager uit Astro, nagebouwd in Elementor. Lettertypes lokaal (geen Google). */
@font-face { font-family: 'Crimson Text'; src: url(fonts/crimson-text-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Crimson Text'; src: url(fonts/crimson-text-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'EB Garamond Variable'; src: url(fonts/eb-garamond-latin-wght-italic.woff2) format('woff2-variations'); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant SC'; src: url(fonts/cormorant-sc-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Marcellus'; src: url(fonts/marcellus-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fondamento'; src: url(fonts/fondamento-latin-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Sorts Mill Goudy'; src: url(fonts/sorts-mill-goudy-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Libre Caslon Display'; src: url(fonts/libre-caslon-display-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Italiana'; src: url(fonts/italiana-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Manrope Variable'; src: url(fonts/manrope-latin-wght-normal.woff2) format('woff2-variations'); font-weight: 200 800; font-display: swap; }
:root {
  --font-heading: 'Libre Caslon Display', serif; --font-sans: 'Manrope Variable', sans-serif; --font-serif: 'Crimson Text', serif;
  --font-aldine: 'EB Garamond Variable', serif; --font-lucy: 'Cormorant SC', serif; --font-atlane: 'Marcellus', serif;
  --font-iowan: 'Sorts Mill Goudy', serif; --font-logo: 'Italiana', serif; --font-script: 'Fondamento', cursive;
}

/* Elementor neutraal zetten op deze pagina: geen standaard-afstanden, kop- en tekstwidgets nemen de opmaak van hun eigen klasse over */
body.fn2 { --kit-widget-spacing: 0px; --widgets-spacing: 0px 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
  --container-default-padding-top: 0px; --container-default-padding-right: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px;
  margin: 0; font-family: var(--font-sans); }
body.fn2 *, body.fn2 *::before, body.fn2 *::after { box-sizing: border-box; }
/* Elementor-containers gedragen zich als gewone blokken; alleen de klassen hieronder maken er flex of grid van */
.fn2 .e-con:where(:not(.elementor-55 *)) { display: block; position: static; width: auto; min-width: 0; max-width: none; min-height: auto; height: auto; padding: 0; margin: 0; gap: 0; flex-direction: row; flex-wrap: nowrap; align-items: normal; justify-content: normal; text-align: inherit; border: 0; }
.fn2 .elementor-widget:where(:not(.elementor-55 *)) { position: static; }
.fn2 :where(.e-con > .elementor-widget, .e-con > .e-con):where(:not(.elementor-55 *)) { width: auto; max-width: none; margin: 0; }
.fn2 .elementor-widget:where(:not(.elementor-55 *)) .elementor-heading-title { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; text-align: inherit !important; margin: 0 !important; padding: 0 !important; }
.fn2 :where(:not(.elementor-55 *)) > .elementor-heading-title a { color: inherit; text-decoration: none; }
.fn2 .elementor-widget-text-editor:where(:not(.elementor-55 *)) { font: inherit; color: inherit; }
.fn2 .elementor-widget-text-editor:where(:not(.elementor-55 *)) p { margin: 0; font: inherit; color: inherit; }
.fn2 .elementor-widget-text-editor p.contact-opt { margin: 12px 0 0; }
.fn2 .elementor-widget-image { text-align: left; }
.fn2 .elementor img { border-radius: 0; box-shadow: none; }
.fn2 .elementor-button { all: unset; box-sizing: border-box; }
.fn2 .elementor-button-content-wrapper, .fn2 .elementor-button-text { display: contents; }
.fn2 .fn-dialogs { display: none; }
.elementor-editor-active.fn2 .fn-dialogs { display: block; }
.fn2 dialog .e-con, .fn2 dialog .elementor-widget-html { position: static; }
.fn2 .fn-toggle-w { position: static; }
.fn2 .fn-header > .fn-header-contact { margin-left: auto; }
.fn2 .fn-header-contact .elementor-button, .fn2 .hero-contact .elementor-button { cursor: pointer; }
.fn2 .d1 { --d: .1s; } .fn2 .d15 { --d: .15s; } .fn2 .d2 { --d: .2s; } .fn2 .d25 { --d: .25s; } .fn2 .d3 { --d: .3s; }
/* Kop "Let's work with me": woordposities uit de PDF */
.fn2 .work-title .w1 { --l: 0; --s: .9665; } .fn2 .work-title .w2 { --l: 146.4; --s: .904; } .fn2 .work-title .w3 { --l: 317.8; --s: .926; } .fn2 .work-title .w4 { --l: 476.3; --s: .907; }
/* Beelden vullen hun widget */
.fn2 .hero-img img, .fn2 .work-motion img, .fn2 .beeld-img img, .fn2 .pslide img, .fn2 .envelop-img img { display: block; }
.fn2 .work-portret img { width: 100%; height: 100%; object-fit: cover; }
.fn2 .beeld-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fn2 .envelop-img { position: absolute; inset: 0; }
.fn2 .collage-koffie, .fn2 .collage-deur, .fn2 .pslide, .fn2 .hero-img { overflow: hidden; }

/* FÈN Agency: kleuren en lettertypes gelijk aan de WordPress-site (Global Colors/Fonts). */
:root {
  --ink: #32231c;        /* donkerbruin */
  --espresso: #573a2b;   /* koppen uit het moodboard */
  --warm: #594a3e;
  --taupe: #7e6e60;
  --paper: #eae6de;
  --cream: #f4f1eb;
  --white: #fbfaf7;
  --sand: #d3cac0;
  --beige: #d2c3ae;
  --sage: #6d7d7a;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 4.3vw, 64px);
  --section: clamp(84px, 9vw, 140px);
}
html {
 scroll-padding-top: 24px; }
body.fn2 {
 background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
body.fn2.fn-locked {
 overflow: hidden; }
.fn2 ::selection {
 background: var(--sand); color: var(--ink); }
.fn2 a:focus-visible, .fn2 button:focus-visible, .fn2 [tabindex="0"]:focus-visible {
 outline: 2px solid currentColor; outline-offset: 5px; }
.fn2 figure {
 margin: 0; }
.fn2 img {
 display: block; }
.fn2 svg {
 fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fn2 .eyebrow {
 font: 500 12px/1.5 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--taupe); margin: 0; }
.fn2 .fn-skip {
 position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--paper); color: var(--ink); }
.fn2 .fn-skip:focus {
 top: 16px; }
/* Knoppen */
.fn2 .fn-pill {
 display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 50px; padding: 15px 38px; font: 400 17px/1.1 var(--font-sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .3s, color .3s, transform .3s, border-color .3s; }
.fn2 .fn-pill:hover {
 transform: translateY(-2px); }
.fn2 .fn-pill--dark, .fn2 .fn-header-contact .elementor-button {
 background: var(--ink); color: var(--paper); }
.fn2 .fn-pill--dark:hover, .fn2 .fn-header-contact .elementor-button:hover {
 background: var(--warm); }
.fn2 .fn-pill--light {
 border-color: color-mix(in srgb, var(--paper) 80%, transparent); color: var(--paper); background: color-mix(in srgb, var(--ink) 18%, transparent); backdrop-filter: blur(4px); }
.fn2 .fn-pill--light:hover {
 background: var(--paper); color: var(--ink); }
.fn2 .fn-link {
 color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--beige); padding-bottom: 4px; font-size: 15px; transition: border-color .3s; }
.fn2 .fn-link:hover {
 border-color: var(--ink); }
.fn2 .round-btn {
 width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--sage); color: var(--sage); background: transparent; cursor: pointer; transition: background-color .3s, color .3s; }
.fn2 .round-btn svg {
 width: 18px; height: 18px; stroke-width: 1.6; }
.fn2 .round-btn:hover {
 background: var(--sage); color: var(--paper); }
.fn2 .round-btn--light {
 border-color: var(--sand); color: var(--sand); width: 46px; height: 46px; }
.fn2 .round-btn--light:hover {
 background: var(--sand); color: var(--ink); }
/* Header (zoals de huidige site) */
.fn2 .fn-header {
 position: absolute; inset: 0 0 auto; z-index: 10; height: 116px; padding: 22px 4.3%; display: flex; align-items: center; color: var(--paper); }
.fn2 .fn-wordmark {
 font: 400 54px/.9 var(--font-logo); letter-spacing: -.05em; color: inherit; text-decoration: none; }
.fn2 .fn-wordmark span {
 display: block; font: 400 8px/1 var(--font-sans); letter-spacing: .5em; margin: 12px 0 0 7px; }
.fn2 .fn-toggle {
 position: absolute; left: 50%; transform: translateX(-50%); width: 58px; height: 54px; display: flex; flex-direction: column; justify-content: center; gap: 9px; border: 0; padding: 6px 3px; background: transparent; color: inherit; cursor: pointer; }
.fn2 .fn-toggle span {
 height: 3px; background: currentColor; transition: transform .4s var(--ease); }
.fn2 .fn-toggle:hover span:nth-child(2) {
 transform: translateX(7px); }
.fn2 .fn-header-contact .elementor-button {
 margin-left: auto; padding: 17px 42px; font-size: 18px; }
/* Menu */
.fn2 .fn-menu {
 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(--ink); color: var(--sand); border: 1px solid var(--beige); border-radius: 0 0 0 26px; }
.fn2 .fn-menu::backdrop {
 background: color-mix(in srgb, var(--ink) 35%, transparent); backdrop-filter: blur(3px); }
.fn2 .fn-menu[open] {
 animation: fn-in .45s var(--ease); }
.fn2 .fn-menu-heading {
 font: 400 45px/1 var(--font-logo); letter-spacing: -.05em; margin: 0 0 45px; }
.fn2 .fn-menu-close {
 position: absolute; right: 26px; top: 24px; width: 52px; height: 52px; font: 300 48px/1 var(--font-sans); border: 0; background: transparent; color: inherit; cursor: pointer; }
.fn2 .fn-menu nav {
 display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fn2 .fn-menu nav a {
 color: var(--sand); text-decoration: none; text-transform: uppercase; font: 400 clamp(22px, 2.4vw, 32px)/1.3 var(--font-sans); padding: 8px 12px; min-height: 48px; transition: color .3s; }
.fn2 .fn-menu nav a:hover {
 color: var(--paper); }
.fn2 .fn-menu nav .fn-menu-contact {
 border: 1px solid currentColor; border-radius: 50px; margin-top: 15px; padding: 12px 36px; font-size: 28px; }
/* Modals: contact en diensten */
.fn2 .fn-modal {
 padding: 48px 44px 34px; border: 0; background: var(--paper); color: var(--ink); width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 40px); overflow: auto; margin: auto; }
.fn2 .fn-modal::backdrop {
 background: color-mix(in srgb, var(--ink) 65%, transparent); backdrop-filter: blur(7px); }
.fn2 .fn-modal[open] {
 animation: fn-in .25s ease-out; }
.fn2 .fn-modal-h {
 font: 400 clamp(36px, 5vw, 52px)/1.1 var(--font-heading); letter-spacing: -.01em; margin: 14px 0 0; }
.fn2 .fn-modal-h3 {
 font: 400 26px/1.2 var(--font-serif); margin: 26px 0 8px; }
.fn2 .fn-modal-x {
 margin: 0 0 16px; }
.fn2 .fn-modal-intro {
 margin: 22px 0 !important; }
.fn2 .fn-modal-x {
 margin-top: 10px; }
.fn2 .fn-modal-close {
 position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border: 1px solid var(--sand); border-radius: 10px; background: transparent; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.fn2 .fn-modal-close:hover {
 background: var(--ink); color: var(--paper); }
.fn2 .contact-opt {
 display: flex; flex-direction: column; gap: 2px; padding: 16px 22px 16px 16px; margin-top: 12px; border: 1px solid var(--sand); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color .3s, background-color .3s; }
.fn2 .contact-opt strong {
 font: 400 22px/1.2 var(--font-serif); }
.fn2 .contact-opt span {
 font-size: 15px; color: var(--warm); }
.fn2 .contact-opt:hover {
 border-color: var(--ink); background: var(--cream); }
.fn2 .fn-modal-foot {
 margin-top: 26px !important; font-size: 13px; color: var(--taupe); }
@keyframes fn-in {
from {
 opacity: 0; transform: translate(20px, -10px); }
to {
 opacity: 1; transform: none; }
 }
/* Reveal (alleen met JS en zonder reduced motion) */
.fn-motion .fn2 .reveal {
 opacity: 0; transform: translateY(26px); transition: opacity 1s ease var(--d, 0s), transform 1.25s var(--ease) var(--d, 0s); }
.fn-motion .fn2 .reveal.is-in {
 opacity: 1; transform: none; }
/* 1. Hero */
.fn2 .hero {
 position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100svh; min-height: 620px; max-height: 1100px; overflow: hidden; background: var(--ink); color: var(--paper); }
.fn2 .hero-img {
 position: relative; overflow: hidden; }
.fn2 .hero-img img {
 width: 100%; height: 100%; object-fit: cover; }
.fn2 .hero-img--l img {
 object-position: 50% 100%; }
.fn2 .hero-img--r img {
 object-position: 50% 40%; }
.fn-motion .fn2 .hero-img img {
 scale: 1.08; transition: scale 2.8s var(--ease); }
.fn-motion.fn-ready .fn2 .hero-img img {
 scale: 1; }
.fn2 .hero::after {
 content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(36, 26, 20, .45) 0, rgba(36, 26, 20, 0) 26%), linear-gradient(0deg, rgba(36, 26, 20, .55) 0, rgba(36, 26, 20, 0) 45%), rgba(36, 26, 20, .08); }
.fn2 .hero-sub {
 position: absolute; z-index: 2; left: 50%; top: 54%; translate: -50% 0; margin: 0; white-space: nowrap; font: 400 clamp(20px, 2.1vw, 34px)/1.2 var(--font-serif); text-shadow: 0 1px 18px rgba(36, 26, 20, .45); }
.fn2 .hero-copy {
 position: absolute; z-index: 2; left: 10.5%; bottom: clamp(56px, 13vh, 150px); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.fn2 .hero-title {
 margin: 0; font: 400 clamp(36px, 3.6vw, 60px)/1.2 var(--font-serif); letter-spacing: .005em; text-shadow: 0 1px 24px rgba(36, 26, 20, .4); }
.fn2 .hero-title span {
 display: block; }
.fn2 .hero-title em {
 font: 400 1.04em/1 var(--font-atlane); font-style: normal; }
.fn2 .hero-bar {
 display: none; }
.fn2 .hero-contact .elementor-button {
 display: inline-flex; align-items: center; border-radius: 50px; padding: .5em 1.3em; background: var(--paper); color: #231f20; font: 400 17px/1 var(--font-serif); text-decoration: none; transition: background-color .3s, transform .3s; }
.fn2 .hero-contact .elementor-button:hover {
 background: #fff; transform: translateY(-2px); }
/* 2. Let's work with me */
.fn2 .work {
 position: relative; display: grid; grid-template-columns: 46% 54%; background: #fff; min-height: min(100svh, 980px); overflow: hidden; }
.fn2 .work-title {
 position: absolute; z-index: 3; left: var(--gutter); top: clamp(56px, 7vw, 100px); margin: 0; font: 400 italic clamp(52px, 6.6vw, 110px)/1 var(--font-aldine); text-transform: uppercase; color: var(--espresso); white-space: nowrap; }
.fn2 .work-copy {
 grid-column: 1; padding: clamp(150px, 15vw, 230px) var(--gutter) var(--section) clamp(48px, 7vw, 120px); display: flex; flex-direction: column; gap: 30px; }
/* Papier met paperclip uit de PDF; het portret ligt er op dezelfde plek in (percentages van het papier) */
.fn2 .work-paper {
 position: relative; width: min(440px, 90%); aspect-ratio: 288.3 / 364.4; }
.fn2 .work-paper .work-paper-img, .fn2 .work-paper .work-paper-img img {
 width: 100%; height: 100%; }
.fn2 .work-paper .work-portret {
 position: absolute; left: 29.62%; top: 19.13%; width: 45.37%; height: 68.66%; object-fit: cover; }
.fn2 .work-text {
 max-width: 420px; color: #231f20; }
.fn2 .work-who {
 margin: 0 0 6px; padding-left: 1.3em; font: 400 18px/1.4 var(--font-iowan); text-transform: uppercase; }
.fn2 .work-p {
 margin: 0; font: 400 18px/1.2 var(--font-serif); text-align: justify; hyphens: auto; }
.fn2 .work-motion {
 grid-column: 2; position: relative; overflow: hidden; background: #cfcfcf; }
.fn2 .work-motion img {
 position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: grayscale(1) blur(1px); }
.fn-motion .fn2 .work-motion img {
 animation: fn-drift 14s ease-in-out infinite alternate; }
@keyframes fn-drift {
0% {
 transform: translate3d(-2%, 1%, 0) scale(1); }
50% {
 transform: translate3d(1.5%, -1%, 0) scale(1.04); }
100% {
 transform: translate3d(-1%, -2%, 0) scale(1.02); }
 }
/* 3. Services & pakketten op maat */
.fn2 .services {
 display: grid; grid-template-columns: 64% 36%; background: #f1eee5; }
.fn2 .services-main {
 position: relative; padding: var(--section) var(--gutter) var(--section) clamp(72px, 6.6vw, 96px); }
.fn2 .services-side {
 position: absolute; left: clamp(20px, 2.6vw, 40px); top: var(--section); margin: 0; writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; font: 500 17px/1 var(--font-lucy); color: var(--espresso); }
.fn2 .collage {
 display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 270px); grid-template-rows: auto auto auto; column-gap: 0; max-width: 540px; }
.fn2 .collage-title {
 grid-column: 1; grid-row: 1; align-self: end; margin: 0; padding: 0 12px 22px; text-align: center; font: 500 clamp(28px, 2.6vw, 38px)/1.2 var(--font-lucy); color: var(--espresso); }
.fn2 .collage-koffie {
 grid-column: 1; grid-row: 2 / 4; aspect-ratio: 337 / 420; overflow: hidden; }
.fn2 .collage-deur {
 grid-column: 2; grid-row: 1 / 3; aspect-ratio: 427 / 529; overflow: hidden; }
.fn2 .collage-koffie img, .fn2 .collage-deur img {
 width: 100%; height: 100%; object-fit: cover; }
.fn2 .collage-note {
 grid-column: 2; grid-row: 3; margin: 6px 0 0 16px; font: italic 400 18px/1.2 var(--font-script); color: #231f20; }
.fn2 .cards {
 list-style: none; margin: clamp(40px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fn2 .card-col {
 display: flex; flex-direction: column; gap: 14px; }
.fn2 .card-nr .elementor-heading-title > a {
 display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: 400 clamp(48px, 4.6vw, 70px)/1 var(--font-serif); color: #231f20; transition: color .3s; }
.fn2 .card-name {
 font: 500 11px/1.3 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); border-bottom: 1px solid var(--beige); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.fn2 .card-nr .elementor-heading-title > a:hover, .fn2 .card-nr .elementor-heading-title > a:focus-visible {
 color: var(--espresso); }
.fn2 .card-nr .elementor-heading-title > a:hover .card-name, .fn2 .card-nr .elementor-heading-title > a:focus-visible .card-name {
 color: var(--espresso); border-color: var(--espresso); }
.fn2 .dienst-nr {
 color: var(--taupe); }
.fn2 .contact-opt--static {
 cursor: default; }
.fn2 .contact-opt--static:hover {
 border-color: var(--sand); background: transparent; }
.fn2 .services-envelop {
 position: sticky; top: 0; height: 100svh; max-height: 1000px; align-self: start; overflow: hidden; }
/* Envelop: handmatige "cover" in een vaste beeldverhouding, zodat de opdruk op de kaart blijft staan */
.fn2 .services-envelop {
 container-type: size; }
.fn2 .envelop-box {
 position: absolute; left: 50%; top: 50%; width: max(100cqw, 70.6cqh); aspect-ratio: 423 / 599; translate: -50% -50%; container-type: size; }
.fn2 .envelop-box img {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fn2 .envelop-fen, .fn2 .envelop-agency {
 position: absolute; translate: -50% -50%; rotate: 35.5deg; color: #6b4634; mix-blend-mode: multiply; white-space: nowrap; pointer-events: none; }
.fn2 .envelop-fen {
 left: 62%; top: 43.4%; font: 400 11cqw/1 var(--font-heading); letter-spacing: .02em; }
.fn2 .envelop-agency {
 left: 56.6%; top: 48.6%; font: 400 3.1cqw/1 var(--font-heading); letter-spacing: .28em; rotate: 37.5deg; }
/* 4. Beeld */
.fn2 .beeld {
 position: relative; height: 720px; display: grid; place-items: center; padding: 100px 80px; overflow: hidden; color: var(--paper); text-align: center; }
.fn2 .beeld-img {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.fn2 .beeld .beeld-img--tall {
 display: none; }
.fn2 .beeld::before {
 content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(36, 26, 20, .38); }
.fn2 .beeld-copy {
 max-width: 680px; position: relative; }
.fn2 .beeld-h {
 margin: 0 0 22px; font: 400 clamp(40px, 4.4vw, 64px)/1.12 var(--font-heading); letter-spacing: -.01em; }
.fn2 .beeld-p {
 margin: 0 auto; max-width: 520px; }
/* 5. Portfolio */
.fn2 .portfolio {
 display: grid; grid-template-columns: minmax(240px, 22%) minmax(0, 1fr); gap: 36px; align-items: center; background: var(--paper); padding: 110px 0 110px 72px; overflow: hidden; }
.fn2 .portfolio-h {
 margin: 18px 0 20px; font: 400 64px/1.12 var(--font-heading); letter-spacing: -.01em; }
.fn2 .portfolio-h strong {
 font: 700 1em/1 var(--font-serif); color: var(--sage); }
.fn2 .portfolio-p {
 margin: 0 0 34px; }
.fn2 .portfolio-nav {
 display: flex; gap: 12px; }
.fn2 .carousel {
 overflow: hidden; }
.fn2 .carousel-track {
 list-style: none; margin: 0; padding: 0; display: flex; column-gap: 16px; will-change: transform; }
.fn2 .pslide {
 flex: 0 0 322px; height: 484px; overflow: hidden; }
.fn2 .pslide img {
 width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
.fn2 .pslide:hover img {
 scale: 1.045; }
/* 6. Footer */
.fn2 .footer {
 background: var(--ink); color: var(--sand); padding: 0 24px; }
.fn2 .footer-grid {
 max-width: 1140px; margin: 0 auto; padding: 90px 0 60px; display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 40px; border-bottom: 1px solid color-mix(in srgb, var(--sand) 35%, transparent); }
.fn2 .footer-logo {
 margin: 0 0 14px; font: 400 44px/1 var(--font-logo); letter-spacing: -.04em; color: var(--paper); }
.fn2 .footer-tag {
 margin: 0; font-size: 12px; letter-spacing: .06em; }
.fn2 .footer-label {
 margin: 0 0 22px; font: 500 12px/1.5 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; }
.fn2 .footer-list {
 list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fn2 .footer-list a {
 display: inline-flex; align-items: center; gap: 14px; color: var(--paper); text-decoration: none; transition: color .3s; }
.fn2 .footer-list a:hover {
 color: var(--beige); }
.fn2 .footer-list svg {
 width: 17px; height: 17px; }
.fn2 .footer-social {
 justify-self: end; text-align: right; }
.fn2 .footer-copy {
 margin: 0; padding: 26px 0 34px; text-align: center; font-size: 12px; }
/* Responsive */
@media (max-width: 1280px) {
.fn2 .services {
 grid-template-columns: 1fr; }
.fn2 .services-envelop {
 position: relative; height: 70vh; min-height: 420px; max-height: none; }
.fn2 .services-main {
 padding-right: var(--gutter); }
}
@media (min-width: 768px) and (max-width: 1050px) {
.fn2 .fn-header {
 height: 95px; }
.fn2 .work {
 grid-template-columns: 54% 46%; }
}
@media (max-width: 1024px) {
.fn2 .portfolio {
 grid-template-columns: 1fr; padding: 90px 0 90px var(--gutter); gap: 40px; }
.fn2 .portfolio-intro {
 padding-right: var(--gutter); max-width: 560px; }
}
@media (max-width: 767px) {
body.fn2 {
 font-size: 16px; }
.fn2 .fn-header {
 height: 82px; padding: 15px 20px; }
.fn2 .fn-wordmark {
 font-size: 42px; }
.fn2 .fn-toggle {
 left: auto; right: 20px; transform: none; width: 47px; height: 48px; gap: 7px; }
.fn2 .fn-header-contact .elementor-button {
 display: none; }
.fn2 .fn-menu {
 width: 100%; min-width: 0; max-width: 420px; padding: 32px 28px 40px; }
.fn2 .fn-menu nav a {
 font-size: 28px; }
.fn2 .fn-menu-close {
 right: 17px; top: 15px; }
.fn2 .fn-menu-heading {
 margin-bottom: 30px; }
.fn2 .fn-modal {
 padding: 56px 24px 28px; }
.fn2 .hero {
 min-height: 600px; }
.fn2 .hero::after {
 background: linear-gradient(180deg, rgba(36, 26, 20, .5) 0, rgba(36, 26, 20, 0) 22%), linear-gradient(0deg, rgba(36, 26, 20, .7) 0, rgba(36, 26, 20, 0) 55%); }
.fn2 .hero-sub {
 top: auto; bottom: 44px; left: 24px; translate: none; white-space: normal; font-size: 18px; }
.fn2 .hero-copy {
 left: 24px; right: 24px; bottom: 96px; gap: 22px; }
.fn2 .hero-title {
 font-size: clamp(32px, 9.4vw, 42px); }
.fn2 .work {
 grid-template-columns: 1fr; }
.fn2 .work-title {
 position: relative; left: auto; top: auto; padding: 72px 20px 0; font-size: clamp(38px, 11vw, 60px); white-space: normal; }
.fn2 .work-copy {
 padding: 44px 24px 64px; align-items: center; }
.fn2 .work-paper {
 width: min(340px, 92%); }
.fn2 .work-motion {
 grid-column: 1; height: 62vh; min-height: 380px; }
.fn2 .services-main {
 padding: 72px 20px 72px 56px; }
.fn2 .services-side {
 left: 14px; top: 72px; font-size: 15px; }
.fn2 .collage {
 grid-template-columns: 1fr 1fr; }
.fn2 .collage-title {
 padding: 0 6px 14px; font-size: clamp(22px, 6.4vw, 30px); }
.fn2 .collage-note {
 margin-left: 10px; font-size: 15px; }
.fn2 .cards {
 gap: 12px; }
.fn2 .card-name {
 font-size: 10px; letter-spacing: .1em; }
.fn2 .beeld {
 height: auto; min-height: 640px; padding: 80px 24px; }
.fn2 .beeld .beeld-img--wide {
 display: none; }
.fn2 .beeld .beeld-img--tall {
 display: block; }
.fn2 .portfolio-h {
 font-size: 48px; }
.fn2 .pslide {
 flex-basis: 260px; height: 390px; }
.fn2 .footer-grid {
 grid-template-columns: 1fr; padding: 64px 0 44px; gap: 36px; }
.fn2 .footer-social {
 justify-self: start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.fn2 .fn-menu[open], .fn2 .fn-modal[open] {
 animation: none; }
}
/* ===== Volledig scherm per sectie (html.fp-on, gezet door JS; niet bij reduced motion) ===== */
.fn2 .fp-dots {
 display: none; }
.fp-on, .fp-on body {
 height: 100%; overflow: hidden; overscroll-behavior: none; }
.fp-on .fn2 .fp {
 position: fixed; inset: 0; overflow: hidden; background: var(--ink); }
.fp-on .fn2 .slide {
 position: absolute; inset: 0; height: 100%; min-height: 0; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; visibility: hidden; z-index: 0; }
.fp-on .fn2 .slide::-webkit-scrollbar {
 display: none; }
/* Verre secties renderen (en laden hun foto's) pas als ze in de buurt komen */
.fp-on .fn2 .slide:not(.is-near, .fn2 .is-active, .fn2 .is-leaving, .fn2 .is-entering) {
 content-visibility: hidden; }
.fp-on .fn2 .slide.is-active {
 visibility: visible; z-index: 1; }
.fp-on .fn2 .slide.is-leaving {
 visibility: visible; z-index: 1; animation: fp-out-down 1.15s cubic-bezier(.77, 0, .18, 1) forwards; }
.fp-on .fn2 .slide.is-entering {
 visibility: visible; z-index: 2; animation: fp-in-down 1.15s cubic-bezier(.77, 0, .18, 1) forwards; }
.fp-on .fn2 .fp[data-dir="up"] .slide.is-leaving {
 animation-name: fp-out-up; }
.fp-on .fn2 .fp[data-dir="up"] .slide.is-entering {
 animation-name: fp-in-up; }
/* Nieuwe sectie schuift als een doek over de oude; de oude zakt rustig weg en dimt */
@keyframes fp-in-down {
from {
 clip-path: inset(100% 0 0 0); transform: translateY(12vh); }
to {
 clip-path: inset(0); transform: none; }
 }
@keyframes fp-in-up {
from {
 clip-path: inset(0 0 100% 0); transform: translateY(-12vh); }
to {
 clip-path: inset(0); transform: none; }
 }
@keyframes fp-out-down {
from {
 transform: none; opacity: 1; }
to {
 transform: translateY(-14vh) scale(.97); opacity: .25; }
 }
@keyframes fp-out-up {
from {
 transform: none; opacity: 1; }
to {
 transform: translateY(14vh) scale(.97); opacity: .25; }
 }
/* Header ligt vast boven alle secties en volgt de kleur van de actieve sectie */
.fp-on .fn2 .fn-header {
 position: fixed; z-index: 20; transition: color .6s ease, background-color .4s ease, height .4s ease; }
.fp-on[data-slide-theme="light"] .fn2 .fn-header {
 color: var(--ink); }
.fp-on .fn2 .fn-header.is-solid {
 height: 84px; background: color-mix(in srgb, var(--cream) 92%, transparent); backdrop-filter: blur(10px); color: var(--ink); }
.fp-on[data-slide-theme="dark"] .fn2 .fn-header.is-solid {
 background: color-mix(in srgb, var(--ink) 88%, transparent); color: var(--paper); }
.fp-on .fn2 .fn-header.is-solid .fn-wordmark {
 font-size: 44px; }
/* Sectie-indicator rechts */
.fp-on .fn2 .fp-dots {
 position: fixed; z-index: 20; right: clamp(12px, 1.6vw, 26px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 2px; padding: 6px 3px; border-radius: 20px; color: var(--paper); background: rgba(36, 26, 20, .32); backdrop-filter: blur(6px); }
.fn2 .fp-dots button {
 width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.fn2 .fp-dots button::before {
 content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; opacity: .55; transition: transform .4s var(--ease), opacity .4s, background-color .4s; }
.fn2 .fp-dots button:hover::before {
 opacity: 1; }
.fn2 .fp-dots button[aria-current="true"]::before {
 background: currentColor; opacity: 1; transform: scale(1.35); }
/* Desktop: elke sectie past op één scherm */
@media (min-width: 1024px) {
.fp-on .fn2 .beeld {
 height: 100%; }
.fp-on .fn2 .slide--end {
 display: flex; flex-direction: column; background: var(--paper); }
.fp-on .fn2 .portfolio {
 flex: 1; min-height: 0; padding-top: max(110px, 12vh); padding-bottom: 4vh; }
.fp-on .fn2 .pslide {
 height: clamp(300px, 46vh, 484px); flex-basis: calc(clamp(300px, 46vh, 484px) * 2 / 3); }
.fp-on .fn2 .footer-grid {
 padding: 42px 0 30px; }
.fp-on .fn2 .footer-copy {
 padding: 16px 0 22px; }
}
@media (max-width: 1023px) {
.fp-on .fn2 .slide {
 -webkit-overflow-scrolling: touch; }
.fp-on .fn2 .work-title {
 padding-top: 108px; }
.fp-on .fn2 .services-main {
 padding-top: 108px; }
.fp-on .fn2 .services-side {
 top: 108px; }
}
@media (max-width: 767px) {
.fp-on .fn2 .fn-header.is-solid {
 height: 70px; }
.fp-on .fn2 .fn-header.is-solid .fn-wordmark {
 font-size: 36px; }
.fp-on .fn2 .fp-dots {
 display: none; }
}
/* ===== PDF-opzet (desktop/liggend): hero, Let's work with me en Services 1-op-1 naar "Voorbeeld website.pdf" =====
   Eén PDF-punt = var(--u). Het A4-vlak (841,89 x 595,28 pt) schaalt gelijkmatig mee en staat gecentreerd;
   achtergronden en foto's lopen door tot de schermrand. Coördinaten hieronder zijn letterlijk de PDF-waarden in pt. */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
.fn2 .hero, .fn2 .work, .fn2 .services {
    --u: min(calc(100vw / 841.89), calc(100svh / 595.28));
    --ox: calc((100vw - 841.89 * var(--u)) / 2);
    --oy: calc((100svh - 595.28 * var(--u)) / 2);
    position: relative; display: block; height: 100svh; min-height: 0; max-height: none; overflow: hidden;
  }
.fp-on .fn2 .hero, .fp-on .fn2 .work, .fp-on .fn2 .services {
 height: 100%; }
.fn2 .pdf-x {
 left: calc(var(--ox) + var(--x) * var(--u)); }
/* Pagina 1: hero */
  .fn2 .hero::after {
 background: linear-gradient(180deg, rgba(36, 26, 20, .28) 0, rgba(36, 26, 20, 0) 18%); }
.fn2 .hero-bar {
 display: block; position: absolute; z-index: 3; inset: 0 0 auto; height: calc(var(--oy) + 12.8 * var(--u)); background: var(--espresso); }
.fn2 .hero-img {
 position: absolute; top: calc(var(--oy) + 11 * var(--u)); bottom: 0; }
.fn2 .hero-img--l {
 left: 0; width: 50%; }
.fn2 .hero-img--r {
 left: 50%; right: 0; }
.fn2 .hero-sub {
 left: calc(var(--ox) + 251.8 * var(--u)); top: calc(var(--oy) + 309.7 * var(--u)); translate: none; font: 400 calc(22.3 * var(--u))/1.35 var(--font-serif); text-shadow: none; }
.fn2 .hero-copy {
 left: calc(var(--ox) + 87.9 * var(--u)); top: calc(var(--oy) + 394.1 * var(--u)); bottom: auto; gap: calc(1.5 * var(--u)); }
.fn2 .hero-title {
 font: 400 calc(22.5 * var(--u))/calc(25.4 * var(--u)) var(--font-serif); letter-spacing: 0; text-shadow: none; }
.fn2 .hero-title em {
 font-size: .95em; letter-spacing: -.05em; }
.fn2 .hero-contact .elementor-button {
 font-size: calc(14 * var(--u)); padding: calc(4 * var(--u)) calc(17 * var(--u)); }
/* Pagina 3: Let's work with me */
  .fn2 .work {
 background: #fff; }
.fn2 .work-title {
 left: calc(var(--ox) + 25.5 * var(--u)); top: calc(var(--oy) + 40.3 * var(--u)); font-size: calc(57 * var(--u)); line-height: calc(73.2 * var(--u)); letter-spacing: 0; width: calc(557.3 * var(--u)); height: calc(73.2 * var(--u)); }
.fn2 .work-title span {
 position: absolute; top: 0; left: calc(var(--l) * var(--u)); transform: scaleX(var(--s)); transform-origin: 0 50%; }
.fn2 .work-copy {
 display: contents; }
.fn2 .work-paper {
 position: absolute; left: calc(var(--ox) + 43.4 * var(--u)); top: calc(var(--oy) + 102.8 * var(--u)); width: calc(288.3 * var(--u)); }
.fn2 .work-text {
 position: absolute; left: calc(var(--ox) + 78 * var(--u)); top: calc(var(--oy) + 451.1 * var(--u)); width: calc(245 * var(--u)); max-width: none; }
.fn2 .work-who {
 padding-left: calc(15.5 * var(--u)); margin: 0 0 calc(4.4 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20.4 * var(--u)); }
.fn2 .work-p {
 font-size: calc(12 * var(--u)); line-height: calc(14.4 * var(--u)); }
.fn2 .work-motion {
 position: absolute; left: calc(var(--ox) + 388.3 * var(--u)); right: 0; top: 0; bottom: 0; }
/* Pagina 2: Services & pakketten op maat (50/50) */
  .fn2 .services {
 background: linear-gradient(90deg, #f1eee5 50%, transparent 50%); }
.fn2 .services-main {
 position: static; padding: 0; }
.fn2 .services-side {
 left: calc(var(--ox) + 20.5 * var(--u)); top: calc(var(--oy) + 78.3 * var(--u)); height: calc(292 * var(--u)); font-size: calc(16.2 * var(--u)); line-height: calc(16.7 * var(--u)); text-align: center; }
.fn2 .collage {
 display: contents; }
.fn2 .collage > * {
 position: absolute; margin: 0; }
.fn2 .collage-title {
 left: calc(var(--ox) + 40 * var(--u)); width: calc(173 * var(--u)); top: calc(var(--oy) + 98 * var(--u)); padding: 0; font-size: calc(26 * var(--u)); line-height: calc(27.4 * var(--u)); white-space: nowrap; }
.fn2 .collage-koffie {
 left: calc(var(--ox) + 45.4 * var(--u)); top: calc(var(--oy) + 185.7 * var(--u)); width: calc(157 * var(--u)); height: calc(198.6 * var(--u)); aspect-ratio: auto; }
.fn2 .collage-deur {
 left: calc(var(--ox) + 202.4 * var(--u)); top: calc(var(--oy) + 99 * var(--u)); width: calc(155.7 * var(--u)); height: calc(193.1 * var(--u)); aspect-ratio: auto; }
.fn2 .collage-note {
 left: calc(var(--ox) + 205.9 * var(--u)); top: calc(var(--oy) + 292.5 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: calc(14.4 * var(--u)); }
.fn2 .cards {
 position: absolute; margin: 0; left: calc(var(--ox) + 48.2 * var(--u)); top: calc(var(--oy) + 380.2 * var(--u)); display: grid; grid-template-columns: repeat(3, calc(100 * var(--u))); column-gap: calc(13.4 * var(--u)); }
.fn2 .card-col {
 gap: calc(5 * var(--u)); }
.fn2 .card-nr .elementor-heading-title > a {
 font-size: calc(51.8 * var(--u)); line-height: calc(64.7 * var(--u)); gap: calc(2 * var(--u)); }
.fn2 .card-name {
 font-size: calc(6.6 * var(--u)); padding-bottom: calc(1.5 * var(--u)); }
.fn2 .services-envelop {
 position: absolute; left: 50%; right: 0; top: 0; bottom: 0; height: 100%; min-height: 0; max-height: none; }
}
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
/* De PDF-opzet past altijd op één scherm: niet binnen de sectie scrollen */
  .fp-on .fn2 .hero.slide, .fp-on .fn2 .work.slide, .fp-on .fn2 .services.slide {
 overflow: hidden; }
}

/* Knoppen in html-widgets: kit-hover van Elementor neutraliseren */
.fn2 .fn-toggle:hover, .fn2 .fn-toggle:focus, .fn2 .fn-menu-close:hover, .fn2 .fn-menu-close:focus { background: transparent !important; color: inherit !important; }
.fn2 .fn-modal-close:focus { background: transparent; color: inherit; }
.fn2 .fn-modal-close:hover { background: var(--ink) !important; color: var(--paper) !important; }
.fn2 .round-btn:focus { background: transparent; color: var(--sage); }
.fn2 .round-btn:hover { background: var(--sage) !important; color: var(--paper) !important; }
.fn2 .fn-toggle, .fn2 .fn-menu-close, .fn2 .fn-modal-close, .fn2 .round-btn { box-shadow: none; text-transform: none; letter-spacing: 0; }
.fn2 .fn-menu-nav nav a { display: block; }
/* De globale Royal-footer is op deze pagina vervangen door de footer in de pagina zelf */
.fn2 .elementor-55 { display: none !important; }
.fn2 .footer-ig { position: static; }

.fn2 .fn-header-contact .elementor-button { display: inline-flex; align-items: center; justify-content: center; border-radius: 50px; font-family: var(--font-sans); font-weight: 400; line-height: 1.1; text-decoration: none; transition: background-color .3s, color .3s, transform .3s; }
.fn2 .fn-header-contact .elementor-button:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fn2 *, .fn2 *::before, .fn2 *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Hamburger: de html-widget zelf staat in het midden van de header (zoals de knop in Astro) */
.fn2 .fn-header > .fn-toggle-w { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.fn2 .fn-toggle-w .fn-toggle { position: static; transform: none; left: auto; }
@media (max-width: 767px) { .fn2 .fn-header > .fn-toggle-w { left: auto; right: 20px; translate: 0 -50%; } }
@media (max-width: 767px) { .fn2 .fn-header-contact { display: none; } }

/* Menu: ruimte onder het woordmerk zoals in Astro */
.fn2 .fn-menu .fn-menu-heading { margin-bottom: 45px !important; }
@media (max-width: 767px) { .fn2 .fn-menu .fn-menu-heading { margin-bottom: 30px !important; } }

/* Elementor zet margin-bottom van widgets op 0 (kit-widget-spacing); hier de onderafstanden uit de Astro-opmaak */
.fn2 .elementor-widget.portfolio-h { margin-bottom: 20px !important; }
.fn2 .elementor-widget.portfolio-p { margin-bottom: 34px !important; }
.fn2 .elementor-widget.footer-logo { margin-bottom: 14px !important; }
.fn2 .elementor-widget.footer-label { margin-bottom: 22px !important; }
.fn2 .elementor-widget.beeld-h { margin-bottom: 22px !important; }
.fn2 .elementor-widget.fn-modal-foot { margin-bottom: 16px !important; }
.fn2 .elementor-widget.work-who { margin-bottom: 6px !important; }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) { .fn2 .elementor-widget.work-who { margin-bottom: calc(4.4 * var(--u)) !important; } }
@media (max-width: 767px) { .fn2 .elementor-widget.portfolio-h { margin-bottom: 20px !important; } }

/* Geen bruine balk boven de hero: de header valt volledig over de foto's */
.fn2 .hero-bar { display: none !important; }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) { .fn2 .hero-img { top: 0; } }

/* "Let's work with me" loopt als band door het beeld (fen2.js maakt 2 x 4 groepen, CSS schuift de helft op) */
.fn2 .work-title.is-marquee { left: 0; right: 0; width: auto; min-height: max-content; overflow: hidden; white-space: nowrap; }
.fn2 .work-title .mq-t { position: relative; display: flex; width: max-content; transform: none; animation: fn-mq 60s linear infinite; }
.fn2 .work-title .mq-g { position: relative; left: auto; top: auto; flex: none; transform: none; padding-right: .6em; }
@keyframes fn-mq { to { transform: translateX(-50%); } }
.fp-on .fn2 .slide:not(.is-active):not(.is-entering) .work-title .mq-t { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .fn2 .work-title .mq-t { animation: none; } }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  .fn2 .work-title.is-marquee { width: 100%; }
  .fn2 .work-title .mq-t { height: 100%; margin-left: calc(var(--ox) + 25.5 * var(--u)); }
  .fn2 .work-title .mq-g { width: calc(557.3 * var(--u)); height: 100%; padding-right: 0; margin-right: calc(70 * var(--u)); }
}

/* Koffietekst direct onder de deurfoto (tablet en mobiel): de extra hoogte van de koffiefoto gaat naar de laatste rij */
.fn2 .collage { grid-template-rows: auto auto 1fr; }
.fn2 .collage-note { align-self: start; margin: 8px 0 0 4px; }

/* Laptopfoto: linkerrand (laptop met logo) blijft in beeld, ook als de foto smaller wordt uitgesneden */
.fn2 .work-motion img { inset: -4% -8% -4% 0; object-position: 0 50%; }
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) { .fn2 .work-motion img { inset: -4%; } .fn2 .collage-note { margin: 0; } }

/* Portret als echte afdruk op het papier: lichte kanteling, schaduw op het papier en een glans over de foto */
.fn2 .work-paper .work-portret { rotate: -.7deg; border-radius: 1px; box-shadow: 0 0 0 .5px rgba(35, 31, 32, .35), 1px 1px 1px rgba(35, 31, 32, .22), 2px 4px 6px -1px rgba(35, 31, 32, .22), 6px 12px 18px -8px rgba(35, 31, 32, .4); }
.fn2 .work-paper .work-portret::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .12) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 18px rgba(0, 0, 0, .22); }

/* Paperclip ligt over de foto: losse uitsnede van de clip uit het papier, boven het portret */
.fn2 .work-paper .work-portret { z-index: 2; }
.fn2 .work-paper::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: url(img/papier-clip.webp) 0 0 / 100% 100% no-repeat; filter: drop-shadow(.6px 1.6px 1.2px rgba(35, 31, 32, .45)); }

/* Tablet en half scherm: papier met clip begint onder de lopende titel (titel-top + titelhoogte + ruimte) */
@media (min-width: 768px) { .fn2 .work-copy { padding-top: calc(clamp(56px, 7vw, 100px) + clamp(52px, 6.6vw, 110px) + 36px); } }
@media (min-width: 768px) and (max-width: 1023px) { .fp-on .fn2 .work-copy { padding-top: calc(clamp(56px, 7vw, 100px) + 108px + clamp(52px, 6.6vw, 110px) + 28px); } .fp-on .fn2 .work-paper { width: min(440px, 90%, 33svh); } }


/* ===== Mobiel (< 768 px): secties onder elkaar, gewoon doorscrollen (fen2.js zet hier geen fp-on).
   Geen foto's naast elkaar: elk beeld krijgt de volle breedte. ===== */
@media (max-width: 767px) {
  html { scroll-padding-top: 76px; }
  /* Kopbalk blijft staan en wordt donker zodra je scrollt */
  .fn2 .fn-header { position: fixed; z-index: 20; transition: background-color .35s ease, height .35s ease; }
  .fn2 .fn-header.is-solid { height: 66px; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(10px); color: var(--paper); }
  .fn2 .fn-wordmark { transition: font-size .35s ease; }
  .fn2 .fn-header.is-solid .fn-wordmark { font-size: 34px; }
  .fn2 .fn-header.is-solid .fn-wordmark span { margin-top: 8px; }

  /* Hero: één foto over het hele scherm, tekst als één blok onderaan */
  .fn2 .hero { display: flex; flex-direction: column; justify-content: flex-end; height: 100svh; min-height: 560px; max-height: 900px; padding: 0 24px 52px; }
  .fn2 .hero-img--l { position: absolute; inset: 0; }
  .fn2 .hero-img--l img { object-position: 50% 70%; }
  .fn2 .hero-img--r { display: none; }
  .fn2 .hero::after { background: linear-gradient(180deg, rgba(36, 26, 20, .45) 0, rgba(36, 26, 20, 0) 20%), linear-gradient(0deg, rgba(36, 26, 20, .78) 0, rgba(36, 26, 20, .3) 42%, rgba(36, 26, 20, 0) 64%); }
  .fn2 .hero-sub, .fn2 .hero-copy { position: relative; z-index: 2; inset: auto; translate: none; }
  .fn2 .hero-sub { order: 1; margin: 0 0 14px; font: 500 12px/1.5 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sand); }
  .fn2 .hero-copy { order: 2; gap: 26px; }
  .fn2 .hero-title { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.14; }
  .fn2 .hero-contact .elementor-button { padding: .7em 1.7em; font-size: 18px; }

  /* Let's work with me: kop, papier, tekst, dan het bewegende beeld als overgang */
  .fn2 .work-title { padding-top: 76px; font-size: clamp(44px, 13vw, 60px); }
  .fn2 .work-copy { padding: 36px 24px 72px; gap: 36px; }
  .fn2 .work-paper { width: min(320px, 86%); }
  .fn2 .work-text { max-width: 520px; }
  .fn2 .work-who { padding-left: 0; margin-bottom: 12px; font-size: 17px; letter-spacing: .04em; }
  .fn2 .work-p { font-size: 18px; line-height: 1.5; text-align: left; hyphens: manual; }
  .fn2 .work-motion { height: min(58svh, 480px); min-height: 320px; }

  /* Services: ruimer, met de zijtekst op gelijke hoogte als de collage */
  .fn2 .services-main { padding: 76px 20px 76px 52px; }
  .fn2 .services-side { left: 16px; top: 80px; font-size: 13px; letter-spacing: .04em; }
  .fn2 .collage-title { font-size: clamp(22px, 6.6vw, 28px); }
  .fn2 .collage-note { margin: 10px 0 0 10px; font-size: 16px; }
  .fn2 .cards { margin-top: 52px; gap: 14px; }
  .fn2 .card-nr .elementor-heading-title > a { font-size: clamp(44px, 12.5vw, 54px); }
  .fn2 .card-name { font-size: 10.5px; }
  .fn2 .services-envelop { height: min(82svh, 620px); min-height: 440px; }

  /* Beeld en portfolio */
  .fn2 .beeld { min-height: min(100svh, 760px); padding: 96px 28px; }
  /* Mobiel: de staande foto heeft een licht midden, dus extra scrim in de middenband waar de tekst staat */
  .fn2 .beeld::before { background: linear-gradient(180deg, rgba(36, 26, 20, .4) 0%, rgba(36, 26, 20, .62) 42%, rgba(36, 26, 20, .62) 62%, rgba(36, 26, 20, .4) 100%); }
  .fn2 .beeld-copy { text-shadow: 0 1px 16px rgba(28, 20, 16, .55); }
  .fn2 .beeld-h { font-size: clamp(36px, 10vw, 44px); }
  .fn2 .portfolio { padding: 84px 0 84px 24px; gap: 32px; }
  .fn2 .portfolio-intro { padding-right: 24px; }
}

/* Mobiel schuifeffect (html.fn-stack, gezet door fen2.js): elke sectie plakt aan zijn onderrand,
   de volgende schuift eroverheen met een zachte schaduwrand; de onderliggende sectie dimt via .fp-shade */
@media (max-width: 767px) {
  .fn-stack .fn2 .fp > .slide { position: sticky; top: var(--stick, 0px); isolation: isolate; }
  .fn-stack .fn2 .fp > .slide + .slide { box-shadow: 0 -22px 40px -18px rgba(36, 26, 20, .38); }
  .fn2 .fp-shade { position: absolute; inset: 0; z-index: 60; background: #1d1511; opacity: 0; pointer-events: none; }
}

/* Definitieve foto's (3 nov 2026) — hero: straatfoto links (originele uitsnede), magazinecover rechts volledig in beeld */
@media (min-width: 768px) {
  .fn2 .hero-img--l img { object-position: 50% 100%; }
  .fn2 .hero-img--r img { object-position: 50% 12%; }
}

/* Hero: iets dekkender donkere laag over beide foto's, zodat de tekst beter leest */
@media (min-width: 768px) {
  .fn2 .hero::after { background: linear-gradient(180deg, rgba(36, 26, 20, .38) 0, rgba(36, 26, 20, 0) 22%), radial-gradient(ellipse 60% 38% at 50% 54%, rgba(36, 26, 20, .32), rgba(36, 26, 20, 0) 72%), linear-gradient(0deg, rgba(36, 26, 20, .62) 0, rgba(36, 26, 20, .25) 45%, rgba(36, 26, 20, 0) 70%), rgba(36, 26, 20, .1); }
}
@media (max-width: 767px) {
  .fn2 .hero::after { background: linear-gradient(180deg, rgba(36, 26, 20, .45) 0, rgba(36, 26, 20, 0) 20%), linear-gradient(0deg, rgba(36, 26, 20, .78) 0, rgba(36, 26, 20, .3) 42%, rgba(36, 26, 20, 0) 64%), rgba(36, 26, 20, .12); }
}

/* Sectie 2 rechts: geen in- en uitzoomende beweging, foto staat stil */
.fn-motion .fn2 .work-motion img { animation: none; transform: none; }

/* Contactknop in de header krijgt de kleur van logo en hamburger (volgt licht/donker per sectie) */
.fn2 .fn-header { --fn-hdr-on: var(--ink); }
.fp-on[data-slide-theme="light"] .fn2 .fn-header, .fp-on .fn2 .fn-header.is-solid { --fn-hdr-on: var(--paper); }
.fp-on[data-slide-theme="dark"] .fn2 .fn-header.is-solid { --fn-hdr-on: var(--ink); }
.fn2 .fn-header-contact .elementor-button, .fn2 .fn-header-contact .elementor-button:hover, .fn2 .fn-header-contact .elementor-button:focus { background: currentColor; color: inherit; }
.fn2 .fn-header-contact .elementor-button-text { color: var(--fn-hdr-on); }
.fn2 .fn-header-contact .elementor-button:hover { opacity: .86; }

/* Sectie 3 rechts: nieuwe foto, dus geen schuine FÈN AGENCY-opdruk van de oude envelop meer */
.fn2 .envelop-fen, .fn2 .envelop-agency { display: none; }

/* Sectie 2 rechts: foto in kleur, zoals aangeleverd (geen zwart-witfilter of vervaging) */
.fn2 .work-motion img { filter: none; }

/* Contactknop in de header in hetzelfde lettertype als de hero (Crimson Text) */
.fn2 .fn-header-contact .elementor-button, .fn2 .fn-header-contact .elementor-button-text { font-family: var(--font-serif); font-size: 20px; }

/* Sectie 2 rechts: foto staat stil, dus precies passend in het vlak tot aan de rand (geen grijze strook) */
.fn2 .work-motion img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }