/* Gegenereerd door _tools/critical-cases.mjs: scrollcraft + home.min + sub.min + studio + reviews + cases-v3. Niet met de hand aanpassen. */ /* ============================================================================ scrollcraft.css: the taste floor ---------------------------------------------------------------------------- Two layers, and the split matters: TOKENS what you override per brand. Colour roles, the type ramp, the spacing scale, elevation, motion. A brand is ~12 values. DEVICES what the engine drives. Do not restyle these to taste; they are the mechanism. Style your own markup instead. Nothing here draws a "component". There are no card, badge, or pill classes, because a stylesheet that ships those is how every page built on it ends up with the same shapes. You get a floor and a vocabulary; the composition is yours. ========================================================================== */ /* ---------------------------------------------------------------- tokens -- */ :root { /* --- colour roles. Override these six and the page is rebranded. -------- */ --sc-canvas: #08090b; /* the page ground. Drift interpolates this. */ --sc-surface: #101217; /* anything raised off the ground */ --sc-ink: #f4f2ef; /* primary text */ --sc-ink-soft: #9a9ba1; /* secondary text. Tinted, never flat gray. */ --sc-accent: #d8ff3e; /* ONE accent. It owns a region, not confetti. */ --sc-accent-ink: #08090b; /* text that sits on the accent */ --sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent); --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent); /* --- type. Two families max. Display carries voice, text carries prose. - */ --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, monospace; /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem with 0 tracking reads loose; this is optical correction, not decoration. */ --sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --sc-t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem); --sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --sc-t-3xl: clamp(2.8rem, 1.9rem + 4.2vw, 5rem); --sc-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem); --sc-track-tight: -0.035em; --sc-track-snug: -0.02em; --sc-track-normal: -0.005em; --sc-track-wide: 0.08em; --sc-leading-none: 0.94; --sc-leading-tight: 1.06; --sc-leading-body: 1.62; --sc-measure: 62ch; /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */ --sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem; --sc-9: 6rem; --sc-10: 8rem; --sc-11: 12rem; /* Section rhythm is fluid so a phone doesn't inherit desktop air. */ --sc-section: clamp(4.5rem, 9vw, 11rem); --sc-gutter: clamp(1.25rem, 5vw, 5.5rem); --sc-maxw: 82rem; /* --- radius. Pick one scale for the page and hold it. ------------------- */ --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px; /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted to the canvas hue. A zero-offset coloured halo is decoration, not depth, so there isn't one here. ---------------------------------- */ --sc-shadow-color: 220 40% 2%; --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20); --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30); --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38), 0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30); /* Edge light: a 1px top highlight sells a raised surface better than any amount of blur, because real raised things catch light on their lip. */ --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent); /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */ --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --sc-d-fast: 160ms; --sc-d-base: 240ms; --sc-d-slow: 420ms; --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60; } /* --------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); letter-spacing: var(--sc-track-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none; overflow-x: clip; } img, video, canvas, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } /* ------------------------------------------------- the browser surfaces -- The parts you did not draw still carry the design. Selection, caret, focus ring, scrollbar and tabular numerals all ship with defaults that belong to no design system. Theming them is the cheapest signal that a page was built rather than assembled, and it is the step that gets skipped most reliably. */ ::selection { background: var(--sc-accent); color: var(--sc-accent-ink); } :root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); } :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-sm); } :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; } @supports (scrollbar-color: auto) { html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; } } :where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; } /* =============================================================== DEVICES == Driven by the engine. Restyle your own markup, not these. */ .sc-act--pinned { position: relative; } .sc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage); } /* scrub / sequence media */ .sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); } .sc-has-clip video[data-sc-scrub] { opacity: 1; } /* A scrim only where text sits. A full-frame darkening layer flattens the image everywhere to fix contrast in one corner. */ .sc-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( var(--sc-scrim-angle, 180deg), color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 68%); } /* A band across the bottom, for copy that spans the full width of the frame. That is what both corner anchors become below 860px, and it is also the right shape whenever the copy block is wider than a corner. */ .sc-scrim--band { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } /* cue defaults: the engine writes opacity/transform inline, these are the pre-paint state so nothing flashes before the first read() */ [data-sc-cue] { opacity: 0; will-change: opacity, transform; } .sc-ready [data-sc-cue] { transition: none; } /* kinetic split */ .sc-split { display: inline-block; overflow: hidden; vertical-align: top; } /* Descenders live below the baseline; a line mask clipped to the line box eats the tails off g, y, p, j. The padding buys them room back. */ .sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; } .sc-split__i { display: inline-block; will-change: transform, opacity; } .sc-is-split { opacity: 1 !important; } /* horizontal rail */ [data-sc-pan] { display: flex; will-change: transform; } /* reveal + parallax */ [data-sc-reveal] { will-change: clip-path; } [data-sc-parallax] { will-change: transform; } /* flow reveal (fires once) */ [data-sc-in], [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); } [data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; } /* pointer devices */ [data-sc-tilt] { transform-style: preserve-3d; will-change: transform; } [data-sc-magnet] { will-change: transform; } /* isolation always; position only if nothing more specific already set it. Written with :where() (zero specificity) on purpose: a plain `position: relative` here has the same weight as `.sc-stage` and, being later in the file, silently wins. A stage carrying both attributes then stops being sticky and the whole act scrolls away instead of pinning. */ [data-sc-spotlight] { isolation: isolate; } :where([data-sc-spotlight]) { position: relative; } [data-sc-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( 28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); } [data-sc-spotlight]:hover::after { opacity: 1; } /* =========================================================== WORLDFLIGHT == One fixed stage for the whole page. The only thing in document flow is the spacer, and it is empty. If you find yourself adding a section here, you want act mode instead: the moment a real block scrolls past the fixed stage, the page has a seam again and the whole point is gone. */ [data-sc-mode="worldflight"] { position: relative; } .sc-world { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); } /* Every leg is mounted for the life of the page and stacked in the same box. The engine owns opacity, visibility and z-index here; do not set them. */ .sc-world__seg { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .sc-world__seg > :is(video, img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The poster is the frame-holder AND the first camera move: the engine pushes it in slowly until a real decoded frame is available to replace it. */ .sc-world__poster { z-index: 0; transform-origin: 50% 50%; transition: opacity 420ms var(--sc-ease-out); } .sc-world__seg > video { z-index: 1; } .sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; } /* The act stylesheet lights a clip through its ancestor act. A worldflight leg has no act, so match the class the engine also writes on the clip itself. */ video[data-sc-scrub].sc-has-clip { opacity: 1; } /* The copy layer is fixed too, and inert by default: the engine hands pointer-events back to a block only while it is actually legible. */ .sc-world__copy { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; } .sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; } [data-sc-copy] { opacity: 0; pointer-events: none; will-change: opacity, transform; } .sc-ready [data-sc-copy] { transition: none; } /* The track. Empty on purpose. */ .sc-world__spacer { pointer-events: none; } /* scroll progress */ [data-sc-progress] { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome); background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } /* -------------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { /* Fewer and gentler, not zero. Opacity still carries the reveal so the page is comprehensible; every position change is dropped. */ [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; } [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; } /* A wipe is a position change too. Show reveal content settled. */ [data-sc-reveal] { clip-path: none !important; } /* A rail's transform IS its navigation, not decoration. Zeroing it the way parallax and kinetic type are zeroed parks the act on its first screenful and makes everything past the fold unreachable: a device degrading into missing content. Hand the travel back to the reader as an ordinary scroll region instead, so the same items are all still gettable without motion. A build that would rather re-lay the rail out as a grid can still do that; this is the floor, not the ceiling. */ [data-sc-act="pan"] .sc-stage, [data-sc-act="pan"] [data-sc-stage] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } [data-sc-pan] > * { scroll-snap-align: center; } [data-sc-spotlight]::after { display: none; } /* A worldflight keeps its whole story here. No clip is ever fetched, so the posters are the film, and they cross-dissolve through exactly the same seams at exactly the same scroll positions. The push-in and the copy drift are the only things that go. */ .sc-world__poster, [data-sc-copy] { transform: none !important; } } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 860px) { .sc-stage { height: 100svh; } } @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/bricolage-grotesque-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/bricolage-grotesque-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--wit:#FAF7F1;--wash:#F5F0E8;--wash-deep:#ECE5D8;--accent:#0E9384;--accent-contrast:#0C7D71;--accent-hover:#0B7A6E;--accent-dark:#0A5A50;--zwart:#16140F;--grijs:#676156;--grijs-licht:#E8E1D4;--kaart:#FFFDF8;--ink:#0C1D23;--ink-diep:#0A181D;--ink-kaart:#11272E;--ink-lijn:rgba(245,241,232,0.10);--mint:#8FD6CA;--koraal:#E56B4C;--koraal-donker:#C24E33;--koraal-licht:#F2917A;--koraal-wash:#FBEDE6;--creme-tekst:#F5F1E8;--creme-zacht:rgba(245,241,232,0.68);--tq:#035352;--tq-diep:#023B3A;--tq-licht:#06605E;--creme:#F3E8BC;--creme-wash:#FAF3D9;--radius:12px;--shadow-soft:0 8px 30px rgba(12,12,12,0.06);--shadow-hover:0 14px 40px rgba(12,12,12,0.10);--font-display:'Bricolage Grotesque','Manrope',sans-serif;--font-body:'Manrope',-apple-system,sans-serif}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--zwart);background:var(--wit);overflow-x:hidden}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}ul{list-style:none}button{font-family:inherit}h1,h2,h3{font-family:var(--font-display);color:var(--zwart);line-height:1.15;letter-spacing:-0.02em}h1{font-size:clamp(2.4rem,5.5vw,4rem);font-weight:700}h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700}h3{font-size:1.15rem;font-weight:700}p{color:var(--grijs)}.container{max-width:1200px;margin:0 auto;padding:0 24px}section{padding:clamp(72px,9vw,110px) 0}.eyebrow{display:inline-block;font-size:0.75rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dark);background:var(--wash);border:1px solid rgba(14,147,132,0.25);border-radius:100px;padding:6px 14px;margin-bottom:18px}.section-header{max-width:680px;margin:0 auto 52px;text-align:center}.section-header p{margin-top:14px;font-size:1.08rem}.section-header .hl,h1 .hl,h2 .hl{font-style:normal;color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--radius);font-size:0.95rem;font-weight:600;cursor:pointer;border:none;transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease;white-space:nowrap}.btn:focus-visible{outline:3px solid rgba(14,147,132,0.45);outline-offset:2px}.btn-primary{background:var(--accent-dark);color:var(--wit);box-shadow:0 6px 20px rgba(14,147,132,0.3)}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,147,132,0.38)}.btn-secondary{background:var(--wit);color:var(--accent-dark);border:1.5px solid var(--accent)}.btn-secondary:hover{background:var(--wash);transform:translateY(-2px)}.btn-full{width:100%}.stars{color:var(--koraal);letter-spacing:2px;font-size:1rem}.review-strip{display:inline-flex;align-items:center;gap:12px;font-size:0.9rem;color:var(--grijs);background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:100px;padding:10px 20px;box-shadow:var(--shadow-soft)}.review-strip strong{color:var(--zwart);font-weight:600}#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:32px;padding:18px 40px;background:rgba(250,247,241,0.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:padding 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;border-bottom:1px solid transparent}#navbar.scrolled{padding:12px 40px;border-bottom:1px solid var(--grijs-licht);box-shadow:0 4px 20px rgba(12,12,12,0.05)}.nav-logo{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--zwart);letter-spacing:-0.02em;flex-shrink:0}.nav-logo em{font-style:normal;color:var(--accent)}.nav-logo small{display:block;font-family:var(--font-body);font-size:0.58rem;font-weight:600;letter-spacing:0.42em;color:var(--grijs);margin-top:-3px}.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}.nav-links a,.nav-mega-trigger{display:block;font-size:0.9rem;font-weight:500;color:var(--grijs);padding:8px 14px;border-radius:8px;transition:color 0.2s ease,background 0.2s ease;white-space:nowrap;background:transparent;border:none;cursor:pointer}.nav-links a:hover,.nav-mega-trigger:hover{color:var(--zwart);background:var(--wash)}.nav-links a:focus-visible,.nav-mega-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.nav-cta{margin-left:10px}.nav-cta .btn{padding:11px 22px;font-size:0.88rem}.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:var(--wit);border:1px solid var(--grijs-licht);border-radius:10px;cursor:pointer;padding:10px;margin-left:auto;width:48px;height:48px;z-index:1100}.nav-toggle span{display:block;width:20px;height:2px;background:var(--zwart);border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease;transform-origin:center}.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--accent)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--accent)}.nav-mega-item{position:static;display:flex;align-items:center}.nav-mega-trigger{display:inline-flex;align-items:center;gap:6px}.nav-mega-caret{width:14px;height:14px;transition:transform 0.25s ease}.nav-mega-item.open .nav-mega-caret{transform:rotate(180deg)}.nav-mega-item.open .nav-mega-trigger{color:var(--zwart);background:var(--wash)}.nav-mega{position:absolute;top:calc(100% - 2px);left:50%;width:min(1160px,calc(100vw - 40px));transform:translateX(-50%) translateY(10px);background:var(--wit);border:1px solid var(--grijs-licht);border-radius:16px;box-shadow:0 24px 70px rgba(12,12,12,0.14);padding:8px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.18s ease,transform 0.18s ease,visibility 0s linear 0.18s;z-index:1050}.nav-mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}.nav-mega-item.open .nav-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition:opacity 0.18s ease,transform 0.18s ease,visibility 0s}.nav-mega-inner{display:grid;grid-template-columns:1fr 1fr 1fr 1.05fr;gap:4px}.nav-mega-col{padding:20px;min-width:0}.nav-mega-col + .nav-mega-col{border-left:1px solid var(--grijs-licht)}.nav-mega-head{display:flex;align-items:center;gap:9px;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid var(--grijs-licht)}.nav-mega-head svg{width:17px;height:17px;flex-shrink:0;color:var(--accent)}.nav-links .nav-mega a{white-space:normal;padding:0}.nav-mega-link{display:block;padding:11px 12px !important;border-radius:10px;transition:background 0.18s ease}.nav-mega-link strong{display:flex;align-items:center;color:var(--zwart);font-size:0.92rem;font-weight:600;margin-bottom:2px}.nav-mega-link span{display:block;color:var(--grijs);font-size:0.8rem;line-height:1.45}.nav-mega-link:hover{background:var(--wash) !important}.nav-mega-link:hover strong{color:var(--accent-dark)}.nav-mega-badge{margin-left:8px;font-size:0.58rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:#FFFFFF;background:var(--koraal);padding:2px 7px;border-radius:100px}.nav-mega-more{display:inline-flex;align-items:center;gap:5px;margin:12px 0 0 12px;color:var(--accent-dark) !important;font-size:0.82rem;font-weight:600;padding:0 !important}.nav-mega-more:hover{background:transparent !important;color:var(--accent) !important}.nav-mega-aside{background:var(--wash);border-left:1px solid rgba(14,147,132,0.3) !important;border-radius:0 12px 12px 0}.nav-mega-aside .nav-mega-head{color:var(--zwart);border-bottom-color:rgba(14,147,132,0.25)}.nav-mega-aside > p{color:var(--grijs);font-size:0.82rem;line-height:1.55;margin:4px 0 16px}.nav-mega-steps{list-style:none;counter-reset:megastep;margin:0 0 18px;padding:0}.nav-mega-steps li{counter-increment:megastep;position:relative;padding:5px 0 5px 34px;color:var(--zwart);font-size:0.85rem;font-weight:500;line-height:1.4}.nav-mega-steps li::before{content:counter(megastep);position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--wit);font-size:0.75rem;font-weight:800;display:flex;align-items:center;justify-content:center}.nav-links .nav-mega a.nav-mega-cta{display:inline-flex;width:100%;justify-content:center;color:var(--wit);background:var(--accent);padding:14px 28px;white-space:nowrap}.nav-links .nav-mega a.nav-mega-cta:hover{color:var(--wit);background:var(--accent-hover)}#hero{padding:clamp(150px,20vw,210px) 0 clamp(60px,8vw,90px);background:linear-gradient(180deg,var(--wash) 0%,var(--wit) 60%);text-align:center}#hero h1{max-width:850px;margin:0 auto 22px}#hero h1 em{font-style:normal;color:var(--accent)}.hero-sub{max-width:620px;margin:0 auto 34px;font-size:1.12rem}.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}.diensten-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.dienst-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;transition:transform 0.25s ease,box-shadow 0.25s ease,border-color 0.25s ease}.dienst-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(14,147,132,0.4)}.dienst-card h3{font-size:1.02rem;margin-bottom:8px}.dienst-card p{font-size:0.88rem;line-height:1.6;margin-bottom:16px}#resultaten{background:linear-gradient(180deg,var(--wash) 0%,var(--wit) 55%)}.result-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}.result-logo{width:48px;height:48px;border-radius:10px;background:var(--wash);border:1px solid rgba(14,147,132,0.25);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--accent-dark);font-size:1rem;flex-shrink:0;padding:8px}.result-logo img{width:100%;height:100%;object-fit:contain}.result-head h3{font-size:1.02rem;line-height:1.25}.result-head .sub{font-size:0.8rem;color:var(--grijs)}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}.result-stat .num{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--accent-dark);line-height:1.1}.result-stat .lbl{font-size:0.76rem;color:var(--grijs)}.result-line{font-size:0.9rem;color:var(--zwart);font-weight:500;margin-bottom:16px}.result-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}.result-tag{font-size:0.7rem;font-weight:600;color:var(--accent-dark);background:var(--wash);border:1px solid rgba(14,147,132,0.25);padding:4px 10px;border-radius:100px}.result-link{margin-top:auto;display:inline-flex;align-items:center;gap:5px;color:var(--koraal-donker);font-size:0.88rem;font-weight:600;transition:gap 0.2s ease}.result-link:hover{gap:9px;color:var(--koraal)}.result-ctaband{margin-top:48px;text-align:center;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:36px 28px;box-shadow:var(--shadow-soft)}.result-ctaband p{font-size:1.05rem;color:var(--zwart);font-weight:500;margin-bottom:20px}.result-ctaband .knoppen{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.site-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.site-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform 0.25s ease,box-shadow 0.25s ease}.site-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}#verschil{background:linear-gradient(180deg,var(--wash) 0%,var(--wit) 55%)}.versus-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1040px;margin:0 auto;align-items:stretch}.versus-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:34px 32px}.versus-card.fay{border:2px solid var(--accent);box-shadow:0 16px 50px rgba(14,147,132,0.14)}.versus-head{text-align:center;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--grijs-licht)}.versus-head .vlogo{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--zwart);letter-spacing:-0.02em}.versus-head .vlogo em{font-style:normal;color:var(--accent)}.versus-head .vlogo small{display:block;font-family:var(--font-body);font-size:0.6rem;font-weight:600;letter-spacing:0.42em;color:var(--grijs);margin-top:-2px}.versus-head h3{font-size:1.05rem;color:var(--grijs);font-family:var(--font-body);font-weight:600}.versus-list{display:grid;gap:4px}.versus-list li{position:relative;padding:10px 0 10px 40px;font-size:0.95rem;color:var(--zwart);line-height:1.5}.versus-list.nadelen li{color:var(--grijs)}.versus-list li .vs-ic{position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center}.versus-list.voordelen li .vs-ic{background:var(--accent);color:var(--wit)}.versus-list.nadelen li .vs-ic{background:var(--wash);color:var(--grijs);border:1px solid var(--grijs-licht)}.versus-list li .vs-ic svg{width:13px;height:13px}.versus-cta{text-align:center;margin-top:44px}.versus-cta p{font-size:1rem;margin-bottom:18px}@media (max-width:900px){.versus-grid{grid-template-columns:1fr;max-width:520px}}#prijzen{background:linear-gradient(180deg,var(--wash) 0%,var(--wit) 55%)}.prijs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}.prijs-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:34px 28px;display:flex;flex-direction:column;position:relative;transition:transform 0.25s ease,box-shadow 0.25s ease}.prijs-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.prijs-card h3{font-size:1.15rem;margin-bottom:6px}.over-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(36px,6vw,72px);align-items:center}.over-foto{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--grijs-licht);box-shadow:var(--shadow-soft);aspect-ratio:4 / 5;background:linear-gradient(160deg,var(--wash),var(--wash-deep));display:flex;align-items:center;justify-content:center}.over-foto img{width:100%;height:100%;object-fit:cover}.over-copy h2{margin-bottom:18px}.over-copy h2 em{font-style:normal;color:var(--accent)}.over-intro{font-size:1.05rem;color:var(--zwart);font-weight:600;margin-bottom:14px}.over-copy > p:not(.over-intro){margin-bottom:16px}.over-usps{display:grid;gap:14px;margin:26px 0}.over-usp{display:flex;align-items:flex-start;gap:14px}.over-usp .usp-icon{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--wash);border:1px solid rgba(14,147,132,0.3);display:flex;align-items:center;justify-content:center}.over-usp .usp-icon svg{width:18px;height:18px;color:var(--accent)}.over-usp strong{display:block;color:var(--zwart);font-size:0.95rem}.over-usp p{font-size:0.86rem;margin:0}.over-acties{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}footer{background:var(--wash);border-top:1px solid var(--grijs-licht);padding:64px 0 30px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px}.footer-brand .nav-logo{font-size:1.4rem}.footer-brand > p{font-size:0.9rem;max-width:300px;margin:14px 0 20px}.footer-col h4,.footer-col h2{font-family:var(--font-body);font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--zwart);margin-bottom:16px}.footer-col ul li{margin-bottom:10px}.footer-col ul li a{font-size:0.9rem;color:var(--grijs);transition:color 0.2s}.footer-col ul li a:hover{color:var(--accent-dark)}.footer-contact li{font-size:0.9rem;color:var(--grijs);margin-bottom:10px}.footer-contact li a{color:var(--zwart);font-weight:500}.footer-contact li a:hover{color:var(--accent-dark)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border-top:1px solid var(--grijs-licht);padding-top:24px;font-size:0.82rem;color:var(--grijs)}.footer-bottom .links{display:flex;gap:20px}.footer-bottom a:hover{color:var(--accent-dark)}.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9998;padding:0 24px 24px;transform:translateY(120%);transition:transform 0.4s ease}.cookie-banner.visible{transform:none}.cookie-inner{max-width:680px;margin:0 auto;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:14px;box-shadow:0 18px 50px rgba(12,12,12,0.14);padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.cookie-text{flex:1 1 300px;display:flex;align-items:flex-start;gap:12px;font-size:0.85rem;color:var(--grijs)}.cookie-text svg{width:22px;height:22px;flex-shrink:0;color:var(--accent);margin-top:2px}.cookie-text p{margin:0}.cookie-text a{color:var(--accent-dark);text-decoration:underline}.cookie-actions{display:flex;gap:10px}.cookie-btn{padding:10px 18px;border-radius:10px;font-size:0.85rem;font-weight:600;cursor:pointer;border:none;transition:background 0.2s ease,color 0.2s ease}.cookie-btn-accept{background:var(--accent-contrast);color:var(--wit)}.cookie-btn-accept:hover{background:var(--accent-hover)}.cookie-btn-decline{background:transparent;color:var(--grijs);border:1px solid var(--grijs-licht)}.cookie-btn-decline:hover{color:var(--zwart);border-color:var(--grijs)}.fade-in{opacity:0;transform:translateY(22px);transition:opacity 0.6s ease,transform 0.6s ease}.fade-in.visible{opacity:1;transform:none}@media (max-width:1024px){.diensten-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:900px){#navbar{padding:14px 20px}#navbar.scrolled{padding:10px 20px}.nav-links{position:fixed;inset:0 0 0 auto;height:100vh;height:100dvh;width:min(84vw,340px);flex-direction:column;align-items:stretch;gap:4px;background:var(--wit);border-left:1px solid var(--grijs-licht);box-shadow:-20px 0 60px rgba(12,12,12,0.12);padding:96px 26px 40px;transform:translateX(100%);transition:transform 0.3s ease;margin-left:0;overflow-y:auto;z-index:1060}.nav-links.open{transform:translateX(0)}.nav-links a{padding:13px 4px;font-size:1.05rem;color:var(--zwart)}.nav-cta{margin:14px 0 0}.nav-cta .btn{width:100%}.nav-toggle{display:flex}.nav-mega-item{display:block}.nav-mega-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:1.05rem;font-weight:500;color:var(--zwart);padding:13px 4px}.nav-mega-caret{width:18px;height:18px}.nav-mega{position:static;width:100%;transform:none;opacity:1;visibility:visible;pointer-events:auto;border:none;box-shadow:none;border-radius:0;padding:0;max-height:0;overflow:hidden;transition:max-height 0.3s ease}.nav-mega::before{display:none}.nav-mega-item.open .nav-mega{max-height:2200px;transform:none}.nav-mega-inner{grid-template-columns:1fr;gap:0}.nav-mega-col{padding:4px 0 14px;border-left:none !important}.nav-mega-col + .nav-mega-col{border-top:1px solid var(--grijs-licht);padding-top:14px}.nav-mega-aside{background:transparent;border-radius:0}.nav-links .nav-mega a{padding:9px 0;font-size:0.95rem}.nav-links .nav-mega .nav-mega-cta{padding:14px 20px}.site-grid,.prijs-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}.over-grid{grid-template-columns:1fr}.over-foto{max-width:380px;margin:0 auto}.footer-grid{grid-template-columns:1fr 1fr}}@media (max-width:640px){.diensten-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:28px}.hero-cta{flex-direction:column;align-items:center}.hero-cta .btn{width:100%;max-width:320px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none !important;animation:none !important}.fade-in{opacity:1;transform:none}}#navbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}#navbar.scrolled{background:rgba(250,247,241,0.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}@media (min-width:901px){#navbar:not(.scrolled) .nav-logo{color:var(--creme-tekst)}#navbar:not(.scrolled) .nav-logo small{color:var(--creme-zacht)}#navbar:not(.scrolled) .nav-links > li > a,#navbar:not(.scrolled) .nav-mega-trigger{color:var(--creme-zacht)}#navbar:not(.scrolled) .nav-links > li.nav-cta > a{color:var(--wit)}#navbar:not(.scrolled) .nav-links > li > a:hover,#navbar:not(.scrolled) .nav-mega-trigger:hover,#navbar:not(.scrolled) .nav-mega-item.open .nav-mega-trigger{color:var(--creme-tekst);background:rgba(245,241,232,0.08)}}@media (max-width:900px){#navbar:not(.scrolled) .nav-logo{color:var(--creme-tekst)}#navbar:not(.scrolled) .nav-logo small{color:var(--creme-zacht)}}#hero{background:radial-gradient(ellipse 75% 55% at 18% -5%,rgba(14,147,132,0.22),transparent 60%),radial-gradient(ellipse 55% 45% at 88% 12%,rgba(143,214,202,0.10),transparent 55%),radial-gradient(ellipse 50% 40% at 82% 95%,rgba(229,107,76,0.10),transparent 60%),linear-gradient(180deg,var(--ink-diep) 0%,var(--ink) 70%,var(--ink) 100%)}#hero h1{color:var(--creme-tekst)}#hero h1 em{color:var(--mint)}#hero .hero-sub{color:var(--creme-zacht)}#hero .eyebrow{color:var(--mint);background:rgba(14,147,132,0.14);border-color:rgba(143,214,202,0.28)}#hero .btn-primary{box-shadow:0 10px 34px rgba(14,147,132,0.45)}#hero .btn-secondary{background:transparent;color:var(--mint);border-color:rgba(143,214,202,0.45)}#hero .btn-secondary:hover{background:rgba(143,214,202,0.09)}#hero .review-strip{background:rgba(245,241,232,0.05);border-color:var(--ink-lijn);color:var(--creme-zacht);box-shadow:none}#hero .review-strip strong{color:var(--creme-tekst)}#hero .stars{color:var(--koraal-licht)}#verschil{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-diep) 100%)}#verschil .section-header h2{color:var(--creme-tekst)}#verschil .section-header .hl{color:var(--mint)}#verschil .section-header p{color:var(--creme-zacht)}#verschil .eyebrow{color:var(--mint);background:rgba(14,147,132,0.14);border-color:rgba(143,214,202,0.28)}#verschil .versus-card{background:var(--ink-kaart);border-color:var(--ink-lijn)}#verschil .versus-card.fay{border:2px solid var(--accent);box-shadow:0 0 70px rgba(14,147,132,0.28)}#verschil .versus-head{border-bottom-color:var(--ink-lijn)}#verschil .versus-head .vlogo{color:var(--creme-tekst)}#verschil .versus-head .vlogo small{color:var(--creme-zacht)}#verschil .versus-head h3{color:var(--creme-zacht)}#verschil .versus-list li{color:var(--creme-tekst)}#verschil .versus-list.nadelen li{color:rgba(245,241,232,0.55)}#verschil .versus-list.nadelen li .vs-ic{background:rgba(245,241,232,0.06);border-color:var(--ink-lijn);color:rgba(245,241,232,0.5)}#verschil .versus-cta p{color:var(--creme-zacht)}#verschil .versus-cta .btn-primary{box-shadow:0 10px 34px rgba(14,147,132,0.4)}footer{background:linear-gradient(180deg,var(--ink-diep) 0%,var(--ink) 100%);border-top:none}footer .nav-logo{color:var(--creme-tekst)}footer .nav-logo small{color:var(--creme-zacht)}.footer-brand > p{color:var(--creme-zacht)}.footer-col h4,.footer-col h2{color:var(--creme-tekst)}.footer-col ul li a{color:var(--creme-zacht)}.footer-col ul li a:hover{color:var(--mint)}.footer-contact li{color:var(--creme-zacht)}.footer-contact li a{color:var(--creme-tekst)}.footer-contact li a:hover{color:var(--mint)}.footer-bottom{border-top-color:var(--ink-lijn);color:rgba(245,241,232,0.5)}.footer-bottom a:hover{color:var(--mint)}.nav-links .nav-cta a.btn{background:var(--accent-contrast);color:var(--wit);box-shadow:0 6px 20px rgba(14,147,132,0.3)}.nav-links .nav-cta a.btn:hover{background:var(--accent-hover);color:var(--wit)}#hero{text-align:left;padding:clamp(128px,15vw,168px) 0 clamp(56px,7vw,84px)}#hero h1{margin:0 0 18px;font-size:clamp(2.5rem,4.6vw,3.9rem);max-width:none}#hero .hero-sub{margin:0 0 30px;max-width:46ch;font-size:1.08rem}#hero .hero-cta{justify-content:flex-start;margin-bottom:0}@keyframes rijsOp{from{opacity:0.01;transform:translateY(18px)}to{opacity:1;transform:none}}.hero-copy > *{animation:rijsOp 0.7s cubic-bezier(0.16,1,0.3,1) both}.hero-copy > *:nth-child(1){animation-delay:0.05s}.hero-copy > *:nth-child(2){animation-delay:0.14s}.hero-copy > *:nth-child(3){animation-delay:0.23s}.hero-copy > *:nth-child(4){animation-delay:0.32s}.hero-visual{animation:rijsOp 0.9s cubic-bezier(0.16,1,0.3,1) 0.34s both}.case-feature{display:flex;flex-direction:column;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;overflow:hidden;transition:transform 0.25s ease,box-shadow 0.25s ease}.case-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.case-feature .case-shot{aspect-ratio:16 / 10;overflow:hidden;border-bottom:1px solid var(--grijs-licht)}.case-feature .case-shot img{width:100%;height:100%;object-fit:cover;object-position:top}.case-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}.case-mini{display:grid;grid-template-columns:42% 1fr;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;overflow:hidden;transition:transform 0.25s ease,box-shadow 0.25s ease}.case-mini:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.case-mini .case-shot{overflow:hidden;border-right:1px solid var(--grijs-licht)}.case-mini .case-shot img{width:100%;height:100%;object-fit:cover;object-position:left top}.case-mini h3{font-size:1rem;margin-bottom:4px}@media (min-width:901px) and (max-width:1220px){.nav-links a,.nav-mega-trigger{padding:8px 9px;font-size:0.86rem}.nav-cta .btn{padding:10px 14px;font-size:0.84rem}#navbar{gap:18px}}@media (max-width:900px){#hero{text-align:left}.hero-visual{max-width:560px}.case-side{grid-template-rows:none}}@media (max-width:640px){.case-mini{grid-template-columns:1fr}.case-mini .case-shot{border-right:none;border-bottom:1px solid var(--grijs-licht);aspect-ratio:16 / 9}.hero-cta .btn{width:100%;max-width:340px}}h2{font-size:clamp(2.1rem,4.2vw,3.3rem);letter-spacing:-0.025em}.section-header{max-width:720px;margin-bottom:clamp(44px,6vw,72px)}.section-header p{font-size:1.05rem;max-width:56ch;margin-left:auto;margin-right:auto}.section-header.links{margin-left:0;text-align:left}.section-header.links p{margin-left:0}section{padding:clamp(88px,11vw,150px) 0}#hero::after,#verschil::after,footer::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}#hero,#verschil,footer{position:relative}#hero .container,#verschil .container,footer .container{position:relative;z-index:1}#hero{padding:clamp(140px,15vw,180px) 0 clamp(96px,11vw,140px);overflow:hidden}#hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-0.025em;margin-bottom:22px}#hero .hero-sub{font-size:1.12rem;line-height:1.75;max-width:44ch}.regel{display:block;padding-bottom:0.08em;margin-bottom:-0.08em}.regel > span{display:inline-block;transform:translateY(0.35em);opacity:0.01;animation:regelOp 0.85s cubic-bezier(0.16,1,0.3,1) forwards}.regel:nth-child(1) > span{animation-delay:0.08s}.regel:nth-child(2) > span{animation-delay:0.2s}@keyframes regelOp{to{transform:translateY(0);opacity:1}}.hero-copy > .eyebrow{animation:rijsOp 0.7s cubic-bezier(0.16,1,0.3,1) 0.02s both}.hero-copy > .hero-sub{animation-delay:0.42s}.hero-copy > .hero-cta{animation-delay:0.54s}.hero-copy > h1{animation:none}.hero-visual{position:relative;will-change:transform}.hero-shot{overflow:hidden}.hero-shot img{display:block;width:100%;height:auto}.proof-band{background:var(--ink-kaart);border-top:1px solid var(--ink-lijn);border-bottom:1px solid var(--ink-lijn);padding:40px 0 44px;display:flex;flex-direction:column;gap:32px}.proof-band-kop{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}.proof-band .review-strip{background:rgba(245,241,232,0.05);border-color:var(--ink-lijn);color:var(--creme-zacht);box-shadow:none}.proof-band .review-strip strong{color:var(--creme-tekst)}.proof-band .stars{color:var(--koraal-licht)}.proof-band-lijn{width:1px;height:28px;background:rgba(245,241,232,0.14)}.proof-band-tekst{margin:0;font-family:var(--font-display);font-size:0.95rem;font-weight:600;color:var(--creme-zacht)}.proof-band-tekst strong{color:var(--creme-tekst);font-weight:700}.proof-rij{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.proof-baan{display:flex;align-items:center;flex-shrink:0;margin:0;padding:0;list-style:none;animation:proofSchuif 66s linear infinite}.proof-baan li{padding-right:80px}.proof-baan a{display:flex;align-items:center;gap:10px;opacity:.6;transition:opacity .25s,transform .25s}.proof-baan a:hover,.proof-baan a:focus-visible{opacity:1;transform:scale(1.05)}.proof-baan img{display:block;height:30px;width:auto}.proof-baan img.proof-logo-groot{height:46px}.proof-naam{font-family:var(--font-body);font-weight:700;font-size:1.15rem;letter-spacing:-0.01em;color:var(--creme-tekst)}.proof-rij:hover .proof-baan,.proof-rij:focus-within .proof-baan{animation-play-state:paused}@keyframes proofSchuif{to{transform:translateX(-100%)}}#resultaten{background:var(--wash)}#recente-websites{background:var(--wash)}.result-stat .num{font-size:clamp(2.2rem,3.4vw,3rem);letter-spacing:-0.03em}.result-logo{border-radius:12px}.result-ctaband{margin-top:clamp(40px,6vw,64px);background:transparent;border:none;box-shadow:none;padding:0}.result-ctaband p{font-size:1.15rem;font-family:var(--font-display);font-weight:500}.case-feature,.case-mini{border-radius:18px;border-color:transparent;box-shadow:0 1px 0 rgba(12,12,12,0.04),0 0 0 1px rgba(12,12,12,0.04)}.case-feature:hover,.case-mini:hover{box-shadow:var(--shadow-hover)}.case-shot img{object-position:center top;transition:object-position 2.2s cubic-bezier(0.22,1,0.36,1)}.case-feature:hover .case-shot img,.case-mini:hover .case-shot img{object-position:center bottom}.case-side{padding-top:clamp(24px,4vw,48px)}#verschil .versus-card{border-color:transparent;background:rgba(245,241,232,0.04)}#verschil .versus-card.fay{border:1.5px solid var(--accent);background:var(--ink-kaart)}.versus-grid{gap:18px}#prijzen{background:linear-gradient(180deg,var(--wash) 0%,var(--wit) 45%)}.prijs-card{border-color:transparent;box-shadow:0 1px 0 rgba(12,12,12,0.04),0 0 0 1px rgba(12,12,12,0.04);border-radius:18px}.over-foto{position:relative;border:none}.over-foto::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:16px;background:var(--koraal-wash);z-index:-1}.over-intro{font-size:1.25rem;font-family:var(--font-display);font-weight:500;line-height:1.5}footer{padding-top:clamp(64px,8vw,96px)}#diensten + #resultaten,#resultaten + #reviews,#reviews + #transformatie,#transformatie + #recente-websites,#recente-websites + #verschil,#verschil + #prijzen,#over-mij + footer{position:relative}#diensten + #resultaten::before,#resultaten + #reviews::before,#reviews + #transformatie::before,#transformatie + #recente-websites::before,#recente-websites + #verschil::before,#verschil + #prijzen::before,#over-mij + footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(34px,4.5vw,80px);clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none}#diensten + #resultaten::before{background:var(--wit)}#resultaten + #reviews::before{background:var(--wash)}#recente-websites + #verschil::before{background:var(--wash)}#verschil + #prijzen::before{background:var(--ink-diep)}#over-mij + footer::before{background:var(--wit)}@media (max-width:900px){.proof-band{padding:32px 0 36px;gap:26px}.proof-band-lijn{display:none}.proof-band-tekst{width:100%;text-align:center;font-size:0.88rem}.proof-baan li{padding-right:52px}.proof-baan img{height:26px}.proof-baan img.proof-logo-groot{height:40px}.proof-naam{font-size:1rem}.proof-baan{animation-duration:44s}.case-side{padding-top:0}}@media (prefers-reduced-motion:reduce){.regel > span{transform:none;opacity:1;animation:none}.proof-baan{animation:none;flex-wrap:wrap;justify-content:center;row-gap:18px}.proof-baan[aria-hidden="true"]{display:none}.proof-rij{-webkit-mask-image:none;mask-image:none}.bento-shot img,.case-shot img{transition:none}}.nav-logo{display:inline-flex;align-items:center;position:relative;flex-shrink:0}.nav-logo img{height:34px;width:auto;display:block}#navbar .nav-logo .logo-donker{position:absolute;top:0;left:0;opacity:0;transition:opacity 0.3s ease}#navbar .nav-logo .logo-licht{transition:opacity 0.3s ease}#navbar.scrolled .nav-logo .logo-licht{opacity:0}#navbar.scrolled .nav-logo .logo-donker{opacity:1}.footer-logo{display:inline-block;margin-bottom:18px}.footer-logo img{height:40px;width:auto;display:block}.versus-head .vlogo img{height:30px;width:auto;display:inline-block}@media (max-width:900px){.nav-logo img{height:30px}.footer-logo img{height:36px}}@media (max-width:900px){body{padding-bottom:78px}.cookie-banner{padding-bottom:94px}}#faq{background:var(--wit)}.faq-lijst{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}.faq-lijst details{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:var(--radius);overflow:hidden;transition:border-color 0.2s ease,box-shadow 0.2s ease}.faq-lijst details[open]{border-color:var(--accent);box-shadow:var(--shadow-soft)}.faq-lijst summary{position:relative;cursor:pointer;list-style:none;padding:20px 56px 20px 22px;font-family:var(--font-display);font-weight:500;font-size:1.04rem;line-height:1.4;color:var(--zwart)}.faq-lijst summary::-webkit-details-marker{display:none}.faq-lijst summary:hover{color:var(--accent)}.faq-lijst summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.faq-lijst summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;line-height:1;font-weight:400;color:var(--accent);transition:transform 0.2s ease}.faq-lijst details[open] summary::after{content:"\2013";transform:translateY(-50%)}.faq-lijst details > p{margin:0;padding:0 22px 22px;font-size:0.97rem;line-height:1.65;color:var(--grijs);max-width:68ch}.faq-lijst details > p code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.92em;background:var(--wash-deep);padding:1px 5px;border-radius:4px;color:var(--zwart)}@media (max-width:600px){.faq-lijst summary{padding:17px 48px 17px 18px;font-size:0.99rem}.faq-lijst summary::after{right:18px}.faq-lijst details > p{padding:0 18px 18px;font-size:0.94rem}}@media (prefers-reduced-motion:reduce){.faq-lijst details,.faq-lijst summary::after{transition:none}}.skip-link{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--accent-dark);color:var(--wit);padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}.skip-link:focus{left:0}#navbar a[aria-current="page"]{color:var(--accent-dark);font-weight:700}@keyframes reviewSchuif{to{transform:translateX(-50%)}}.review-card{position:relative;display:flex;flex-direction:column;width:min(400px,82vw);flex-shrink:0;background:radial-gradient(110% 90% at 90% -10%,rgba(3,83,82,0.05),transparent 55%),linear-gradient(165deg,#FFFDF8 0%,#F7F3EB 100%);border-radius:18px;box-shadow:0 1px 0 rgba(12,12,12,0.04),0 0 0 1px rgba(12,12,12,0.04);padding:26px 26px 22px}.review-card.review-feature{background:radial-gradient(120% 85% at 100% 0%,rgba(143,214,202,0.22),transparent 55%),linear-gradient(160deg,#F4F8F5 0%,#E7F1ED 100%);box-shadow:0 1px 0 rgba(12,12,12,0.04),0 0 0 1px rgba(3,83,82,0.10)}.review-aanhaling{position:absolute;top:4px;right:20px;font-family:var(--font-display);font-size:5.2rem;line-height:1;font-weight:700;color:rgba(3,83,82,0.09);pointer-events:none;user-select:none}.review-feature .review-aanhaling{color:rgba(3,83,82,0.13)}.review-card .stars{font-size:0.88rem;margin-bottom:12px}.review-tekst{font-size:0.94rem;line-height:1.66;color:var(--zwart);margin-bottom:18px;max-width:62ch;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}.review-feature .review-tekst{font-size:0.98rem}.review-wie{display:flex;align-items:center;gap:12px;margin-top:auto}.review-avatar{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:0.8rem;letter-spacing:0.02em;color:var(--creme-tekst);background:linear-gradient(135deg,var(--tq-licht) 0%,var(--tq) 55%,var(--tq-diep) 100%);flex-shrink:0}.review-avatar-logo{background:#FFFFFF;border:1px solid var(--grijs-licht);overflow:hidden}.review-avatar-logo img{display:block;width:100%;height:100%;object-fit:cover}.review-naam{display:flex;flex-direction:column;font-weight:600;font-size:0.88rem;color:var(--zwart);line-height:1.35}.review-naam small{font-weight:500;font-size:0.78rem;color:var(--grijs)}.review-bron{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:0.74rem;font-weight:600;color:var(--grijs);white-space:nowrap}.review-bron svg{width:15px;height:15px;flex-shrink:0}.morf-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3vw,36px);align-items:center;max-width:1080px;margin:0 auto}@keyframes oudMarquee{to{transform:translateX(-100%)}}@keyframes oudSpin{to{transform:rotate(360deg)}}@keyframes oudKnipper{to{visibility:hidden}}@keyframes oudWiebel{0%,88%,100%{transform:rotate(2deg)}92%{transform:rotate(3.2deg)}96%{transform:rotate(1.2deg)}}@keyframes morfZweef{from{transform:rotate(1.1deg) translateY(0)}to{transform:rotate(1.1deg) translateY(-9px)}}@keyframes nieuwSheen{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}@keyframes nieuwCursor{0%{transform:translate(200px,100px);opacity:0}10%{opacity:1}36%{transform:translate(0,0)}44%{transform:translate(0,0) scale(0.78)}52%{transform:translate(0,0) scale(1)}68%{transform:translate(26px,-14px);opacity:1}82%,100%{transform:translate(120px,60px);opacity:0}}@keyframes nieuwKlikRing{0%,42%{opacity:0;transform:scale(0.4)}48%{opacity:1;transform:scale(1)}62%{opacity:0;transform:scale(2.4)}100%{opacity:0}}@keyframes morfPuls{0%{opacity:0.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.65)}}@media (max-width:900px){.morf-stage{grid-template-columns:1fr;max-width:520px;gap:26px}}.footer-social{display:flex;gap:10px}.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--ink-lijn);color:rgba(245,241,232,0.78);transition:color 0.2s ease,border-color 0.2s ease,background 0.2s ease,transform 0.2s ease}.footer-social a:hover{color:var(--ink);background:var(--mint);border-color:var(--mint);transform:translateY(-2px)}.footer-social a:focus-visible{outline:2px solid var(--mint);outline-offset:2px}.footer-social svg{width:18px;height:18px}.result-bento{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:stretch}.rb-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}.rb-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:20px;padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;transition:opacity 0.6s ease,transform 0.6s ease,box-shadow 0.3s ease,border-color 0.3s ease}.rb-card.visible:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(14,147,132,0.35)}.rb-side .rb-card:nth-child(1){transition-delay:0.12s}.rb-side .rb-card:nth-child(2){transition-delay:0.24s}.rb-side .rb-card.visible:hover{transition-delay:0s}.rb-card .result-stats{gap:18px}.rb-numrow{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}.rb-delta{font-size:0.72rem;font-weight:600;padding:3px 9px;border-radius:100px;background:rgba(14,147,132,0.10);color:var(--accent-dark);white-space:nowrap}.rb-feature{background:var(--tq);border-color:transparent;color:var(--creme-tekst)}.rb-feature.visible:hover{border-color:transparent}.rb-feature .result-head h3{color:var(--creme-tekst);font-size:1.15rem}.rb-feature .result-head .sub,.rb-feature .result-stat .lbl{color:var(--creme-zacht)}.rb-feature .result-logo{background:var(--kaart);border-color:transparent}.rb-feature .result-stat .num{color:var(--creme);font-size:clamp(2.8rem,5vw,4.4rem)}.rb-feature .result-stat .lbl{font-size:0.82rem}.rb-feature .rb-delta{background:rgba(143,214,202,0.16);color:var(--mint)}.rb-feature .result-line{color:var(--creme-tekst);font-size:1rem}.rb-feature .result-tag{background:transparent;border-color:rgba(245,241,232,0.22);color:var(--mint)}.rb-feature .result-link{color:var(--koraal-licht)}.rb-feature .result-link:hover{color:var(--creme)}.rb-chart{margin:8px 0 22px;flex:1;display:flex;flex-direction:column}.rb-plot{position:relative;flex:1;min-height:clamp(130px,15vw,190px)}.rb-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(-12px 100% -12px 0);transition:clip-path 1.8s cubic-bezier(0.3,0.7,0.2,1) 0.35s}.rb-guide{stroke:rgba(245,241,232,0.24);stroke-width:1;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}.rb-line{fill:none;stroke:var(--mint);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.rb-area{fill:url(#rbFill)}.rb-dot,.rb-pulse{position:absolute;left:100%;top:13.1%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;opacity:0}.rb-dot{background:var(--creme);transition:opacity 0.3s ease 2s}.rb-pulse{background:var(--mint)}.visible .rb-plot svg{clip-path:inset(-12px -12px -12px 0)}.visible .rb-dot{opacity:1}.visible .rb-pulse{animation:rbPulse 2.4s ease-out 2.2s infinite}@keyframes rbPulse{0%{opacity:0.55;transform:scale(1)}70%,100%{opacity:0;transform:scale(3.2)}}.rb-as{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:0.74rem;font-weight:600;color:var(--creme-tekst)}.rb-chart figcaption{margin-top:4px;font-size:0.74rem;color:var(--creme-zacht)}.rb-bron{margin-top:18px;font-size:0.78rem;color:var(--grijs);text-align:center}@media (max-width:900px){.result-bento{grid-template-columns:1fr}.rb-side{grid-template-rows:auto}}@media (max-width:420px){.rb-card .result-stats{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.rb-plot svg,.rb-dot,.rb-card{transition:none}.visible .rb-pulse{animation:none}}@keyframes inboxTik{0%{transform:translateY(6px) scale(0.7);opacity:0.2}100%{transform:none;opacity:1}}.morf-melding{position:absolute;top:0;right:0;left:0;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#FFFDF8;box-shadow:0 18px 40px rgba(0,0,0,0.3),0 0 0 1px rgba(22,20,15,0.04);opacity:0;transform:translate(36px,-6px) scale(0.92);transition:transform 0.7s cubic-bezier(0.22,1.25,0.36,1),opacity 0.45s ease}.morf-melding.in{opacity:1;transform:none}.morf-melding.weg{opacity:0.4;transform:translateY(calc(100% + 14px)) scale(0.96);transition:transform 0.7s cubic-bezier(0.4,0,0.2,1),opacity 0.7s ease}.morf-melding.uit{opacity:0;transform:translateY(calc(100% + 30px)) scale(0.92);transition:transform 0.6s ease,opacity 0.6s ease}.morf-melding-icoon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;flex-shrink:0;color:#FFFDF8}.morf-melding-icoon svg{width:19px;height:19px}.morf-melding-tekst{min-width:0}.morf-melding-tekst strong{display:block;font-family:var(--font-display);font-size:0.86rem;font-weight:700;color:var(--zwart);line-height:1.25}.morf-melding-tekst span{display:block;font-size:0.74rem;color:var(--grijs);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:480px){.morf-melding{padding:9px 11px;gap:9px;border-radius:13px}.morf-melding-icoon{width:32px;height:32px;border-radius:9px}.morf-melding-icoon svg{width:16px;height:16px}.morf-melding-tekst strong{font-size:0.78rem}.morf-melding-tekst span{font-size:0.68rem}}@media (prefers-reduced-motion:reduce){.morf-melding,.morf-melding.weg,.morf-melding.uit{transition:none}}.foto-contact{position:fixed;right:22px;bottom:22px;z-index:900;display:flex;align-items:center;gap:12px;padding:7px 20px 7px 7px;border-radius:999px;background:#FFFDF8;color:var(--ink);text-decoration:none;box-shadow:0 14px 34px rgba(12,12,12,0.24),0 0 0 1px rgba(12,29,35,0.06);animation:fcIn 0.7s cubic-bezier(0.22,1.2,0.36,1) 1.2s both;transition:transform 0.25s ease,box-shadow 0.25s ease}.foto-contact:hover,.foto-contact:focus-visible{transform:translateY(-3px);box-shadow:0 20px 42px rgba(12,12,12,0.3),0 0 0 1px rgba(12,29,35,0.08)}.foto-contact:focus-visible{outline:3px solid var(--accent);outline-offset:3px}@keyframes fcIn{from{opacity:0;transform:translateY(18px) scale(0.94)}to{opacity:1;transform:none}}.fc-foto{position:relative;flex-shrink:0;width:48px;height:48px}.fc-foto img{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover}.fc-online{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;background:#25C463;border:2.5px solid #FFFDF8}.fc-tekst{display:flex;flex-direction:column;line-height:1.2}.fc-tekst b{font-family:var(--font-display);font-size:0.98rem;font-weight:700;color:var(--ink)}.fc-tekst small{font-size:0.74rem;color:var(--grijs);margin-top:2px}@media (max-width:900px){body:has(.foto-contact){padding-bottom:0}body:has(.foto-contact) .cookie-banner{padding-bottom:84px}.foto-contact{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));gap:9px;padding:5px 15px 5px 5px}.fc-foto,.fc-foto img{width:42px;height:42px}.fc-tekst b{font-size:0.9rem}.fc-tekst small{display:none}}@media (prefers-reduced-motion:reduce){.foto-contact{animation:none;transition:none}}.faq-kolom{display:flex;flex-direction:column;gap:12px;min-width:0}@media (min-width:901px){#faq .faq-lijst{max-width:1120px;display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px 24px}}.sb #hero .hero-copy{translate:0 calc(var(--hp,0) * 46px);opacity:calc(1 - var(--hp,0) * 0.55)}.sb .over-foto.fade-in{opacity:1;transform:none;clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(0.65,0,0.25,1)}.sb .over-foto.fade-in.visible{clip-path:inset(-40px -40px -40px -40px)}.sb .over-foto img{scale:1.08;translate:0 calc((0.5 - var(--p,0.5)) * 30px)}.sb .rb-card.fade-in{opacity:1;transform:none}.sb .rb-card.fade-in.visible:hover{transform:translateY(-4px)}.sb .rb-feature{--t:clamp(0,(var(--p,1) - 0.12) / 0.42,1)}.sb .rb-plot svg{clip-path:inset(-12px calc((1 - var(--t)) * 100%) -12px 0);transition:none}.sb .rb-dot{opacity:clamp(0,(var(--t) - 0.95) * 20,1);transition:none}.sb .rb-pulse{display:none}.sb .morf-stage{--t:clamp(0,(var(--p,1) - 0.2) / 0.28,1)}.sb .versus-card .versus-list li{opacity:0;translate:-12px 0;transition:opacity 0.45s ease,translate 0.5s cubic-bezier(0.22,1,0.36,1);transition-delay:calc(0.25s + var(--i,0) * 90ms)}.sb .versus-card.visible .versus-list li{opacity:1;translate:none}.sb .prijs-grid .prijs-card.fade-in{transform:none;transition:opacity 0.7s ease,translate 0.9s cubic-bezier(0.22,1,0.36,1)}.sb .prijs-grid .prijs-card.fade-in:first-child{translate:-48px 0}.sb .prijs-grid .prijs-card.fade-in:last-child{translate:48px 0}.sb .prijs-grid .prijs-card.fade-in.visible{translate:none}@media (min-width:901px) and (max-width:1239px){.sb .prijs-grid .prijs-card.fade-in:first-child,.sb .prijs-grid .prijs-card.fade-in:last-child{translate:0 34px}.sb .prijs-grid .prijs-card.fade-in.visible{translate:none}}@media (max-width:900px){.sb #hero .hero-copy{translate:none;opacity:1}.sb .prijs-grid .prijs-card.fade-in:first-child,.sb .prijs-grid .prijs-card.fade-in:last-child{translate:0 34px}.sb .prijs-grid .prijs-card.fade-in.visible{translate:none}}.rv-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:30px}.rv-kop .section-header{margin-bottom:0;max-width:620px}.rv-score{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:16px;row-gap:12px;padding:18px 22px;border-radius:18px;background:var(--kaart);box-shadow:0 1px 0 rgba(12,12,12,0.04),0 0 0 1px rgba(12,12,12,0.06),0 14px 34px rgba(12,12,12,0.06);text-decoration:none;color:var(--zwart);transition:transform 0.25s ease,box-shadow 0.25s ease}.rv-score:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(12,12,12,0.04),0 0 0 1px rgba(14,147,132,0.3),0 18px 40px rgba(12,12,12,0.1)}.rv-score:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.rv-cijfer{grid-row:1;font-family:var(--font-display);font-size:2.9rem;font-weight:800;line-height:1;letter-spacing:-0.03em;color:var(--zwart)}.rv-score-tekst{display:flex;flex-direction:column;gap:3px;font-size:0.84rem;color:var(--grijs)}.rv-score-tekst .stars{font-size:1rem;letter-spacing:1px;color:var(--koraal)}.rv-google{grid-column:1 / -1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;border:1.5px solid var(--grijs-licht);font-weight:600;font-size:0.9rem;color:var(--accent-dark);transition:border-color 0.2s ease,background-color 0.2s ease}.rv-google svg{width:17px;height:17px}.rv-score:hover .rv-google{border-color:var(--accent);background:rgba(14,147,132,0.06)}.rv-venster{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:-12px -12px 0;padding:12px;border-radius:22px}.rv-venster::-webkit-scrollbar{display:none}.rv-venster:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.rv-baan{display:flex;gap:18px;width:100%}.rv-baan .review-card{flex:0 0 calc((100% - 54px) / 4);width:auto;padding:24px 22px 20px}.rv-baan .review-tekst{font-size:0.9rem;-webkit-line-clamp:9}.rv-baan .review-feature .review-tekst{font-size:0.9rem}.rv-baan .review-aanhaling{font-size:4.2rem;right:16px}.rv-baan .review-bron{display:none}.rv-baan .review-wie{padding-top:14px;border-top:1px solid rgba(12,12,12,0.06)}.rv-voortgang{flex:1;height:4px;margin-left:10px;border-radius:2px;background:var(--grijs-licht);overflow:hidden}.rv-voortgang i{display:block;height:100%;width:calc(var(--rv-deel,0.36) * 100%);border-radius:2px;background:var(--accent);transform:translateX(calc(var(--rv-pos,0) * (1 / var(--rv-deel,0.36) - 1) * 100%))}.rv-pijl{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--grijs-licht);background:var(--kaart);color:var(--zwart);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 0.2s ease,border-color 0.2s ease,color 0.2s ease,opacity 0.2s ease}.rv-pijl svg{width:20px;height:20px}.rv-pijl:hover:not(:disabled){background:var(--accent-contrast);border-color:var(--accent-contrast);color:#FFFDF8}.rv-pijl:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.rv-pijl:disabled{opacity:0.35;cursor:default}@media (max-width:1100px){.rv-baan .review-card{flex-basis:calc((100% - 18px) / 2)}}@media (max-width:900px){.rv-kop{align-items:flex-start}.rv-score{width:100%}.rv-venster{scroll-snap-type:x mandatory}.rv-baan .review-card{flex-basis:86%;scroll-snap-align:start}}.rw-scherm{display:block;position:relative;aspect-ratio:4 / 5;overflow:hidden}.rw-scherm img{display:block;width:100%;height:auto;will-change:translate}@media (max-width:900px){.rw-scherm{aspect-ratio:16 / 11}}@media (prefers-reduced-motion:reduce){.rw-scherm img,.rw-kaart{transition:none}}@media (max-width:900px){.proof-band .review-strip{white-space:nowrap;gap:8px;padding:9px 16px;font-size:0.84rem}.proof-band .review-strip .stars{letter-spacing:0}}@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/manrope-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/manrope-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--font-body:'Manrope',-apple-system,sans-serif;--font-display:'Bricolage Grotesque','Manrope',sans-serif}.nav-links>li:not(.nav-cta)>a,.nav-mega-trigger{font-family:var(--font-display);text-transform:uppercase;letter-spacing:0.06em;font-size:0.8rem;font-weight:600}@media (min-width:901px) and (max-width:1220px){.nav-links>li:not(.nav-cta)>a,.nav-mega-trigger{font-size:0.76rem;letter-spacing:0.04em}}@media (max-width:900px){.nav-links>li:not(.nav-cta)>a,.nav-mega-trigger{font-size:1rem;letter-spacing:0.05em}}@media (min-width:901px) and (max-width:1060px){.nav-links{gap:0}.nav-links>li:not(.nav-cta)>a,.nav-mega-trigger{padding:8px 7px;font-size:0.72rem;letter-spacing:0.03em}.nav-links .nav-cta a.btn{padding:10px 14px;font-size:0.82rem}}.nav-links a.btn{font-weight:700} @keyframes flxPop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes svc-pulse{0%{box-shadow:0 0 0 0 rgba(143,214,202,.5)}70%{box-shadow:0 0 0 8px transparent}to{box-shadow:0 0 0 0 transparent}}@keyframes svc-scroll{to{transform:translateX(-50%)}}@keyframes cx-in{0%{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}@keyframes cx-up{0%{transform:translateY(100%)}to{transform:none}}.about-hero,.article-hero,.blog-hero,.contact-hero,.portfolio-hero,.pricing-hero,.privacy-hero,.services-hero{position:relative;padding:clamp(140px,16vw,190px)0 clamp(48px,6vw,72px);background:radial-gradient(ellipse 75% 55%at 18% -5%,rgba(14,147,132,.22),transparent 60%),radial-gradient(ellipse 50% 40%at 85% 90%,rgba(229,107,76,.08),transparent 60%),linear-gradient(180deg,var(--ink-diep) 0%,var(--ink) 100%);overflow:hidden}.about-hero h1,.article-hero h1,.blog-hero h1,.contact-hero h1,.portfolio-hero h1,.pricing-hero h1,.privacy-hero h1,.services-hero h1{color:var(--creme-tekst);font-size:clamp(2.2rem,4.5vw,3.4rem);margin:6px 0 16px;max-width:780px}.about-hero p,.blog-hero p,.contact-hero p,.portfolio-hero p,.pricing-hero p,.privacy-hero p,.services-hero p{color:var(--creme-zacht);font-size:1.08rem;max-width:620px;line-height:1.7}.about-hero .label,.blog-hero .label,.contact-hero .label,.portfolio-hero .label,.pricing-hero .label,.privacy-hero .label,.services-hero .label{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);background:rgba(14,147,132,.14);border:1px solid rgba(143,214,202,.28);border-radius:100px;padding:6px 14px;margin-bottom:16px}.gradient-text{color:var(--accent)}.about-hero .gradient-text,.blog-hero .gradient-text,.contact-hero .gradient-text,.portfolio-hero .gradient-text,.pricing-hero .gradient-text,.services-hero .gradient-text{color:var(--mint)}.glow{position:absolute;border-radius:50%;filter:blur(110px);pointer-events:none;opacity:.5}.glow-1{width:480px;height:480px;background:rgba(14,147,132,.14);top:-160px;right:-80px}.glow-2{width:380px;height:380px;background:rgba(229,107,76,.07);bottom:-140px;left:-80px}section{position:relative}section .label{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px}.portfolio-cta h2,.srv-cta-inner h2{color:var(--creme-tekst);margin-bottom:12px}.portfolio-cta p,.srv-cta-inner p{color:var(--creme-zacht);max-width:520px;margin:0 auto 26px}.cmp-copy h2 .gradient-text,.portfolio-cta h2 .gradient-text,.srv-cta-inner .label{color:var(--mint)}.portfolio-section{padding:clamp(48px,6vw,72px)0 clamp(72px,9vw,110px);background:linear-gradient(180deg,var(--ink) 0%,var(--ink-diep) 100%)}.pf-filters,.pf-toolbar{display:flex;flex-wrap:wrap}.pf-toolbar{align-items:center;justify-content:space-between;gap:14px;margin-bottom:30px}.pf-filters{gap:8px}.pf-count,.pf-filter{color:var(--creme-zacht)}.pf-filter{font-family:inherit;font-size:.86rem;font-weight:500;background:0 0;border:1px solid var(--ink-lijn);border-radius:100px;padding:9px 20px;cursor:pointer;transition:all .2s ease}.pf-filter:hover{color:var(--creme-tekst);border-color:rgba(143,214,202,.5)}.pf-filter.is-active{color:var(--ink);background:var(--creme-tekst);border-color:var(--creme-tekst);font-weight:600}.pf-count{font-size:.82rem}.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pf-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ink-lijn);background:var(--ink-kaart);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,opacity .3s ease}.pf-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.35)}.pf-card.is-hiding{opacity:0;transform:scale(.96)}.pf-media{position:relative;aspect-ratio:4/5}.pf-card img,.pf-card video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.pf-card:hover img,.pf-card:hover video{transform:scale(1.04)}.cmp img,.pf-card::after{position:absolute;inset:0;pointer-events:none}.pf-card::after{content:"";background:linear-gradient(to top,rgba(10,24,29,.78)0,transparent 40%)}.pf-chip,.pf-foot{position:absolute;z-index:2}.pf-chip{top:14px;left:14px;background:rgba(10,24,29,.55);backdrop-filter:blur(8px);border:1px solid rgba(245,241,232,.14);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:100px;color:rgba(245,241,232,.9)}.pf-foot{left:18px;right:18px;bottom:15px}.pf-title{font-size:1.02rem;font-weight:600;color:var(--creme-tekst);margin:0;line-height:1.25}.pf-sub{display:block;font-size:.79rem;color:rgba(245,241,232,.65);margin-top:3px}.portfolio-cta{text-align:center;margin-top:clamp(56px,7vw,84px)}.portfolio-cta p{max-width:460px;line-height:1.65}.portfolio-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.portfolio-cta-btns .btn-ghost{border:1px solid rgba(245,241,232,.25);color:var(--creme-tekst);background:0 0}.portfolio-cta-btns .btn-ghost:hover{background:rgba(143,214,202,.09);transform:translateY(-2px)}.cmp-section{margin-top:clamp(56px,7vw,90px);padding-top:clamp(44px,6vw,66px);border-top:1px solid var(--ink-lijn)}.cmp-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,54px);align-items:center}.cmp{--pos:50%;position:relative;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;border:1px solid var(--ink-lijn);background:var(--ink-kaart);box-shadow:0 18px 44px rgba(0,0,0,.35);user-select:none;-webkit-user-select:none}.cmp img{display:block;width:100%;height:100%;object-fit:cover}.cmp-after{z-index:1}.cmp-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos))0 0)}.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);z-index:3;width:2px;margin-left:-1px;background:rgba(245,241,232,.85);pointer-events:none}.cmp-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--creme-tekst);background:rgba(12,29,35,.72);backdrop-filter:blur(8px);border:1px solid rgba(245,241,232,.32);box-shadow:0 6px 20px rgba(0,0,0,.4);transition:border-color .2s ease,box-shadow .2s ease}.cmp-grip svg{width:22px;height:22px}.cmp-range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;background:0 0;touch-action:pan-y;-webkit-appearance:none;appearance:none}.cmp-range::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%}.cmp-range::-moz-range-thumb{width:52px;height:100%;border:0;border-radius:0}.cmp-range:focus{outline:0}.cmp:focus-within .cmp-grip{border-color:var(--mint);box-shadow:0 0 0 3px rgba(143,214,202,.35)}.cmp-tag{position:absolute;top:14px;z-index:3;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:100px;color:rgba(245,241,232,.9);background:rgba(10,24,29,.55);backdrop-filter:blur(8px);border:1px solid rgba(245,241,232,.14);pointer-events:none}.cmp-tag--before{left:14px}.cmp-tag--after{right:14px;color:var(--mint);border-color:rgba(143,214,202,.35)}.cmp-copy .label,.cmp-hint{border-radius:100px;padding:6px 14px}.cmp-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;white-space:nowrap;font-size:.72rem;color:rgba(245,241,232,.78);background:rgba(10,24,29,.55);backdrop-filter:blur(8px);border:1px solid rgba(245,241,232,.14);pointer-events:none;transition:opacity .35s ease}.cmp.is-touched .cmp-hint{opacity:0}.cmp-copy .label{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);background:rgba(14,147,132,.14);border:1px solid rgba(143,214,202,.28);margin-bottom:16px}.cmp-copy h2,.lb-caption h3{color:var(--creme-tekst);margin:0 0 14px}.cmp-intro{color:var(--creme-zacht);line-height:1.7;margin:0 0 24px;max-width:48ch}.cmp-list{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:16px}.cmp-list li{position:relative;padding-left:30px}.cmp-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:rgba(143,214,202,.14);border:1px solid rgba(143,214,202,.4)}.cmp-list li::after,.pricing-features li::before{content:"";position:absolute;left:6px;top:9px;width:6px;height:3px;border-left:1.5px solid var(--mint);border-bottom:1.5px solid var(--mint);transform:rotate(-45deg)}.cmp-list b{color:var(--creme-tekst);font-size:.95rem;font-weight:600;margin-bottom:3px}.cmp-list span,.cmp-pair figcaption{color:var(--creme-zacht);font-size:.88rem;line-height:1.6}.cmp-list b,.cmp-list span{display:block}.cmp-meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:22px}.cmp-meta span{font-size:.74rem;letter-spacing:.03em;color:var(--creme-zacht);border:1px solid var(--ink-lijn);border-radius:100px;padding:6px 13px}.cmp-link{display:inline-flex;align-items:center;gap:8px;color:var(--mint);font-weight:600;font-size:.92rem;transition:gap .2s ease}.cmp-link:hover{gap:12px}.cmp-pairs{margin-top:clamp(44px,6vw,72px)}.cmp-pairs-title{color:var(--creme-tekst);margin:0 0 clamp(22px,3vw,34px)}.cmp-pairs-title .gradient-text{color:var(--mint)}.cmp-pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,36px)}.cmp-pair{margin:0}.cmp-pair .cmp{aspect-ratio:3/4}.cmp-pair figcaption{padding-top:14px}.lightbox{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:28px}.lightbox.open{display:flex}.lightbox-backdrop{position:absolute;inset:0;background:rgba(10,24,29,.9);backdrop-filter:blur(8px)}.lightbox-content{position:relative;max-width:min(1100px,92vw);max-height:86vh}.lightbox-content img,.lightbox-content video{max-width:100%;max-height:82vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.5);display:block;margin:0 auto;max-height:max(50vh,calc(100vh - 300px))}.lb-caption{color:var(--creme-tekst);text-align:center;font-size:.9rem}.lb-caption .pf-tag{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:4px}.lb-caption h3{font-size:1.4rem;margin:0 0 16px}.pf-case-static{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:760px;margin:0 auto;text-align:left}.pf-beat{flex:1 1 200px;min-width:180px}.pf-beat b{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}.pf-beat span{display:block;font-size:.82rem;line-height:1.55;color:var(--creme-zacht)}.lb-visit{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--mint);font-size:.88rem;font-weight:600}.crm-pipe .rij .ic svg,.lb-visit svg{width:15px;height:15px}.lightbox-close{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(245,241,232,.18);background:rgba(17,39,46,.85);backdrop-filter:blur(8px);color:var(--creme-tekst);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,transform .2s ease;transform:translateZ(0);-webkit-transform:translateZ(0);touch-action:manipulation}.lightbox-close:hover{background:var(--accent);transform:scale(1.06)}.lightbox-close svg{width:18px;height:18px}.lightbox-content{max-height:calc(100vh - 56px);overflow-y:auto}.lb-caption{margin-top:20px}.lb-caption .pf-case-static{gap:16px 28px}.lb-caption .pf-beat b{font-size:.72rem;margin-bottom:4px}.lb-caption .pf-beat span{font-size:.98rem;line-height:1.6;color:rgba(245,241,232,.88)}.lightbox-content.lb-portrait{display:grid;grid-template-columns:auto minmax(280px,400px);gap:48px;align-items:center}.lb-portrait img,.lb-portrait video{max-height:calc(100vh - 80px)}.lb-portrait .lb-caption{margin-top:0;text-align:left}.lb-portrait .pf-case-static{flex-direction:column;gap:20px;max-width:none}.lb-portrait .pf-beat{flex:none;min-width:0}@media (max-width:760px){.lightbox-content.lb-portrait{grid-template-columns:1fr;gap:20px}.lb-portrait img,.lb-portrait video{max-height:62vh}}.flx-modal-overlay{position:fixed;inset:0;z-index:10001;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,6,14,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s ease}.flx-modal-overlay.visible{opacity:1;pointer-events:auto}.flx-modal{position:relative;width:100%;max-width:420px;background:var(--ink-kaart);border:1px solid rgba(143,214,202,.35);border-radius:20px;padding:44px 36px 36px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 50px rgba(143,214,202,.08);transform:translateY(16px) scale(.97);transition:transform .35s cubic-bezier(.22,1,.36,1)}.flx-modal-overlay.visible .flx-modal{transform:none}.flx-modal-overlay.flx-modal--error .flx-modal{border-color:rgba(229,107,76,.4)}.flx-modal-close,.flx-modal-icon{border-radius:50%;display:flex;align-items:center;justify-content:center}.flx-modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid rgba(245,241,232,.18);background:0 0;color:var(--creme-zacht);cursor:pointer;transition:background .2s ease,color .2s ease}.flx-modal-close:hover{border-color:var(--mint);color:var(--mint)}.crm-bron .ic svg,.crm-final .alternatief svg,.flx-modal-close svg{width:16px;height:16px}.flx-modal-icon{width:64px;height:64px;margin:0 auto 20px;background:rgba(143,214,202,.14);border:1px solid rgba(143,214,202,.35);color:var(--mint);animation:flxPop .45s cubic-bezier(.22,1,.36,1) both}.flx-modal-overlay.flx-modal--error .flx-modal-icon{background:var(--koraal-wash);border-color:rgba(229,107,76,.4);color:var(--koraal)}.flx-modal-icon svg{width:30px;height:30px}.flx-modal-title{font-size:1.4rem;font-weight:800;color:var(--creme-tekst);margin-bottom:10px}.flx-modal-body{font-size:.95rem;line-height:1.65;color:var(--creme-zacht);margin-bottom:26px}.flx-modal-body strong,.mock-rank .bar.win span,.pf-beat b{color:var(--mint);font-weight:700}.flx-modal-ok{width:100%;justify-content:center}.about-hero-glow{display:none}.founder-section{padding:clamp(64px,8vw,100px)0;background:var(--wit)}.founder-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(36px,6vw,72px);align-items:start}.founder-photo{position:relative}.founder-photo-wrap{aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid var(--grijs-licht);background:linear-gradient(160deg,var(--wash),var(--wash-deep));box-shadow:var(--shadow-soft)}.founder-photo-wrap img{width:100%;height:100%;object-fit:cover}.founder-badge{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--wit);font-size:.75rem;font-weight:700;padding:7px 16px;border-radius:100px;white-space:nowrap;box-shadow:0 8px 24px rgba(14,147,132,.35)}.founder-content h2{margin-bottom:4px}.founder-name-sub{color:var(--accent-dark);font-weight:600;margin-bottom:18px}.founder-body p{color:var(--grijs);line-height:1.75;margin-bottom:14px}.founder-quote{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:22px 0;font-size:1.05rem;color:var(--zwart);font-weight:500}.founder-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.founder-tag{font-size:.78rem;font-weight:600;color:var(--accent-dark);background:var(--wash);border:1px solid rgba(14,147,132,.22);border-radius:100px;padding:5px 13px}.founder-body h3{font-size:1.05rem;margin:24px 0 6px}.founder-body h3:first-child,.privacy-card h2:first-child{margin-top:0}.founder-feiten{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(36px,5vw,56px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--grijs-licht)}.founder-feit{background:var(--wash);border-radius:14px;padding:18px 20px}.founder-feit b{display:block;font-family:var(--font-display);font-size:1.7rem;line-height:1.1;color:var(--accent-dark);margin-bottom:4px}.founder-feit span{font-size:.86rem;color:var(--grijs);line-height:1.5}.article-body a,.founder-feit a,.privacy-card a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}.about-intermezzo{padding:clamp(48px,6vw,80px)0;background:var(--wash)}.intermezzo-inner{display:grid;grid-template-columns:380px 1fr;gap:clamp(32px,5vw,64px);align-items:center}.intermezzo-foto{aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid var(--grijs-licht);box-shadow:var(--shadow-soft);transform:rotate(-1.5deg)}.intermezzo-foto img{width:100%;height:100%;object-fit:cover;display:block}.intermezzo-tekst .label{margin-bottom:12px}.intermezzo-slogan{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.02em;color:var(--zwart);margin-bottom:16px}.intermezzo-tekst p:not(.intermezzo-slogan){color:var(--grijs);line-height:1.75;max-width:52ch;margin-bottom:22px}.about-proces{padding:clamp(56px,7vw,90px)0;background:linear-gradient(180deg,var(--wash) 0%,var(--wit) 60%)}.proces-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.proces-stap{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:26px 24px;transition:transform .25s ease,box-shadow .25s ease}.proces-stap:hover,.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.proces-nr{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--wit);font-family:var(--font-display);font-weight:700;font-size:.95rem;margin-bottom:14px}.proces-stap h3,.value-card h3{font-size:1.02rem;margin-bottom:6px}.proces-stap p{font-size:.9rem}.about-niet{padding:clamp(56px,7vw,90px)0;background:var(--wit)}.niet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.niet-item{display:flex;gap:14px;align-items:flex-start;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:20px 22px}.niet-item svg{flex-shrink:0;color:var(--koraal);margin-top:2px}.niet-item strong{display:block;font-size:.98rem;margin-bottom:4px;color:var(--zwart)}.niet-item p{font-size:.88rem;margin:0}.about-faq,.about-values{padding:clamp(56px,7vw,90px)0}.about-faq{background:var(--wash)}.about-values{background:var(--wit)}.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.value-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:26px 24px;transition:transform .25s ease,box-shadow .25s ease}.value-icon{width:44px;height:44px;border-radius:11px;background:var(--koraal-wash);color:var(--koraal);display:flex;align-items:center;justify-content:center;margin-bottom:14px}.ct-card-icon svg,.niet-item svg,.value-icon svg{width:20px;height:20px}.value-card p{font-size:.9rem}.about-cta{padding:clamp(56px,7vw,90px)0;background:var(--wit)}.about-cta-inner{text-align:center;background:linear-gradient(180deg,var(--ink-diep),var(--ink));border-radius:20px;padding:clamp(44px,6vw,72px) 28px}.about-cta-inner h2{color:var(--creme-tekst);margin-bottom:12px}.about-cta-inner p{color:var(--creme-zacht);max-width:520px;margin:0 auto 26px}.about-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.about-cta-btns .btn-ghost{background:0 0;color:var(--mint);border:1.5px solid rgba(143,214,202,.45)}.about-cta-btns .btn-ghost:hover{background:rgba(143,214,202,.09);transform:translateY(-2px)}.blog-section{padding:clamp(56px,7vw,90px)0;background:var(--wit)}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.blog-card{display:flex;flex-direction:column;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}.blog-card-media{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--wash),var(--wash-deep));color:var(--accent);border-bottom:1px solid var(--grijs-licht)}.blog-card-media.mini{flex-direction:column;align-items:stretch;justify-content:center;gap:10px;padding:22px 26px}.mini-ai-bubble{align-self:flex-start;display:flex;align-items:center;gap:7px;background:var(--kaart);border-radius:9px;padding:7px 13px;color:var(--accent-dark);font-size:.76rem;font-weight:600}.mini-ai-list{display:flex;flex-direction:column;gap:6px}.mini-ai-list i{display:block;height:8px;border-radius:5px;background:rgba(14,147,132,.16)}.mini-ai-list i:first-child{width:80%;background:var(--accent);opacity:.8}.mini-ai-list i:nth-child(2){width:58%}.mini-ai-list i:last-child{width:42%}.mini-rank{display:flex;align-items:flex-end;gap:7px;height:64px}.mini-rank i{flex:1;border-radius:5px 5px 0 0;background:rgba(14,147,132,.32);display:block}.mini-rank i:last-child{background:linear-gradient(180deg,var(--mint),var(--accent))}.mini-site-bar{display:flex;gap:5px}.mini-site-bar i{width:7px;height:7px;border-radius:50%;background:rgba(14,147,132,.25);display:block}.mini-site-lines i{display:block;height:7px;border-radius:4px;background:rgba(14,147,132,.14);margin-bottom:6px}.mini-site-lines i.short{width:55%;margin-bottom:0}.mini-site-cta{align-self:flex-start;background:var(--accent);color:var(--wit);font-size:.7rem;font-weight:700;border-radius:6px;padding:6px 13px}.mini-ads-dots{display:flex;gap:6px}.mini-ads-dots i{width:8px;height:8px;border-radius:50%;display:block}.mini-ads-split{display:flex;height:10px;border-radius:6px;overflow:hidden}.mini-ads-split i{display:block}.mini-status .row{display:flex;align-items:center;gap:9px}.mini-status .row+.row{margin-top:8px}.mini-status .led{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:svc-pulse 2.4s infinite}.mini-status .bar{height:7px;border-radius:4px;background:rgba(14,147,132,.14)}@media (prefers-reduced-motion:reduce){.mini-status .led{animation:none}}.mini-brand-mono{font-family:var(--font-display);font-weight:700;font-size:2.1rem;color:var(--accent-dark);line-height:1}.mini-brand-swatches{display:flex;gap:6px;margin-top:4px}.mini-brand-swatches i{width:17px;height:17px;border-radius:5px;display:block}.blog-card-info{padding:20px 22px 24px;display:flex;flex-direction:column;flex-grow:1}.blog-cat{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wit);background:var(--koraal);border-radius:100px;padding:4px 11px;margin-bottom:12px}.blog-card-info h2,.blog-card-info h3{font-size:1.05rem;margin-bottom:8px}.blog-card-info p{font-size:.88rem;color:var(--grijs);margin-bottom:16px}.blog-readmore{margin-top:auto;color:var(--koraal-donker);font-size:.86rem;font-weight:600;transition:color .2s ease}.blog-card:hover .blog-readmore{color:var(--koraal)}.blog-cta{text-align:center;margin-top:44px}.contact-section{padding:clamp(56px,7vw,90px)0;background:var(--wit)}.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,56px);align-items:start}.ct-info-cards{display:grid;gap:14px;margin-bottom:28px}.ct-card,.ct-card-icon{display:flex;align-items:center}.ct-card{gap:15px;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:14px;padding:17px 19px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}a.ct-card:hover{transform:translateY(-2px);border-color:rgba(14,147,132,.35);box-shadow:var(--shadow-soft)}.ct-card-icon{flex-shrink:0;width:44px;height:44px;border-radius:11px;background:var(--wash);color:var(--accent);justify-content:center}.ct-card-text{flex-grow:1}.ct-card-label{font-size:.76rem;color:var(--grijs)}.ct-card-value{font-weight:600;color:var(--zwart);font-size:.95rem}.ct-card-arrow{color:var(--koraal-donker);flex-shrink:0}.ct-btn-whatsapp .ct-card-icon{background:var(--koraal-wash);color:var(--koraal)}.ct-steps{display:grid;gap:14px;margin-bottom:28px}.ct-step{display:flex;gap:14px;align-items:flex-start}.ct-step-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--wit);font-size:.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}.ct-quote-block,.ct-step p{font-size:.92rem;color:var(--grijs)}.article-body strong,.ct-step strong,.form-group label,.privacy-card strong{color:var(--zwart)}.ct-quote-block{border-left:3px solid var(--accent);padding:4px 0 4px 16px;font-size:.95rem;font-style:italic}.ct-form-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:18px;padding:clamp(24px,3.5vw,36px);box-shadow:var(--shadow-soft)}.ct-form-card h2,.ct-form-card h3{margin-bottom:6px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px}.form-group input,.form-group select,.form-group textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--zwart);background:var(--wit);border:1px solid var(--grijs-licht);border-radius:10px;padding:12px 14px;transition:border-color .2s ease,box-shadow .2s ease}.form-group input::placeholder,.form-group textarea::placeholder{color:#a39b8b}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,147,132,.15)}.form-group textarea{resize:vertical;min-height:120px}.ct-booking-section{padding:clamp(56px,7vw,90px)0;background:linear-gradient(180deg,var(--wash) 0%,var(--wit) 60%)}.ct-booking-intro{text-align:center;max-width:620px;margin:0 auto 30px;color:var(--grijs)}.ct-booking{max-width:900px;margin:0 auto}.ct-booking-embed{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:18px;overflow:hidden;min-height:420px}.ct-booking-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:22px}.ct-booking-note{text-align:center;font-size:.82rem;color:var(--grijs);margin-top:14px}.article-hero{padding-bottom:clamp(36px,5vw,56px)}.article-back,.article-cat{display:inline-block;color:var(--mint);font-size:.88rem;font-weight:600;margin-bottom:22px}.article-back:hover{color:var(--creme-tekst)}.article-cat{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--wit);background:var(--koraal);border-radius:100px;padding:4px 12px;margin-bottom:14px}.article-meta{display:flex;flex-wrap:wrap;gap:18px;color:var(--creme-zacht);font-size:.86rem;margin-top:14px}.article-cover{max-width:640px;margin:clamp(24px,4vw,32px)0 0}.mock-site-bar{display:flex;gap:6px;margin-bottom:18px}.mock-site-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16);display:block}.mock-site-lines{margin-bottom:14px}.mock-site-lines i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.1);margin-bottom:8px}.mock-site-lines i.short{width:55%}.mock-site-lines i:last-child{margin-bottom:0}.mock-site-cta{display:inline-block;background:var(--accent);color:var(--wit);font-size:.82rem;font-weight:700;border-radius:9px;padding:10px 18px;margin-bottom:18px}.mock-ads-split{display:flex;height:14px;border-radius:8px;overflow:hidden;margin-top:16px}.mock-ads-split i,a.svc-card{display:block}.article-body{padding:clamp(40px,6vw,64px)0 clamp(64px,8vw,90px);background:var(--wit)}.article-body .container{max-width:760px}.article-lead{font-size:1.15rem;color:var(--zwart);line-height:1.75;margin-bottom:22px;font-weight:500}.article-body h2{font-size:clamp(1.35rem,2.4vw,1.7rem);margin:34px 0 12px;color:var(--zwart)}.article-body p{font-size:1rem;line-height:1.85;color:var(--grijs);margin-bottom:16px}.article-body ol,.article-body ul{margin:4px 0 18px 22px}.article-body li{font-size:1rem;line-height:1.8;color:var(--grijs)}.article-body a:hover,.svc-section a.inline:hover{color:var(--accent)}.article-cta{background:linear-gradient(150deg,var(--wash),var(--kaart) 70%);border:1px solid rgba(14,147,132,.22);border-radius:18px;padding:30px 28px;margin:36px 0 8px}.article-body li,.article-cta h3{margin-bottom:8px}.article-cta p{margin-bottom:18px}.article-related,.privacy-body{padding:0 0 clamp(72px,9vw,110px);background:var(--wit)}.privacy-body{padding:clamp(48px,6vw,72px)0 clamp(72px,9vw,110px)}.privacy-card{max-width:820px;margin:0 auto;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:18px;padding:clamp(28px,4vw,48px)}.privacy-card h2{font-size:1.3rem;margin:28px 0 10px}.privacy-card h3{font-size:1.05rem;margin:20px 0 8px}.privacy-card li,.privacy-card p{font-size:.95rem;line-height:1.75;color:var(--grijs);margin-bottom:12px}.privacy-card ul{margin:0 0 14px 20px}.privacy-card table{width:100%;border-collapse:collapse;font-size:.9rem;margin:14px 0}.privacy-card td,.privacy-card th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--grijs-licht)}.privacy-card td{color:var(--grijs)}.privacy-card th,.svc-breadcrumb li[aria-current]{color:var(--zwart);font-weight:600}.nf-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 80px;background:radial-gradient(ellipse 75% 55%at 50% -5%,rgba(14,147,132,.2),transparent 60%),linear-gradient(180deg,var(--ink-diep) 0%,var(--ink) 100%)}.nf-code{font-family:var(--font-display);font-size:clamp(5rem,16vw,9rem);font-weight:700;line-height:1;color:var(--mint);margin-bottom:10px}.nf-wrap h1{color:var(--creme-tekst);font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:12px}.nf-wrap p,.svc-hero>.container>p{color:var(--creme-zacht);max-width:460px;margin:0 auto 28px}.nf-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.nf-actions .btn-ghost,.nf-actions .btn-secondary{background:0 0;color:var(--mint);border:1.5px solid rgba(143,214,202,.45)}.nf-actions .btn-ghost:hover,.nf-actions .btn-secondary:hover{background:rgba(143,214,202,.09)}@media (max-width:1024px){.blog-grid,.founder-feiten,.growth-steps,.niet-grid,.pf-grid,.proces-grid,.rates-grid,.values-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:900px){.founder-inner{grid-template-columns:1fr}.founder-photo{max-width:360px}.intermezzo-inner{grid-template-columns:1fr}.intermezzo-foto{max-width:340px;transform:none}.contact-layout{grid-template-columns:1fr}.cmp-layout,.pricing-grid{grid-template-columns:1fr}.cmp,.cmp-pair .cmp{max-width:560px;width:100%;margin:0 auto}.cmp-pair-grid{grid-template-columns:1fr}}@media (max-width:640px){.pf-grid{grid-template-columns:1fr}.pf-toolbar{justify-content:center}.pf-count{display:none}.cmp-grip{width:40px;height:40px}.cmp-tag{font-size:.6rem;padding:5px 10px}.blog-grid,.growth-steps,.niet-grid,.proces-grid,.rates-grid,.values-grid{grid-template-columns:1fr}.founder-feiten{grid-template-columns:repeat(2,1fr);gap:10px}.founder-feit{padding:14px 16px}.founder-feit b{font-size:1.4rem}.form-row,.srv-features{grid-template-columns:1fr}}.svc-hero{position:relative;padding:clamp(140px,16vw,190px)0 clamp(44px,6vw,64px);text-align:center;background:radial-gradient(ellipse 75% 55%at 18% -5%,rgba(14,147,132,.22),transparent 60%),radial-gradient(ellipse 50% 40%at 85% 90%,rgba(229,107,76,.08),transparent 60%),linear-gradient(180deg,var(--ink-diep) 0%,var(--ink) 100%);overflow:hidden}.svc-hero .label{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(14,147,132,.14);border:1px solid rgba(143,214,202,.28);border-radius:100px;padding:6px 14px;margin-bottom:14px}.svc-hero h1{color:var(--creme-tekst);font-size:clamp(2.2rem,4.5vw,3.4rem);margin:6px auto 16px;max-width:800px}.svc-hero .gradient-text,.svc-hero .label{color:var(--mint)}.svc-hero>.container>p{font-size:1.05rem;max-width:640px;margin:0 auto 26px;line-height:1.7}.svc-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.svc-cta .btn-ghost,.svc-hero .btn-ghost{background:0 0;color:var(--mint);border:1.5px solid rgba(143,214,202,.45)}.svc-cta .btn-ghost:hover,.svc-hero .btn-ghost:hover{background:rgba(143,214,202,.09);transform:translateY(-2px)}.svc-section{padding:clamp(44px,6vw,72px)0;background:var(--wit)}.svc-section h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:14px}.svc-section p{color:var(--grijs);line-height:1.8;max-width:760px;margin-bottom:14px}.svc-section a.inline{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}.about-faq+.about-cta,.about-niet+.about-faq,.about-proces+.about-niet,.about-values+.about-proces,.ct-booking-section+.contact-section,.founder-section+.about-values,.pricing-faq+.pricing-cta,.pricing-section+.rates-section,.rates-section+.pricing-faq,.svc-check li,.svc-section+.svc-section{position:relative}.about-faq+.about-cta::before,.about-niet+.about-faq::before,.about-proces+.about-niet::before,.about-values+.about-proces::before,.ct-booking-section+.contact-section::before,.founder-section+.about-values::before,.pricing-faq+.pricing-cta::before,.pricing-section+.rates-section::before,.rates-section+.pricing-faq::before,.svc-section+.svc-section::before{content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(34px,4.5vw,80px);--seam-fill:var(--wit);background:var(--seam-fill);clip-path:polygon(0 0,100%0,100% 100%);pointer-events:none}.about-faq+.about-cta::before,.svc-section.alt+.svc-section::before{--seam-fill:var(--wash)}.svc-section.ink+.svc-section::before{--seam-fill:var(--ink-diep)}.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}.svc-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:24px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}a.svc-card{text-decoration:none}.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(14,147,132,.35)}.svc-card h3,.svc-step strong{color:var(--zwart);margin-bottom:6px}.svc-card h3{font-size:1.05rem}.svc-card p{font-size:.9rem;margin:0}.svc-check{list-style:none;padding:0;margin:18px 0 0;max-width:760px}.svc-check li{padding:7px 0 7px 30px;color:var(--zwart);line-height:1.6}.svc-check li::before{content:"";position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;background:var(--wash);border:1px solid rgba(14,147,132,.35)}.svc-check li::after{content:"";position:absolute;left:4px;top:17px;width:8px;height:4px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}.svc-steps{counter-reset:stap;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:26px}.svc-faq details,.svc-step{background:var(--kaart);border:1px solid var(--grijs-licht)}.svc-step{border-radius:16px;padding:22px}.svc-step::before{counter-increment:stap;content:"0"counter(stap);display:block;font-size:1.4rem;color:rgba(14,147,132,.3);margin-bottom:8px}.svc-step strong{display:block}.svc-step p{font-size:.88rem;margin:0}.svc-price-amount,.svc-step::before{font-family:var(--font-display);font-weight:700}.legal-card strong,.svc-faq summary,.svc-price strong,.svc-price-amount{color:var(--zwart)}.svc-faq{max-width:760px}.svc-faq details{border-radius:12px;margin-bottom:10px;overflow:hidden}.svc-faq summary{cursor:pointer;padding:17px 44px 17px 20px;font-weight:600;font-size:.95rem;list-style:none;position:relative}.svc-faq summary::-webkit-details-marker{display:none}.svc-faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.2rem;font-weight:400}.svc-faq details[open] summary::after{content:"–"}.svc-faq details>p{padding:0 20px 16px;margin:0;font-size:.92rem}.svc-final{padding:clamp(56px,7vw,90px)0 clamp(72px,9vw,110px);background:var(--wit)}.svc-final .container{text-align:center;background:linear-gradient(180deg,var(--ink-diep),var(--ink));border-radius:20px;padding:clamp(44px,6vw,72px) 28px;max-width:1152px}.svc-final h2{color:var(--creme-tekst);margin-bottom:12px}.svc-final .gradient-text{color:var(--mint)}.svc-final p{max-width:520px;margin:0 auto 26px}.svc-badge-new{display:inline-block;margin-left:8px;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--koraal);padding:3px 8px;border-radius:100px;vertical-align:middle}.ct-booking-note,.founder-tag{display:inline-flex;align-items:center;gap:8px}.ct-booking-note svg{width:16px;height:16px;color:var(--accent);flex-shrink:0}svg.ct-card-arrow{width:18px;height:18px;color:var(--koraal-donker);flex-shrink:0}.ct-booking-actions .btn-ghost{background:0 0;color:var(--accent-dark);border:1.5px solid var(--accent)}.ct-booking-actions .btn-ghost:hover{background:var(--wash)}.founder-tag{gap:7px}.founder-tag svg{width:14px;height:14px;flex-shrink:0}.legal-hero{position:relative;padding:clamp(140px,16vw,190px)0 clamp(48px,6vw,72px);text-align:center;background:radial-gradient(ellipse 75% 55%at 50% -5%,rgba(14,147,132,.2),transparent 60%),linear-gradient(180deg,var(--ink-diep) 0%,var(--ink) 100%);overflow:hidden}.legal-hero h1{color:var(--creme-tekst);font-size:clamp(2rem,4vw,3rem);margin:6px 0 12px}.legal-hero .gradient-text,.legal-tag{color:var(--mint)}.legal-hero p,.svc-final p,.svc-section.ink>.container>p{color:var(--creme-zacht)}.legal-tag{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(14,147,132,.14);border:1px solid rgba(143,214,202,.28);border-radius:100px;padding:6px 14px;margin-bottom:14px}.legal-body{padding:clamp(48px,6vw,72px)0 clamp(72px,9vw,110px);background:var(--wit)}.legal-card{max-width:820px;margin:0 auto;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:18px;padding:clamp(28px,4vw,48px)}.legal-card h2{font-size:1.2rem;margin:26px 0 10px}.legal-card h2:first-of-type{margin-top:0}.legal-card li,.legal-card p{font-size:.94rem;line-height:1.8;color:var(--grijs);margin-bottom:12px}.legal-card ul{margin:8px 0 14px 20px;list-style:disc}.legal-card a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px}#cursorDot,#cursorRing,.lang-toggle-bar{display:none!important}.svc-section.alt{background:var(--wash)}.svc-section.ink{background:radial-gradient(ellipse 70% 60%at 15% 0%,rgba(14,147,132,.16),transparent 60%),linear-gradient(180deg,var(--ink) 0%,var(--ink-diep) 100%)}.svc-section.ink .lead,.svc-section.ink .svc-flow .fstep strong,.svc-section.ink .svc-tstep strong,.svc-section.ink .svc-usp li,.svc-section.ink h2{color:var(--creme-tekst)}.svc-section .lead{font-size:1.12rem;color:var(--zwart);max-width:720px}.svc-eyebrow{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px}.svc-section.ink .svc-eyebrow{color:var(--mint)}.svc-breadcrumb{background:var(--wit);border-bottom:1px solid var(--grijs-licht)}.svc-breadcrumb li,.svc-breadcrumb ol{display:flex;align-items:center;gap:8px}.svc-breadcrumb ol{list-style:none;flex-wrap:wrap;padding:13px 0;margin:0;font-size:.82rem}.svc-breadcrumb li{color:var(--grijs)}.svc-breadcrumb a{color:var(--grijs);text-decoration:none}.svc-breadcrumb a:hover{color:var(--accent)}.svc-breadcrumb svg{width:13px;height:13px;opacity:.5}.svc-pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:26px;padding:0}.svc-pain>li{list-style:none}.svc-pain-card{background:var(--kaart);border:1px solid var(--grijs-licht);border-left:3px solid var(--koraal);border-radius:14px;padding:20px 22px;height:100%}.svc-pain-card .q{color:var(--zwart);font-weight:600;margin:0 0 7px;font-size:.98rem;line-height:1.45}.svc-pain-card .a{color:var(--grijs);font-size:.9rem;line-height:1.65;margin:0}.svc-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px;margin-top:26px}.svc-benefit{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:14px;padding:20px}.svc-section.alt .svc-benefit,.svc-section.alt .svc-statband .result-stat{background:var(--wit)}.svc-benefit strong{display:block;color:var(--zwart);font-size:1.02rem;margin-bottom:5px}.dv-col-head p,.svc-benefit span{color:var(--grijs);line-height:1.6}.svc-benefit span{display:block;font-size:.88rem}@media (max-width:760px){body.svc-page{padding-bottom:72px}}.dv-section{padding-top:clamp(40px,5vw,60px)}.dv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;align-items:start}.dv-col-head{padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--grijs-licht)}.dv-col-head h2{font-size:1.25rem;margin-bottom:8px}.dv-col-head p{font-size:.9rem;margin:0;max-width:none}.dv-cards{display:flex;flex-direction:column;gap:12px}.dv-cards .svc-card{padding:18px 20px}.dv-cards .svc-card h3{font-size:1rem}@media (max-width:900px){.dv-grid{grid-template-columns:1fr;gap:34px}}body.svc-theme-coral .svc-hero{background:radial-gradient(ellipse 75% 55%at 18% -5%,rgba(229,107,76,.22),transparent 60%),radial-gradient(ellipse 50% 40%at 85% 90%,rgba(14,147,132,.08),transparent 60%),linear-gradient(180deg,var(--ink-diep) 0%,var(--ink) 100%)}body.svc-theme-coral .svc-hero .label{color:#f3b4a2;background:rgba(229,107,76,.16);border-color:rgba(229,107,76,.34)}body.svc-theme-coral .svc-hero .gradient-text{color:#f3b4a2}body.svc-theme-coral .svc-hero .btn-ghost{color:#f3b4a2;border-color:rgba(243,180,162,.45)}body.svc-theme-coral .svc-hero .btn-ghost:hover{background:rgba(243,180,162,.1)}body.svc-theme-coral .svc-eyebrow{color:var(--koraal-donker)}body.svc-theme-coral .svc-section.ink .svc-eyebrow{color:#f3b4a2}.svc-hero.has-visual{text-align:left}.svc-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,56px);align-items:center}.svc-hero.has-visual h1{margin-left:0;margin-right:0;max-width:none}.svc-hero.has-visual .svc-hero-text>p{margin-left:0;margin-right:0;max-width:520px}.svc-hero.has-visual .svc-cta{justify-content:flex-start}.svc-hero-visual{position:relative}@media (max-width:860px){.svc-hero-grid{grid-template-columns:1fr;gap:30px}.svc-hero.has-visual{text-align:center}.svc-hero.has-visual .svc-hero-text>p,.svc-hero.has-visual h1{margin-left:auto;margin-right:auto}.svc-hero.has-visual .svc-cta{justify-content:center}}.mock-browser,.mock-card{border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px rgba(0,0,0,.38)}.mock-browser{background:var(--kaart);border-radius:14px;overflow:hidden}.mock-browser .mb-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#12272e;border-bottom:1px solid rgba(255,255,255,.06)}.mock-browser .mb-bar i{width:10px;height:10px;border-radius:50%;background:#2b3f45;display:block}.mock-browser .mb-url{margin-left:10px;font-size:.68rem;color:var(--creme-zacht);background:#0e2026;padding:4px 12px;border-radius:20px}.mock-browser img{display:block;width:100%;height:auto}.mock-card{background:linear-gradient(160deg,#14303a,#0f252c);border-radius:16px;padding:20px}.mock-rank{display:flex;align-items:flex-end;gap:10px;height:190px}.mock-rank .bar{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(143,214,202,.35),rgba(14,147,132,.55));position:relative}.mock-rank .bar.win{background:linear-gradient(180deg,var(--mint),var(--accent))}.mock-rank .bar span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--creme-zacht)}.mock-ai .ai-list li,.mock-ai .ai-q,.mock-caption{display:flex;align-items:center;color:var(--creme-zacht)}.mock-caption{margin-top:14px;font-size:.82rem;gap:8px}.mock-ai .ai-list li,.mock-ai .ai-q{border-radius:10px}.mock-ai .ai-q{gap:8px;font-size:.82rem;background:#0e2026;padding:10px 12px;margin-bottom:12px}.mock-ai .ai-a{color:var(--creme-tekst);font-size:.9rem;line-height:1.6}.mock-ai .ai-a b{color:#fff}.mock-ai .ai-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}.mock-ai .ai-list li{gap:10px;font-size:.85rem;padding:9px 11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}.mock-ai .ai-list li.you{background:rgba(14,147,132,.16);border-color:rgba(143,214,202,.4);color:var(--creme-tekst)}.mock-ai .ai-list li .dot{width:20px;height:20px;border-radius:6px;background:rgba(143,214,202,.25);flex-shrink:0}.mock-ai .ai-list li.you .dot{background:var(--accent)}.mock-phone{max-width:280px;margin:0 auto;background:#0f252c;border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:12px;box-shadow:0 30px 60px rgba(0,0,0,.4)}.mock-phone .notch{width:90px;height:6px;background:rgba(255,255,255,.18);border-radius:10px;margin:4px auto 12px}.mock-post{background:var(--kaart);border-radius:12px;overflow:hidden;margin-bottom:10px}.mock-post .ph{height:92px;background:linear-gradient(135deg,var(--koraal-wash),var(--wash))}.mock-post .ph.b{background:linear-gradient(135deg,var(--wash),var(--mint))}.mock-post .meta{display:flex;align-items:center;gap:8px;padding:9px 10px}.mock-post .av{width:22px;height:22px;border-radius:50%;background:var(--koraal)}.mock-post .ln{flex:1}.mock-post .ln i{display:block;height:6px;border-radius:4px;background:var(--grijs-licht)}.mock-post .ln i:first-child{width:60%;margin-bottom:5px}.mock-post .ln i:last-child{width:40%}.mock-chips,.mock-video,.mock-video .play{display:flex;justify-content:center}.mock-chips{flex-wrap:wrap;gap:8px;margin-top:14px}.svc-hero.has-visual .mock-chips{justify-content:flex-start}.mock-chip{font-size:.72rem;font-weight:600;color:var(--creme-zacht);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:5px 12px}.mock-brand{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mock-brand .cell{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:16px}.mock-brand .logo{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:var(--mint);background:linear-gradient(160deg,rgba(14,147,132,.18),transparent)}.mock-brand .swatches{display:flex;gap:8px;align-items:center}.mock-brand .swatches i{width:30px;height:30px;border-radius:8px;display:block}.mock-brand .type{font-family:var(--font-display);color:var(--creme-tekst)}.mock-brand .type b{font-size:2rem;display:block;line-height:1}.mock-brand .type small{color:var(--creme-zacht);font-family:var(--font-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}.mock-brand .voice{font-size:.8rem;color:var(--creme-zacht);line-height:1.5}.svc-statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:26px}.svc-statband .result-stat{text-align:center;padding:22px 16px;border-radius:16px;background:var(--kaart);border:1px solid var(--grijs-licht)}.svc-statband .num{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--accent-dark);line-height:1}body.svc-theme-coral .svc-statband .num{color:var(--koraal-donker)}.svc-statband small{display:block;margin-top:8px;color:var(--grijs);font-size:.86rem}.svc-localwrap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;align-items:stretch}.svc-localcard,.svc-map{border:1px solid var(--grijs-licht);border-radius:16px}.svc-map{position:relative;overflow:hidden;min-height:240px;background:radial-gradient(circle at 30% 40%,rgba(14,147,132,.1),transparent 40%),repeating-linear-gradient(0deg,#eef3ef 0 22px,#e7efe9 22px 23px),repeating-linear-gradient(90deg,#eef3ef 0 26px,#e7efe9 26px 27px)}.svc-map .road{position:absolute;background:#fff}.svc-map .r1{top:42%;left:0;right:0;height:8px}.svc-map .r2{top:0;bottom:0;left:58%;width:8px}.svc-map .pin{position:absolute;top:34%;left:52%;width:26px;height:26px;border-radius:50% 50% 50%0;background:var(--koraal);transform:rotate(-45deg);box-shadow:0 6px 16px rgba(0,0,0,.25)}.svc-map .pin::after{content:"";position:absolute;top:7px;left:7px;width:12px;height:12px;border-radius:50%;background:var(--wit)}.svc-localcard{background:var(--kaart);padding:20px;display:flex;flex-direction:column;gap:12px}.svc-localrow{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--grijs-licht)}.svc-localrow:last-child{border-bottom:0;padding-bottom:0}.svc-localrow .rank{width:26px;height:26px;border-radius:8px;background:var(--wash);color:var(--accent-dark);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}.svc-localrow.top .rank{background:var(--accent);color:#fff}.svc-localrow .info{flex:1}.svc-localrow .info strong{display:block;color:var(--zwart);font-size:.9rem}.svc-stars{color:var(--koraal);font-size:.82rem;letter-spacing:1px}.svc-localrow .info small{color:var(--grijs);font-size:.76rem}.svc-status{max-width:640px;margin-top:26px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden}.svc-status .row{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.07)}.svc-status .row:last-child{border-bottom:0}.svc-status .led{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(143,214,202,.6);flex-shrink:0;animation:svc-pulse 2.4s infinite}.svc-status .row:nth-child(2) .led{animation-delay:.6s}.svc-status .row:nth-child(3) .led{animation-delay:1.2s}.svc-status .row:nth-child(4) .led{animation-delay:1.8s}.svc-marquee li,.svc-status .label{color:var(--creme-tekst);font-size:.9rem}.svc-status .label{flex:1}.svc-status .val{color:var(--mint);font-size:.82rem;font-weight:600}@media (prefers-reduced-motion:reduce){.svc-status .led{animation:none}}.svc-gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:26px}.svc-dash,.svc-gauge{background:var(--kaart);border:1px solid var(--grijs-licht)}.svc-gauge{border-radius:16px;padding:22px;text-align:center}.svc-section.alt .svc-dash,.svc-section.alt .svc-gauge,.svc-section.alt .svc-gauge .ring i,.svc-section.alt .svc-testi .card{background:var(--wit)}.svc-gauge .ring{width:96px;height:96px;margin:0 auto 12px;background:conic-gradient(var(--accent) var(--p, 88%),var(--grijs-licht)0)}.svc-dash .kpi b,.svc-gauge .ring i{font-family:var(--font-display);color:var(--accent-dark)}.svc-gauge .ring,.svc-gauge .ring i{border-radius:50%;display:flex;align-items:center;justify-content:center}.svc-gauge .ring i{width:72px;height:72px;background:var(--kaart);font-weight:700;font-style:normal}.svc-gauge strong{display:block;color:var(--zwart);font-size:.95rem}.svc-gauge small,.svc-testi .who small{color:var(--grijs);font-size:.8rem}.svc-dash{margin-top:26px;border-radius:18px;padding:clamp(20px,3vw,30px)}.svc-dash .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-bottom:22px}.svc-dash .kpi{background:var(--wash);border-radius:12px;padding:14px 16px}.svc-dash .kpi b{display:block;font-size:1.5rem}.svc-dash .kpi span{font-size:.76rem;color:var(--grijs)}.svc-chart{display:flex;align-items:flex-end;gap:10px;height:130px}.svc-chart i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--mint),var(--accent));display:block}.svc-marquee{margin-top:26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.svc-marquee ul{display:flex;gap:14px;width:max-content;list-style:none;padding:0;margin:0;animation:svc-scroll 26s linear infinite}.svc-marquee li{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:100px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-weight:600;white-space:nowrap}.svc-marquee li .d{width:10px;height:10px;border-radius:50%;background:var(--mint)}@media (prefers-reduced-motion:reduce){.svc-marquee ul{animation:none}}.svc-marquee:focus-within ul,.svc-marquee:hover ul{animation-play-state:paused}.svc-testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}.svc-testi .card{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;padding:22px}.svc-testi .stars{color:var(--koraal);letter-spacing:2px;margin-bottom:10px}.svc-testi .quote{color:var(--zwart);font-size:.95rem;line-height:1.6;margin:0 0 14px}.svc-testi .who{display:flex;align-items:center;gap:10px}.svc-testi .who .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--koraal),var(--mint));flex-shrink:0}.svc-timeline{position:relative;margin-top:26px;padding-left:34px}.svc-timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:rgba(14,147,132,.25)}.svc-section.ink .svc-timeline::before{background:rgba(143,214,202,.28)}.svc-tstep{position:relative;padding:0 0 26px}.svc-tstep:last-child{padding-bottom:0}.svc-tstep::before{content:"";position:absolute;left:-34px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--accent);border:4px solid var(--wit);box-shadow:0 0 0 1px rgba(14,147,132,.3)}.svc-section.ink .svc-tstep::before{border-color:var(--ink)}.svc-flow .fstep strong,.svc-tstep strong{display:block;color:var(--zwart);margin-bottom:4px}.svc-tstep p{color:var(--grijs);font-size:.9rem;margin:0;max-width:620px}.svc-section.ink .svc-flow .fstep p,.svc-section.ink .svc-tstep p{color:var(--creme-zacht)}.svc-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:26px}.svc-flow .fstep{flex:1;min-width:160px;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:14px;padding:18px;position:relative}.svc-section.ink .svc-flow .fstep{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09)}.svc-flow .fstep strong{margin-bottom:5px;font-size:.98rem}.svc-flow .fstep p{color:var(--grijs);font-size:.84rem;margin:0}.svc-flow .fstep:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:1.1rem;z-index:1}@media (max-width:720px){.svc-flow{flex-direction:column}.svc-flow .fstep:not(:last-child)::after{content:"↓";right:50%;top:auto;bottom:-14px;transform:translateX(50%)}}.svc-emailwrap{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px;align-items:center}.mock-mail{background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:16px;overflow:hidden;box-shadow:var(--shadow, 0 14px 30px rgba(12,29,35,0.06))}.svc-section.alt .mock-mail{background:var(--wit)}.mock-mail .mm-head{display:flex;align-items:center;gap:9px;padding:13px 16px;background:var(--wash);border-bottom:1px solid var(--grijs-licht);font-size:.82rem;font-weight:600;color:var(--zwart)}.mock-mail .mm-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}.mock-mail .mm-addr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:1px solid var(--grijs-licht)}.mock-mail .mm-addr span{color:var(--zwart);font-size:.9rem}.mock-mail .mm-addr i{font-style:normal;font-size:.72rem;font-weight:600;color:var(--accent-dark);background:var(--wash);border-radius:100px;padding:3px 10px}.mock-mail .mm-apps{padding:13px 16px;font-size:.8rem;color:var(--grijs)}@media (max-width:720px){.svc-emailwrap{grid-template-columns:1fr}}.cs-eyebrow{display:block;font-family:var(--font-body);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--koraal-donker);margin-bottom:8px}.cs-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.cs-tag{font-size:.74rem;font-weight:600;color:var(--accent-dark);background:var(--wash);border-radius:100px;padding:5px 12px}.cs-rescard .cs-mono,.svc-pain.numbered .svc-pain-card::before{font-family:var(--font-display);font-weight:700;display:flex;align-items:center;justify-content:center}.svc-pain.numbered{counter-reset:pijn}.svc-pain.numbered .svc-pain-card{border-left:0;padding-left:60px;position:relative}.svc-pain.numbered .svc-pain-card::before{counter-increment:pijn;content:counter(pijn);position:absolute;left:20px;top:20px;width:28px;height:28px;border-radius:8px;background:var(--koraal-wash);color:var(--koraal-donker);font-size:.9rem}.nap-card h3{font-size:1rem;margin-bottom:6px}.crm-hero-visual{display:flex;flex-direction:column;gap:14px}.crm-sheets{display:flex;gap:10px;justify-content:center}.crm-sheet{flex:1;max-width:150px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 12px 12px}.crm-sheet .tab{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--creme-zacht);background:rgba(255,255,255,.07);border-radius:5px;padding:3px 8px;margin-bottom:8px}.crm-sheet i{display:block;height:5px;border-radius:3px;background:rgba(245,241,232,.16);margin-top:5px}.crm-sheet i:nth-child(3){width:72%}.crm-sheet i:nth-child(4){width:85%}.crm-sheet i:nth-child(5){width:58%}.crm-merge{text-align:center;color:var(--mint);line-height:1}.crm-merge svg{width:22px;height:22px}.crm-hero-visual .mock-browser{max-width:460px;margin:0 auto;width:100%}.crm-hero-dash{padding:14px;background:#f6f2e9}.crm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.crm-kpi{background:#fffdf8;border:1px solid #e8e1d4;border-radius:10px;padding:12px 14px}.crm-age .blok small,.crm-kpi small{display:block;letter-spacing:.05em;text-transform:uppercase}.crm-kpi small{font-size:.64rem;font-weight:600;color:var(--grijs);margin-bottom:5px}.crm-kpi b{color:var(--zwart);line-height:1.1}.crm-kpi .delta{display:inline-block;font-size:.62rem;font-weight:700;color:var(--accent-dark);background:rgba(14,147,132,.1);border-radius:20px;padding:2px 7px;margin-left:5px;vertical-align:2px}.crm-kpi .delta.bad{background:var(--koraal-wash)}.crm-kpi.alert{border-color:rgba(194,78,51,.35)}.crm-age .blok span,.crm-kpi .foot{display:block;font-size:.66rem;margin-top:4px}.crm-kpi .foot{color:var(--grijs)}.crm-chart{display:flex;align-items:flex-end;gap:clamp(8px,2vw,18px);height:170px;padding-top:20px}.crm-chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}.crm-chart .val{font-size:.68rem;font-weight:700;color:var(--accent-dark)}.crm-chart .col.bad .val,.crm-kpi .delta.bad{color:var(--koraal-donker)}.crm-chart .staaf{width:100%;max-width:46px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--mint),var(--accent));height:calc(var(--h)*1%);min-height:6px;transition:height .9s cubic-bezier(.22,1,.36,1)}.crm-chart .col.bad .staaf{background:linear-gradient(180deg,var(--koraal-licht),var(--koraal-donker))}.crm-chart .cap{font-size:.64rem;color:var(--grijs);text-align:center;line-height:1.3}.crm-anim .crm-chart .staaf{height:6px}.crm-anim.in-view .crm-chart .staaf{height:calc(var(--h)*1%)}.crm-age{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.crm-age .blok{border-radius:10px;padding:14px;border:1px solid transparent}.crm-age .blok small{font-size:.62rem;font-weight:700;margin-bottom:6px}.crm-age .blok b,.crm-kpi b{font-family:var(--font-display);font-size:1.05rem}.crm-age .blok span{opacity:.85}.crm-age .rood{background:var(--koraal-wash);border-color:rgba(194,78,51,.3);color:var(--koraal-donker)}.crm-age .amber{background:#fbf3e0;border-color:rgba(176,124,20,.28);color:#8a6210}.crm-age .groen{background:rgba(14,147,132,.08);border-color:rgba(14,147,132,.25);color:var(--accent-dark)}.crm-prog{margin-top:12px}.crm-prog .lbl-r{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;color:var(--zwart);margin-bottom:6px}.crm-prog .lbl-r b{font-weight:700}.crm-prog .lbl-r span{color:var(--grijs);font-size:.72rem}.crm-prog .spoor{height:9px;border-radius:6px;background:var(--wash-deep);overflow:hidden}.crm-prog .vul{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--mint));transition:width .9s cubic-bezier(.22,1,.36,1)}.crm-prog .vul.bad{background:linear-gradient(90deg,var(--koraal-donker),var(--koraal-licht))}.crm-anim .crm-prog .vul{width:0}.crm-anim.in-view .crm-prog .vul,.crm-prog .vul{width:calc(var(--w)*1%)}.crm-waarschuwing{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--koraal-wash);border:1px solid rgba(194,78,51,.28);color:var(--koraal-donker);font-size:.8rem;line-height:1.55}.crm-waarschuwing svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}.crm-waarschuwing.ok{background:rgba(14,147,132,.08);border-color:rgba(14,147,132,.25);color:var(--accent-dark)}.crm-pipe .rij{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--grijs-licht)}.crm-pipe .rij:last-child{border-bottom:0}.crm-pipe .rij .ic{width:30px;height:30px;border-radius:9px;background:rgba(14,147,132,.1);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0}.crm-pipe .rij .tx{flex:1;min-width:0}.crm-pipe .rij .tx b{display:block;font-size:.82rem;color:var(--zwart)}.crm-bron b,.crm-bron small,.crm-pipe .rij .tx small{display:block;font-size:.68rem;color:var(--grijs)}.crm-pipe .rij .pil{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--accent-dark);background:rgba(14,147,132,.1);border-radius:20px;padding:4px 11px;white-space:nowrap}.crm-pipe .rij .ic.b,.crm-pipe .rij .pil.b{color:var(--koraal-donker);background:var(--koraal-wash)}.crm-koppel{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}.crm-bronnen{display:flex;flex-direction:column;gap:10px}.crm-bron{gap:11px;background:#fffdf8;border:1px solid var(--grijs-licht);border-radius:10px;padding:11px 13px}.crm-bron,.crm-bron .ic,.crm-pijl{display:flex;align-items:center}.crm-bron .ic{width:32px;height:32px;border-radius:9px;background:rgba(14,147,132,.1);color:var(--accent-dark);justify-content:center;flex-shrink:0}.crm-bron b{font-size:.8rem;color:var(--zwart)}.crm-bron small{font-size:.66rem}.crm-pijl{color:var(--accent)}.crm-pijl svg{width:26px;height:26px}.crm-doel{background:linear-gradient(160deg,#14303a,#0f252c);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;color:var(--creme-tekst)}.crm-doel b{display:block;font-family:var(--font-display);font-size:.9rem;margin-bottom:8px}.crm-doel i{display:block;height:6px;border-radius:4px;background:rgba(245,241,232,.16);margin-top:6px;font-style:normal}.crm-doel i.a{background:var(--accent);width:70%}.crm-doel i:nth-child(4){width:84%}@media (max-width:640px){.crm-koppel{grid-template-columns:1fr}.crm-pijl{justify-content:center;transform:rotate(90deg)}}.crm-feature{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,48px);align-items:center}.crm-feature+.crm-feature{margin-top:clamp(40px,6vw,64px)}.crm-feature.omgekeerd .crm-feature-visual{order:-1}.crm-feature h3{font-size:clamp(1.15rem,2.2vw,1.45rem);margin-bottom:10px}.crm-feature p,.crm-mijlpaal b{font-size:.95rem}.crm-feature-visual .mock-browser{border-color:var(--grijs-licht);box-shadow:var(--shadow-soft)}.crm-feature-visual .mb-inhoud{padding:16px;background:#f6f2e9}@media (max-width:860px){.crm-feature{grid-template-columns:1fr}.crm-feature.omgekeerd .crm-feature-visual{order:0}}.crm-tijdlijn{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;position:relative;counter-reset:geen}.crm-tijdlijn::before{content:"";position:absolute;top:13px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--accent),#c9a24d 55%,var(--koraal-donker))}.crm-mijlpaal{position:relative;text-align:center;padding:0 10px}.crm-mijlpaal .punt{position:relative;z-index:1;width:26px;height:26px;margin:0 auto 12px;border-radius:50%;background:var(--wit);border:3px solid var(--accent)}.crm-mijlpaal.amber .punt{border-color:#c9a24d}.crm-mijlpaal.rood .punt{border-color:var(--koraal-donker);background:var(--koraal-wash)}.crm-mijlpaal .wk{display:block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);margin-bottom:4px}.crm-mijlpaal b{display:block;color:var(--zwart);margin-bottom:4px}.crm-mijlpaal.rood b{color:var(--koraal-donker)}.crm-mijlpaal p{font-size:.8rem;color:var(--grijs);margin:0;line-height:1.55}@media (max-width:640px){.crm-tijdlijn{grid-template-columns:1fr;gap:22px}.crm-tijdlijn::before{top:10%;bottom:10%;left:12px;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--accent),#c9a24d 55%,var(--koraal-donker))}.crm-mijlpaal{text-align:left;padding-left:42px}.crm-mijlpaal .punt{position:absolute;left:0;top:0;margin:0}}.crm-demo .mock-browser{border-color:var(--grijs-licht);box-shadow:var(--shadow-hover)}.crm-demo-vlak{position:relative;background:#f6f2e9}.crm-demo-vlak iframe{display:block;width:100%;height:clamp(420px,60vh,640px);border:0}.crm-demo-acties{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:18px}.crm-demo-acties .hint{font-size:.85rem;color:var(--grijs)}.crm-final{padding:clamp(56px,7vw,90px)0 clamp(72px,9vw,110px);background:var(--wit)}.crm-final .omslag{background:linear-gradient(180deg,var(--ink-diep),var(--ink));border-radius:20px;padding:clamp(36px,5vw,64px) clamp(20px,4vw,56px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center}.crm-final h2{color:var(--creme-tekst);margin-bottom:12px}.crm-final .gradient-text{color:var(--mint)}.crm-final .omslag>div>p{color:var(--creme-zacht);line-height:1.75;margin-bottom:18px}.crm-final .alternatief{display:flex;flex-direction:column;gap:8px;font-size:.92rem}.crm-final .alternatief a{color:var(--mint);text-decoration:none;display:inline-flex;align-items:center;gap:9px}.crm-final .alternatief a:hover{text-decoration:underline;text-underline-offset:3px}.crm-final .ct-form-card h3{font-size:1.15rem}.crm-final .omslag .ct-form-card>p{color:var(--grijs);font-size:.9rem;margin-bottom:18px}@media (max-width:860px){.crm-final .omslag{grid-template-columns:1fr}}.crm-teller{font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce){.crm-anim .crm-chart .staaf{height:calc(var(--h)*1%);transition:none}.crm-anim .crm-prog .vul{width:calc(var(--w)*1%);transition:none}}.crm-optie-groepen{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:30px}@media (max-width:900px){.crm-optie-groepen{grid-template-columns:1fr}}.crm-optie-groep{border-radius:18px;border:1px solid rgba(14,147,132,.28);background:linear-gradient(165deg,rgba(30,198,187,.2),rgba(14,147,132,.06) 42%,#fffdf8 82%);padding:22px 22px 12px;box-shadow:var(--shadow-soft)}.crm-optie-groep .kop{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(14,147,132,.2)}.crm-optie-groep .kop .ic{width:38px;height:38px;border-radius:11px;background:linear-gradient(140deg,var(--accent),var(--tq));color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 14px rgba(14,147,132,.3)}.crm-optie-groep .kop .ic svg{width:19px;height:19px}.crm-optie-groep h3{font-size:1.05rem;margin:0;color:var(--zwart)}.crm-optie-groep .kop small{display:block;font-size:.74rem;color:var(--grijs);margin-top:2px}.crm-optie{position:relative;padding:12px 0 12px 30px;border-bottom:1px dashed rgba(14,147,132,.22)}.crm-optie:last-child{border-bottom:0}.crm-optie::after,.crm-optie::before{position:absolute;left:0;top:15px;width:18px;height:18px}.crm-optie::before{content:"";border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--tq))}.crm-optie::after{content:"+";color:#fff;font-weight:700;font-size:.82rem;line-height:18px;text-align:center}.crm-optie b,.crm-optie span{display:block;font-size:.93rem;color:var(--zwart);overflow-wrap:anywhere}.crm-optie span{font-size:.85rem;color:var(--grijs);line-height:1.6;margin-top:2px}.crm-opties-slot{margin-top:24px;padding:16px 20px;border-radius:12px;background:linear-gradient(120deg,rgba(30,198,187,.14),rgba(14,147,132,.05));border:1px solid rgba(14,147,132,.25)}.crm-opties-slot p{margin:0;color:var(--zwart);font-size:.92rem}.cx-filter{font:600 .86rem/1 var(--font-body);color:var(--accent-dark);background:var(--kaart);border:1.5px solid var(--grijs-licht);border-radius:100px;padding:10px 16px;cursor:pointer;transition:border-color .2s,background .2s,color .2s}.cx-filter span{font-weight:500}.cx-filter:hover{border-color:var(--accent)}.cx-filter[aria-pressed=true]{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--creme-tekst)}.cx-filter:focus-visible{outline:3px solid var(--koraal);outline-offset:2px}.cx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(340px,auto);gap:20px}.cx-card{position:relative;min-width:0;scroll-margin-top:100px}.cx-card.cx-lg,.cx-card.cx-wide,.cx-cta{grid-column:span 2}.cx-cta[hidden]{display:none}.cx-grid.is-filtered .cx-card{grid-column:auto;grid-row:auto}.cx-link{display:flex;flex-direction:column;height:100%;background:var(--kaart);border:1px solid var(--grijs-licht);border-radius:18px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .3s ease,box-shadow .3s ease}.cx-link:focus-visible{transform:translateY(-5px);box-shadow:0 22px 50px rgba(12,29,35,.14);outline:3px solid var(--koraal);outline-offset:3px}@media (hover:hover){.cx-link:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(12,29,35,.14)}}.cx-cta{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:28px;border-radius:18px;background:radial-gradient(ellipse 80% 70%at 20% 10%,rgba(14,147,132,.3),transparent 60%),linear-gradient(150deg,var(--ink),var(--ink-diep))}.cx-cta h3{color:var(--creme-tekst);font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0}.cx-cta p{color:var(--creme-zacht);margin:0;max-width:46ch}.cx-cta .btn{align-self:flex-start}.cx-detail{display:none}@media (scripting:none){.cx-card{opacity:1;transform:none}.cx-card:target{grid-column:1/-1;grid-row:auto}.cx-card:target .cx-link{height:auto}.cx-card:target .cx-detail{display:block;padding:22px 4px 8px}}.cx-dialog,body.cx-open{overflow:hidden}.cx-dlg-body{flex:1;min-height:0;display:grid;grid-template-columns:55fr 45fr}.cx-frame{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--grijs-licht);border-radius:14px;overflow:hidden;background:var(--wit);box-shadow:0 20px 50px rgba(12,29,35,.12)}.cx-frame .mb-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:var(--wash);border-bottom:1px solid var(--grijs-licht);flex:none}.cx-frame .mb-bar i{width:10px;height:10px;border-radius:50%;background:var(--grijs-licht);display:block}.cx-frame .mb-url{margin-left:10px;font-size:.7rem;color:var(--grijs);background:var(--wit);padding:4px 12px;border-radius:20px}.cx-frame-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--wash-deep)}.cx-frame-scroll:focus-visible{outline:3px solid var(--koraal);outline-offset:-3px}.cx-frame-scroll img{display:block;width:100%;height:auto}.cx-frame-end{position:relative;display:block;padding:18px;text-align:center;font-weight:600;color:var(--accent-dark);background:var(--wit);border-top:1px solid var(--grijs-licht);text-decoration:none}.cx-frame-end::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:80px;background:linear-gradient(rgba(250,247,241,0),var(--wit));pointer-events:none}.cx-frame-end:hover{background:var(--wash)}.cx-frame-end:focus-visible{outline:3px solid var(--koraal);outline-offset:-3px}.cx-hint{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);background:var(--ink);color:var(--creme-tekst);font-size:.76rem;padding:7px 14px;border-radius:100px;pointer-events:none;transition:opacity .3s}.cx-hint.is-weg{opacity:0}@media (max-width:1023px){.cx-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(320px,auto)}.cx-cta{grid-column:span 1}}@media (max-width:899px){.cx-dlg-body{display:block;overflow-y:auto;overscroll-behavior:contain}.cx-frame{flex:none;height:45svh}}@media (max-width:639px){.cx-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:16px}.cx-card.cx-lg,.cx-card.cx-wide,.cx-cta{grid-column:auto;grid-row:auto}}@media (prefers-reduced-motion:reduce){.cx-link:focus-visible,.cx-link:hover{transform:none}}.svc-reel{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-diep) 100%);padding:0 0 clamp(44px,6vw,72px)}.svc-reel-frame{max-width:1200px;margin:0 auto}.svc-reel-media{position:relative}.svc-reel-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:clamp(14px,1.6vw,22px);background:var(--ink-diep);box-shadow:0 30px 80px rgba(5,12,15,.55),0 0 0 1px var(--ink-lijn)}.svc-reel-toggle{position:absolute;right:16px;bottom:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(245,241,232,.25);background:rgba(10,24,29,.72);color:var(--creme-tekst);cursor:pointer;transition:background .2s ease,transform .2s ease}.svc-reel-toggle:hover{background:rgba(10,24,29,.92);transform:scale(1.05)}.svc-reel-toggle:focus-visible{outline:2px solid var(--koraal-licht);outline-offset:3px}.svc-reel-toggle svg{width:18px;height:18px}.svc-reel-toggle.is-paused .icon-play{display:block}.svc-reel-toggle .icon-play,.svc-reel-toggle.is-paused .icon-pause{display:none}.svc-reel-caption{margin-top:14px;text-align:center;font-size:.85rem;color:var(--creme-zacht)}@media (max-width:640px){.svc-reel-toggle{right:10px;bottom:10px;width:40px;height:40px}}@media (prefers-reduced-motion:reduce){.svc-reel-toggle{transition:none}} /* ========================================================================== FayLux studio-stijl voor de dienst- en landingspagina's (26 okt 2026) Werkt alleen op . Zelfde beeldtaal als homepage en prijzen: Bricolage Condensed in kapitalen, accent in Instrument Serif, donker #071114 met mintlicht en korrel, crème vlakken met lijnen. ========================================================================== */ @font-face{font-family:'Bricolage Condensed';font-style:normal;font-weight:600 800;font-display:swap;src:url('/fonts/bricolage-grotesque-condensed-latin.woff2') format('woff2')} @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/instrument-serif-italic-latin.woff2') format('woff2')} @font-face{font-family:'BC Fallback A';font-weight:800;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Arial');size-adjust:57.3%} @font-face{font-family:'BC Fallback R';font-weight:800;src:local('Roboto Bold'),local('Roboto-Bold'),local('Roboto');size-adjust:56.8%} @font-face{font-family:'IS Fallback';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic'),local('Georgia');size-adjust:79.8%} body.studio,body.st-knop{ --st-nacht:#071114; --st-creme:#F5F1E8; --st-papier:#FBF8F1; --st-ink:#0C1D23; --st-tq:#035352; --st-tekst:#4D483F; --st-grijs:#676156; --st-mint:#8FD6CA; --st-lijn:rgba(12,29,35,.16); --st-lijn-licht:rgba(245,241,232,.12); --st-cond:'Bricolage Condensed','BC Fallback A','BC Fallback R',var(--font-display); --st-serif:'Instrument Serif','IS Fallback',Georgia,serif; --st-ease:cubic-bezier(.16,1,.3,1); --st-korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); } body.studio{background:var(--st-creme)} /* ---------- typografie ---------- */ body.studio .svc-hero h1,body.studio .contact-hero h1,body.studio .about-hero h1,body.studio .portfolio-hero h1,body.studio .article-hero h1,body.studio .blog-hero h1, body.studio .svc-section h2, body.studio .svc-final h2, body.studio .st-kop{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;max-width:none;text-wrap:balance} body.studio .svc-hero h1 .gradient-text,body.studio .contact-hero h1 .gradient-text,body.studio .about-hero h1 .gradient-text,body.studio .portfolio-hero h1 .gradient-text,body.studio .blog-hero h1 .gradient-text, body.studio .svc-section h2 .gradient-text, body.studio .svc-final h2 .gradient-text, body.studio .st-kop em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;letter-spacing:0;padding-right:.04em;background:none;-webkit-text-fill-color:currentColor} body.studio .svc-section h2{font-size:clamp(2.3rem,4.6vw,4.4rem);color:var(--st-ink);margin:0 0 clamp(22px,2.6vw,32px)} body.studio .svc-section h2 .gradient-text{color:var(--st-tq)} body.studio .svc-section h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:1} body.studio .svc-section p{color:var(--st-tekst);font-size:1.04rem;line-height:1.7;max-width:64ch} body.studio .svc-section p.lead{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.55;color:var(--st-ink);max-width:52ch} body.studio .svc-section a.inline{color:var(--st-tq);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4);transition:border-color .2s} body.studio .svc-section a.inline:hover{border-bottom-color:var(--st-tq)} /* ---------- knoppen ---------- */ body.studio main .btn{border-radius:100px;padding:15px 26px;font-weight:600;box-shadow:none;transform:none;transition:background .25s,color .25s,border-color .25s} body.studio main .btn-primary{background:var(--st-ink);border:1px solid var(--st-ink);color:var(--st-creme)} body.studio main .btn-primary:hover,body.studio main .btn-primary:focus-visible{background:var(--st-tq);border-color:var(--st-tq);color:var(--st-creme)} body.studio main .btn-secondary,body.studio main .btn-ghost{background:transparent;border:1px solid rgba(12,29,35,.4);color:var(--st-ink)} body.studio main .btn-secondary:hover,body.studio main .btn-ghost:hover{background:var(--st-tq);border-color:var(--st-tq);color:var(--st-creme)} /* op donker */ body.studio .svc-hero .btn-primary,body.studio .svc-final .btn-primary,body.studio .svc-section.ink .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)} body.studio .svc-hero .btn-primary:hover,body.studio .svc-final .btn-primary:hover,body.studio .svc-section.ink .btn-primary:hover{background:var(--st-creme);border-color:var(--st-creme);color:var(--st-nacht)} body.studio .svc-hero .btn-ghost,body.studio .svc-final .btn-ghost,body.studio .svc-section.ink .btn-ghost{border-color:rgba(245,241,232,.4);color:var(--st-creme)} body.studio .svc-hero .btn-ghost:hover,body.studio .svc-final .btn-ghost:hover{background:rgba(143,214,202,.12);border-color:var(--st-mint);color:var(--st-creme)} /* ---------- hero ---------- */ body.studio .svc-hero,body.studio .contact-hero,body.studio .about-hero,body.studio .portfolio-hero,body.studio .article-hero,body.studio .blog-hero{position:relative;overflow:hidden;isolation:isolate;text-align:left;background:var(--st-nacht);color:var(--st-creme);padding:clamp(150px,15vw,200px) 0 clamp(72px,8vw,110px)} body.studio .svc-hero::before,body.studio .contact-hero::before,body.studio .about-hero::before,body.studio .portfolio-hero::before,body.studio .article-hero::before,body.studio .blog-hero::before{content:"";position:absolute;z-index:0;left:-10vw;top:-24vw;width:min(80vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(143,214,202,.26) 0%,rgba(143,214,202,.15) 20%,rgba(143,214,202,.07) 40%,rgba(143,214,202,0) 66%);animation:stLicht 26s ease-in-out infinite alternate;will-change:transform} body.studio .svc-hero::after,body.studio .contact-hero::after,body.studio .about-hero::after,body.studio .portfolio-hero::after,body.studio .article-hero::after,body.studio .blog-hero::after,body.studio .svc-final::after,body.studio .svc-section.ink::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)} @keyframes stLicht{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(22vw,14vw,0) scale(1.08)}100%{transform:translate3d(40vw,4vw,0) scale(.94)}} body.studio .svc-hero>.container,body.studio .contact-hero>.container,body.studio .about-hero>.container,body.studio .portfolio-hero>.container,body.studio .article-hero>.container,body.studio .blog-hero>.container{position:relative;z-index:2} body.studio .blog-hero .glow{display:none} body.studio :is(.contact-hero,.portfolio-hero) .glow,body.studio .about-hero-glow{display:none} body.studio .svc-hero .label,body.studio .contact-hero .label,body.studio .about-hero .label,body.studio .portfolio-hero .label,body.studio .blog-hero .label{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:0;margin:0 0 clamp(22px,2.6vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint)} body.studio .svc-hero .label::before,body.studio .contact-hero .label::before,body.studio .about-hero .label::before,body.studio .portfolio-hero .label::before,body.studio .blog-hero .label::before{content:"";width:28px;height:1px;background:currentColor} body.studio .svc-hero h1,body.studio .contact-hero h1,body.studio .about-hero h1,body.studio .portfolio-hero h1,body.studio .blog-hero h1{font-size:clamp(3rem,7.4vw,7.2rem);color:var(--st-creme);margin:0} body.studio .svc-hero h1 .gradient-text,body.studio .contact-hero h1 .gradient-text,body.studio .about-hero h1 .gradient-text,body.studio .portfolio-hero h1 .gradient-text,body.studio .blog-hero h1 .gradient-text{color:var(--st-mint)} body.studio .svc-hero.has-visual h1{font-size:clamp(2.8rem,5.6vw,5.6rem)} body.studio .svc-hero-text>p,body.studio .svc-hero>.container>p,body.studio .contact-hero>.container>p,body.studio .about-hero>.container>p,body.studio .portfolio-hero>.container>p,body.studio .blog-hero>.container>p{margin:clamp(24px,3vw,34px) 0 0;max-width:50ch;font-size:1.12rem;line-height:1.6;color:rgba(245,241,232,.72)} body.studio .svc-hero .svc-cta{justify-content:flex-start;margin-top:clamp(28px,3vw,38px);gap:14px} body.studio .svc-hero .rv-cta-wrap{justify-content:flex-start} body.studio .svc-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center} body.studio .svc-hero-visual{margin-right:calc(-1 * clamp(0px,4vw,60px))} body.studio .svc-hero:not(.has-visual) .container{max-width:1200px} /* het voorbeeldscherm zweeft licht gedraaid */ body.studio .svc-hero-visual .mock-browser{transform:rotate(-1.6deg);border:1px solid rgba(245,241,232,.14);border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.3)} body.studio .svc-hero-visual .mock-browser .mb-bar{background:#0E1E23} /* ---------- kruimelpad ---------- */ body.studio .svc-breadcrumb{background:var(--st-creme);border-bottom:1px solid var(--st-lijn)} body.studio .svc-breadcrumb li,body.studio .svc-breadcrumb a{color:var(--st-grijs)} body.studio .svc-breadcrumb li[aria-current]{color:var(--st-ink)} /* ---------- secties: label in de marge, inhoud rechts ---------- */ body.studio .svc-section{position:relative;background:var(--st-creme);padding:clamp(80px,9vw,130px) 0} body.studio .svc-section.alt{background:var(--st-papier)} body.studio .svc-section+.svc-section:not(.alt):not(.ink),body.studio .svc-section.alt+.svc-section.alt{border-top:1px solid var(--st-lijn)} @media (min-width:901px){ body.studio .svc-section>.container:has(>.svc-eyebrow){display:grid;grid-template-columns:minmax(150px,.26fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start} body.studio .svc-section>.container:has(>.svc-eyebrow)>*{grid-column:2} body.studio .svc-section>.container:has(>.svc-eyebrow)>.svc-eyebrow{grid-column:1;grid-row:1;margin-top:1.1em} body.studio .svc-section>.container:has(>.svc-eyebrow)>h2{grid-row:1} body.studio .svc-section>.container:has(>.svc-eyebrow)>:is(.svc-steps,.svc-flow,.smc-grid,.aif-gallery,.svc-marquee,.svc-pain,.st-breed){grid-column:1 / -1} } body.studio .svc-eyebrow{display:flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq);margin:0 0 18px} body.studio .svc-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:none} /* oude schuine overgangen uit: hier zijn de overgangen recht */ body.studio .svc-section+.svc-section::before{display:none} /* ---------- pijnpunten: citaten in serif ---------- */ body.studio .svc-pain{display:block;margin:clamp(32px,4vw,48px) 0 0;padding:0;border-top:1px solid var(--st-lijn)} body.studio .svc-pain>li{border-bottom:1px solid var(--st-lijn)} body.studio .svc-pain-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:12px clamp(24px,4vw,60px);align-items:baseline;background:none;border:0;border-radius:0;box-shadow:none;padding:clamp(22px,2.8vw,34px) 0} body.studio .svc-pain-card .q{margin:0;font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.15;color:var(--st-ink)} body.studio .svc-pain-card .a{margin:0;font-size:1rem;line-height:1.65;color:var(--st-tekst)} body.studio .svc-pain.numbered .svc-pain-card::before{display:none} /* ---------- probleemrijen: gebogen koraal pijl in de marge wijst naar de klacht ---------- */ body.studio .svc-pain>li{display:grid;grid-template-columns:minmax(150px,.26fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:center} body.studio .svc-pain-card{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);column-gap:clamp(24px,4vw,60px);align-items:center} body.studio .st-boog{grid-column:1;grid-row:1;justify-self:end;width:clamp(90px,9vw,130px);height:auto;overflow:visible;margin-right:calc(-1 * clamp(12px,2vw,30px));color:var(--koraal,#E56B4C)} body.studio .svc-pain-card{grid-column:2;grid-row:1} body.studio .st-boog path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* met beweging: de lijn tekent zich, daarna de punt, daarna de uitleg */ .sc-ready body.studio .st-boog .st-boog-lijn{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .15s} .sc-ready body.studio .st-boog .st-boog-kop{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .35s ease-out 1.05s} .sc-ready body.studio .svc-pain>li.sc-in .st-boog path{stroke-dashoffset:0} .sc-ready body.studio .svc-pain>li .svc-pain-card .a{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--st-ease) .9s,transform .6s var(--st-ease) .9s} .sc-ready body.studio .svc-pain>li.sc-in .svc-pain-card .a{opacity:1;transform:none} body.studio .svc-pain>li:hover .st-boog{transform:translateX(4px);transition:transform .35s var(--st-ease)} /* ---------- vinklijst en usp: twee kolommen met lijnen ---------- */ body.studio .svc-check,body.studio .svc-usp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);max-width:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;border-top:1px solid var(--st-lijn)} body.studio .svc-check li,body.studio .svc-usp li{padding:15px 0 15px 30px;border-bottom:1px solid var(--st-lijn);font-size:1rem;line-height:1.5;color:var(--st-ink)} body.studio .svc-check li::before,body.studio .svc-usp li::before{content:"";left:3px;top:22px;width:11px;height:6px;border:0;border-left:2px solid var(--st-tq);border-bottom:2px solid var(--st-tq);border-radius:0;background:none;transform:rotate(-45deg)} body.studio .svc-check li::after,body.studio .svc-usp li::after{display:none} /* ---------- cijferband ---------- */ body.studio .svc-statband{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--st-lijn)} body.studio .svc-statband .result-stat,body.studio .svc-section.alt .svc-statband .result-stat{text-align:left;background:none;border:0;border-radius:0;padding:clamp(22px,2.6vw,32px) clamp(14px,2vw,28px) 0 0} body.studio .svc-statband .result-stat+.result-stat{border-left:1px solid var(--st-lijn);padding-left:clamp(14px,2vw,28px)} body.studio .svc-statband .num,body.studio .svc-statband .su-statnum{display:block;font-family:var(--st-cond);font-weight:800;font-size:clamp(2.8rem,4.8vw,4.4rem);line-height:1;letter-spacing:-.01em;color:var(--st-ink);background:none;-webkit-text-fill-color:currentColor} body.studio .svc-statband small{display:block;margin-top:10px;font-size:.92rem;line-height:1.5;color:var(--st-tekst)} /* ---------- voordelen: genummerde rijen ---------- */ body.studio .svc-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,56px);gap:0 clamp(24px,4vw,56px);margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--st-lijn);counter-reset:stb} body.studio .svc-benefit,body.studio .svc-section.alt .svc-benefit{counter-increment:stb;display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px 14px;background:none;border:0;border-radius:0;padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--st-lijn)} body.studio .svc-benefit::before{content:counter(stb,decimal-leading-zero);grid-row:1 / span 2;font-size:.84rem;font-weight:600;letter-spacing:.08em;color:var(--st-grijs);font-variant-numeric:tabular-nums;padding-top:.5em} body.studio .svc-benefit strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1;color:var(--st-ink);margin:0} body.studio .svc-benefit span{font-size:.98rem;line-height:1.6;color:var(--st-tekst)} body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit{grid-template-columns:1fr;align-content:start;padding-right:clamp(10px,2vw,24px)} body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit::before{grid-row:auto;padding-top:0;margin-bottom:10px} /* ---------- kaarten worden lijstrijen met pijl ---------- */ body.studio .svc-grid{display:block;margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--st-lijn)} body.studio .svc-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;gap:10px clamp(20px,4vw,56px);align-items:center;background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none;padding:clamp(20px,2.4vw,30px) 0;transform:none} body.studio a.svc-card::after{content:"\2192";justify-self:end;font-size:1.3rem;color:var(--st-ink);transition:transform .3s var(--st-ease),color .25s} body.studio .svc-card h3{margin:0;font-size:clamp(1.3rem,2vw,1.9rem);color:var(--st-ink);transition:color .25s,transform .35s var(--st-ease)} body.studio .svc-card p{margin:0;font-size:.98rem;line-height:1.55;color:var(--st-tekst)} body.studio a.svc-card:hover,body.studio a.svc-card:focus-visible{transform:none;box-shadow:none;border-color:var(--st-lijn)} body.studio a.svc-card:hover h3,body.studio a.svc-card:focus-visible h3{color:var(--st-tq);transform:translateX(8px)} body.studio a.svc-card:hover::after,body.studio a.svc-card:focus-visible::after{transform:translateX(6px);color:var(--st-tq)} body.studio a.svc-card:focus-visible{outline:3px solid #0E9384;outline-offset:4px;border-radius:4px} /* ---------- donkere sectie ---------- */ body.studio .svc-section.ink{background:var(--st-nacht);color:var(--st-creme);overflow:hidden;isolation:isolate} body.studio .svc-section.ink>.container{position:relative;z-index:2} body.studio .svc-section.ink h2{color:var(--st-creme)} body.studio .svc-section.ink h2 .gradient-text{color:var(--st-mint)} body.studio .svc-section.ink p{color:rgba(245,241,232,.72)} body.studio .svc-section.ink .svc-eyebrow{color:var(--st-mint)} /* stappen: genummerde kolommen met een lijn erboven */ body.studio .svc-flow,body.studio .svc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;margin-top:clamp(32px,4vw,52px);counter-reset:stf;border-top:1px solid var(--st-lijn)} body.studio .svc-flow .fstep,body.studio .svc-steps .svc-step{counter-increment:stf;position:relative;min-width:0;background:none;border:0;border-radius:0;padding:clamp(22px,2.6vw,30px) clamp(14px,1.8vw,24px) 0 0} body.studio .svc-flow .fstep+.fstep,body.studio .svc-steps .svc-step+.svc-step{padding-left:clamp(14px,1.8vw,24px);border-left:1px solid var(--st-lijn)} body.studio .svc-flow .fstep::before,body.studio .svc-steps .svc-step::before{content:counter(stf,decimal-leading-zero);display:block;margin-bottom:18px;font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--st-tq)} body.studio .svc-flow .fstep::after{display:none} body.studio .svc-flow .fstep strong,body.studio .svc-steps .svc-step strong{display:block;margin-bottom:8px;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1;color:var(--st-ink)} body.studio .svc-flow .fstep p,body.studio .svc-steps .svc-step p{margin:0;font-size:.95rem;line-height:1.6;color:var(--st-tekst)} body.studio .svc-section.ink .svc-flow,body.studio .svc-section.ink .svc-steps,body.studio .svc-section.ink .fstep,body.studio .svc-section.ink .svc-step{border-color:var(--st-lijn-licht)} body.studio .svc-section.ink .fstep::before,body.studio .svc-section.ink .svc-step::before{-webkit-text-stroke-color:var(--st-mint)} body.studio .svc-section.ink .fstep strong,body.studio .svc-section.ink .svc-step strong{color:var(--st-creme)} body.studio .svc-section.ink .fstep p,body.studio .svc-section.ink .svc-step p{color:rgba(245,241,232,.7)} /* ---------- veelgestelde vragen ---------- */ body.studio .svc-faq{max-width:none;margin-top:clamp(24px,3vw,36px);border-top:1px solid var(--st-lijn)} body.studio .svc-faq details{background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none;margin:0;padding:0} body.studio .svc-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.35;color:var(--st-ink)} body.studio .svc-faq summary::-webkit-details-marker{display:none} body.studio .svc-faq summary::after{content:"+";flex:none;font-weight:400;font-size:1.5rem;line-height:1;color:var(--st-tq);transition:transform .3s var(--st-ease)} body.studio .svc-faq details[open] summary::after{transform:rotate(45deg)} body.studio .svc-faq summary:focus-visible{outline:3px solid #0E9384;outline-offset:4px} body.studio .svc-faq details p{margin:0 0 22px;max-width:64ch;padding:0} /* ---------- reviews ---------- */ body.studio .rv-block{background:var(--st-papier)} body.studio .rv-block .section-header h2{text-align:left} /* ---------- afsluiter ---------- */ body.studio .svc-final{position:relative;overflow:hidden;isolation:isolate;background:var(--st-nacht);padding:clamp(120px,14vw,200px) 0} body.studio .svc-final::before{content:"";position:absolute;z-index:0;right:-20vw;top:-30vw;width:min(80vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(143,214,202,.24) 0%,rgba(143,214,202,.1) 34%,rgba(143,214,202,0) 66%);animation:stLicht 26s ease-in-out infinite alternate-reverse;will-change:transform} body.studio .svc-final .container{position:relative;z-index:2;text-align:left;background:none;border-radius:0;padding-top:0;padding-bottom:0;max-width:1200px} body.studio .svc-final h2{font-size:clamp(3rem,8vw,7.4rem);color:var(--st-creme);margin:0} body.studio .svc-final h2 .gradient-text{color:var(--st-mint)} body.studio .svc-final p{margin:28px 0 36px;max-width:46ch;font-size:1.12rem;line-height:1.6;color:rgba(245,241,232,.72)} body.studio .svc-final .rv-cta-wrap{justify-content:flex-start;margin-top:30px} body.studio .svc-section.rv-block+.svc-final,body.studio .svc-final{margin-top:0} /* ---------- werkstrook: echte cases bij de dienst ---------- */ body.studio .st-werk{position:relative;background:var(--st-creme);padding:clamp(80px,9vw,130px) 0;border-top:1px solid var(--st-lijn)} body.studio .st-werk-kop{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:clamp(32px,4vw,52px)} body.studio .st-werk .st-kop{font-size:clamp(2.3rem,4.6vw,4.4rem);color:var(--st-ink);margin:0} body.studio .st-werk .st-kop em{color:var(--st-tq)} body.studio .st-werk-alle{flex:none;color:var(--st-tq);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4);padding-bottom:2px} body.studio .st-werk-alle:hover{border-bottom-color:var(--st-tq)} body.studio .st-werk-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)} body.studio .st-werk--twee .st-werk-lijst{grid-template-columns:repeat(2,minmax(0,1fr))} body.studio .st-werk-item{display:flex;flex-direction:column;text-decoration:none;color:var(--st-ink)} body.studio .st-werk-beeld{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#E6DFD1;margin-bottom:22px;clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)} body.studio .st-werk-beeld img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s var(--st-ease)} body.studio .st-werk-item:hover .st-werk-beeld img,body.studio .st-werk-item:focus-visible .st-werk-beeld img{transform:scale(1.07)} body.studio .st-werk-cijfer{display:block;font-size:.95rem;line-height:1.4;color:var(--st-tekst);padding-top:16px;border-top:1px solid var(--st-lijn)} body.studio .st-werk-cijfer b{display:block;font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:.95;letter-spacing:-.01em;color:var(--st-ink);margin-bottom:6px} body.studio .st-werk-naam{display:block;margin-top:14px;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;transition:color .25s} body.studio .st-werk-item:hover .st-werk-naam{color:var(--st-tq)} body.studio .st-werk-meta{display:block;margin-top:6px;font-size:.85rem;color:var(--st-grijs)} body.studio .st-werk-item:focus-visible{outline:3px solid #0E9384;outline-offset:6px;border-radius:4px} body.studio .st-werk--een .st-werk-lijst{grid-template-columns:1fr} body.studio .st-werk--een .st-werk-item{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto;column-gap:clamp(28px,5vw,72px)} body.studio .st-werk--een .st-werk-beeld{aspect-ratio:16/10;margin:0;grid-row:1 / span 4} body.studio .st-werk--een .st-werk-cijfer{grid-row:2}body.studio .st-werk--een .st-werk-naam{grid-row:3}body.studio .st-werk--een .st-werk-meta{grid-row:4} body.studio .st-werk--een .st-werk-cijfer b{font-size:clamp(4rem,7vw,6.4rem)} .sc-ready body.studio .st-werk-lijst>li .st-werk-beeld{clip-path:inset(100% 0 0 0)} .sc-ready body.studio .st-werk-lijst>li.sc-in .st-werk-beeld{clip-path:inset(0 0 0 0)} @media (max-width:900px){ body.studio .st-werk-kop{flex-direction:column;align-items:flex-start} body.studio .st-werk-lijst,body.studio .st-werk--twee .st-werk-lijst{grid-template-columns:1fr;gap:44px} body.studio .st-werk-beeld{aspect-ratio:16/11} body.studio .st-werk--een .st-werk-item{grid-template-columns:1fr;grid-template-rows:none} body.studio .st-werk--een .st-werk-item>*{grid-row:auto !important} body.studio .st-werk--een .st-werk-beeld{grid-row:auto;margin-bottom:22px} } @media (prefers-reduced-motion:reduce){ body.studio .st-werk-beeld{clip-path:none !important;transition:none} body.studio .st-werk-beeld img{transition:none} } /* ---------- ai-bureau-enschede: plaatsnamen en adreskaart ---------- */ body.studio .loc-areas{display:flex;flex-wrap:wrap;gap:0;margin:clamp(24px,3vw,36px) 0;border-top:1px solid var(--st-lijn)} body.studio .loc-areas span{flex:0 0 25%;padding:14px 12px 14px 0;border-bottom:1px solid var(--st-lijn);background:none;border-radius:0;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;color:var(--st-ink)} body.studio .nap-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;margin-top:clamp(28px,3vw,40px);background:none;border:0;border-top:1px solid var(--st-lijn);border-radius:0;box-shadow:none;padding:0} body.studio .nap-card>div{padding:20px 20px 0 0} body.studio .nap-card>div+div{border-left:1px solid var(--st-lijn);padding-left:20px} body.studio .nap-card h3{font-size:.78rem;font-family:var(--font-body);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--st-tq);margin:0 0 8px} body.studio .nap-card p{margin:0;color:var(--st-ink)} @media (max-width:900px){body.studio .loc-areas span{flex-basis:50%}body.studio .nap-card>div+div{border-left:0;padding-left:0}} /* ========================================================================== Conversiepagina's: contact, start, offerte, intake, bedankt (26 okt 2026) Alleen uiterlijk: velden, namen en verzendadressen blijven gelijk. ========================================================================== */ body.studio .contact-hero{text-align:left} body.studio .contact-hero .start-hero-knoppen{margin-top:clamp(28px,3vw,38px);display:flex;gap:14px;flex-wrap:wrap} body.studio .contact-hero .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)} body.studio .contact-hero .btn-ghost,body.studio .contact-hero .btn-secondary{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none} /* koppen */ body.studio :is(.ct-booking-section,.contact-section,.start-blok,.offerte-section,.formsection,.bedankt-sectie) h2, body.studio :is(.intake-header,.bedankt-sectie) h1{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;color:var(--st-ink)} body.studio :is(.ct-booking-section,.start-blok,.bedankt-sectie) h2{font-size:clamp(2.3rem,4.6vw,4.4rem)} body.studio :is(.contact-section,.offerte-section) h2,body.studio .formsection h2{font-size:clamp(1.6rem,2.4vw,2.2rem)} body.studio .intake-header h1,body.studio .bedankt-sectie h1{font-size:clamp(2.8rem,6vw,5.6rem);max-width:none} body.studio .intake-header h1 em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;color:var(--st-tq)} body.studio :is(.ct-booking-section,.start-blok) :is(.eyebrow,.label,.svc-eyebrow){display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq)} body.studio :is(.ct-booking-section,.start-blok) :is(.eyebrow,.label)::before{content:"";width:22px;height:1px;background:currentColor} body.studio .start-blok,body.studio .contact-section,body.studio .ct-booking-section,body.studio .offerte-section{background:var(--st-creme)} body.studio .start-blok:nth-of-type(even){background:var(--st-papier)} /* kaarten en blokken: hoek 6px, lijnen in plaats van schaduw */ body.studio :is(.ct-card,.ct-form-card,.ct-booking-embed,.werk-kaart,.niveau-card,.fn,.formsection,.bedankt-kaart,.start-heel,.vergelijk-scroll,.start-merkscan,.start-na,.start-strook){border-radius:6px !important;box-shadow:none !important} body.studio :is(.ct-card,.ct-form-card,.ct-booking-embed,.werk-kaart,.niveau-card:not(.niveau-card--vol),.fn,.formsection,.bedankt-kaart){background:var(--st-papier);border:1px solid var(--st-lijn)} body.studio .niveau-card--vol{background:var(--st-nacht)} body.studio :is(.niveau-card,.formsection,.fn) h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1} body.studio .niveau-prijs{font-family:var(--st-cond);font-weight:800;font-size:2rem} body.studio .ct-card:hover{border-color:var(--st-tq)} body.studio .ct-card-icon{border-radius:50%;background:rgba(3,83,82,.08);color:var(--st-tq)} /* stappen: lijnen met omlijnde nummers */ body.studio .ct-steps{border-left:0 !important;padding-left:0 !important;background:none} body.studio .ct-steps>:is(h3,h4,strong,.start-col-h,p:first-child){font-family:var(--st-cond);font-weight:800;font-style:normal;text-transform:uppercase;font-size:1.6rem;color:var(--st-ink)} body.studio .ct-step{border-top:1px solid var(--st-lijn);padding-top:14px} body.studio .ct-step-num{background:none !important;color:transparent !important;-webkit-text-stroke:1.1px var(--st-tq);font-family:var(--st-cond);font-weight:800;font-size:1.9rem;width:auto;height:auto;border-radius:0} body.studio .ct-step :is(strong,h4){font-style:normal} body.studio .ct-step p{font-style:normal} /* opties en keuzes */ body.studio :is(.fn-opt,.start-option span,.choice span){border-radius:4px !important} body.studio :is(.fn-opt:has(input:checked),.start-option input:checked+span,.choice input:checked+span){border-color:var(--st-tq) !important;background:rgba(3,83,82,.08) !important;color:var(--st-ink)} body.studio :is(.fn,.formsection,.ct-form-card) :is(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select){border-radius:4px;background:var(--st-creme);border:1px solid var(--st-lijn)} body.studio :is(.fn,.formsection,.ct-form-card) :is(input,textarea,select):focus{border-color:var(--st-tq);outline:2px solid rgba(3,83,82,.18);outline-offset:0} body.studio .section-num{font-family:var(--st-cond);font-weight:800;font-size:1.4rem;color:transparent;-webkit-text-stroke:1px var(--st-tq)} body.studio .btn-submit,body.studio .fn-next{border-radius:100px !important;background:var(--st-ink) !important;color:var(--st-creme) !important} body.studio .btn-submit:hover,body.studio .fn-next:hover{background:var(--st-tq) !important} body.studio .ct-booking-section+.contact-section::before{display:none} body.studio .ct-quote-block{border-left:0 !important;padding-left:0 !important;background:none} body.studio .ct-quote-block>h3,body.studio .start-h3,body.studio .start-blok .werk-kaart h3,body.studio .start-aanvraag .start-merkscan h3,body.studio .start-blok h3:not(.verhaal-stappen-kop){font-family:var(--st-cond);font-weight:800;font-style:normal;text-transform:uppercase;letter-spacing:-.005em;line-height:1;color:var(--st-ink)} body.studio .ct-quote-block>h3,body.studio .start-h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:18px} body.studio .start-blok .werk-kaart h3{font-size:1.45rem} body.studio .verhaal-stappen-kop{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq)} body.studio .verhaal-stappen h4,body.studio .verhaal-stappen strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase} body.studio .start-col-h{font-family:var(--st-cond) !important;font-weight:800 !important;text-transform:uppercase;line-height:.95;font-size:clamp(1.8rem,2.8vw,2.6rem) !important;font-style:normal !important;color:var(--st-ink)} body.studio .start-blok .niveau-card--vol h3:not(.x){color:var(--st-creme)} body.studio #intakeForm h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:.95;letter-spacing:-.005em;color:var(--st-ink)} /* bedankt */ body.studio .bedankt-check{background:var(--st-tq)} body.studio .bedankt-stappen li span strong{font-weight:700} /* ========================================================================== Over FayLux en portfolio (26 okt 2026) ========================================================================== */ /* koppen links, condensed */ body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq,.about-cta,.portfolio-section) h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-size:clamp(2.3rem,4.6vw,4.4rem);max-width:none} body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq,.about-cta,.portfolio-section) h2 .gradient-text,body.studio .intermezzo-slogan .gradient-text{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;-webkit-text-fill-color:currentColor;background:none} body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) :is(h2,.label){color:var(--st-ink)} body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) h2 .gradient-text{color:var(--st-tq)} body.studio :is(.about-values,.about-proces,.about-niet,.about-faq,.portfolio-section,.cmp-pairs) .section-header{text-align:left;margin-left:0;max-width:none} body.studio :is(.about-values,.about-proces,.about-niet,.about-faq) .section-header p{margin-left:0} body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) .label{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq)} body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq) .label::before{content:"";width:22px;height:1px;background:currentColor} body.studio :is(.founder-section,.about-values,.about-intermezzo,.about-proces,.about-niet,.about-faq){background:var(--st-creme);position:relative} body.studio :is(.about-intermezzo,.about-niet){background:var(--st-papier)} body.studio :is(.founder-section,.about-values,.about-proces,.about-niet,.about-faq,.about-cta,.about-intermezzo)::before{display:none !important} /* Kevin */ body.studio .founder-photo-wrap{border-radius:4px;transform:rotate(-1.2deg);box-shadow:0 30px 70px rgba(12,29,35,.22)} body.studio .founder-badge{border-radius:100px;background:var(--st-ink);color:var(--st-creme)} body.studio .founder-section h2 .gradient-text{color:var(--st-tq)} body.studio .founder-quote{border-left:0;padding:0;margin:22px 0 28px;font-family:var(--st-serif);font-style:italic;font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.2;color:var(--st-ink);background:none} body.studio .founder-body h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1;margin-top:26px} body.studio .founder-tag{border-radius:100px;background:none;border:1px solid rgba(12,29,35,.2)} body.studio .founder-feiten{gap:0;border-top:1px solid var(--st-lijn);background:none} body.studio .founder-feit{background:none;border-radius:0;padding:22px 18px 0 0} body.studio .founder-feit+.founder-feit{border-left:1px solid var(--st-lijn);padding-left:18px} body.studio .founder-feit b{font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:var(--st-ink);letter-spacing:-.01em} /* principes en stappen: genummerde lijnen */ body.studio :is(.values-grid,.proces-grid){gap:0;border-top:1px solid var(--st-lijn);counter-reset:stv} body.studio :is(.value-card,.proces-stap){counter-increment:stv;background:none;border:0;border-radius:0;box-shadow:none !important;transform:none !important;padding:clamp(24px,3vw,34px) clamp(14px,2vw,26px) 0 0} body.studio :is(.value-card,.proces-stap)+:is(.value-card,.proces-stap){border-left:1px solid var(--st-lijn);padding-left:clamp(14px,2vw,26px)} body.studio .value-icon{display:none} body.studio .value-card::before{content:counter(stv,decimal-leading-zero);display:block;margin-bottom:16px;font-size:.84rem;font-weight:600;letter-spacing:.08em;color:var(--st-grijs)} body.studio .proces-nr{background:none !important;color:transparent !important;-webkit-text-stroke:1.2px var(--st-tq);font-family:var(--st-cond);font-weight:800;font-size:clamp(2.6rem,4vw,3.6rem);width:auto;height:auto;border-radius:0;display:block;margin-bottom:16px;line-height:1} body.studio :is(.value-card,.proces-stap) h3{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;color:var(--st-ink)} body.studio :is(.value-card,.proces-stap) p{font-size:.95rem;line-height:1.6;color:var(--st-tekst)} /* intermezzo */ body.studio .intermezzo-foto{border-radius:4px;transform:rotate(1.4deg);box-shadow:0 30px 70px rgba(12,29,35,.2)} body.studio .intermezzo-slogan{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.95;font-size:clamp(2.2rem,4vw,3.8rem);color:var(--st-ink)} body.studio .intermezzo-slogan .gradient-text{color:var(--st-tq)} /* wat we niet doen: handgetekend koraal kruis */ body.studio .niet-grid{gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--st-lijn)} body.studio .niet-item{background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none;padding:22px 0;gap:16px;align-items:flex-start} body.studio .niet-item>svg:not(.st-kruis){display:none} body.studio .niet-item strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;margin-bottom:8px;color:var(--st-ink)} body.studio .niet-item p{font-size:.95rem;color:var(--st-tekst)} body.studio .st-kruis{flex:none;width:30px;height:30px;color:var(--koraal,#E56B4C);overflow:visible} body.studio .st-kruis path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round} .sc-ready body.studio .st-kruis path{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .45s cubic-bezier(.65,0,.35,1)} .sc-ready body.studio .st-kruis path+path{transition-delay:.35s} .sc-ready body.studio .niet-grid>.sc-in .st-kruis path{stroke-dashoffset:0} /* afsluiter als volle donkere sectie */ body.studio .about-cta{position:relative;overflow:hidden;isolation:isolate;background:var(--st-nacht);padding:clamp(96px,11vw,150px) 0} body.studio .about-cta::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)} body.studio .about-cta-inner{position:relative;z-index:2;background:none !important;border-radius:0;padding:0;text-align:left;max-width:none} body.studio .about-cta h2{font-size:clamp(3rem,8vw,7.4rem);color:var(--st-creme)} body.studio .about-cta h2 .gradient-text{color:var(--st-mint)} body.studio .about-cta .label{color:var(--st-mint)} body.studio .about-cta p{color:rgba(245,241,232,.72);margin-left:0;max-width:46ch} body.studio .about-cta-btns{justify-content:flex-start} body.studio .about-cta .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)} body.studio .about-cta .btn-ghost{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none} body.studio .about-cta .rv-cta-wrap{justify-content:flex-start} /* portfolio: donkere galerij blijft, kaarten strakker */ body.studio .portfolio-section{background:var(--st-nacht)} body.studio .portfolio-section h2{color:var(--st-creme)} body.studio .portfolio-section h2 .gradient-text{color:var(--st-mint)} body.studio .pf-filter{border-radius:100px} body.studio .pf-card{border-radius:4px !important} body.studio .pf-card :is(.pf-title,h3){font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:1} body.studio .cmp,body.studio .cmp-pair .cmp{border-radius:4px} body.studio .portfolio-cta,body.studio .portfolio-cta-inner{border-radius:0} body.studio .portfolio-hero+.svc-breadcrumb{background:var(--st-nacht);border-bottom-color:var(--st-lijn-licht)} body.studio .portfolio-hero+.svc-breadcrumb :is(li,a){color:rgba(245,241,232,.6)} body.studio .portfolio-hero+.svc-breadcrumb li[aria-current]{color:var(--st-creme)} body.studio .portfolio-cta{text-align:left;padding-top:clamp(40px,5vw,70px);border-top:1px solid var(--st-lijn-licht)} body.studio .portfolio-cta h2{font-size:clamp(3rem,7vw,6.4rem)} body.studio .portfolio-cta p{margin-left:0} body.studio .portfolio-cta-btns{justify-content:flex-start} body.studio .portfolio-cta .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)} body.studio .portfolio-cta .btn-primary:hover{background:var(--st-creme);border-color:var(--st-creme)} body.studio .portfolio-cta .btn-ghost{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none} body.studio .portfolio-cta .rv-cta-wrap{justify-content:flex-start} /* galerij met diepte: middelste kolom schuift trager mee (alleen als alles zichtbaar is) */ body.studio .st-pf-diepte .pf-grid:not(:has(>[style*="none"]))>.pf-card:nth-child(3n+2){transform:translateY(calc((var(--sc-p,.5) - .5) * -160px))} @media (max-width:900px){ body.studio :is(.values-grid,.proces-grid){grid-template-columns:1fr} body.studio :is(.value-card,.proces-stap)+:is(.value-card,.proces-stap){border-left:0;padding-left:0;border-top:1px solid var(--st-lijn);margin-top:24px} body.studio .founder-feiten{grid-template-columns:repeat(2,1fr)} body.studio .founder-feit:nth-child(3){border-left:0;padding-left:0} body.studio .st-pf-diepte .pf-grid>.pf-card{transform:none !important} } @media (prefers-reduced-motion:reduce){ body.studio .st-kruis path{stroke-dashoffset:0 !important;transition:none !important} body.studio .st-pf-diepte .pf-grid>.pf-card{transform:none !important} } /* ========================================================================== Cases (k3): lichte basis blijft, letters en hoeken gaan mee (26 okt 2026) ========================================================================== */ body.studio.k3{--sc-font-display:var(--st-cond);--k3-r:6px;--k3-r-m:6px;--k3-r-s:4px;--k3-teal:#035352} body.studio.k3 :is(.k3-h,.k3-kaart__naam,.k3-podium__kop h2,.k3-slot__paneel h2,.k3-stap h3){font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.92} body.studio.k3 :is(.k3-h,.k3-slot__paneel h2) em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;letter-spacing:0;color:var(--st-tq)} body.studio.k3 .k3-h--verhaal{font-size:clamp(2.8rem,5.6vw,6rem)} /* breedte in em: ch hangt van het actieve font af en verspringt bij de font-swap */ body.studio.k3 .k3-chero h1.k3-h--verhaal{max-width:8.9em} body.studio.k3 .k3-stap h3{font-size:1.6rem} body.studio.k3 :is(.k3-held__cijfers b,.k3-kaart__res b,.k3-winst__getal b,.k3-scores__maten b,.k3-snel b,.k3-staaf b){font-weight:800;letter-spacing:-.01em} /* zinnen die geen kop zijn: leesbaar font */ body.studio.k3 .k3-big{font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.15;color:var(--st-tq)} body.studio.k3 :is(.k3-vn__na,.k3-vn2__na p,.k3-seo__stappen b,.k3-mini__res b){font-family:var(--font-display);text-transform:none;letter-spacing:-.01em} body.studio.k3 .k3-review blockquote{font-family:var(--st-serif);font-style:italic;font-weight:400;letter-spacing:0;line-height:1.15;font-size:clamp(1.8rem,3vw,2.9rem)} /* minder schaduw, meer lijn */ body.studio.k3 :is(.k3-paneel,.k3-kaart__beeld,.k3-stap,.k3-vn2__voor,.k3-vn2__na,.k3-scores,.k3-grid>*){box-shadow:none} body.studio.k3 .k3-paneel:not(.k3-probleem){border:1px solid var(--st-lijn)} /* ========================================================================== Blog: artikel en blogindex (26 okt 2026). Werkt ook voor pagina's die de CRM bouwt uit templates/blog/FL-006/. ========================================================================== */ body.studio .article-hero{padding-bottom:clamp(56px,6vw,90px)} body.studio .article-hero h1{font-size:clamp(2.6rem,5.2vw,5rem);color:var(--st-creme);max-width:8.5em;margin:0} body.studio .article-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(22px,2.6vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint);text-decoration:none} body.studio .article-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:clamp(22px,2.6vw,30px);font-size:.9rem;color:rgba(245,241,232,.7)} body.studio .article-meta>*+*::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--st-mint);margin-right:22px;vertical-align:middle;transform:translateY(-1px)} body.studio .article-featured{border-radius:4px;overflow:hidden;margin-top:clamp(32px,4vw,52px);box-shadow:0 40px 90px rgba(0,0,0,.45)} body.studio .article-featured:has(img[src=""]),body.studio .article-featured:not(:has(img)){display:none} body.studio .article-hero+.svc-breadcrumb{border-top:0} body.studio .article-body{background:var(--st-creme);padding:clamp(64px,7vw,110px) 0} body.studio .article-body>.container{max-width:760px} body.studio .article-body p,body.studio .article-body li{font-size:1.08rem;line-height:1.75;color:var(--st-tekst)} body.studio .article-body .article-lead{font-family:var(--st-serif);font-style:italic;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.3;color:var(--st-ink);margin-bottom:clamp(36px,4vw,52px);padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--st-lijn)} body.studio .article-body h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(2rem,3.2vw,2.8rem);color:var(--st-ink);margin:clamp(48px,5vw,68px) 0 18px} body.studio .article-body h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;line-height:1.3;color:var(--st-ink);margin:32px 0 10px} body.studio .article-body a:not(.btn){color:var(--st-tq);text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4)} body.studio .article-body a:not(.btn):hover{border-bottom-color:var(--st-tq)} body.studio .article-body blockquote{margin:36px 0;padding:0 0 0 24px;border-left:2px solid var(--koraal,#E56B4C);font-family:var(--st-serif);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--st-ink)} body.studio .article-body :is(ul,ol){padding-left:1.2em} body.studio .article-body li::marker{color:var(--st-tq)} body.studio .article-body strong{color:var(--st-ink)} body.studio .article-body table{border-collapse:collapse;width:100%;margin:28px 0;font-size:.98rem} body.studio .article-body :is(th,td){border-bottom:1px solid var(--st-lijn);padding:12px 10px 12px 0;text-align:left} body.studio .blog-readmore{align-self:center} body.studio .blog-cta{text-align:left;margin-top:clamp(56px,6vw,90px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--st-lijn)} body.studio .blog-cta h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;font-size:clamp(2.4rem,5vw,4.6rem);color:var(--st-ink);margin:0 0 16px} body.studio .blog-cta p{margin:0 0 26px;color:var(--st-tekst);max-width:52ch} body.studio .article-body+.svc-final{margin-top:0} body.studio .article-body pre{max-width:100%;overflow-x:auto;margin:26px 0;padding:18px 20px;border-radius:4px;background:var(--st-nacht);color:var(--st-mint);font:500 .88rem/1.6 ui-monospace,'SF Mono',Menlo,Consolas,monospace} body.studio .article-body pre code{background:none;color:inherit;padding:0;font:inherit;white-space:pre} body.studio .article-body :not(pre)>code{background:rgba(3,83,82,.08);color:var(--st-tq);padding:2px 6px;border-radius:3px;font-size:.92em;overflow-wrap:anywhere} /* leesvoortgang */ .st-lees{position:fixed;left:0;top:0;z-index:2000;height:3px;width:100%;background:var(--st-mint,#8FD6CA);transform-origin:0 50%;transform:scaleX(0);pointer-events:none} /* blogindex: redactionele lijst in plaats van kaarten met nepbeeld */ body.studio .blog-section{background:var(--st-creme);padding:clamp(64px,7vw,110px) 0} body.studio .blog-grid{display:block;border-top:1px solid var(--st-lijn)} body.studio .blog-card{display:block;background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none !important;transform:none !important;text-decoration:none;color:var(--st-ink)} body.studio .blog-card-media{display:none} body.studio .blog-card-info{display:grid;grid-template-columns:minmax(120px,.22fr) minmax(0,1fr) minmax(0,.8fr) 32px;column-gap:clamp(20px,3vw,44px);align-items:baseline;padding:clamp(24px,2.8vw,36px) 0} body.studio .blog-cat{grid-column:1;grid-row:1;justify-self:start;background:none !important;border:0;padding:0;border-radius:0;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq) !important} body.studio .blog-card-info h2,body.studio .blog-card-info h3{grid-column:2;grid-row:1;margin:0;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(1.6rem,2.6vw,2.4rem);color:var(--st-ink);transition:color .25s,transform .35s var(--st-ease)} body.studio .blog-card-info p{grid-column:3;grid-row:1;margin:0;font-size:.95rem;line-height:1.6;color:var(--st-tekst)} body.studio .blog-readmore{grid-column:4;grid-row:1;justify-self:end;font-size:0;color:var(--st-ink) !important} body.studio .blog-readmore::after{content:"\2192";font-size:1.4rem;display:inline-block;transition:transform .3s var(--st-ease)} body.studio .blog-card:hover .blog-card-info h2,body.studio .blog-card:focus-visible .blog-card-info h2{color:var(--st-tq);transform:translateX(8px)} body.studio .blog-card:hover .blog-readmore::after{transform:translateX(6px);color:var(--st-tq)} body.studio .blog-card:focus-visible{outline:3px solid #0E9384;outline-offset:4px} @media (max-width:900px){ body.studio .blog-card-info{grid-template-columns:minmax(0,1fr) 28px;row-gap:10px} body.studio .article-meta{gap:4px 14px} body.studio .article-meta>*+*::before{display:none} body.studio .blog-cat{grid-column:1;grid-row:1} body.studio .blog-card-info h2,body.studio .blog-card-info h3{grid-column:1;grid-row:2} body.studio .blog-card-info p{grid-column:1;grid-row:3} body.studio .blog-readmore{grid-column:2;grid-row:2} } @media (prefers-reduced-motion:reduce){.st-lees{display:none}body.studio .blog-card:hover .blog-card-info h2{transform:none}} /* ---------- één contactknop en een compacte cookiebanner ---------- */ body:is(.studio,.st-knop) .foto-contact{background:var(--st-ink);color:var(--st-creme);box-shadow:0 18px 40px rgba(7,17,20,.32),0 0 0 1px rgba(245,241,232,.08)} body:is(.studio,.st-knop) .foto-contact .fc-tekst b{color:var(--st-creme);font-family:var(--font-body);font-weight:700;font-size:.95rem} body:is(.studio,.st-knop) .foto-contact .fc-tekst small{color:rgba(245,241,232,.62)} body:is(.studio,.st-knop) .foto-contact .fc-online{background:var(--st-mint);border-color:var(--st-ink)} body:is(.studio,.st-knop) .foto-contact:hover,body:is(.studio,.st-knop) .foto-contact:focus-visible{background:var(--st-tq)} body:is(.studio,.st-knop) .foto-contact:hover .fc-online,body:is(.studio,.st-knop) .foto-contact:focus-visible .fc-online{border-color:var(--st-tq)} body:is(.studio,.st-knop) .foto-contact:focus-visible{outline-color:var(--st-mint)} @media (min-width:901px){ body:is(.studio,.st-knop) .cookie-banner{left:22px;right:auto;bottom:22px;padding:0;width:min(420px,calc(100vw - 340px))} body:is(.studio,.st-knop) .cookie-inner{max-width:none} } body:is(.studio,.st-knop) .cookie-inner{border-radius:6px;background:var(--st-papier);border-color:var(--st-lijn);box-shadow:0 24px 60px rgba(7,17,20,.18);padding:18px 20px;gap:14px} body:is(.studio,.st-knop) .cookie-text{flex-basis:100%;color:var(--st-tekst);font-size:.84rem} body:is(.studio,.st-knop) .cookie-text svg{color:var(--st-tq)} body:is(.studio,.st-knop) .cookie-text a{color:var(--st-tq)} body:is(.studio,.st-knop) .cookie-actions{width:100%;justify-content:flex-end} body:is(.studio,.st-knop) .cookie-btn{border-radius:100px;padding:10px 18px} body:is(.studio,.st-knop) .cookie-btn-accept{background:var(--st-ink);color:var(--st-creme)} body:is(.studio,.st-knop) .cookie-btn-accept:hover{background:var(--st-tq)} body:is(.studio,.st-knop) .cookie-btn-decline{border-color:rgba(12,29,35,.3);color:var(--st-ink)} /* cookiebanner mobiel: compacte balk onderaan, laat de hero vrij */ @media (max-width:900px){body:is(.studio,.st-knop) .cookie-banner{left:10px;right:10px;bottom:10px;padding:0;width:auto}body:is(.studio,.st-knop) .cookie-inner{padding:12px 14px;gap:10px;flex-wrap:wrap}body:is(.studio,.st-knop) .cookie-text{font-size:.74rem;line-height:1.4;gap:0}body:is(.studio,.st-knop) .cookie-text svg{display:none}body:is(.studio,.st-knop) .cookie-actions{gap:8px}body:is(.studio,.st-knop) .cookie-btn{padding:8px 14px;font-size:.8rem}} /* ---------- volgring (zelfde als homepage) ---------- */ .mk-ring{position:fixed;left:0;top:0;z-index:3000;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:1.5px solid #0E9384;pointer-events:none;opacity:0;display:flex;align-items:center;justify-content:center;transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),margin .28s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s,opacity .2s} .mk-ring.is-zichtbaar{opacity:1} .mk-ring.is-link{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(14,147,132,.14)} .mk-ring.is-label{width:68px;height:68px;margin:-34px 0 0 -34px;background:#0E9384;border-color:#0E9384} .mk-ring.is-druk{width:22px;height:22px;margin:-11px 0 0 -11px} .mk-ring span{font:700 .72rem/1 var(--font-body);letter-spacing:.04em;color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s,transform .28s cubic-bezier(.16,1,.3,1)} .mk-ring.is-label span{opacity:1;transform:none} /* ---------- scrollcraft-basis (alleen wat deze pagina's gebruiken) ---------- */ .sc-act--pinned{position:relative} .sc-ready [data-sc-cue]{opacity:0;will-change:opacity,transform} [data-sc-parallax]{will-change:transform} .sc-ready [data-sc-in],.sc-ready [data-sc-stagger]>*{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s var(--st-ease,ease),transform .7s var(--st-ease,ease)} .sc-ready [data-sc-in].sc-in,.sc-ready [data-sc-stagger]>.sc-in{opacity:1;transform:none} /* ========================================================================== Componenten ========================================================================== */ /* hero met diepte: licht (achter), browser (midden), telefoon (voor) */ body.studio .st-diep{position:relative;padding:0 8% 9% 0} body.studio .st-telefoon{position:absolute;right:0;bottom:-4%;width:27%;aspect-ratio:420/909;border-radius:22px;overflow:hidden;border:5px solid #0B1A1F;outline:1px solid rgba(245,241,232,.16);box-shadow:-24px 34px 70px rgba(0,0,0,.6);transform:rotate(3deg);background:#0B1A1F} body.studio .st-telefoon img{display:block;width:100%;height:100%;object-fit:cover;object-position:top} @media (max-width:900px){body.studio .st-diep{padding:0 14% 12% 0}body.studio .st-telefoon{width:32%}} /* de bouwscène: links de stappen, rechts een scherm dat zich opbouwt */ body.studio .svc-section.st-bouw{padding:0;overflow:visible} body.studio .st-bouw-stage{position:relative;z-index:2;padding:clamp(90px,10vw,130px) 0} body.studio .sc-act--pinned .st-bouw-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;display:flex;align-items:center;padding:70px 0 0} body.studio .st-bouw-stage>.container{width:100%} body.studio .st-bouw-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:center} body.studio .st-bouw h2{font-size:clamp(2.2rem,4vw,3.8rem);margin-bottom:clamp(24px,3vw,36px)} body.studio .st-bouw-stappen{list-style:none;margin:0;padding:0;border-top:1px solid var(--st-lijn-licht);counter-reset:sbw} body.studio .st-bouw-stappen li{counter-increment:sbw;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;padding:14px 0;border-bottom:1px solid var(--st-lijn-licht);transition:opacity .45s var(--st-ease)} body.studio .st-bouw-stappen li::before{content:counter(sbw,decimal-leading-zero);grid-row:1 / span 2;font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--st-mint);padding-top:.35em} body.studio .st-bouw-stappen strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2vw,1.9rem);line-height:1;color:var(--st-creme)} body.studio .st-bouw-stappen p{margin:6px 0 0;font-size:.94rem;line-height:1.55;color:rgba(245,241,232,.7);max-width:44ch;display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--st-ease),opacity .45s var(--st-ease),margin .45s} /* vastgezet: alleen de actieve stap staat open */ body.studio .sc-act--pinned .st-bouw-stappen li{opacity:.38} body.studio .sc-act--pinned .st-bouw-stappen li.is-aan{opacity:1} body.studio .sc-act--pinned .st-bouw-stappen li:not(.is-aan) p{opacity:0;max-height:0;margin:0;overflow:hidden} body.studio .sc-act--pinned .st-bouw-stappen li.is-aan p{max-height:6em} body.studio .st-scherm{position:relative;border-radius:8px;overflow:hidden;background:#FBF8F1;box-shadow:0 40px 100px rgba(0,0,0,.55);transform:rotate(1.2deg)} body.studio .st-scherm-balk{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#0E1E23} body.studio .st-scherm-balk i{width:9px;height:9px;border-radius:50%;background:#2B3F45} body.studio .st-scherm-balk span{margin-left:10px;font-size:.68rem;color:rgba(245,241,232,.6);background:#0A171B;padding:4px 12px;border-radius:20px} body.studio .st-scherm-vlak{position:relative;aspect-ratio:16/11;overflow:hidden} body.studio .st-laag{position:absolute;inset:0;transition:opacity .6s var(--st-ease),transform .6s var(--st-ease)} /* standaard (niet vastgezet): eindbeeld */ body.studio .st-l0,body.studio .st-l1,body.studio .st-l3{opacity:0} body.studio .sc-act--pinned .st-laag{opacity:0;transform:translateY(14px)} body.studio .sc-act--pinned[data-st-fase="0"] .st-l0, body.studio .sc-act--pinned[data-st-fase="1"] .st-l1, body.studio .sc-act--pinned[data-st-fase="2"] .st-l2, body.studio .sc-act--pinned[data-st-fase="3"] .st-l2,body.studio .sc-act--pinned[data-st-fase="3"] .st-l3, body.studio .sc-act--pinned[data-st-fase="4"] .st-l2,body.studio .sc-act--pinned[data-st-fase="4"] .st-l4{opacity:1;transform:none} /* 0 gesprek */ body.studio .st-l0{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:8% 10%} body.studio .svc-section.ink .st-bel{margin:0;max-width:72%;padding:12px 16px;border-radius:14px 14px 14px 4px;background:#E9E2D3;font-size:.95rem;line-height:1.4;color:var(--st-ink)} body.studio .svc-section.ink .st-bel--jij{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--st-tq);color:var(--st-creme)} /* 1 schets */ body.studio .st-l1{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto auto 1fr;gap:10px;padding:6% 7%} body.studio .st-wf{border:1.5px dashed rgba(12,29,35,.35);border-radius:4px;min-height:14px} body.studio .st-wf-nav{grid-column:1 / -1;height:18px} body.studio .st-wf-kop{grid-column:1 / 3;height:46px;margin-top:8px} body.studio .st-wf-tekst{grid-column:1 / 3;height:28px} body.studio .st-wf-knop{grid-column:1;height:26px;border-radius:30px} body.studio .st-wf-beeld{grid-column:3;grid-row:2 / 5} body.studio .st-wf-blok{height:auto;min-height:40px} /* 2 ontwerp */ body.studio .st-l2{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr auto auto 1fr;column-gap:7%;padding:5% 7% 7%;background:var(--st-creme)} body.studio .st-o-nav{grid-column:1 / -1;display:flex;align-items:center;gap:8%;font-size:.62rem;letter-spacing:.14em;color:var(--st-ink);padding-bottom:4%;border-bottom:1px solid var(--st-lijn)} body.studio .st-o-nav i{flex:none;width:9%;height:4px;border-radius:2px;background:rgba(12,29,35,.25)} body.studio .st-o-nav b{margin-right:auto} body.studio .st-o-kop{grid-column:1;align-self:end;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3.2vw,3rem);line-height:.9;color:var(--st-ink)} body.studio .st-o-kop em{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--st-tq);font-size:1.2em} body.studio .st-o-tekst{grid-column:1;height:30px;margin-top:10px;background:repeating-linear-gradient(to bottom,rgba(12,29,35,.18) 0 4px,transparent 4px 10px)} body.studio .st-o-knop{grid-column:1;justify-self:start;margin-top:12px;padding:8px 14px;border-radius:30px;background:var(--st-ink);color:var(--st-creme);font-size:.68rem;font-weight:600} body.studio .st-o-beeld{grid-column:2;grid-row:2 / 6;margin-top:10%;border-radius:4px;background:url('/pf-oplevering-interieur-800.webp') center/cover,#cfc6b4} /* 3 code */ body.studio .st-l3{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;padding:7%;background:linear-gradient(to top,rgba(7,17,20,.92) 0%,rgba(7,17,20,.75) 55%,rgba(7,17,20,0) 100%)} body.studio .st-l3 pre{margin:0;font:500 clamp(.62rem,1.05vw,.82rem)/1.6 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--st-mint);white-space:pre} body.studio .st-chip{font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:30px;border:1px solid rgba(143,214,202,.5);color:var(--st-creme)} /* 4 meten */ body.studio .st-l4{inset:auto 7% 7% auto;width:44%;height:auto;padding:14px 16px 10px;border-radius:6px;background:var(--st-papier);box-shadow:0 18px 40px rgba(7,17,20,.25)} body.studio .st-meet-label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--st-grijs);margin-bottom:6px} body.studio .st-l4 svg{display:block;width:100%;height:56px;overflow:visible} body.studio .st-l4 path{fill:none;stroke:var(--st-tq);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--st-ease) .2s} body.studio .sc-act--pinned:not([data-st-fase="4"]) .st-l4 path{stroke-dashoffset:260} @media (max-width:900px){ body.studio .st-bouw-grid{grid-template-columns:1fr} body.studio .st-scherm{transform:none} } @media (prefers-reduced-motion:reduce){ body.studio .st-laag,body.studio .st-bouw-stappen li,body.studio .st-bouw-stappen p,body.studio .st-l4 path{transition:none} } /* ========================================================================== Onderdelen van de overige dienstpagina's (26 okt 2026) ========================================================================== */ body.studio .svc-section .container>h3{font-size:clamp(1.35rem,1.9vw,1.7rem);color:var(--st-ink);margin:clamp(26px,3vw,36px) 0 10px} body.studio .svc-section.ink h3{color:var(--st-creme)} body.studio .svc-pain.numbered .svc-pain-card{padding-left:0} /* mock-kaarten in de hero */ body.studio .mock-card{border-radius:6px;background:#0D1B20;border:1px solid var(--st-lijn-licht);box-shadow:0 40px 90px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.3);transform:rotate(-1.4deg)} body.studio .svc-hero-visual>img,body.studio .svc-hero-visual picture img{border-radius:6px;box-shadow:0 40px 90px rgba(0,0,0,.55);transform:rotate(1.2deg)} /* Core Web Vitals-meters: kolommen met lijnen, ring vult zich bij het scrollen */ body.studio .svc-gauges{gap:0;border-top:1px solid var(--st-lijn);margin-top:clamp(32px,4vw,48px)} body.studio .svc-gauge,body.studio .svc-section.alt .svc-gauge{background:none;border:0;border-radius:0;padding:clamp(26px,3vw,40px) clamp(14px,2vw,28px) 0;text-align:left} body.studio .svc-gauge+.svc-gauge{border-left:1px solid var(--st-lijn)} body.studio .svc-gauge .ring{width:120px;height:120px;margin:0 0 20px;--st-t:clamp(0,(var(--sc-p,1) - .15) / .35,1);background:conic-gradient(var(--st-tq) calc(var(--p,88%) * var(--st-t)),rgba(12,29,35,.1) 0)} body.studio .svc-gauge .ring i,body.studio .svc-section.alt .svc-gauge .ring i{width:100px;height:100px;background:var(--st-creme);font-family:var(--st-cond);font-weight:800;font-style:normal;font-size:1.6rem;color:var(--st-ink)} body.studio .svc-section.alt .svc-gauge .ring i{background:var(--st-papier)} body.studio .svc-gauge strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1;color:var(--st-ink);margin-bottom:6px} body.studio .svc-gauge small{font-size:.95rem;color:var(--st-tekst)} /* posities in Google: balken groeien mee met het scrollen */ body.studio .mock-rank .bar{transform-origin:bottom;transform:scaleY(var(--st-groei,1));transition:transform .2s linear} body.studio .st-hero-scroll{--st-groei:clamp(.55,(var(--sc-p,1) - .44) / .2,1)} body.studio .mock-rank .bar span{transform:scaleY(calc(1 / max(var(--st-groei,1),.55)));transform-origin:bottom} /* AI-antwoord: jouw merk licht op */ body.studio .mock-ai .ai-list li.you{transition:background .4s,border-color .4s} /* lokale kaart: jouw bedrijf klimt naar plek 1 */ body.studio .svc-localwrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;border:1px solid var(--st-lijn);border-radius:6px;overflow:hidden;background:var(--st-papier)} body.studio .svc-map{border:0;border-radius:0;min-height:320px} body.studio .svc-localcard{border:0;border-left:1px solid var(--st-lijn);border-radius:0;background:var(--st-papier);padding:clamp(20px,2.4vw,30px);justify-content:center;gap:0} body.studio .svc-localrow{padding:16px 0;border-bottom:1px solid var(--st-lijn)} body.studio .svc-localrow .info strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:1;color:var(--st-ink)} body.studio .svc-localrow .rank{border-radius:50%;font-family:var(--st-cond);font-weight:800} body.studio .svc-localrow.top .rank{background:var(--st-tq)} body.studio .st-klim{--st-t:clamp(0,(var(--sc-p,1) - .36) / .2,1);--rij:74px} body.studio .st-klim .svc-localrow{position:relative;height:var(--rij);padding:0;box-sizing:border-box;transition:transform .15s linear} body.studio .st-klim .svc-localrow:last-child{border-bottom:0} body.studio .st-klim .svc-localrow.top{transform:translateY(calc((1 - var(--st-t)) * 2 * var(--rij)));z-index:1;background:var(--st-papier)} body.studio .st-klim .svc-localrow:not(.top){transform:translateY(calc((1 - var(--st-t)) * -1 * var(--rij)))} body.studio .st-klim .svc-localrow.top .rank{transform:translateY(calc((1 - var(--st-t)) * -2 * var(--rij)));background:color-mix(in srgb,var(--st-tq) calc(var(--st-t) * 100%),rgba(12,29,35,.08))} body.studio .st-klim .svc-localrow:not(.top) .rank{transform:translateY(calc((1 - var(--st-t)) * var(--rij)))} body.studio .st-klim .svc-map .pin{transform:rotate(-45deg) translate(calc((1 - var(--st-t)) * -40px),calc((1 - var(--st-t)) * -40px));opacity:calc(.3 + var(--st-t) * .7)} /* dashboard: balken groeien met het scrollen */ body.studio .svc-dash,body.studio .svc-section.alt .svc-dash{border-radius:6px;background:var(--st-papier);border-color:var(--st-lijn)} body.studio .svc-dash .kpis{gap:0;border-top:1px solid var(--st-lijn)} body.studio .svc-dash .kpi{background:none;border-radius:0;padding:16px 16px 18px 0} body.studio .svc-dash .kpi+.kpi{border-left:1px solid var(--st-lijn);padding-left:16px} body.studio .svc-dash .kpi b{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.7rem;line-height:1;color:var(--st-ink)} body.studio .svc-dash .kpi span{font-size:.86rem;color:var(--st-tekst)} body.studio .svc-chart{height:180px;gap:14px} body.studio .svc-chart i{border-radius:2px 2px 0 0;background:var(--st-tq);transform-origin:bottom} body.studio .svc-chart i:last-child{background:var(--st-mint)} body.studio .st-groei-act{--st-t:clamp(0,(var(--sc-p,1) - .18) / .32,1)} body.studio .st-groei-act .svc-chart i{transform:scaleY(clamp(.06,calc(var(--st-t) * 1.6 - var(--n,0) * .12),1))} /* statusbord en mailbox */ body.studio .svc-status{border-radius:6px;max-width:none;border-color:var(--st-lijn-licht)} body.studio .svc-status .label{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.25rem;letter-spacing:0} body.studio .svc-status .val{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-weight:500} body.studio .mock-mail{border-radius:6px} body.studio .svc-emailwrap .svc-check{grid-template-columns:1fr;margin-top:0} /* verticale tijdlijn (branding, hosting) */ body.studio .svc-timeline{padding-left:0;border-top:1px solid var(--st-lijn);margin-top:clamp(28px,3.4vw,44px);counter-reset:sttl} body.studio .svc-timeline::before{display:none} body.studio .svc-tstep{counter-increment:sttl;display:grid;grid-template-columns:90px minmax(0,1fr);column-gap:24px;padding:20px 0;border-bottom:1px solid var(--st-lijn)} body.studio .svc-tstep::before{content:counter(sttl,decimal-leading-zero);position:static;width:auto;height:auto;border:0;border-radius:0;box-shadow:none;background:none;grid-row:1 / span 2;font-family:var(--st-cond);font-weight:800;font-size:2.4rem;line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--st-tq)} body.studio .svc-tstep strong{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;margin-bottom:6px} body.studio .svc-tstep p{font-size:.98rem} body.studio .svc-section.ink .svc-timeline,body.studio .svc-section.ink .svc-tstep{border-color:var(--st-lijn-licht)} body.studio .svc-section.ink .svc-tstep::before{-webkit-text-stroke-color:var(--st-mint);border:0} /* voorbeeldscripts (ugc) */ body.studio .svc-testi{gap:0;border-top:1px solid var(--st-lijn)} body.studio .svc-testi .card,body.studio .svc-section.alt .svc-testi .card{background:none;border:0;border-radius:0;padding:clamp(24px,3vw,36px) clamp(18px,2.4vw,32px) 0 0} body.studio .svc-testi .card+.card{border-left:1px solid var(--st-lijn);padding-left:clamp(18px,2.4vw,32px)} body.studio .svc-testi .stars{display:none} body.studio .svc-testi .quote{font-family:var(--st-serif);font-style:italic;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15;color:var(--st-ink);margin-bottom:20px} body.studio .svc-testi .who small{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--st-grijs)} body.studio .svc-testi .who .av{display:none} /* galerij: kolommen schuiven op verschillende snelheid */ body.studio .st-diepte-galerij .aif-item:nth-child(4n+2),body.studio .st-diepte-galerij .aif-item:nth-child(4n+4){transform:translateY(calc((var(--sc-p,.5) - .5) * -120px))} body.studio .st-diepte-galerij .aif-item:nth-child(4n+3){transform:translateY(calc((var(--sc-p,.5) - .5) * -50px))} /* showreel: het beeld groeit naar volle breedte */ body.studio .st-bioscoop .svc-reel-frame{max-width:none;transform:scale(calc(.86 + var(--st-t,1) * .14));transform-origin:50% 0;transition:transform .1s linear} body.studio .st-bioscoop{--st-t:clamp(0,(var(--sc-p,1) - .45) / .3,1)} body.studio .svc-reel-video{border-radius:6px} body.studio .svc-reel{background:var(--st-nacht)} body.studio .svc-chart i:nth-child(2){--n:1}body.studio .svc-chart i:nth-child(3){--n:2}body.studio .svc-chart i:nth-child(4){--n:3}body.studio .svc-chart i:nth-child(5){--n:4}body.studio .svc-chart i:nth-child(6){--n:5} /* diensten-overzicht */ body.studio .dv-grid{gap:clamp(28px,4vw,56px)} body.studio .dv-col-head{border-bottom:0;padding-bottom:0;margin-bottom:22px} body.studio .dv-col-head h2{font-size:clamp(2.4rem,4vw,3.6rem);margin-bottom:12px} body.studio .dv-col-head p{font-size:1rem;color:var(--st-tekst)} body.studio .dv-cards{gap:0;border-top:1px solid var(--st-lijn)} body.studio .dv-cards .svc-card{grid-template-columns:minmax(0,1fr) 28px;padding:20px 0;gap:6px 14px} body.studio .dv-cards .svc-card h3{font-size:1.45rem} body.studio .dv-cards .svc-card p{grid-column:1;font-size:.94rem} body.studio .dv-cards a.svc-card::after{grid-column:2;grid-row:1} /* ja/nee-lijst (ai-fotografie) */ body.studio .aif-split>*{background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;border-top:1px solid var(--st-lijn) !important} body.studio .aif-split h3,body.studio .aif-split h4,body.studio .aif-split strong:first-child{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:1.5rem;color:var(--st-ink);margin:20px 0 10px} /* faq-lijst (aanpak, over-mij) */ body.studio .faq-lijst{gap:0;max-width:none;border-top:1px solid var(--st-lijn)} body.studio .faq-lijst details,body.studio .faq-lijst details[open]{background:none;border:0;border-bottom:1px solid var(--st-lijn);border-radius:0;box-shadow:none} body.studio .faq-lijst summary{padding:22px 48px 22px 0;font-weight:700;font-size:1.12rem;color:var(--st-ink)} body.studio .faq-lijst summary::after{right:0;color:var(--st-tq)} body.studio .faq-lijst details>p,body.studio .faq-lijst details>div{padding:0 0 22px;max-width:64ch} /* formulieren (gratis scan, contact) */ body.studio .ct-form-card{border-radius:6px;background:var(--st-papier);border:1px solid var(--st-lijn);box-shadow:0 24px 60px rgba(12,29,35,.08)} body.studio .ct-form-card input,body.studio .ct-form-card textarea,body.studio .ct-form-card select{border-radius:4px;background:var(--st-creme);border:1px solid var(--st-lijn)} body.studio .ct-form-card input:focus,body.studio .ct-form-card textarea:focus,body.studio .ct-form-card select:focus{border-color:var(--st-tq);outline:2px solid rgba(3,83,82,.18);outline-offset:0} body.studio .ct-form-card label{font-weight:600;color:var(--st-ink)} body.studio .aif-split li::before,body.studio .aif-yes li::before{color:var(--st-tq)} @media (max-width:900px){ body.studio .svc-gauges{grid-template-columns:1fr} body.studio .svc-gauge+.svc-gauge{border-left:0;border-top:1px solid var(--st-lijn);margin-top:24px} body.studio .svc-localwrap{grid-template-columns:1fr} body.studio .svc-localcard{border-left:0;border-top:1px solid var(--st-lijn)} body.studio .svc-map{min-height:200px} body.studio .svc-dash .kpis{grid-template-columns:repeat(2,1fr)} body.studio .svc-dash .kpi:nth-child(3){border-left:0;padding-left:0} body.studio .svc-testi .card+.card{border-left:0;padding-left:0;border-top:1px solid var(--st-lijn);margin-top:24px} body.studio .svc-tstep{grid-template-columns:60px minmax(0,1fr)} body.studio .st-diepte-galerij .aif-item{transform:none !important} body.studio .st-bioscoop .svc-reel-frame{transform:none} } @media (prefers-reduced-motion:reduce){ body.studio .svc-gauge .ring{--st-t:1} body.studio .st-hero-scroll,body.studio .st-klim,body.studio .st-groei-act,body.studio .st-bioscoop{--st-t:1;--st-groei:1} body.studio .st-diepte-galerij .aif-item{transform:none !important} } /* ---------- smal scherm ---------- */ @media (max-width:900px){ body.studio .svc-hero{padding-top:clamp(120px,30vw,150px)} body.studio .svc-hero-grid{grid-template-columns:1fr;gap:44px} body.studio .svc-hero.has-visual .svc-cta{justify-content:flex-start} body.studio :is(.svc-hero,.contact-hero,.about-hero,.portfolio-hero,.article-hero,.blog-hero)::before{width:120vw;left:-40vw;top:-30vw;animation:none;will-change:auto} body.studio .svc-pain>li{grid-template-columns:56px minmax(0,1fr);column-gap:12px;align-items:start} body.studio .svc-pain-card{grid-template-columns:1fr;row-gap:10px} body.studio .st-boog{width:56px;margin:22px 0 0;justify-self:start} body.studio .svc-check,body.studio .svc-usp,body.studio .svc-benefits{grid-template-columns:1fr} body.studio .svc-benefits:has(>.svc-benefit:nth-child(3):last-child){grid-template-columns:1fr} body.studio .svc-card{grid-template-columns:minmax(0,1fr) 28px} body.studio .svc-card p{grid-column:1} body.studio a.svc-card::after{grid-column:2;grid-row:1} body.studio .svc-statband{grid-template-columns:repeat(2,minmax(0,1fr))} body.studio .svc-statband .result-stat:nth-child(odd){border-left:0;padding-left:0} body.studio .svc-statband .result-stat:nth-child(n+3){border-top:1px solid var(--st-lijn);margin-top:22px} body.studio .svc-flow,body.studio .svc-steps{grid-template-columns:1fr} body.studio .svc-flow .fstep+.fstep,body.studio .svc-steps .svc-step+.svc-step{border-left:0;padding-left:0;border-top:1px solid var(--st-lijn);margin-top:26px} body.studio .svc-section.ink .fstep+.fstep,body.studio .svc-section.ink .svc-step+.svc-step{border-top-color:var(--st-lijn-licht)} body.studio .svc-final::before{animation:none} } @media (hover:none),(pointer:coarse){.mk-ring{display:none}} @media (prefers-reduced-motion:reduce){ body.studio .st-boog path{stroke-dashoffset:0 !important;transition:none !important} body.studio .svc-pain-card .a{opacity:1 !important;transform:none !important} body.studio .svc-hero::before,body.studio .svc-final::before{animation:none} .mk-ring{display:none} [data-sc-in],[data-sc-stagger]>*{opacity:1 !important;transform:none !important;transition:none !important} body.studio a.svc-card:hover h3{transform:none} } /* ========================================================================== Juridisch (voorwaarden, privacy, cookiebeleid) en 404 (26 okt 2026) Rustig document: donkere hero, links een inhoudsopgave, rechts de tekst. ========================================================================== */ body.studio .legal-hero{position:relative;overflow:hidden;isolation:isolate;text-align:left;background:var(--st-nacht);color:var(--st-creme);padding:clamp(150px,15vw,200px) 0 clamp(64px,7vw,100px)} body.studio .legal-hero::before{content:"";position:absolute;z-index:0;left:-10vw;top:-24vw;width:min(80vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(143,214,202,.22) 0%,rgba(143,214,202,.12) 22%,rgba(143,214,202,.05) 42%,rgba(143,214,202,0) 66%);animation:stLicht 26s ease-in-out infinite alternate;will-change:transform} body.studio .legal-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)} body.studio .legal-hero>.container{position:relative;z-index:2} body.studio .legal-tag{display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-radius:0;padding:0;margin:0 0 clamp(22px,2.6vw,30px);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint)} body.studio .legal-tag::before{content:"";width:28px;height:1px;background:currentColor} body.studio .legal-hero h1{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-size:clamp(3rem,7.4vw,7.2rem);color:var(--st-creme);margin:0} body.studio .legal-hero h1 .gradient-text{font-family:var(--st-serif);font-style:italic;font-weight:400;text-transform:none;font-size:1.294em;line-height:0;letter-spacing:0;padding-right:.04em;background:none;-webkit-text-fill-color:currentColor;color:var(--st-mint)} body.studio .legal-hero p{margin:clamp(22px,2.6vw,30px) 0 0;font-size:.95rem;color:rgba(245,241,232,.66)} body.studio .legal-hero+.svc-breadcrumb{border-top:0} body.studio .legal-body{background:var(--st-creme);padding:clamp(64px,7vw,110px) 0 clamp(80px,9vw,130px)} body.studio :is(.legal-card,.privacy-card){background:none;border:0;border-radius:0;box-shadow:none;padding:0;max-width:720px} body.studio :is(.legal-card,.privacy-card) .intro{font-family:var(--st-serif);font-style:italic;font-size:clamp(1.4rem,2.1vw,1.8rem);line-height:1.3;color:var(--st-ink);margin:0 0 clamp(28px,3vw,40px)} body.studio :is(.legal-card,.privacy-card) h2{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--st-ink);margin:0;padding:clamp(32px,3.4vw,44px) 0 14px;border-top:1px solid var(--st-lijn);scroll-margin-top:110px} body.studio :is(.legal-card,.privacy-card) h2:first-of-type{border-top:0;padding-top:0} body.studio :is(.legal-card,.privacy-card) .intro+h2{border-top:1px solid var(--st-lijn);padding-top:clamp(32px,3.4vw,44px)} body.studio :is(.legal-card,.privacy-card) :is(p,li){font-size:1.02rem;line-height:1.75;color:var(--st-tekst)} body.studio :is(.legal-card,.privacy-card) ul{margin:6px 0 16px;padding-left:1.2em;list-style:disc} body.studio :is(.legal-card,.privacy-card) li::marker{color:var(--st-tq)} body.studio :is(.legal-card,.privacy-card) a:not(.btn){color:var(--st-tq);text-decoration:none;border-bottom:1px solid rgba(3,83,82,.4)} body.studio :is(.legal-card,.privacy-card) a:not(.btn):hover{border-bottom-color:var(--st-tq)} body.studio :is(.legal-card,.privacy-card) strong{color:var(--st-ink)} body.studio .legal-card .svc-benefits{margin:22px 0 28px !important} body.studio .legal-card .svc-benefit strong{font-size:clamp(1.2rem,1.6vw,1.4rem)} body.studio .legal-card .svc-benefit span{font-size:.94rem} /* inhoudsopgave (studio.js bouwt hem uit de koppen) */ body.studio .st-inhoud{display:none} @media (min-width:1025px){ body.studio .legal-body>.container:has(>.st-inhoud){display:grid;grid-template-columns:minmax(200px,.3fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:start} body.studio .legal-body>.container:has(>.st-inhoud)>*{grid-column:2} body.studio .st-inhoud{display:block;grid-column:1 !important;grid-row:1 / span 9;position:sticky;top:110px;max-height:calc(100vh - 140px);overflow:auto;padding-right:8px} } body.studio .st-inhoud p{margin:0 0 14px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-tq);display:flex;align-items:center;gap:10px} body.studio .st-inhoud p::before{content:"";width:22px;height:1px;background:currentColor} body.studio .st-inhoud ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--st-lijn)} body.studio .st-inhoud a{display:grid;grid-template-columns:2.1em minmax(0,1fr);gap:4px;padding:6px 0 6px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:.88rem;line-height:1.35;color:var(--st-grijs);text-decoration:none;transition:color .2s,border-color .2s} body.studio .st-inhoud a b{font-weight:600;font-variant-numeric:tabular-nums;color:inherit;opacity:.7} body.studio .st-inhoud a:hover{color:var(--st-ink)} body.studio .st-inhoud a.is-actief{color:var(--st-ink);border-left-color:var(--koraal,#E56B4C)} /* 404 */ body.studio .nf-wrap{position:relative;overflow:hidden;isolation:isolate;display:block;min-height:100dvh;text-align:left;background:var(--st-nacht);padding:clamp(150px,15vw,200px) 0 clamp(72px,8vw,110px)} body.studio .nf-wrap::before{content:"";position:absolute;z-index:0;right:-20vw;top:-30vw;width:min(90vw,1200px);aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(143,214,202,.22) 0%,rgba(143,214,202,.1) 26%,rgba(143,214,202,0) 64%);animation:stLicht 26s ease-in-out infinite alternate-reverse;will-change:transform} body.studio .nf-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background-size:180px 180px;background-image:var(--st-korrel)} body.studio .nf-binnen{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);row-gap:clamp(48px,6vw,80px);align-items:end} body.studio .nf-code{grid-column:1 / -1;margin:0;font-family:var(--st-cond);font-weight:800;font-size:clamp(9rem,30vw,26rem);line-height:.78;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(143,214,202,.55)} body.studio .nf-wrap h1{font-family:var(--st-cond);font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;font-size:clamp(2.4rem,4.6vw,4.4rem);color:var(--st-creme);margin:0;max-width:10em;text-wrap:balance} body.studio .nf-wrap .nf-tekst>p{margin:clamp(20px,2.4vw,28px) 0 0;max-width:44ch;font-size:1.08rem;line-height:1.6;color:rgba(245,241,232,.72)} body.studio .nf-actions{justify-content:flex-start;margin-top:clamp(28px,3vw,38px)} body.studio .nf-actions .btn-primary{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)} body.studio .nf-actions .btn-primary:hover{background:var(--st-creme);border-color:var(--st-creme);color:var(--st-nacht)} body.studio .nf-actions .btn-ghost{border:1px solid rgba(245,241,232,.4);color:var(--st-creme);background:none} body.studio .nf-actions .btn-ghost:hover{background:rgba(143,214,202,.12);border-color:var(--st-mint);color:var(--st-creme)} body.studio .nf-links-kop{margin:0 0 6px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mint)} body.studio .nf-links ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--st-lijn-licht)} body.studio .nf-links li{border-bottom:1px solid var(--st-lijn-licht)} body.studio .nf-links a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;font-size:clamp(1.4rem,2vw,1.8rem);line-height:1;color:var(--st-creme);text-decoration:none;transition:color .25s,padding .35s var(--st-ease)} body.studio .nf-links a::after{content:"\2192";font-family:var(--font-body);font-weight:400;font-size:1.2rem;transition:transform .3s var(--st-ease)} body.studio .nf-links a:hover,body.studio .nf-links a:focus-visible{color:var(--st-mint);padding-left:8px} body.studio .nf-links a:hover::after{transform:translateX(6px)} @media (max-width:900px){ body.studio :is(.legal-hero,.nf-wrap){padding-top:clamp(120px,30vw,150px)} body.studio :is(.legal-hero,.nf-wrap)::before{width:120vw;left:-40vw;right:auto;top:-30vw;animation:none} body.studio .nf-binnen{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ body.studio :is(.legal-hero,.nf-wrap)::before{animation:none} body.studio .nf-links a:hover{padding-left:0} } body.studio :is(.legal-card,.privacy-card) .intro{font-size:clamp(1.25rem,1.7vw,1.5rem)} body.studio .legal-card .svc-benefits:has(>.svc-benefit:nth-child(3):last-child){grid-template-columns:1fr} body.studio .legal-card .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit{grid-template-columns:44px minmax(0,1fr);padding-right:0} body.studio .legal-card .svc-benefits:has(>.svc-benefit:nth-child(3):last-child) .svc-benefit::before{grid-row:1 / span 2;padding-top:.3em;margin:0} /* onderzoekspagina (li-page): eigen onderdelen in studio-maat */ @media (min-width:901px){ body.studio.li-page .li-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} body.studio.li-page .li-kpis .result-stat:nth-child(4){border-left:0;padding-left:0} body.studio.li-page .li-kpis .result-stat:nth-child(n+4){border-top:1px solid var(--st-lijn);margin-top:22px;padding-top:22px} } body.studio.li-page .svc-section p.li-feature-num{font-family:var(--st-cond);font-weight:800;font-size:clamp(7rem,15vw,13rem);line-height:.8;letter-spacing:-.02em;color:var(--koraal,#E56B4C);max-width:none;margin:0} body.studio.li-page .svc-section p.li-feature-claim{font-family:var(--st-serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.2;color:var(--st-creme);max-width:24ch} body.studio.li-page .li-finding{border-radius:6px;box-shadow:none} body.studio.li-page .li-finding-num{font-family:var(--st-cond);font-weight:800;letter-spacing:-.01em;font-size:clamp(3rem,6vw,4.4rem)} body.studio.li-page .li-finding h3{font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1;margin-bottom:12px} /* ========================================================================== Casepagina, scroll-act "Wat we deden" (27 okt 2026, proef Projectbouw) Links de kop en per stap één bijschrift dat met het scrollen wisselt, rechts de site. Geen paneel meer over het beeld heen. ========================================================================== */ body.studio.k3 .k3-podium__sub{margin:14px 0 0;font-size:.95rem;line-height:1.5;color:rgba(245,241,232,.62)} body.studio.k3 .k3-noten--stap{grid-column:1 / span 4;grid-row:2;align-self:end;margin:0;padding:22px 0 0;background:none;backdrop-filter:none;border:0;border-top:1px solid rgba(245,241,232,.14);border-radius:0;box-shadow:none;display:grid;gap:0;position:relative} body.studio.k3 .k3-noten--stap::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;transform:scaleX(var(--sc-p,0));transform-origin:0 50%;background:var(--st-mint)} body.studio.k3 .k3-noten--stap li{grid-area:1 / 1;display:block;font-size:inherit;color:inherit} body.studio.k3 .k3-noten--stap li::before{content:none} body.studio.k3 .k3-noot__nr{display:block;margin:0 0 12px;font:600 .8rem/1 var(--font-body);letter-spacing:.14em;color:var(--st-mint)} body.studio.k3 .k3-noot__nr i{font-style:normal;color:rgba(245,241,232,.4)} body.studio.k3 .k3-noten--stap h3{margin:0 0 12px;font-family:var(--st-cond);font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.95;font-size:clamp(1.6rem,2.2vw,2.2rem);color:var(--st-creme)} body.studio.k3 .k3-noten--stap p{margin:0;font-size:.98rem;line-height:1.6;color:rgba(245,241,232,.72);max-width:34ch} @media (max-width:760px){ body.studio.k3 .k3-noten--stap{padding-top:16px} body.studio.k3 .k3-noten--stap li:nth-child(n+3){display:block} body.studio.k3 .k3-noten--stap h3{font-size:1.35rem;margin-bottom:8px} body.studio.k3 .k3-noten--stap p{font-size:.88rem;line-height:1.5} body.studio.k3 .k3-podium__sub{display:none} } /* minder beweging: de act is een gewone sectie, alle stappen als lijst, de site scrollbaar */ body.studio.k3 .k3-pin--los{height:auto !important;padding:0 0 clamp(40px,5vw,72px)} body.studio.k3 .k3-pin--los [data-sc-stage]{position:static !important;height:auto !important} body.studio.k3 .k3-pin--los .k3-podium{position:relative;inset:auto;margin:0 var(--k3-g);row-gap:28px} body.studio.k3 .k3-pin--los [data-sc-cue]{opacity:1 !important;transform:none !important} body.studio.k3 .k3-pin--los .k3-browser__raam{--raam:560px;overflow-y:auto} body.studio.k3 .k3-pin--los .k3-noten--stap{align-self:start;gap:26px} body.studio.k3 .k3-pin--los .k3-noten--stap::before{content:none} body.studio.k3 .k3-pin--los .k3-noten--stap li{grid-area:auto} @media (min-width:761px){body.studio.k3 .k3-pin--los .k3-noten--stap{grid-column:1 / span 4}} /* casepagina: telefoon met statusbalk, knop naar de live site, bron bij de cijfers (27 okt 2026) */ body.studio.k3 .k3-iphone--status img{box-sizing:border-box;aspect-ratio:780 / 1688;object-fit:cover;object-position:50% 0;padding-top:15%;background:#151517} body.studio.k3 .k3-live{width:fit-content;align-self:flex-start;justify-self:start;margin-top:clamp(22px,2.6vw,30px);min-height:50px;padding:0 24px} body.studio.k3 .k3-podium__live{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 18px;border-radius:999px;border:1px solid rgba(245,241,232,.35);color:var(--st-creme);font-size:.9rem;font-weight:600;text-decoration:none;transition:background .25s,border-color .25s,color .25s} body.studio.k3 .k3-podium__live:hover,body.studio.k3 .k3-podium__live:focus-visible{background:var(--st-mint);border-color:var(--st-mint);color:var(--st-nacht)} body.studio.k3 .k3-winst__bron{margin:22px 0 0;max-width:72ch;font-size:.8rem;line-height:1.55;color:rgba(245,241,232,.6)} @media (max-width:760px){body.studio.k3 .k3-pin:not(.k3-pin--los) .k3-podium__live{display:none}} /* ============================================================================= FAYLUX MEDIA - reviews.css Google-reviewbadges (navigatie, conversieknoppen, footer) en het live reviewblok. Bouwt voort op de tokens en .review-card/.rv-score uit home.css. ========================================================================== */ .rv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Iconen ------------------------------------------------------------- */ .rv-g { display: inline-block; flex: none; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.5 12.2c0-.7-.06-1.4-.18-2.06H12v3.9h5.9a5.05 5.05 0 0 1-2.19 3.32v2.76h3.54c2.07-1.91 3.25-4.72 3.25-7.92z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.54-2.76c-.98.66-2.24 1.05-3.74 1.05-2.87 0-5.3-1.94-6.17-4.55H2.18v2.85A11 11 0 0 0 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.83 14.08a6.6 6.6 0 0 1 0-4.16V7.07H2.18a11 11 0 0 0 0 9.86l3.65-2.85z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.2 1.64l3.14-3.14C17.45 2.1 14.96 1 12 1A11 11 0 0 0 2.18 7.07l3.65 2.85C6.7 7.32 9.13 5.38 12 5.38z'/%3E%3C/svg%3E") center / contain no-repeat; } .rv-star { display: inline-block; flex: none; width: 13px; height: 13px; background: var(--koraal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3C/svg%3E") center / contain no-repeat; } .rv-stars { --rv-size: 16px; --rv-empty: var(--grijs-licht); display: inline-block; flex: none; vertical-align: -2px; width: calc(var(--rv-size) * 5); height: var(--rv-size); background: linear-gradient(90deg, var(--koraal) var(--rv-pct, 100%), var(--rv-empty) var(--rv-pct, 100%)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath transform='translate(0 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(24 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(48 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(72 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(96 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cpath transform='translate(0 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(24 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(48 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(72 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3Cpath transform='translate(96 0)' d='M12 2.5l2.9 6.06 6.6.78-4.9 4.5 1.32 6.56L12 17.9 6.08 20.9 7.4 14.34 2.5 9.84l6.6-.78L12 2.5z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; } .rv-stars--badge { --rv-size: 12px; } .rv-stars--strip { --rv-size: 15px; } .rv-stars--kaart { --rv-size: 15px; } footer .rv-stars { --rv-empty: rgba(245, 241, 232, 0.25); } /* ---- Badge (gedeeld) ---------------------------------------------------- */ .rv-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 500; line-height: 1.2; color: inherit; white-space: nowrap; text-decoration: none; } .rv-badge strong { font-weight: 700; color: inherit; } .rv-badge:hover .rv-badge__txt { text-decoration: underline; text-underline-offset: 3px; } .rv-badge:focus-visible { outline: 3px solid rgba(14, 147, 132, 0.45); outline-offset: 3px; border-radius: 100px; } /* Navigatie: eigen pil, leesbaar op de donkere hero en op de witte balk. Compact (G ★ 5,0); vanaf 1280px volledig. */ .rv-badge--header { height: 32px; min-width: 60px; margin-left: 14px; padding: 0 12px; color: var(--zwart); background: var(--kaart); border: 1px solid var(--grijs-licht); border-radius: 100px; box-shadow: var(--shadow-soft); } .rv-badge--header .rv-stars--badge, .rv-badge--header .rv-badge__count { display: none; } @media (min-width: 1280px) { .rv-badge--header .rv-stars--badge { display: inline-block; } .rv-badge--header .rv-badge__count { display: inline; } .rv-badge--header .rv-star { display: none; } } @media (max-width: 900px) { .rv-badge--header { margin-right: auto; } } @media (max-width: 440px) { .rv-badge--header { padding: 0 9px; gap: 4px; margin-left: 8px; } .rv-badge--header .rv-badge__word { display: none; } } /* Onder conversieknoppen */ .rv-cta-wrap { margin: 14px 0 0; max-width: none; } .rv-badge--cta { color: var(--grijs); } .rv-cta-wrap .rv-badge--cta { min-width: 17em; } /* Pil met tekst erachter (prijzen): ruimte voor de live tekst, zodat de link niet verschuift. */ .review-strip > [data-rv-strip] { display: inline-block; min-width: 11.8em; } .rv-badge--cta strong { color: var(--zwart); } /* Donkere secties: lichte tekst */ .svc-final .rv-badge--cta, .svc-section.ink .rv-badge--cta, .svc-hero .rv-badge--cta, .loc-final .rv-badge--cta, .pricing-cta-inner .rv-badge--cta, .about-cta-inner .rv-badge--cta, .portfolio-section .rv-badge--cta { color: var(--creme-zacht); } .svc-final .rv-badge--cta strong, .svc-section.ink .rv-badge--cta strong, .svc-hero .rv-badge--cta strong, .loc-final .rv-badge--cta strong, .pricing-cta-inner .rv-badge--cta strong, .about-cta-inner .rv-badge--cta strong, .portfolio-section .rv-badge--cta strong { color: var(--creme-tekst); } /* Footer */ .rv-badge--footer { display: flex; width: max-content; margin: -6px 0 20px; padding: 6px 14px; border: 1px solid var(--ink-lijn); border-radius: 100px; color: var(--creme-zacht); } .rv-badge--footer strong { color: var(--creme-tekst); } .rv-badge--footer .rv-star { display: none; } /* ---- Reviewblok --------------------------------------------------------- */ .rv-block[hidden] { display: none; } .rv-block .rv-kop { margin-bottom: clamp(24px, 3vw, 36px); } .rv-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 82%); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; min-height: 300px; } .rv-block.is-live .rv-grid { min-height: 0; } .rv-grid > * { scroll-snap-align: start; } @media (min-width: 900px) { .rv-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } } .rv-block .rv-card:nth-child(n+4) { display: none; } @media (min-width: 1200px) { .rv-grid[data-count="4"], .rv-grid[data-count="5"] { grid-template-columns: repeat(4, 1fr); } .rv-block .rv-card:nth-child(4) { display: flex; } } .rv-grid:focus-visible { outline: 3px solid rgba(14, 147, 132, 0.45); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .rv-grid { scroll-behavior: auto; scroll-snap-type: none; } } .rv-skel { min-height: 300px; border-radius: var(--radius); background: var(--kaart); border: 1px solid var(--grijs-licht); } .rv-card { position: relative; } .rv-grid .review-card { width: auto; min-width: 0; flex-shrink: 1; } .rv-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .rv-card__time { font-size: 0.8rem; color: var(--grijs); } .rv-card .review-tekst { -webkit-line-clamp: unset; display: block; } .rv-card__more { align-self: flex-start; margin: -4px 0 14px; font-size: 0.85rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; } .rv-card .review-naam a { color: inherit; text-decoration: none; } .rv-card .review-naam a:hover { text-decoration: underline; } .rv-card .review-bron .rv-g { width: 15px; height: 15px; } .rv-attrib { margin-top: 16px; font-size: 0.82rem; color: var(--grijs); display: flex; align-items: center; gap: 8px; } .rv-gmaps { font-family: Roboto, Arial, sans-serif; font-weight: 500; color: #5E5E5E; } .rv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* ========================================================================= FayLux cases, versie 3 (okt 2026). Overzicht: twee cases naast elkaar die per rij om en om van links en rechts inschuiven. Casepagina: secties in afgeronde, asymmetrische panelen met zachte kleurovergangen. Alle klassen beginnen met k3-. Laadt na home/sub.min.css. ========================================================================= */ :root { --sc-canvas: #F5F0E8; --sc-surface: #FFFDF8; --sc-ink: #0C1D23; --sc-ink-soft: #5E584E; --sc-accent: #0A5A50; --sc-accent-ink: #F5F1E8; --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif; --sc-font-text: "Manrope", system-ui, sans-serif; --k3-nacht: #0C1D23; --k3-diep: #0A181D; --k3-mint: #8FD6CA; --k3-teal: #0A5A50; --k3-koraal: #C24E33; --k3-creme: #F5F0E8; --k3-papier: #FBF8F2; --k3-wash: #ECE5D8; --k3-lijn: #DDD4C4; --k3-zacht: #5E584E; --k3-r: 32px; --k3-r-m: 22px; --k3-r-s: 14px; --k3-nav: 84px; --k3-g: clamp(18px, 3vw, 44px); --k3-max: 1520px; --k3-ease: cubic-bezier(.22, 1, .36, 1); } body.k3 { letter-spacing: normal; background: var(--k3-creme); transition: background-color .9s var(--k3-ease); } .k3 :focus-visible { outline: 3px solid var(--k3-koraal); outline-offset: 3px; border-radius: 8px; } .k3-wrap { max-width: var(--k3-max); margin: 0 auto; padding: 0 var(--k3-g); } .k3-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .78rem/1 var(--sc-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--k3-koraal); } .k3-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: currentColor; } .k3-h { margin: 0; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -.03em; line-height: .98; color: var(--k3-nacht); text-wrap: balance; } .k3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .k3-chips li { font-size: .82rem; font-weight: 500; padding: 7px 13px; border-radius: 999px; background: rgba(10,90,80,.08); color: var(--k3-teal); border: 1px solid rgba(10,90,80,.14); } /* ---------- browservenster ---------- */ .k3-browser { border-radius: var(--k3-r-m); overflow: hidden; background: #fff; box-shadow: 0 2px 0 rgba(12,29,35,.04), 0 50px 90px -40px rgba(12,29,35,.45); } .k3-browser__balk { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #F1ECE3; border-bottom: 1px solid #E3DBCD; } .k3-browser__balk i { width: 9px; height: 9px; border-radius: 50%; background: #D3C9B8; } .k3-browser__balk span { margin-left: 10px; font-size: .74rem; color: var(--k3-zacht); background: #fff; padding: 4px 12px; border-radius: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .k3-browser__raam { position: relative; overflow: hidden; height: var(--raam, 420px); background: #fff; } .k3-browser__raam img { display: block; width: 100%; max-width: none; height: auto; } @keyframes k3-auto { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + var(--raam, 420px))); } } body.k3 #main { overflow-x: clip; } .k3-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); } .k3-rij > .k3-kaart { --p: 1; opacity: calc(.15 + .85 * var(--p)); transform: translate3d(calc((1 - var(--p)) * var(--richting, -1) * 18vw), calc((1 - var(--p)) * 40px), 0); will-change: transform, opacity; } .k3-kaart { display: grid; gap: 22px; text-decoration: none; color: inherit; } .k3-kaart .k3-chips { grid-column: 1 / -1; margin-top: 6px; } .k3-knop { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; background: var(--k3-mint); color: var(--k3-nacht); font-weight: 600; text-decoration: none; transition: transform .16s var(--k3-ease), background .2s; } .k3-knop:hover { background: #A6E0D6; color: var(--k3-nacht); } .k3-knop:active { transform: scale(.97); } .k3-knop--donker { background: var(--k3-nacht); color: #F5F1E8; } .k3-knop--donker:hover { background: var(--k3-teal); color: #F5F1E8; } /* =============================== CASEPAGINA =============================== */ .k3-sectie { padding-block: clamp(40px, 5vw, 72px); } .k3-paneel { border-radius: var(--k3-r); background: var(--k3-papier); padding: clamp(28px, 4vw, 64px); position: relative; overflow: hidden; min-width: 0; } .k3-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .k3-chero { padding-top: calc(var(--k3-nav) + clamp(40px, 6vw, 88px)); } .k3-crumb { margin: 0 0 28px; font-size: .86rem; color: var(--k3-zacht); } .k3-crumb a { color: inherit; } .k3-chero__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: end; } .k3-chero__titel { grid-column: 1 / span 8; display: grid; gap: 26px; } .k3-chero h1 { font-size: clamp(2.6rem, 7.6vw, 7.8rem); hyphens: auto; overflow-wrap: break-word; } .k3-meta { grid-column: 9 / span 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; transform: translateY(-20px); } .k3-meta div { border-radius: var(--k3-r-s); background: var(--sc-surface); padding: 14px 16px; display: grid; gap: 4px; box-shadow: 0 1px 0 rgba(12,29,35,.04); } .k3-meta div:nth-child(2) { transform: translateY(18px); } .k3-meta div:nth-child(4) { transform: translateY(18px); } .k3-meta dt { font-size: .74rem; color: var(--k3-zacht); } .k3-meta dd { margin: 0; font-weight: 600; font-size: .95rem; line-height: 1.35; overflow-wrap: break-word; hyphens: auto; } .k3-meta a { color: var(--k3-teal); } .k3-chero__beeld { margin-top: clamp(40px, 5vw, 72px); border-radius: var(--k3-r); background: linear-gradient(160deg, var(--k3-teal), var(--k3-nacht)); padding: clamp(28px, 5vw, 80px) clamp(20px, 6vw, 120px) 0; overflow: hidden; position: relative; } .k3-chero__beeld::before { content: ""; position: absolute; left: -15%; top: -60%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,202,.3), transparent 62%); } .k3-chero__beeld .k3-browser { border-radius: 18px 18px 0 0; position: relative; } .k3-chero__beeld .k3-browser__raam { --raam: min(62vh, 640px); } .k3-chero__foto { position: relative; border-radius: 18px 18px 0 0; overflow: hidden; aspect-ratio: 16 / 8; } .k3-chero__foto img, .k3-chero__foto video { width: 100%; height: 100%; object-fit: cover; display: block; } .k3-slot-mark { position: relative; display: grid; place-items: center; gap: 18px; padding: clamp(60px, 8vw, 120px) 0; color: #F5F1E8; text-align: center; } .k3-slot-mark img { width: 140px; filter: brightness(0) invert(.94); } .k3-slot-mark p { margin: 0; display: inline-flex; gap: 10px; align-items: center; font-size: .95rem; color: #C9D8D5; } .k3-opdracht { grid-column: 1 / span 7; } .k3-probleem { grid-column: 8 / span 5; margin-top: clamp(40px, 8vw, 120px); background: var(--k3-nacht); color: #F5F1E8; } .k3-paneel h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); margin: 18px 0 22px; } .k3-paneel p { margin: 0 0 16px; font-size: 1.1rem; line-height: 1.75; color: #3D3A33; max-width: 60ch; text-wrap: pretty; } .k3-probleem h2, .k3-probleem p { color: #F5F1E8; } .k3-probleem p { color: #D6E2DF; } .k3-probleem .k3-eyebrow { color: var(--k3-mint); } .k3-opdracht .k3-big { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.2; color: var(--k3-teal); max-width: 26ch; } .k3-opdracht .k3-rest { margin-top: 20px; font-size: 1.05rem; line-height: 1.65; color: var(--k3-zacht); max-width: 60ch; text-wrap: pretty; } .k3-stappen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .k3-stappen__kop { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 8px; } .k3-stappen__kop h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); } .k3-stap { grid-column: span 6; background: var(--sc-surface); border-radius: var(--k3-r-m); padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; align-content: start; min-height: 220px; position: relative; overflow: hidden; } .k3-stap:nth-of-type(4n+1) { grid-column: span 7; } .k3-stap:nth-of-type(4n+2) { grid-column: span 5; margin-top: 48px; } .k3-stap:nth-of-type(4n+3) { grid-column: span 5; } .k3-stap:nth-of-type(4n+4) { grid-column: span 7; margin-top: -48px; } .k3-stap:last-child:nth-of-type(odd) { grid-column: 3 / span 8; margin-top: 0; } .k3-stap__nr { font-family: var(--sc-font-display); font-weight: 800; font-size: 4.4rem; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px rgba(10,90,80,.35); } .k3-stap h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--k3-nacht); } .k3-stap p { margin: 0; font-size: 1rem; line-height: 1.65; color: #3D3A33; } .k3-pin { background: transparent; } .k3-podium { position: absolute; inset: calc(var(--k3-nav) + 14px) var(--k3-g) 14px; max-width: calc(var(--k3-max) - 2 * var(--k3-g)); margin: 0 auto; border-radius: var(--k3-r); background: var(--k3-nacht); color: #F5F1E8; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 18px; padding: clamp(26px, 3.4vw, 52px); overflow: hidden; } .k3-podium::before { content: ""; position: absolute; left: -20%; bottom: -50%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,202,.16), transparent 65%); pointer-events: none; } .k3-podium__kop { grid-column: 1 / span 4; grid-row: 1; position: relative; } .k3-podium__kop h2 { margin: 16px 0 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.02; letter-spacing: -.02em; color: #F5F1E8; text-wrap: balance; } .k3-podium__kop .k3-eyebrow { color: var(--k3-mint); } .k3-podium .k3-browser { grid-column: 5 / span 8; grid-row: 1 / span 2; align-self: center; position: relative; } .k3-podium .k3-browser__balk { background: #11272E; border-bottom-color: rgba(255,255,255,.06); } .k3-podium .k3-browser__balk i { background: #2B3F45; } .k3-podium .k3-browser__balk span { background: #0E2026; color: #C9D8D5; } .k3-podium .k3-browser__raam { --raam: min(calc(100vh - var(--k3-nav) - 200px), 660px); } .k3-podium .k3-browser__raam img { will-change: transform; transform: translateY(calc(min(1, var(--sc-p, 0) * 1.08) * (-100% + var(--raam)))); } .k3-noten { grid-column: 1 / span 5; grid-row: 2; align-self: end; z-index: 2; margin: 0 -72px 0 0; padding: 22px 24px; list-style: none; display: grid; gap: 14px; border-radius: var(--k3-r-m); background: rgba(23,50,58,.92); backdrop-filter: blur(8px); border: 1px solid rgba(143,214,202,.18); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); } .k3-noten li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; font-size: .95rem; line-height: 1.45; color: #C9D8D5; } .k3-noten li b { color: #F5F1E8; font-weight: 600; } .k3-noten li::before { content: attr(data-n); font: 700 .78rem/24px var(--sc-font-text); color: var(--k3-nacht); background: var(--k3-mint); border-radius: 50%; width: 24px; height: 24px; text-align: center; } .k3-galerij { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .k3-galerij figure { margin: 0; border-radius: var(--k3-r); overflow: hidden; background: var(--k3-wash); } .k3-galerij img, .k3-galerij video { display: block; width: 100%; height: 100%; object-fit: cover; } .k3-galerij__groot { grid-column: span 8; grid-row: span 2; } .k3-galerij__klein { grid-column: span 4; aspect-ratio: 1; } .k3-voorna { grid-column: 1 / -1; } .k3-voorna h2 { font-size: clamp(2.2rem, 4.4vw, 4.2rem); margin-bottom: 36px; } .k3-vn { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid var(--k3-lijn); } .k3-vn:last-child { border-bottom: 1px solid var(--k3-lijn); } .k3-vn svg { width: 120px; height: 24px; overflow: visible; } .k3-vn path { stroke: var(--k3-teal); stroke-width: 2; fill: none; stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1.1s var(--k3-ease); } .k3-vn.is-in path { stroke-dashoffset: 0; } .k3-scores { grid-column: span 7; background: var(--sc-surface); } .k3-scores__ringen { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 18px; margin-top: 28px; } .k3-ring { display: grid; justify-items: center; gap: 10px; text-align: center; } .k3-ring__schijf { position: relative; width: min(150px, 100%); aspect-ratio: 1; } .k3-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .k3-ring circle { fill: none; stroke-width: 9; } .k3-ring .k3-ring__bg { stroke: var(--k3-wash); } .k3-ring .k3-ring__boog { stroke: var(--k3-teal); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transition: stroke-dashoffset 1.6s var(--k3-ease); } .k3-ring.is-in .k3-ring__boog { stroke-dashoffset: calc(314 - 314 * var(--waarde) / 100); } .k3-ring__getal { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--sc-font-display); font-weight: 700; font-size: 2.2rem; color: var(--k3-nacht); } .k3-ring span { font-size: .88rem; color: var(--k3-zacht); } .k3-snel { grid-column: span 5; background: var(--k3-mint); display: grid; align-content: space-between; gap: 24px; } .k3-snel b { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(5rem, 10vw, 9rem); line-height: .82; letter-spacing: -.05em; color: var(--k3-nacht); } .k3-snel p { margin: 0; font-size: 1.05rem; color: var(--k3-nacht); max-width: 30ch; } .k3-bron { margin: 22px 0 0; font-size: .8rem; color: var(--k3-zacht); } .k3-snel .k3-bron { color: #1F4A44; } .k3-winst { grid-column: 1 / -1; background: linear-gradient(150deg, var(--k3-teal), #0B4A43); color: #F5F1E8; } .k3-winst h2 { color: #F5F1E8; font-size: clamp(2.2rem, 4.4vw, 4.2rem); } .k3-winst .k3-eyebrow { color: var(--k3-mint); } .k3-winst__getallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 36px; } .k3-winst__getal { border-top: 1px solid rgba(245,241,232,.25); padding-top: 22px; display: grid; gap: 10px; } .k3-winst__getal b { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(3rem, 5.6vw, 5.2rem); line-height: .9; letter-spacing: -.03em; color: var(--k3-mint); } .k3-winst__getal span { font-size: 1rem; line-height: 1.5; color: #DCEBE8; max-width: 28ch; } .k3-grafiek { margin-top: 44px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; background: rgba(12,29,35,.25); border-radius: var(--k3-r-m); padding: clamp(22px, 3vw, 40px); } .k3-grafiek__tekst { grid-column: span 5; display: grid; gap: 10px; } .k3-grafiek__tekst strong { font-family: var(--sc-font-display); font-size: 1.5rem; font-weight: 600; color: #F5F1E8; } .k3-grafiek__tekst span { font-size: .84rem; color: #C9D8D5; } .k3-grafiek__staven { grid-column: span 7; display: flex; align-items: flex-end; gap: clamp(18px, 4vw, 64px); height: 260px; padding: 0 12px; border-bottom: 1px solid rgba(245,241,232,.3); } .k3-staaf { flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 10px; height: 100%; } .k3-staaf b { font-family: var(--sc-font-display); font-size: 2rem; color: #F5F1E8; } .k3-staaf i { align-self: end; width: 100%; max-width: 140px; height: calc(var(--h) * 1%); border-radius: 14px 14px 0 0; background: rgba(143,214,202,.35); transform: scaleY(0); transform-origin: bottom; transition: transform 1.3s var(--k3-ease); } .k3-staaf--na i { background: var(--k3-mint); transition-delay: .25s; } .k3-grafiek.is-in .k3-staaf i { transform: scaleY(1); } .k3-staaf small { font-size: .78rem; color: #C9D8D5; padding-bottom: 6px; } .k3-reis { grid-column: 1 / -1; background: var(--sc-surface); } .k3-tijd { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 18px; position: relative; } .k3-tijd::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--k3-lijn); } .k3-tijd::after { content: ""; position: absolute; left: 0; top: 7px; height: 2px; width: 100%; background: var(--k3-teal); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--k3-ease); } .k3-tijd.is-in::after { transform: scaleX(1); } .k3-tijd li { position: relative; padding-top: 34px; display: grid; gap: 8px; } .k3-tijd li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--k3-teal); border: 3px solid var(--sc-surface); box-shadow: 0 0 0 1px var(--k3-teal); } .k3-tijd time { font-size: .8rem; color: var(--k3-zacht); } .k3-tijd strong { font-family: var(--sc-font-display); font-size: 1.3rem; font-weight: 600; color: var(--k3-nacht); } .k3-tijd p { margin: 0; font-size: .95rem; line-height: 1.55; color: #3D3A33; } .k3-review { grid-column: 2 / span 10; background: var(--sc-surface); text-align: left; } .k3-sterren { display: flex; gap: 6px; color: #E8A93B; font-size: 1.4rem; } .k3-sterren span { opacity: 0; transform: scale(.6) rotate(-20deg); transition: opacity .4s, transform .5s var(--k3-ease); } .k3-review.is-in .k3-sterren span { opacity: 1; transform: none; } .k3-review.is-in .k3-sterren span:nth-child(2) { transition-delay: .08s; } .k3-review.is-in .k3-sterren span:nth-child(3) { transition-delay: .16s; } .k3-review.is-in .k3-sterren span:nth-child(4) { transition-delay: .24s; } .k3-review.is-in .k3-sterren span:nth-child(5) { transition-delay: .32s; } .k3-review blockquote { margin: 26px 0 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.2; letter-spacing: -.015em; color: var(--k3-nacht); max-width: 34ch; text-wrap: pretty; } .k3-review blockquote.k3-lang { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.45; max-width: 56ch; } .k3-review figcaption { margin-top: 28px; display: flex; align-items: center; gap: 14px; font-size: .95rem; color: var(--k3-zacht); } .k3-review figcaption strong { color: var(--k3-nacht); } .k3-review__g { width: 44px; height: 44px; border-radius: 50%; background: var(--k3-wash); display: grid; place-items: center; font-family: var(--sc-font-display); font-weight: 800; color: var(--k3-teal); flex: none; } /* zachte entree voor panelen */ .k3-in { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--k3-ease), transform .9s var(--k3-ease); } .k3-in.is-in { opacity: 1; transform: none; } /* ---------- tablet en telefoon ---------- */ @media (max-width: 1080px) { .k3-chero__titel, .k3-meta { grid-column: 1 / -1; } .k3-meta { transform: none; grid-template-columns: repeat(4, minmax(0, 1fr)); } .k3-meta div:nth-child(2), .k3-meta div:nth-child(4) { transform: none; } } @media (max-width: 760px) { :root { --k3-nav: 68px; } .k3-rij { grid-template-columns: 1fr; } .k3-rij > .k3-kaart:nth-child(2) { --richting: calc(var(--richting, -1) * -1); } .k3-grid > *, .k3-stappen > *, .k3-galerij > * { grid-column: 1 / -1 !important; margin-top: 0 !important; } .k3-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k3-podium { inset: calc(var(--k3-nav) + 8px) 12px calc(14px + 66px); grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: start; gap: 14px; padding: 22px 18px; } .k3-podium > * { grid-column: 1 / -1 !important; grid-row: auto !important; } .k3-podium .k3-browser { align-self: start; } .k3-podium .k3-browser__raam { --raam: max(200px, calc(100svh - var(--k3-nav) - 450px)); } .k3-podium__kop h2 { font-size: 1.55rem; margin-top: 10px; } .k3-noten { margin: 0; padding: 16px 18px; } .k3-noten li:nth-child(n+3) { display: none; } .k3-vn, .k3-kolkop { grid-template-columns: 1fr; gap: 8px; } .k3-vn svg, .k3-kolkop { display: none; } .k3-grafiek__tekst, .k3-grafiek__staven { grid-column: 1 / -1; } .k3-grafiek__staven { height: 200px; } .k3-tijd { grid-template-columns: 1fr; gap: 26px; } .k3-tijd::before, .k3-tijd::after { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; } .k3-tijd::after { transform: scaleY(0); transform-origin: top; } .k3-tijd.is-in::after { transform: scaleY(1); } .k3-tijd li { padding: 0 0 0 34px; } } @media (prefers-reduced-motion: reduce) { .k3-rij > .k3-kaart { opacity: 1; transform: none; } .k3-browser--auto img, .k3-podium .k3-browser__raam img { animation: none; transform: none; } .k3-podium .k3-browser__raam { overflow-y: auto; } .k3-in { opacity: 1; transform: none; } } /* ---------- 18 okt 2026: case-info als één blok + "Wat het opleverde" in beweging ---------- */ /* Case-info (Branche, Plaats, Resultaat, Live): één kaart met een teal-mint accentrand en dunne scheidingslijnen in plaats van vier losse tegeltjes. */ .k3-meta { gap: 0; transform: none; align-self: end; background: var(--sc-surface); border-radius: var(--k3-r-m); box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.05), 0 22px 48px rgba(12,29,35,.08); overflow: hidden; position: relative; } .k3-meta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--k3-teal), var(--k3-mint)); } .k3-meta div, .k3-meta div:nth-child(2), .k3-meta div:nth-child(4) { transform: none; background: none; border-radius: 0; box-shadow: none; padding: 22px 22px 20px; gap: 6px; } .k3-meta div:nth-child(odd) { border-right: 1px solid var(--k3-lijn); } .k3-meta div:nth-child(-n+2) { border-bottom: 1px solid var(--k3-lijn); } .k3-meta dt { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--k3-koraal); } .k3-meta dd { font-size: 1rem; color: var(--k3-nacht); } .k3-meta a { text-decoration: none; overflow-wrap: anywhere; border-bottom: 1.5px solid rgba(10,90,80,.3); transition: border-color .2s; } .k3-meta a:hover { border-color: var(--k3-teal); } @media (max-width: 1080px) { .k3-meta div:nth-child(odd), .k3-meta div:nth-child(-n+2) { border: 0; } .k3-meta div:not(:last-child) { border-right: 1px solid var(--k3-lijn); } } @media (max-width: 760px) { .k3-meta div, .k3-meta div:not(:last-child) { border: 0; } .k3-meta div:nth-child(odd) { border-right: 1px solid var(--k3-lijn); } .k3-meta div:nth-child(-n+2) { border-bottom: 1px solid var(--k3-lijn); } .k3-meta div { padding: 18px 16px 16px; } } /* "Wat het opleverde": een langzaam drijvende mint-gloed, lijnen die zich tekenen, getallen die optellen (cases-v3.js) en een ring bij scores. */ .k3-winst::after { content: ""; position: absolute; right: -18%; top: -55%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(143,214,202,.24), transparent 62%); animation: k3Gloed 18s ease-in-out infinite alternate; pointer-events: none; } @keyframes k3Gloed { from { transform: translate(0, 0); } to { transform: translate(-38%, 46%); } } .k3-winst > * { position: relative; z-index: 1; } .k3-winst__getal { position: relative; border-top: 0; padding-top: 26px; } .k3-winst__getal::before, .k3-winst__getal::after { content: ""; position: absolute; top: 0; left: 0; right: 0; border-radius: 2px; } .k3-winst__getal::before { height: 1px; background: rgba(245,241,232,.22); } .k3-winst__getal::after { top: -1px; height: 3px; background: var(--k3-mint); transform: scaleX(0); transform-origin: left center; transition: transform 1.3s var(--k3-ease) calc(.25s + var(--i, 0) * .15s); } .k3-winst.is-in .k3-winst__getal::after { transform: scaleX(1); } .k3-winst__getal b { font-variant-numeric: tabular-nums; } .k3-winst__ring { position: absolute; top: 26px; right: 0; width: 64px; height: 64px; transform: rotate(-90deg); } .k3-winst__ring circle { fill: none; stroke-width: 5; } .k3-winst__ring .baan { stroke: rgba(245,241,232,.14); } .k3-winst__ring .vul { stroke: var(--k3-mint); stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transition: stroke-dashoffset 1.6s var(--k3-ease) calc(.4s + var(--i, 0) * .15s); } .k3-winst.is-in .k3-winst__ring .vul { stroke-dashoffset: calc(163.4 - 163.4 * var(--pct, 0) / 100); } @media (prefers-reduced-motion: reduce) { .k3-winst::after { animation: none; } .k3-winst__getal::after { transform: scaleX(1); transition: none; } .k3-winst__ring .vul { transition: none; stroke-dashoffset: calc(163.4 - 163.4 * var(--pct, 0) / 100); } } /* Fotoknop i.p.v. de oude mobiele balk: geen extra ruimte onderaan meer nodig. */ @media (max-width: 900px) { body.k3:has(.foto-contact) { padding-bottom: 0; } } /* ---------- 18 okt 2026: kop als verhaalzin, hero desktop + iPhone, SEO-sectie ---------- */ .k3-chero .k3-eyebrow b { font-weight: 700; color: var(--k3-nacht); } .k3-chero h1.k3-h--verhaal { font-size: clamp(2.1rem, 4.1vw, 4.1rem); font-weight: 600; letter-spacing: -.022em; line-height: 1.06; max-width: 21ch; hyphens: manual; text-wrap: balance; } .k3-h--verhaal em { font-style: normal; color: var(--k3-teal); } /* Hero: desktop-screenshot met een iPhone-mockup ervoor, rechtsonder overlappend. */ .k3-chero__beeld--duo { padding: clamp(32px, 4.4vw, 70px) clamp(18px, 4vw, 80px) clamp(40px, 5vw, 80px); } .k3-duo { position: relative; max-width: 1180px; margin: 0 auto; padding-right: clamp(40px, 9vw, 150px); } .k3-duo__desktop { position: relative; border-radius: 16px; } .k3-duo__desktop img { display: block; width: 100%; height: auto; } .k3-duo__telefoon { position: absolute; right: 0; bottom: clamp(-34px, -2.6vw, -18px); width: clamp(150px, 20%, 250px); z-index: 2; } .k3-iphone { position: relative; border-radius: 15% / 7%; padding: 3.6%; background: linear-gradient(145deg, #2A2D31, #0B0C0E 55%, #23262A); box-shadow: 0 0 0 1.5px #3A3E44 inset, 0 40px 70px -20px rgba(0,0,0,.6), 0 18px 30px rgba(0,0,0,.28); } .k3-iphone img { display: block; width: 100%; height: auto; border-radius: 12% / 5.6%; } .k3-iphone__eiland { position: absolute; top: 5.4%; left: 50%; width: 30%; height: 3.1%; transform: translateX(-50%); border-radius: 999px; background: #060708; z-index: 1; } @media (max-width: 760px) { .k3-duo { padding-right: 22%; } .k3-duo__telefoon { width: 34%; bottom: -22px; } } /* SEO-sectie (alleen doorlopende SEO-klanten): waarom links, de vijf vaste onderdelen rechts als genummerde kaartjes. */ .k3-seo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); background: linear-gradient(160deg, #FBF8F2 0%, #F1F6F3 100%); } .k3-seo__kop h2 { margin: 16px 0 20px; } .k3-paneel p.k3-seo__waarom { font-size: 1.08rem; } .k3-paneel p.k3-seo__pakket { display: grid; gap: 10px; margin-top: 22px; font-size: .95rem; color: var(--k3-zacht); } .k3-seo__pakket span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--k3-teal); } .k3-seo__pakket span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k3-mint); box-shadow: 0 0 0 4px rgba(143,214,202,.3); } .k3-seo__pakket a { color: var(--k3-koraal); font-weight: 600; text-decoration: none; } .k3-seo__pakket a:hover { text-decoration: underline; } .k3-seo__stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; } .k3-seo__stappen li { position: relative; background: #FFFDF8; border-radius: var(--k3-r-s); padding: 20px 20px 18px; box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.05); } .k3-seo__stappen li:last-child { grid-column: 1 / -1; background: var(--k3-teal); } .k3-seo__stappen li:last-child b, .k3-seo__stappen li:last-child p { color: #F5F1E8; } .k3-seo__stappen li:last-child .k3-seo__nr { color: var(--k3-mint); } .k3-seo__nr { display: block; font: 700 .74rem/1 var(--sc-font-text); letter-spacing: .12em; color: var(--k3-koraal); margin-bottom: 10px; } .k3-seo__stappen b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.08rem; color: var(--k3-nacht); margin-bottom: 6px; } .k3-paneel .k3-seo__stappen p { margin: 0; font-size: .93rem; line-height: 1.55; color: #4A463E; } @media (max-width: 1080px) { .k3-seo { grid-template-columns: 1fr; } } @media (max-width: 560px) { .k3-seo__stappen { grid-template-columns: 1fr; } } /* ---------- 18 okt 2026: voor en na als kaarten, meer cases, afsluiter ---------- */ /* Voor en na: per verbeterpunt een kaart. Boven de oude situatie (gedempt, kruisje), op de naad een pijlbadge, onder de nieuwe situatie (vinkje). */ .k3-vn2 { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; counter-reset: vn; } .k3-vn2__kaart { position: relative; display: grid; border-radius: var(--k3-r-m); overflow: hidden; box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.06), 0 18px 40px -24px rgba(12,29,35,.35); } .k3-vn2__voor, .k3-vn2__na { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 22px 24px; } .k3-vn2__voor { background: #EFE9DE; padding-bottom: 30px; } .k3-vn2__na { background: #FFFDF8; padding-top: 30px; } .k3-vn2__ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; } .k3-vn2__ic svg { width: 18px; height: 18px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .k3-vn2__voor .k3-vn2__ic { background: rgba(194,78,51,.12); } .k3-vn2__voor .k3-vn2__ic svg { stroke: var(--k3-koraal); } .k3-vn2__na .k3-vn2__ic { background: var(--k3-teal); } .k3-vn2__na .k3-vn2__ic svg { stroke: #F5F1E8; } .k3-vn2 small { display: block; font: 600 .7rem/1 var(--sc-font-text); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; } .k3-vn2__voor small { color: var(--k3-zacht); } .k3-vn2__na small { color: var(--k3-teal); } .k3-paneel .k3-vn2 p { margin: 0; max-width: none; } .k3-paneel .k3-vn2__voor p { font-size: .98rem; line-height: 1.5; color: #6B655A; text-decoration: line-through; text-decoration-color: rgba(194,78,51,.45); text-decoration-thickness: 1.5px; } .k3-paneel .k3-vn2__na p { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--k3-nacht); } .k3-vn2__pijl { position: relative; z-index: 2; justify-self: center; margin: -18px 0; width: 36px; height: 36px; border-radius: 50%; background: var(--k3-mint); display: grid; place-items: center; box-shadow: 0 0 0 5px #FFFDF8, 0 8px 18px rgba(12,29,35,.18); } .k3-vn2__pijl svg { width: 18px; height: 18px; fill: none; stroke: var(--k3-nacht); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .k3-vn2__kaart { grid-template-rows: 1fr auto auto; } @media (max-width: 760px) { .k3-vn2 { grid-template-columns: 1fr; } } /* Meer cases: twee compacte kaarten naast elkaar */ .k3-meer { max-width: 1180px; margin: 0 auto; } .k3-meer__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .k3-meer__kop a { color: var(--k3-teal); font-weight: 600; font-size: .95rem; text-decoration: none; } .k3-meer__kop a:hover { text-decoration: underline; } .k3-meer__kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .k3-mini { display: grid; grid-template-columns: 38% 1fr; align-items: stretch; background: var(--k3-papier); border-radius: var(--k3-r-m); overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(12,29,35,.06); transition: transform .3s var(--k3-ease), box-shadow .3s var(--k3-ease); } .k3-mini:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(12,29,35,.04), 0 0 0 1px rgba(10,90,80,.25), 0 22px 44px -22px rgba(12,29,35,.4); } .k3-mini figure { margin: 0; overflow: hidden; background: var(--k3-wash); min-height: 170px; } .k3-mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s var(--k3-ease); } .k3-mini:hover img { transform: scale(1.05); } .k3-mini__tekst { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; } .k3-mini small { font-size: .78rem; color: var(--k3-zacht); } .k3-mini strong { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.15; color: var(--k3-nacht); } .k3-mini__res { font-size: .88rem; color: #4A463E; } .k3-mini__res b { font-family: var(--sc-font-display); font-size: 1.1rem; color: var(--k3-teal); margin-right: 4px; } .k3-mini em { margin-top: auto; padding-top: 8px; font-style: normal; font-weight: 600; font-size: .9rem; color: var(--k3-koraal); } .k3-mini em span { display: inline-block; transition: transform .3s var(--k3-ease); } .k3-mini:hover em span { transform: translateX(4px); } @media (max-width: 760px) { .k3-meer__kaarten { grid-template-columns: 1fr; } .k3-mini { grid-template-columns: 34% 1fr; } .k3-mini figure { min-height: 140px; } } /* Afsluiter: gecentreerd */ .k3-eind { max-width: 880px; margin: 0 auto; text-align: center; background: radial-gradient(80% 120% at 50% 0%, rgba(14,147,132,.28), transparent 60%), var(--k3-nacht); color: #F5F1E8; border-radius: var(--k3-r); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px); display: grid; justify-items: center; gap: 16px; } .k3-eind .k3-eyebrow { color: var(--k3-mint); } .k3-eind h2 { color: #F5F1E8; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; } .k3-eind p { margin: 0; max-width: 46ch; color: rgba(245,241,232,.78); font-size: 1.08rem; line-height: 1.6; } .k3-eind__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; } .k3-knop--rand { background: transparent !important; color: #F5F1E8 !important; box-shadow: inset 0 0 0 1.5px rgba(245,241,232,.4) !important; } .k3-knop--rand:hover { box-shadow: inset 0 0 0 1.5px #F5F1E8 !important; } /* Scores (18 okt 2026): vier Lighthouse-ringen plus een rij meetwaarden */ .k3-scores__ringen { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 820px; } .k3-scores__maten { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 820px; } .k3-scores__maten li { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--k3-r-s); background: var(--k3-papier); box-shadow: 0 0 0 1px rgba(12,29,35,.06); } .k3-scores__maten b { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--k3-teal); font-variant-numeric: tabular-nums; } .k3-scores__maten span { font-size: .84rem; line-height: 1.4; color: var(--k3-zacht); } @media (max-width: 760px) { .k3-scores__ringen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k3-scores__maten { grid-template-columns: 1fr; } } /* Scores compact (27 okt 2026): kop links, vier kleine ringen rechts, metingen als smalle strook */ body.k3 .k3-scores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(24px, 4vw, 56px); row-gap: 14px; align-items: center; padding-top: clamp(28px, 3vw, 40px); padding-bottom: clamp(24px, 3vw, 36px); } body.k3 .k3-scores > .k3-eyebrow { grid-column: 1; grid-row: 1; align-self: end; } body.k3 .k3-scores > .k3-h { grid-column: 1; grid-row: 2; align-self: start; margin-top: 6px !important; font-size: clamp(1.8rem, 3vw, 2.6rem); } body.k3 .k3-scores__ringen { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } body.k3 .k3-scores .k3-ring { gap: 8px; } body.k3 .k3-scores .k3-ring__schijf { width: 84px; } body.k3 .k3-scores .k3-ring circle { stroke-width: 10; } body.k3 .k3-scores .k3-ring__getal { font-size: 1.45rem; } body.k3 .k3-scores .k3-ring span { font-size: .78rem; line-height: 1.3; } body.k3 .k3-scores__maten { grid-column: 1 / -1; grid-row: 3; margin: 10px 0 0; max-width: none; display: flex; flex-wrap: wrap; gap: 8px; } body.k3 .k3-scores__maten li { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-radius: 100px; } body.k3 .k3-scores__maten b { font-size: 1.05rem; } body.k3 .k3-scores__maten span { font-size: .8rem; } body.k3 .k3-scores > .k3-bron { grid-column: 1 / -1; grid-row: 4; margin-top: 2px; font-size: .78rem; line-height: 1.5; color: var(--k3-zacht); } @media (max-width: 760px) { body.k3 .k3-scores { grid-template-columns: 1fr; } body.k3 .k3-scores > .k3-eyebrow, body.k3 .k3-scores > .k3-h { grid-column: 1; } body.k3 .k3-scores__ringen { grid-column: 1; grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } body.k3 .k3-scores .k3-ring__schijf { width: 64px; } body.k3 .k3-scores .k3-ring__getal { font-size: 1.15rem; } body.k3 .k3-scores .k3-ring span { font-size: .66rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; max-width: 100%; } body.k3 .k3-scores__maten { grid-row: 4; } body.k3 .k3-scores > .k3-bron { grid-row: 5; } } /* Fallbacks met dezelfde maten als de webfonts (28 okt 2026), gemeten met canvas-metrics in Chrome. Zo wrappen de chips en de kop vóór en na het laden van de webfonts op dezelfde plek: geen layout shift. Manrope Fallback is nieuw; BC Fallback A/R en IS Fallback (studio.css) krijgen hier ascent/descent-overrides. */ @font-face { font-family: 'Manrope Fallback'; font-weight: 400 500; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; size-adjust: 104.1%; ascent-override: 102.8%; descent-override: 28.8%; line-gap-override: 0%; } @font-face { font-family: 'Manrope Fallback'; font-weight: 600 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; size-adjust: 99.6%; ascent-override: 107.3%; descent-override: 30.1%; line-gap-override: 0%; } @font-face { font-family: 'BC Fallback A'; font-weight: 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Arial'); size-adjust: 58.2%; ascent-override: 159.8%; descent-override: 46.4%; line-gap-override: 0%; } @font-face { font-family: 'BC Fallback R'; font-weight: 800; src: local('Roboto Bold'), local('Roboto-Bold'), local('Roboto'); size-adjust: 56.8%; ascent-override: 163.7%; descent-override: 47.5%; line-gap-override: 0%; } @font-face { font-family: 'IS Fallback'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'), local('Georgia'); size-adjust: 78.1%; ascent-override: 126.8%; descent-override: 39.7%; line-gap-override: 0%; } body.k3 { --font-body: 'Manrope', 'Manrope Fallback', -apple-system, sans-serif; }