/* Onmisbaar Online: tokens + alle gedeelde componenten
   Concept "De cirkel rond": de open ring uit het logo is het terugkerende motief,
   het ontbrekende stuk krijgt signaaloranje. */
/* Inter Tight, zelf gehost (variabel lettertype, gewicht 400 tot 800). Geen verbinding met Google meer. */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/inter-tight-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: 'Inter Tight'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/inter-tight-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; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

:root {
  --ink: #00183D;
  --ink-2: #0A2652;
  --white: #FFFFFF;
  --paper: #F2F1ED;
  --paper-2: #E7E5DE;
  --signal: #FF5B1A;
  --line: rgba(0, 24, 61, .12);
  --line-dark: rgba(255, 255, 255, .14);
  --muted: #5B5C61;
  --muted-dark: rgba(255, 255, 255, .68);
  --accent: var(--signal);
  --radius: 28px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(0, 24, 61, .04), 0 12px 40px rgba(0, 24, 61, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --font: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ring-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='90' fill='none' stroke='%23000' stroke-width='16' pathLength='100' stroke-dasharray='90 10' transform='rotate(-27 100 100)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.02; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(3rem, 8.2vw, 7.25rem); letter-spacing: -.055em; line-height: .92; }
/* koppen met een lang woord (AI automatisering) krijgen een kleinere schaal, zodat niets afgesneden wordt */
h1.long { font-size: clamp(2.4rem, 5.6vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.75rem); letter-spacing: -.045em; }
h3 { font-size: 1.3rem; letter-spacing: -.02em; font-weight: 700; line-height: 1.15; }
p { text-wrap: pretty; }
p + p { margin-top: 1em; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .site-footer :focus-visible { outline-color: var(--white); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px; z-index: 200; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(80px, 11vw, 152px) 0; position: relative; }
.section.tight { padding-top: 0; }
.section.paper { background: var(--paper); }
.section.dark, .dark { background: var(--ink); color: var(--white); }
.section-head { max-width: 50rem; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head p { margin-top: 20px; color: var(--muted); font-size: 1.2rem; max-width: 40rem; }
.dark .section-head p { color: var(--muted-dark); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center p { margin-inline: auto; }

/* signaalstreep onder één woord */
.mark { background: linear-gradient(var(--signal), var(--signal)) 0 92% / 0 .13em no-repeat; transition: background-size 1s var(--ease) .6s; }
.in .mark, .mark.in { background-size: 100% .13em; }

/* knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 600; text-decoration: none; padding: 16px 26px; min-height: 52px; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--white); cursor: pointer; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn:hover svg { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.dark .btn { background: var(--white); color: var(--ink); border-color: var(--white); }
.dark .btn:hover { background: var(--signal); border-color: var(--signal); }
.dark .btn.ghost { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .4); }
.dark .btn.ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; transition: gap .25s var(--ease), border-color .25s var(--ease); }
.link-arrow:hover { gap: 14px; border-color: var(--signal); }

/* header */
.site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .2s; }
/* blur op een pseudo element: backdrop-filter op de header zelf zou het vaste mobiele paneel afkappen */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.scrolled { border-bottom-color: var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links a, .nav-links button { font: inherit; font-weight: 500; text-decoration: none; background: none; border: 0; color: inherit; padding: 10px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-links a:hover, .nav-links button:hover { background: var(--paper); }
.nav-links [aria-current="page"] { font-weight: 700; }
.nav-links .btn { padding: 12px 22px; min-height: 0; margin-left: 10px; color: var(--white); background: var(--ink); }
.nav-links .btn:hover { background: var(--signal); color: var(--ink); }
.has-menu button svg { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.has-menu button[aria-expanded="true"] svg { transform: rotate(180deg); }
/* diensten megamenu: volle breedte onder de header, elke dienst is een stuk van het rad */
.menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0, 24, 61, .1); display: none; }
.menu.open { display: block; animation: menu-in .25s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.mega { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding-top: 40px; padding-bottom: 44px; }
.mega-list { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; gap: 36px clamp(48px, 7vw, 120px); }
.menu a:hover { background: none; }
.menu .mega-title { display: flex; align-items: center; gap: 12px; padding: 0; border-radius: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; text-decoration: underline 3px transparent; text-underline-offset: 6px; transition: text-decoration-color .2s var(--ease); }
.menu .mega-title:hover, .menu .mega-title[aria-current="page"], .menu .mega-title.on { text-decoration-color: var(--signal); }
.mi { width: 30px; height: 30px; flex: none; }
.mi path { fill: none; stroke: var(--ink); stroke-width: 32; }
.mi .mi-piece { stroke: var(--signal); }
.mega-sub { list-style: none; display: grid; gap: 2px; margin: 12px 0 0 42px; }
.menu .mega-sub a { display: block; padding: 5px 0; border-radius: 0; color: var(--muted); }
.menu .mega-sub a:hover, .menu .mega-sub a[aria-current="page"] { color: var(--ink); }
.menu .mega-sub a[aria-current="page"] { font-weight: 700; }
.menu .mega-cta { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; padding: 26px; border-radius: 20px; background: var(--ink); color: var(--white); }
.menu .mega-cta:hover { background: var(--ink); }
.mega-cta::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 170px; height: 170px; background: currentColor; opacity: .12; -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; }
.mega-cta strong { font-size: 1.5rem; line-height: 1.1; letter-spacing: -.03em; max-width: 12ch; }
.mega-cta span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; transition: color .2s var(--ease), gap .2s var(--ease); }
.mega-cta span svg { width: 18px; height: 18px; }
.mega-cta:hover span { color: var(--signal); gap: 12px; }
.burger { display: none; font: inherit; font-weight: 600; background: var(--paper); border: 0; border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; color: var(--ink); }

@media (max-width: 900px) {
  .burger { display: inline-flex; align-items: center; position: relative; z-index: 150; order: 2; }
  .nav-links { position: fixed; inset: 0 0 0 auto; width: min(400px, 100%); background: var(--white); flex-direction: column; align-items: stretch; gap: 2px; padding: 100px 24px 32px; transform: translateX(100%); visibility: hidden; transition: transform .3s var(--ease), visibility .3s; overflow-y: auto; }
  .nav-links.open { transform: none; visibility: visible; box-shadow: -20px 0 60px rgba(0, 24, 61, .15); }
  .nav-links a, .nav-links button { padding: 14px 16px; font-size: 1.2rem; width: 100%; justify-content: space-between; }
  .nav-links .btn { margin: 12px 0 0; justify-content: center; }
  .menu { position: static; border: 0; box-shadow: none; animation: none; }
  .mega { display: block; padding: 0 0 8px 12px; }
  .mega-list { grid-template-columns: 1fr; gap: 0; }
  .menu .mega-title { padding: 12px 16px; font-size: 1.1rem; justify-content: flex-start; }
  .mega-sub, .menu .mega-cta { display: none; }
}

/* kruimelpad */
.crumbs { padding: 28px 0 0; font-size: .92rem; color: var(--muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ring: het logo motief. pathLength 100 → dasharray in procenten */
.ring { overflow: visible; }
.ring circle { fill: none; stroke-width: var(--ring-w, 16); transform: rotate(-27deg); transform-origin: 100px 100px; }
.ring .ring-base { stroke: currentColor; stroke-dasharray: 90 10; }
.ring .ring-track { stroke: currentColor; opacity: .12; stroke-dasharray: 90 10; }
.ring .ring-progress { stroke: currentColor; stroke-dasharray: 0 100; transition: stroke-dasharray .15s linear; }
.ring .ring-piece { transform-origin: 100px 100px; transform: rotate(-200deg); opacity: 0; transition: transform 1.1s var(--ease), opacity .3s var(--ease); }
.ring .ring-piece circle { stroke: var(--signal); stroke-dasharray: 6 94; stroke-dashoffset: 8; }
.ring.in .ring-piece, .ring.done .ring-piece { transform: none; opacity: 1; }

/* fotovak: toont een vormgegeven achtergrond tot er een <img> in staat */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); aspect-ratio: var(--ar, 4 / 5); isolation: isolate; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo:not(:has(img))::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 10%, rgba(255, 255, 255, .55), transparent 55%), var(--grain); opacity: .45; z-index: -1; }
.photo:not(:has(img))::after { content: ""; position: absolute; width: 62%; aspect-ratio: 1; right: -14%; bottom: -18%; background: currentColor; -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; opacity: .07; z-index: -1; }
.photo.dark { background: var(--ink-2); color: var(--white); }
.photo.dark:not(:has(img))::before { background: radial-gradient(110% 80% at 80% 0%, rgba(255, 91, 26, .22), transparent 60%), var(--grain); opacity: .55; }
.photo.dark:not(:has(img))::after { opacity: .09; }
.photo .photo-label { position: absolute; left: clamp(20px, 3vw, 32px); bottom: clamp(20px, 3vw, 32px); right: 20px; font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -.04em; line-height: 1; }

/* hero */
.hero { padding: clamp(28px, 5vw, 56px) 0 clamp(72px, 9vw, 120px); }
.crumbs + .hero-grid { margin-top: clamp(32px, 5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .lead { margin-top: 32px; max-width: 34rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--muted); }
.hero-visual { position: relative; justify-self: end; width: min(100%, 500px); }
.hero-visual .photo { border-radius: 50%; aspect-ratio: 1; width: 82%; margin: 9%; }
.hero-visual .ring { position: absolute; inset: 0; width: 100%; height: 100%; --ring-w: 5; color: var(--ink); }

/* statement: woorden lichten op tijdens het scrollen */
.statement { font-size: clamp(1.9rem, 4.6vw, 4.1rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; max-width: 26ch; text-wrap: balance; }
.statement .w { opacity: .22; transition: opacity .3s var(--ease); }
.statement .w.on { opacity: 1; }
.statement em { font-style: normal; color: var(--signal); }
.review .statement { font-size: clamp(1.6rem, 3.4vw, 3rem); max-width: 32ch; }
.review figcaption { margin-top: clamp(24px, 3vw, 40px); font-weight: 600; color: var(--muted-dark); }
.review figcaption a { color: var(--white); text-decoration-color: var(--signal); text-underline-offset: 4px; }

/* split: sticky titel links, inhoud rechts */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split > :first-child { position: sticky; top: 120px; }
.prose { max-width: 40rem; font-size: 1.15rem; }
.prose p { color: #34353a; }
.prose a { text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--signal); }
.prose a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.prose .intro { font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.4; letter-spacing: -.02em; color: var(--ink); font-weight: 500; }



/* werkwijze: ring sluit tijdens het scrollen */
.process { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.process-visual { position: sticky; top: 120px; align-self: start; }
.process-visual .ring { width: min(100%, 380px); --ring-w: 12; color: var(--white); }
.process-count { position: absolute; top: 0; left: 0; width: min(100%, 380px); aspect-ratio: 1; display: grid; place-content: center; text-align: center; }
.process-count strong { font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.process-count span { color: var(--muted-dark); margin-top: 6px; font-weight: 500; }
.process-count .step-name { font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -.04em; line-height: 1.05; max-width: 9ch; margin: 0 auto; }
.steps { list-style: none; counter-reset: s; }
.steps li { counter-increment: s; padding: 40px 0; border-top: 1px solid var(--line-dark); min-height: 38vh; opacity: .35; transition: opacity .4s var(--ease); }
.steps li.active, .steps li.past { opacity: 1; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font-weight: 800; font-size: 1rem; color: var(--signal); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.steps.plain li::before { content: none; }
.steps h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); letter-spacing: -.04em; font-weight: 800; margin-bottom: 14px; }
.steps p { color: var(--muted-dark); max-width: 32rem; font-size: 1.08rem; }
.steps .when { display: inline-block; margin-top: 18px; font-size: .9rem; font-weight: 600; padding: 6px 14px; border: 1px solid var(--line-dark); border-radius: 999px; }

/* cases */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 64px) 24px; }
.case { display: flex; flex-direction: column; text-decoration: none; }
.case .photo { --ar: 16 / 10; }
/* eerste case breed: beeld links, tekst rechts, screenshots nooit bijsnijden */
.cases .case:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 56px); align-items: end; }
.cases .case:first-child h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.045em; }
.cases .case:first-child .case-body { padding-bottom: 12px; }
.cases .case:nth-child(2):last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 56px); align-items: end; }
.case .photo img { transition: transform .8s var(--ease); }
a.case:hover .photo img { transform: scale(1.03); }
.case-body { padding: 20px 4px 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.case h3 { font-size: 1.5rem; letter-spacing: -.035em; font-weight: 800; }
.case .where { color: var(--muted); font-size: .98rem; }
.case p { flex-basis: 100%; color: var(--muted); font-size: 1rem; max-width: 34rem; }
.tags { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin-top: 6px; }
.tags li { font-size: .82rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); }

/* faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-grid > :first-child { position: sticky; top: 120px; }
.faq-grid > :first-child p { margin-top: 20px; color: var(--muted); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 26px 56px 26px 0; font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.02em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; border: 2px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat; transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease); }
.faq summary:hover::after { background-color: var(--signal); border-color: var(--signal); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 56px 28px 0; color: var(--muted); }
.faq details a { text-underline-offset: 3px; }

/* gerelateerde diensten */
.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.related a { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 220px; padding: 28px; border-radius: var(--radius); background: var(--white); text-decoration: none; transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.related a:hover { background: var(--ink); color: var(--white); transform: translateY(-4px); }
.related h3 { font-size: 1.5rem; letter-spacing: -.035em; font-weight: 800; }
.related p { color: var(--muted); font-size: .98rem; margin-top: 8px; transition: color .3s var(--ease); }
.related a:hover p { color: var(--muted-dark); }
.related .go { width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.related .go svg { width: 18px; height: 18px; }
.related a:hover .go { background: var(--signal); border-color: var(--signal); color: var(--ink); }

/* cta band */
.cta { overflow: hidden; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.cta h2 { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -.06em; line-height: .92; }
.cta p { margin-top: 24px; max-width: 30rem; color: var(--muted-dark); font-size: 1.2rem; }
.cta .ring { width: min(100%, 440px); justify-self: end; --ring-w: 16; color: var(--white); }
.cta .ring .ring-piece { transition-delay: .3s; }

/* footer */
.site-footer { background: var(--ink); color: var(--white); padding: 80px 0 40px; border-top: 1px solid var(--line-dark); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-grid h2 { font-size: .85rem; font-weight: 600; letter-spacing: 0; color: rgba(255, 255, 255, .55); margin-bottom: 14px; }
.foot-grid ul { list-style: none; }
.foot-grid li + li { margin-top: 8px; }
.foot-grid a { text-decoration: none; }
.foot-grid a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }
.foot-grid p { color: var(--muted-dark); margin-top: 18px; max-width: 22rem; }
.foot-grid li.foot-social { display: flex; gap: 10px; margin-top: 14px; }
.foot-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-dark); border-radius: 50%; transition: background .2s, color .2s, border-color .2s; }
.foot-social a:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.foot-social svg { width: 18px; height: 18px; }
.foot-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .92rem; color: rgba(255, 255, 255, .55); }
.foot-bottom a { text-decoration: none; }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-bottom a:hover { color: var(--white); }


/* 24 uur klok: werkuren in inkt, de rest neemt AI over */
.clock { position: relative; justify-self: end; width: min(100%, 480px); }
.clock svg { width: 100%; height: auto; overflow: visible; }
.clock circle { fill: none; stroke-width: 14; transform: rotate(-90deg); transform-origin: 100px 100px; }
.clock .c-track { stroke: var(--ink); opacity: .07; }
.clock .c-work { stroke: var(--ink); stroke-dasharray: 9.8 14.2; stroke-dashoffset: -8.1; }
.clock .c-ai { stroke: var(--signal); stroke-dasharray: 0 24; stroke-dashoffset: -18.1; transition: stroke-dasharray 1.8s var(--ease) .5s; }
.clock.in .c-ai { stroke-dasharray: 13.8 10.2; }
.clock .c-ticks line { stroke: var(--ink); stroke-width: 1; opacity: .25; }
.clock .c-ticks line.major { stroke-width: 2; opacity: .6; }
.clock text { font: 600 8px var(--font); fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.clock .c-now { transform-origin: 100px 100px; transition: transform 1s var(--ease); }
.clock .c-now circle { transform: none; fill: var(--white); stroke: var(--ink); stroke-width: 3; }
.clock .c-now .pulse { fill: var(--signal); stroke: none; opacity: .35; transform-box: fill-box; transform-origin: center; animation: pulse 2s var(--ease) infinite; }
.clock-center { position: absolute; inset: 22%; display: grid; place-content: center; text-align: center; }
.clock-center strong { font-size: clamp(2.6rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.clock-center span { margin-top: 10px; font-size: .98rem; color: var(--muted); line-height: 1.35; }
.clock-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: .92rem; color: var(--muted); list-style: none; }
.clock-legend li { display: inline-flex; align-items: center; gap: 8px; }
.clock-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.clock-legend li.ai::before { background: var(--signal); }
@keyframes pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(2.6); opacity: 0; } }

/* scenario: dezelfde vraag, twee afloopen */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lane { border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); background: var(--paper); }
.lane.dark { background: var(--ink); color: var(--white); }
.lane h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.04em; font-weight: 800; margin-bottom: 28px; }
.timeline { list-style: none; }
.timeline li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.lane.dark .timeline li { border-color: var(--line-dark); }
.timeline time { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.timeline p { color: var(--muted); }
.lane.dark .timeline p { color: var(--muted-dark); }
.timeline li.end p { color: var(--ink); font-weight: 700; }
.lane.dark .timeline li.end p { color: var(--white); }
.lane.dark .timeline li.end time { color: var(--signal); }

/* oplossingen: tekst links, levend voorbeeld rechts */
.solution { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(48px, 6vw, 80px) 0; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.solution:first-of-type { border-top: 0; padding-top: 0; }
.solution:nth-of-type(even) > :first-child { order: 2; }
.solution h3 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -.045em; font-weight: 800; }
.solution > div > p { margin-top: 16px; color: var(--muted); font-size: 1.12rem; max-width: 30rem; }
.checks { list-style: none; margin-top: 28px; display: grid; gap: 12px; }
.checks li { padding-left: 30px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; }
.demo-note { margin-top: 12px; font-size: .85rem; color: var(--muted); text-align: center; }

/* chat voorbeeld */
.chat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); width: min(100%, 440px); justify-self: center; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; flex: 0 0 auto; }
.chat-avatar svg { width: 22px; height: 22px; }
.chat-head strong { display: block; font-size: 1rem; line-height: 1.2; }
.chat-head small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; }
.chat-head small::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2BB673; }
.chat-head button { margin-left: auto; font: inherit; font-size: .85rem; font-weight: 600; background: var(--paper); border: 0; border-radius: 999px; padding: 8px 14px; min-height: 36px; cursor: pointer; color: var(--ink); }
.chat-head button:hover { background: var(--signal); }
.chat-log { list-style: none; padding: 20px; display: flex; flex-direction: column; gap: 10px; height: 32rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: linear-gradient(var(--white), #FAFAF8); }
/* eerste bericht onderaan starten zoals in een echte chat (margin-top auto houdt scrollen mogelijk) */
.chat-log > :first-child { margin-top: auto; }
.msg { max-width: 82%; padding: 11px 15px; border-radius: 20px; font-size: .98rem; line-height: 1.45; }
.msg.klant { align-self: flex-end; background: var(--ink); color: var(--white); border-bottom-right-radius: 6px; }
.msg.bot { align-self: flex-start; background: var(--paper); border-bottom-left-radius: 6px; }
.msg time { display: block; font-size: .75rem; opacity: .6; margin-top: 4px; }
.typing { display: none; align-self: flex-start; background: var(--paper); border-radius: 20px; padding: 14px 16px; gap: 5px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s var(--ease) infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
.typing.show { display: inline-flex; }
.chat-note { margin-top: 6px; align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: .92rem; }
.chat-note::before { content: ""; width: 10px; align-self: stretch; border-radius: 4px; background: var(--signal); }
.chat-note strong { display: block; }
.chat-js .msg, .chat-js .chat-note { display: none; }
.chat-js .msg.show, .chat-js .chat-note.show { display: block; animation: pop .4s var(--ease); }
.chat-js .chat-note.show { display: flex; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* opvolgflow */
.flow { list-style: none; width: min(100%, 480px); justify-self: center; background: var(--white); border-radius: var(--radius); padding: 12px 28px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.flow li { display: grid; grid-template-columns: 22px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; position: relative; }
.flow li + li { border-top: 1px dashed var(--line); }
.flow .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink); background: var(--white); }
.flow li.auto .dot { border-color: var(--signal); background: var(--signal); }
.flow strong { display: block; font-size: 1rem; line-height: 1.3; }
.flow small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.4; margin-top: 2px; }
.flow time { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 999px; background: var(--paper); white-space: nowrap; }
.flow-legend { display: flex; justify-content: center; gap: 20px; margin-top: 16px; font-size: .88rem; color: var(--muted); list-style: none; }
.flow-legend li { display: inline-flex; align-items: center; gap: 8px; }
.flow-legend li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--ink); }
.flow-legend li.auto::before { border-color: var(--signal); background: var(--signal); }

/* oproep met voice agent */
.call { width: min(100%, 440px); justify-self: center; background: var(--ink); color: var(--white); border-radius: var(--radius); padding: 28px; box-shadow: 0 24px 60px rgba(0, 24, 61, .25); }
.call-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.call-top strong { font-size: 1.25rem; letter-spacing: -.02em; }
.call-top small { color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.call-status { margin-top: 4px; color: var(--muted-dark); font-size: .92rem; }
.wave { display: flex; align-items: center; gap: 4px; height: 64px; margin: 24px 0; }
.wave span { flex: 1; height: 20%; border-radius: 4px; background: var(--signal); animation: wave 1.1s ease-in-out infinite alternate; }
.wave span:nth-child(3n) { animation-duration: .8s; }
.wave span:nth-child(4n) { animation-duration: 1.3s; animation-delay: .2s; }
.wave span:nth-child(5n) { animation-duration: .95s; animation-delay: .35s; }
.wave span:nth-child(odd) { background: var(--white); }
@keyframes wave { from { height: 12%; } to { height: 100%; } }
.transcript { list-style: none; display: grid; gap: 10px; font-size: .95rem; }
.transcript b { display: block; font-size: .78rem; font-weight: 600; color: var(--muted-dark); }
.call-summary { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); font-size: .92rem; }
.call-summary strong { color: var(--signal); }

/* start: foto en uitnodiging */
.start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.start .photo { --ar: 4 / 5; }
.start p { margin-top: 20px; color: var(--muted); font-size: 1.15rem; max-width: 34rem; }

@media (max-width: 860px) {
  .clock { justify-self: center; width: min(92%, 420px); }
  .compare, .solution, .start { grid-template-columns: 1fr; }
  .solution:nth-of-type(even) > :first-child { order: 0; }
}
@media (max-width: 560px) {
  .chat-log { padding: 16px; height: 30rem; }
  .flow { padding: 8px 18px; }
  .flow li { grid-template-columns: 18px 1fr auto; gap: 12px; }
  .flow time { font-size: .78rem; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .clock .c-ai { transition: none; stroke-dasharray: 13.8 10.2; }
  .clock .c-now .pulse, .wave span, .typing span { animation: none; }
  .wave span { height: 60%; }
  .wave span:nth-child(3n) { height: 35%; }
}

/* ============ SEO pagina ============ */

/* hero: kop links, lead rechts onderaan, zoekdemo over de volle breedte */
.crumbs + .hero-ed { margin-top: clamp(32px, 5vw, 64px); }
.hero-sub { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(28px, 4vw, 48px); }
.hero-sub .lead { margin-top: 0; }
.hero-sub .btn-row { margin-top: 0; justify-content: flex-end; }
.hl { background: linear-gradient(var(--signal), var(--signal)) 0 0 / 0 100% no-repeat; padding: 0 .08em; margin: 0 -.08em; transition: background-size .8s var(--ease) .7s; }
.in .hl { background-size: 100% 100%; }

/* zoekdemo */
.serp { margin-top: clamp(48px, 6vw, 80px); background: var(--paper); border-radius: var(--radius); padding: clamp(20px, 4vw, 48px); }
.serp-bar { display: flex; align-items: center; gap: 14px; max-width: 720px; background: var(--white); border-radius: 999px; padding: 18px 26px; box-shadow: var(--shadow); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 500; }
.serp-bar svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--muted); }
.caret { width: 2px; height: 1.2em; background: var(--signal); margin-left: -12px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.serp-list { list-style: none; counter-reset: pos; margin-top: 24px; max-width: 720px; display: grid; gap: 8px; }
.serp-item { counter-increment: pos; position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 16px 20px 16px 16px; border-radius: 18px; background: rgba(255, 255, 255, .55); transition: opacity .4s var(--ease); will-change: transform; }
.serp-item::before { content: counter(pos); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--paper-2); color: var(--muted); }
.serp:not(.searched) .serp-item { opacity: .35; }
.sk { display: block; height: 10px; border-radius: 6px; background: var(--paper-2); }
.sk + .sk { margin-top: 9px; }
.sk.t { height: 16px; width: 62%; background: #D9D6CD; }
.serp-item.you { background: var(--white); box-shadow: var(--shadow); outline: 2px solid transparent; transition: opacity .4s var(--ease), outline-color .4s var(--ease); }
.serp-item.you.top { outline-color: var(--signal); }
.serp-item.you.top::before { background: var(--signal); color: var(--ink); }
.serp-item.you small { display: block; color: var(--muted); font-size: .88rem; }
.serp-item.you strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; margin: 2px 0 4px; }
.serp-item.you p { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.serp-side { display: none; }
@media (min-width: 1100px) {
  .serp { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 24px 48px; align-items: center; }
  .serp-list { margin-top: 0; }
  .serp-bar { grid-column: 1; }
  .serp-list { grid-column: 1; }
  .serp-side { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .serp-side strong { display: block; font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--signal); font-variant-numeric: tabular-nums; }
  .serp-side span { display: block; margin-top: 12px; color: var(--muted); max-width: 16rem; }
}

/* lopende band met zoekopdrachten */
.ticker { padding: clamp(64px, 8vw, 112px) 0; overflow: hidden; }
.ticker-intro { max-width: 46rem; font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin-bottom: clamp(36px, 5vw, 56px); }
.ticker-intro em { font-style: normal; color: var(--signal); }
.ticker-row { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker-row + .ticker-row { margin-top: 16px; animation-direction: reverse; animation-duration: 70s; }
.ticker:hover .ticker-row { animation-play-state: paused; }
.ticker-row ul { display: flex; gap: 16px; padding-right: 16px; list-style: none; }
.ticker-row li { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.035em; padding: 14px 28px 14px 22px; border-radius: 999px; border: 1px solid var(--line-dark); }
.ticker-row li svg { width: .8em; height: .8em; color: var(--signal); flex: 0 0 auto; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* anatomie van een zoekresultaat */
.anatomy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.result-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) clamp(40px, 5vw, 60px); display: grid; gap: 10px; }
.rp { position: relative; border-radius: 10px; padding: 6px 10px; margin: 0 -10px; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.rp .pin { position: absolute; left: -38px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-size: .8rem; font-weight: 800; transition: background .3s var(--ease), color .3s var(--ease); }
.rp-1 { display: flex; align-items: center; gap: 12px; }
.rp-1 .fav { width: 30px; height: 30px; border-radius: 50%; background: var(--paper-2); flex: 0 0 auto; }
.rp-1 b { display: block; font-size: .95rem; }
.rp-1 small { display: block; color: var(--muted); font-size: .85rem; }
.r-title { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.r-stars { color: var(--muted); font-size: .92rem; }
.r-stars b { color: var(--ink); letter-spacing: .1em; margin-right: 6px; }
.r-desc { color: #3c3d42; line-height: 1.5; }
.r-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.r-links li { font-size: .9rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: var(--paper); }
.anatomy-list { list-style: none; counter-reset: a; display: grid; gap: 4px; }
.anatomy-list li { counter-increment: a; display: grid; grid-template-columns: 26px 1fr; gap: 16px; padding: 16px 12px; margin: 0 -12px; border-radius: 14px; cursor: default; transition: background .3s var(--ease); }
.anatomy-list li::before { content: counter(a); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-size: .8rem; font-weight: 800; margin-top: 2px; }
.anatomy-list h3 { font-size: 1.1rem; margin-bottom: 4px; }
.anatomy-list p { color: var(--muted); font-size: .98rem; }
.anatomy-list li:hover { background: var(--paper); }
.anatomy-list li:hover::before { background: var(--signal); color: var(--ink); }
.anatomy:has([data-p="1"]:hover) .rp-1, .anatomy:has([data-p="2"]:hover) .rp-2, .anatomy:has([data-p="3"]:hover) .rp-3,
.anatomy:has([data-p="4"]:hover) .rp-4, .anatomy:has([data-p="5"]:hover) .rp-5 { background: rgba(255, 91, 26, .12); box-shadow: inset 0 0 0 2px var(--signal); }
.anatomy:has([data-p="1"]:hover) .rp-1 .pin, .anatomy:has([data-p="2"]:hover) .rp-2 .pin, .anatomy:has([data-p="3"]:hover) .rp-3 .pin,
.anatomy:has([data-p="4"]:hover) .rp-4 .pin, .anatomy:has([data-p="5"]:hover) .rp-5 .pin { background: var(--signal); color: var(--ink); }

/* lokale kaart */
.local { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.local p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 32rem; }
.local p a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.dash-list { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.dash-list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.map { position: relative; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map svg { width: 100%; height: auto; }
.map .road { fill: none; stroke: var(--paper-2); stroke-width: 6; stroke-linecap: round; }
.map .town circle { fill: var(--ink); }
.map .town text { font: 600 13px var(--font); fill: var(--muted); }
.map .radius { fill: none; stroke: var(--signal); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: radius 3.6s var(--ease) infinite; }
.map .radius:nth-of-type(2) { animation-delay: 1.2s; }
.map .radius:nth-of-type(3) { animation-delay: 2.4s; }
@keyframes radius { from { transform: scale(.2); opacity: .9; } to { transform: scale(1); opacity: 0; } }
.map .you-pin circle { fill: var(--signal); stroke: var(--white); stroke-width: 4; }
.map .you-pin text { font: 800 15px var(--font); fill: var(--ink); }
.map-wrap { position: relative; padding-bottom: 72px; }
.pack { position: absolute; right: -20px; bottom: 0; width: min(300px, 62%); background: var(--white); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 24, 61, .16); padding: 16px; display: grid; gap: 10px; }
.pack-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.pack-row > span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: var(--paper-2); color: var(--muted); }
.pack-row.you > span { background: var(--signal); color: var(--ink); }
.pack-row strong { display: block; font-size: .95rem; }
.pack-row small { display: block; color: var(--muted); font-size: .8rem; }
.pack-row .sk { height: 8px; }
.pack-row .sk + .sk { margin-top: 6px; width: 60%; }

/* groeicurve */
.growth { position: relative; }
.growth svg { width: 100%; height: auto; overflow: visible; display: block; }
.growth .axis { stroke: var(--line); stroke-width: 2; fill: none; }
.growth .area { fill: url(#growthFill); opacity: 0; transition: opacity 1.2s var(--ease) 1.4s; }
.growth .curve { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .2s; }
.growth .mile { fill: var(--white); stroke: var(--ink); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.growth .mile.last { fill: var(--signal); stroke: var(--signal); }
.growth.in .curve { stroke-dashoffset: 0; }
.growth.in .area { opacity: 1; }
.growth.in .mile { opacity: 1; transform: none; }
.growth.in .mile:nth-of-type(1) { transition-delay: .5s; }
.growth.in .mile:nth-of-type(2) { transition-delay: 1s; }
.growth.in .mile:nth-of-type(3) { transition-delay: 1.6s; }
.growth.in .mile:nth-of-type(4) { transition-delay: 2.2s; }
.growth .axis-label { font: 600 14px var(--font); fill: var(--muted); }
.milestones { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 28px; }
.milestones li { border-top: 2px solid var(--ink); padding-top: 16px; }
.milestones li:last-child { border-color: var(--signal); }
.milestones small { display: block; font-weight: 700; color: var(--muted); font-size: .9rem; }
.milestones h3 { margin: 6px 0 8px; font-size: 1.25rem; }
.milestones p { color: var(--muted); font-size: .98rem; }

/* maandrapport: foto met rapportkaart */
.monthly { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.monthly-visual { position: relative; padding-bottom: 64px; }
.monthly-visual .photo { --ar: 4 / 3; }
.report { position: absolute; right: -24px; bottom: 0; width: min(340px, 78%); background: var(--white); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 24, 61, .18); padding: 22px 24px; }
.report-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.report-head strong { font-size: 1.1rem; letter-spacing: -.02em; }
.report-head span { font-size: .85rem; color: var(--muted); }
.report ol { list-style: none; }
.report li { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; line-height: 1.35; }
.report li:last-child { border-bottom: 0; }
.monthly p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 32rem; }

/* faq in de stijl van "mensen vragen ook" */
.ask { max-width: 820px; margin: 0 auto; }
.ask h2 { text-align: center; }
.ask > p { text-align: center; margin: 16px auto 40px; color: var(--muted); max-width: 34rem; }
.ask-list { border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--white); }
.ask-list details + details { border-top: 1px solid var(--line); }
.ask-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; transition: background .2s var(--ease); }
.ask-list summary::-webkit-details-marker { display: none; }
.ask-list summary:hover { background: var(--paper); }
.ask-list summary::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--ease); }
.ask-list details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.ask-list details p { padding: 0 26px 24px; color: var(--muted); max-width: 44rem; }

/* sterker samen: grote typografische links */
.combo { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.combo a { display: block; padding: 28px 24px 32px 0; text-decoration: none; }
.combo li + li a { padding-left: 24px; border-left: 1px solid var(--line); }
.combo strong { display: flex; align-items: center; gap: 12px; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.combo strong svg { width: .7em; height: .7em; opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease); color: var(--signal); }
.combo a:hover strong svg, .combo a:focus-visible strong svg { opacity: 1; transform: none; }
.combo span { display: block; margin-top: 8px; color: var(--muted); }

/* cta met wisselend beroep */
.cta-rotate h2 { font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: -.055em; line-height: .98; }
.cta-line { display: block; }
.rotate { display: inline-block; color: var(--signal); }
.rotate.swap { animation: swap-in .45s var(--ease); }
@keyframes swap-in { from { opacity: 0; transform: translateY(.25em); } to { opacity: 1; transform: none; } }
.cta-rotate p { margin-top: 24px; max-width: 32rem; color: var(--muted-dark); font-size: 1.2rem; }

@media (max-width: 1024px) {
  .combo { grid-template-columns: 1fr; }
  .combo li + li a { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .hero-sub, .anatomy, .local, .monthly { grid-template-columns: 1fr; }
  .hero-sub .btn-row { justify-content: flex-start; }
  .milestones { grid-template-columns: 1fr 1fr; }
  .report { right: 12px; }
  .growth .axis-label { display: none; }
}
@media (max-width: 560px) {
  .serp-item { grid-template-columns: 32px 1fr; gap: 12px; padding: 14px; }
  .serp-item::before { width: 30px; height: 30px; font-size: .85rem; }
  .milestones { grid-template-columns: 1fr; }
  .map-wrap { padding-bottom: 0; }
  .pack { position: relative; right: auto; width: auto; margin: -36px 12px 0; }
  .report { position: relative; right: auto; width: auto; margin: -48px 12px 0; }
  .monthly-visual { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-row { animation: none; flex-wrap: wrap; width: auto; }
  .ticker-row ul[aria-hidden] { display: none; }
  .ticker-row ul { flex-wrap: wrap; }
  .map .radius { animation: none; opacity: .4; transform: scale(.6); }
  .caret { animation: none; }
  .growth .curve { stroke-dashoffset: 0; transition: none; }
  .growth .area, .growth .mile { opacity: 1; transform: none; transition: none; }
  .hl { background-size: 100% 100%; transition: none; }
  .rotate.swap { animation: none; }
}

/* soorten websites: kaart met tabs, de ring draait naar het stuk van de gekozen tab */
.types { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 24px; align-items: start; }
.types-tabs { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-sm) 48px var(--radius-sm) var(--radius-sm); overflow: hidden; }
.types-tabs button { font: inherit; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -.035em; text-align: left; padding: 30px 32px; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
.types-tabs button:first-child { border-top: 0; }
.types-tabs button:hover { background: var(--paper-2); }
.types-tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }
.types-card { grid-column: 1; grid-row: 1; position: relative; overflow: hidden; min-height: 480px; padding: clamp(32px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 88px); background: var(--paper); border-radius: 72px var(--radius-sm) 72px var(--radius-sm); }
.types-panel { position: relative; z-index: 1; max-width: 38rem; }
.types-panel:not([hidden]) { animation: menu-in .4s var(--ease); }
.types-panel h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; margin-bottom: 8px; }
.types-panel p { margin-top: 18px; font-size: 1.1rem; color: #34353a; }
.types-panel strong { color: var(--ink); }
.types-panel .types-meta { margin-top: 28px; font-size: 1rem; color: var(--muted); }
.types-meta b { color: var(--ink); font-size: 1.2rem; letter-spacing: -.02em; margin-right: 4px; }
.types-panel .btn { margin-top: 32px; }
.types-ring { position: absolute; right: -70px; bottom: -90px; width: clamp(200px, 24vw, 320px); pointer-events: none; }
.types-ring path { fill: none; stroke: var(--ink); stroke-width: 26; }
.types-ring .tr-piece { stroke: var(--signal); }
.types-ring g { transform-origin: 100px 100px; transform: rotate(var(--turn)); transition: transform .9s var(--ease); }
@media (max-width: 860px) {
  .types { grid-template-columns: 1fr; }
  .types-tabs { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-sm); }
  .types-tabs button { font-size: 1.1rem; padding: 18px 20px; border-top: 0; }
  .types-tabs button:nth-child(odd) { border-right: 1px solid var(--line); }
  .types-tabs button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .types-card { grid-row: 2; min-height: 0; border-radius: 48px var(--radius-sm) 48px var(--radius-sm); padding-bottom: 160px; }
  .types-ring { width: 220px; right: -50px; bottom: -80px; }
}

/* onderhoud: drie maandpakketten, het middelste steekt boven en onder uit */
.plans { --pad: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: var(--pad); background: var(--white); border-radius: var(--radius); }
.plan > :not(.plan-ring) { position: relative; z-index: 1; }
.plan h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); font-weight: 800; letter-spacing: -.045em; }
.plan-for { margin-top: 10px; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--muted); }
.plan-price b { font-size: clamp(2.8rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.plan .checks { margin: 24px 0 32px; }
.plan-note { margin: -16px 0 32px; color: var(--muted); font-size: .95rem; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan.featured { margin-block: -24px; padding-block: calc(var(--pad) + 24px); background: var(--ink); }
.plan.featured .plan-for, .plan.featured .plan-price { color: var(--muted-dark); }
.plan.featured .plan-price { border-color: var(--line-dark); }
.plan.featured .plan-price b { color: var(--white); }
.plan.featured .checks li::before { background: var(--signal); }
.plan-ring { position: absolute; top: -90px; right: -90px; width: 220px; pointer-events: none; }
.plan-ring path { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 26; }
.plan-ring .pr-piece { stroke: var(--signal); }
.plans-note { margin-top: 48px; color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; max-width: 34rem; }
  .plan.featured { margin-block: 0; padding-block: var(--pad); }
  .plan-ring { width: 160px; top: -70px; right: -70px; }
}

/* ============ Webdesign subpagina's ============ */

/* andere soorten websites: ring met het stuk op de plek van de tab op de webdesign pagina */
.family-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
.family-list a { display: flex; align-items: center; gap: 18px; height: 100%; padding: 26px 28px; border-radius: var(--radius); border: 1px solid var(--line); text-decoration: none; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.family-list a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.family-list .mi { width: 44px; height: 44px; transition: transform .7s var(--ease); }
.family-list a:hover .mi { transform: rotate(90deg); }
.family-list a:hover .mi path { stroke: var(--white); }
.family-list a:hover .mi .mi-piece { stroke: var(--signal); }
.family-list strong { display: block; font-size: 1.35rem; letter-spacing: -.03em; line-height: 1.1; }
.family-list strong + span { display: block; margin-top: 4px; color: var(--muted); font-size: .98rem; transition: color .3s var(--ease); }
.family-list a:hover strong + span { color: var(--muted-dark); }

/* ---------- one pager ---------- */
.op-hero-grid, .ec-hero-grid, .mp-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(32px, 5vw, 64px); }
.op-hero h1, .mp-hero h1, .ec-hero h1 { font-size: clamp(2.4rem, 6.6vw, 6.2rem); }
.op-hero h1 em, .mp-hero h1 em, .ec-hero h1 em { font-style: normal; color: var(--signal); }
.op-hero-visual .photo { --ar: 4 / 5; border-radius: 999px 999px var(--radius) var(--radius); }

/* opbouw: de pagina in de gsm scrolt mee met de blokken */
.op-scroll { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); }
.op-blocks { list-style: none; }
.op-blocks li { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); margin-bottom: 26vh; opacity: .4; transform: scale(.97); transform-origin: left center; transition: opacity .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }
.op-blocks li:last-child { margin-bottom: 0; }
.op-blocks li.active { opacity: 1; transform: none; box-shadow: var(--shadow); }
.op-blocks h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.04em; font-weight: 800; margin-bottom: 10px; }
.op-blocks p { color: var(--muted); font-size: 1.08rem; max-width: 30rem; }
.op-device { position: sticky; top: 110px; align-self: start; display: flex; align-items: center; justify-content: center; gap: 24px; }
.op-phone { width: min(100%, 290px); aspect-ratio: 9 / 18.5; padding: 11px; border-radius: 46px; background: var(--ink); box-shadow: 0 30px 70px rgba(0, 24, 61, .2); }
.op-screen { position: relative; height: 100%; overflow: hidden; border-radius: 35px; background: var(--white); }
.op-page { height: 500%; transition: transform .6s var(--ease); }
.op-sec { height: 20%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 20px; }
.op-bar { display: block; height: 9px; border-radius: 5px; background: currentColor; opacity: .14; }
.op-s1 { background: var(--ink); color: var(--white); }
.op-s1 .op-bar { opacity: .45; }
.op-logo { width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; border: 5px solid var(--white); border-right-color: var(--signal); transform: rotate(-30deg); }
.op-pill { width: 52%; height: 32px; margin-top: 10px; border-radius: 999px; background: var(--signal); }
.op-row { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: var(--paper); }
.op-row i { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 4px solid var(--ink); border-top-color: var(--signal); }
.op-row .op-bar { flex: 1; }
.op-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.op-pics i { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(150deg, var(--paper-2), #CBD3DF); }
.op-stars { color: var(--signal); letter-spacing: 3px; font-size: .95rem; }
.op-s4 { align-items: center; background: var(--paper); }
.op-face { width: 78px; height: 78px; margin-bottom: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #B9C2D0 0 21%, transparent 22%), radial-gradient(circle at 50% 104%, #B9C2D0 0 44%, transparent 45%), var(--paper-2); }
.op-call { display: grid; place-items: center; height: 50px; border-radius: 14px; background: var(--ink); color: var(--white); font-weight: 700; font-size: .95rem; }
.op-field { height: 38px; border-radius: 10px; border: 1.5px solid var(--line); }
.op-rail { position: relative; width: 4px; height: 62%; border-radius: 2px; background: var(--line); overflow: hidden; }
.op-rail span { position: absolute; inset: 0; background: var(--signal); transform-origin: top; transform: scaleY(0); }

/* past een one pager bij jou */
.op-check { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.op-check-intro { margin-top: 16px; color: var(--muted); font-size: 1.15rem; }
.op-statements { list-style: none; display: grid; gap: 10px; margin-top: 32px; }
.op-statements label { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.op-statements label:hover { border-color: var(--ink); }
.op-statements input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op-tick { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); transition: background .2s var(--ease), border-color .2s var(--ease); }
.op-tick svg { width: 14px; height: 14px; opacity: 0; color: var(--ink); }
.op-statements input:checked + .op-tick { background: var(--signal); border-color: var(--signal); }
.op-statements input:checked + .op-tick svg { opacity: 1; }
.op-statements input:focus-visible + .op-tick { outline: 3px solid var(--ink); outline-offset: 3px; }
.op-statements label:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.op-verdict { background: var(--ink); color: var(--white); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); text-align: center; }
.op-meter { width: min(100%, 200px); margin: 0 auto 28px; }
.op-meter circle { fill: none; stroke-width: 16; transform: rotate(-90deg); transform-origin: 100px 100px; }
.op-meter .track { stroke: rgba(255, 255, 255, .12); }
.op-meter .fill { stroke: var(--signal); stroke-dasharray: 0 100; transition: stroke-dasharray .6s var(--ease), stroke .3s var(--ease); }
.op-verdict.is-multi .op-meter .fill { stroke: var(--white); }
.op-verdict strong { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.035em; line-height: 1.1; }
.op-verdict p { margin-top: 12px; color: var(--muted-dark); }
.op-verdict .link-arrow { margin-top: 20px; }

/* online in drie weken: werkdagen vullen zich */
.op-weeks { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.op-weeks li { padding: clamp(24px, 3vw, 32px); border-radius: var(--radius); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .04); }
.op-days { display: flex; gap: 8px; margin-bottom: 28px; }
.op-days i { width: 100%; max-width: 30px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); transition: background .3s var(--ease), border-color .3s var(--ease); transition-delay: calc(var(--d) * 90ms + .3s); }
.op-weeks.in .op-days i { background: var(--signal); border-color: var(--signal); }
.op-weeks h3 { font-size: 1.4rem; letter-spacing: -.03em; font-weight: 800; margin-bottom: 10px; }
.op-weeks p { color: var(--muted-dark); }

/* een one pager in de praktijk: lange screenshot die scrolt bij hover */

/* faq: alles open, zoals op een one pager */
.op-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); margin-top: clamp(32px, 5vw, 56px); }
.op-faq-list > div { padding: 28px 0 32px; border-top: 2px solid var(--ink); }
.op-faq-list h3 { margin-bottom: 10px; font-size: 1.25rem; }
.op-faq-list p { color: var(--muted); }

/* cta: de pagina eindigt met de knop */
.op-cta { text-align: center; }
.op-cta h2 { max-width: 15ch; margin: 0 auto; font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.055em; line-height: .98; }
.op-line { width: 2px; height: clamp(72px, 10vw, 140px); margin: clamp(28px, 4vw, 40px) auto; background: linear-gradient(var(--white) 50%, transparent 0) 0 0 / 2px 12px repeat-y; opacity: .45; transform-origin: top; transform: scaleY(0); transition: transform 1.2s var(--ease) .3s; }
.op-line.in { transform: none; }
.op-cta .btn-row { justify-content: center; margin-top: 32px; }
.op-cta .btn { font-size: 1.15rem; padding: 22px 40px; }
.op-cta p { margin-top: 24px; color: var(--muted-dark); }

/* ---------- multi pager ---------- */
/* hero: drie pagina's die uitwaaieren */
.mp-stack { position: relative; aspect-ratio: 6 / 5; }
.mp-win { position: absolute; width: 72%; overflow: hidden; border-radius: 18px; background: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--line); transition: transform 1s var(--ease); }
.mp-win:nth-child(1) { top: 2%; left: 0; transform: rotate(-3deg); }
.mp-win:nth-child(2) { top: 12%; left: 14%; transform: rotate(-1deg); }
.mp-win:nth-child(3) { top: 24%; left: 28%; transform: rotate(1deg); }
.mp-stack.in .mp-win:nth-child(1) { transform: translate(-3%, -4%) rotate(-7deg); }
.mp-stack.in .mp-win:nth-child(3) { transform: translate(3%, 4%) rotate(4deg); }
.mp-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--muted); }
.mp-win-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--paper-2); }
.mp-win-bar span { margin-left: 8px; }
.mp-win-body { display: grid; gap: 10px; padding: 18px; }
.mp-win-body .photo { --ar: 16 / 9; border-radius: 10px; }
.mp-sk { display: block; height: 9px; border-radius: 5px; background: var(--paper-2); }
.mp-sk.dark { height: 14px; background: var(--ink); opacity: .85; }

/* sitemap: kies een voorbeeld, klik op een pagina */
.mp-map { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 56px); align-items: start; }
.mp-sectors { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.mp-sectors button { font: inherit; font-weight: 600; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--ink); background: none; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.mp-sectors button:hover { background: var(--white); }
.mp-sectors button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.mp-tree { padding: clamp(16px, 3vw, 32px); border-radius: var(--radius); background: var(--white); }
.mp-tree ul { list-style: none; }
.mp-tree ul ul { margin-left: 20px; padding-left: 18px; border-left: 2px solid var(--line); }
.mp-tree li { position: relative; }
.mp-tree ul ul > li::before { content: ""; position: absolute; left: -18px; top: 25px; width: 14px; border-top: 2px solid var(--line); }
.mp-node { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.mp-node small { color: var(--muted); font-size: .85rem; font-weight: 500; overflow-wrap: anywhere; text-align: right; }
.mp-node:hover { background: var(--paper); }
.mp-node[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.mp-node[aria-pressed="true"] small { color: var(--muted-dark); }
.mp-info { position: sticky; top: 120px; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius); background: var(--ink); color: var(--white); }
.mp-path { color: var(--muted-dark); font-size: .92rem; overflow-wrap: anywhere; }
.mp-info strong { display: block; margin-top: 8px; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -.04em; line-height: 1.05; }
.mp-info p { margin-top: 14px; color: var(--muted-dark); }
.mp-info .mp-kw { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.mp-kw b { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--white); font-weight: 600; }
.mp-kw svg { width: 16px; height: 16px; flex: none; }

/* groeit mee: nieuwe pagina's schuiven erbij */
.mp-grow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.mp-grow .photo { --ar: 4 / 5; }
.mp-grow > div > p { margin-top: 20px; color: var(--muted); font-size: 1.15rem; max-width: 34rem; }
.mp-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
.mp-tiles li { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; aspect-ratio: 4 / 3; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 16px; font-weight: 700; font-size: .95rem; line-height: 1.2; }
.mp-tiles li::before { content: ""; display: block; width: 40%; height: 6px; border-radius: 3px; background: var(--paper-2); }
.mp-tiles li.new { position: relative; border-color: var(--signal); background: rgba(255, 91, 26, .06); opacity: 0; transform: scale(.85); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--d) * .4s + .5s); }
.mp-tiles li.new::after { content: "+"; position: absolute; top: 8px; right: 12px; color: var(--signal); font-size: 1.4rem; font-weight: 800; line-height: 1; }
.mp-tiles.in li.new { opacity: 1; transform: none; }

/* planning: balken per fase */
.mp-plan { --lab: 240px; }
.mp-plan-axis { display: flex; justify-content: space-between; margin-left: calc(var(--lab) + 16px); padding-bottom: 12px; border-bottom: 1px solid var(--line-dark); color: var(--muted-dark); font-size: .9rem; font-weight: 600; }
.mp-plan ol { list-style: none; }
.mp-plan li { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
.mp-plan h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.mp-track { position: relative; height: 34px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), rgba(255, 255, 255, .1) calc(100% / 6 - 1px) calc(100% / 6)); }
.mp-bar { position: absolute; top: 0; bottom: 0; left: var(--s); width: var(--w); border-radius: 999px; background: var(--white); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease); transition-delay: calc(var(--i) * .15s + .2s); }
.mp-bar.live { background: var(--signal); }
.mp-plan.in .mp-bar { transform: none; }

/* doorverwijzen: oude adressen naar nieuwe pagina's */
.mp-move { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.mp-move > div > p { margin-top: 20px; color: var(--muted); font-size: 1.15rem; }
.mp-redirects { list-style: none; display: grid; gap: 12px; }
.mp-redirects li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: 14px; padding: 18px 22px; border-radius: var(--radius-sm); background: var(--white); font-size: .95rem; }
.mp-old { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--signal); text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.mp-new { font-weight: 700; overflow-wrap: anywhere; }
.mp-redirects svg { width: 22px; height: 22px; color: var(--signal); }

/* faq als inhoudstafel */
.mp-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.mp-faq-index { position: sticky; top: 120px; }
.mp-faq-index ol { list-style: none; margin-top: 28px; border-left: 2px solid var(--line); }
.mp-faq-index a { display: block; margin-left: -2px; padding: 10px 0 10px 20px; border-left: 2px solid transparent; color: var(--muted); font-weight: 600; text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease); }
.mp-faq-index a:hover { color: var(--ink); border-color: var(--signal); }
.mp-faq-answers article { padding: 32px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.mp-faq-answers article:first-child { padding-top: 0; }
.mp-faq-answers h3 { margin-bottom: 12px; font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.03em; font-weight: 800; transition: color .3s var(--ease); }
.mp-faq-answers article:target h3 { color: var(--signal); }
.mp-faq-answers p { color: var(--muted); }

/* cta: adresbalk met wisselende pagina */
.mp-cta { text-align: center; }
.mp-addr { display: flex; align-items: center; width: fit-content; margin: 0 auto clamp(32px, 4vw, 48px); padding: 16px 28px; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .06); font-size: clamp(1.05rem, 2.4vw, 1.6rem); font-weight: 600; }
.mp-addr .caret { width: 2px; height: 1.1em; margin-left: 3px; background: currentColor; animation: mp-blink 1s steps(1) infinite; }
@keyframes mp-blink { 50% { opacity: 0; } }
.mp-cta h2 { max-width: 18ch; margin: 0 auto; }
.mp-cta p { max-width: 32rem; margin: 20px auto 0; color: var(--muted-dark); font-size: 1.2rem; }
.mp-cta .btn-row { justify-content: center; }

/* ---------- e-commerce ---------- */
/* hero: foto in de vorm van een prijskaartje */
.ec-tag { position: relative; justify-self: end; width: min(100%, 440px); filter: drop-shadow(0 24px 40px rgba(0, 24, 61, .14)); }
.ec-tag .photo { --ar: 4 / 5; border-radius: 0; clip-path: polygon(22% 0, 78% 0, 100% 15%, 100% 100%, 0 100%, 0 15%); }
.ec-tag::after { content: ""; position: absolute; left: 50%; top: 7%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--white); box-shadow: inset 0 2px 5px rgba(0, 24, 61, .25); }

/* checkout: klik zelf door */
.ec-flow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ec-device { display: flex; flex-direction: column; gap: 20px; min-height: 480px; padding: clamp(20px, 3vw, 32px); border-radius: 32px; background: var(--white); box-shadow: var(--shadow); }
.ec-top { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; }
.ec-top span { color: var(--muted); font-weight: 500; }
.ec-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ec-progress i { height: 4px; border-radius: 2px; background: var(--paper-2); transition: background .3s var(--ease); }
.ec-progress i.on { background: var(--signal); }
.ec-scr { display: flex; flex: 1; flex-direction: column; gap: 14px; animation: ec-in .45s var(--ease); }
.ec-scr[hidden] { display: none; }
@keyframes ec-in { from { opacity: 0; transform: translateX(14px); } }
.ec-jar { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 18px; background: linear-gradient(160deg, var(--paper), var(--paper-2)); }
.ec-jar span { position: relative; display: grid; place-items: center; width: 92px; height: 104px; border-radius: 22px 22px 26px 26px; background: linear-gradient(170deg, #F7BC4A, #E08A1C); box-shadow: inset -10px 0 0 rgba(255, 255, 255, .18); }
.ec-jar span::before { content: ""; position: absolute; top: -18px; left: 10px; right: 10px; height: 20px; border-radius: 6px; background: var(--ink); }
.ec-jar b { padding: 6px 10px; border-radius: 6px; background: var(--white); color: var(--ink); font-size: .8rem; }
.ec-title { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.15; }
.ec-muted { color: var(--muted); font-size: .95rem; }
.ec-price { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.ec-line { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ec-line.total { border-bottom: 0; font-weight: 800; font-size: 1.15rem; }
.ec-pay { display: grid; gap: 10px; border: 0; }
.ec-pay legend { margin-bottom: 4px; }
.ec-pay label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; font-weight: 600; cursor: pointer; }
.ec-pay label:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.ec-pay input { accent-color: var(--ink); }
.ec-btn { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 16px 20px; border: 0; border-radius: 14px; background: var(--ink); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.ec-btn svg { width: 18px; height: 18px; }
.ec-btn:hover { background: var(--signal); color: var(--ink); }
.ec-done { align-items: center; justify-content: center; text-align: center; }
.ec-check { width: 110px; height: 110px; margin-bottom: 8px; }
.ec-check path { fill: none; stroke-width: 22; }
.ec-check .b { stroke: var(--ink); }
.ec-check .p { stroke: var(--signal); }
.ec-check .c { stroke: var(--ink); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: ec-tick .6s var(--ease) .2s forwards; }
@keyframes ec-tick { to { stroke-dashoffset: 0; } }
.ec-done .ec-btn { align-self: stretch; }
.ec-steps { list-style: none; display: grid; gap: 8px; }
.ec-steps button { display: grid; gap: 6px; width: 100%; padding: 20px 24px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; opacity: .5; transition: opacity .3s var(--ease), background .3s var(--ease); }
.ec-steps button:hover { opacity: .8; }
.ec-steps button[aria-current="step"] { opacity: 1; background: var(--white); box-shadow: var(--shadow); }
.ec-steps strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.ec-steps span { color: var(--muted); }

/* lokaal: brede foto met kaart */
.ec-local { position: relative; }
.ec-local .photo { --ar: 21 / 9; }
.ec-local-card { position: absolute; right: clamp(16px, 4vw, 56px); bottom: clamp(16px, 4vw, 56px); width: min(460px, 80%); padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.ec-local-card h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.ec-local-card p { margin-top: 14px; color: var(--muted); }

/* inbegrepen: kassaticket */
.ec-incl { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ec-incl > div > p { margin-top: 20px; color: var(--muted); font-size: 1.15rem; max-width: 30rem; }
.ec-receipt { padding: 36px 32px 34px; background: var(--white); box-shadow: var(--shadow); transform: rotate(1.5deg); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x; }
.ec-receipt-head { padding-bottom: 18px; border-bottom: 2px dashed var(--line); text-align: center; }
.ec-receipt-head strong { display: block; font-size: 1.2rem; letter-spacing: -.02em; }
.ec-receipt-head span { color: var(--muted); font-size: .9rem; }
.ec-receipt ul { list-style: none; padding: 14px 0; border-bottom: 2px dashed var(--line); }
.ec-receipt li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.ec-receipt li b { color: var(--signal); }
.ec-receipt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0 4px; font-weight: 800; font-size: 1.1rem; }
.ec-barcode { width: 70%; height: 44px; margin: 20px auto 0; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 13px); }

/* faq als productinfo */
.ec-faq { max-width: 860px; }
.ec-faq-box { margin-top: clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ec-faq-box details + details { border-top: 1px solid var(--line); }
.ec-faq-box summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 28px; font-weight: 700; font-size: 1.1rem; list-style: none; cursor: pointer; }
.ec-faq-box summary::-webkit-details-marker { display: none; }
.ec-faq-box summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.ec-faq-box details[open] { background: var(--paper); }
.ec-faq-box details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.ec-faq-box details p { padding: 0 28px 26px; color: var(--muted); }

/* cta: bordje draait van gesloten naar open */
.ec-cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.ec-cta h2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); letter-spacing: -.055em; line-height: .95; }
.ec-cta p { margin-top: 24px; max-width: 30rem; color: var(--muted-dark); font-size: 1.2rem; }
.ec-sign { justify-self: center; display: flex; flex-direction: column; align-items: center; perspective: 900px; transform-origin: top center; }
.ec-sign svg { width: 200px; height: 70px; }
.ec-sign svg line { stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.ec-sign svg circle { fill: var(--white); }
.ec-sign-card { position: relative; width: 260px; height: 130px; margin-top: -4px; transform-style: preserve-3d; transition: transform 1s var(--ease) .5s; }
.ec-sign-card span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ec-sign-card .front { background: var(--white); color: var(--ink); }
.ec-sign-card .back { background: var(--signal); color: var(--ink); transform: rotateY(180deg); }
.ec-sign.in .ec-sign-card { transform: rotateY(180deg); }
.ec-sign.in { animation: ec-swing 2.4s ease-in-out 1.4s both; }
@keyframes ec-swing { 25% { transform: rotate(3deg); } 50% { transform: rotate(-2deg); } 75% { transform: rotate(1deg); } 100% { transform: none; } }

@media (max-width: 1024px) {
  .mp-plan { --lab: 180px; }
}
@media (max-width: 860px) {
  .family-list { grid-template-columns: 1fr; }
  .op-hero-grid, .mp-hero-grid, .ec-hero-grid, .op-scroll, .op-check, .mp-map, .mp-grow, .mp-move, .mp-faq, .ec-flow, .ec-incl, .ec-cta-grid { grid-template-columns: 1fr; }
  .op-hero-visual { width: min(80%, 360px); }
  .op-device { position: static; order: -1; margin-bottom: 8px; }
  .op-phone { width: min(66%, 240px); }
  .op-rail { display: none; }
  .op-page { animation: op-auto 16s var(--ease) infinite; transition: none; }
  .op-blocks li { margin-bottom: 14px; opacity: 1; transform: none; box-shadow: none; }
  .op-weeks { grid-template-columns: 1fr; }
  .op-faq-list { grid-template-columns: 1fr; }
  .mp-info, .mp-faq-index { position: static; }
  .mp-win { width: 76%; }
  .mp-win:nth-child(2) { left: 11%; }
  .mp-win:nth-child(3) { left: 21%; }
  .mp-stack.in .mp-win:nth-child(3) { transform: translate(1%, 4%) rotate(3deg); }
  .mp-plan { --lab: 1fr; }
  .mp-plan li { grid-template-columns: 1fr; gap: 10px; }
  .mp-plan-axis { margin-left: 0; }
  .mp-redirects li { grid-template-columns: 1fr; gap: 6px; }
  .mp-redirects svg { transform: rotate(90deg); }
  .ec-tag { justify-self: center; width: min(80%, 360px); }
  .ec-local .photo { --ar: 4 / 3; }
  .ec-local-card { position: relative; right: auto; bottom: auto; width: auto; margin: -48px 16px 0; }
  .ec-sign { justify-self: start; order: -1; }
}
@keyframes op-auto { 0%, 14% { transform: none; } 20%, 34% { transform: translateY(-20%); } 40%, 54% { transform: translateY(-40%); } 60%, 74% { transform: translateY(-60%); } 80%, 100% { transform: translateY(-80%); } }
@media (max-width: 560px) {
  .mp-tiles { grid-template-columns: 1fr 1fr; }
  .mp-tiles li:nth-child(n+9) { display: none; }
  .mp-node small { display: none; }
  .ec-sign-card { width: 220px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .op-page, .op-blocks li, .op-days i, .op-line, .mp-win, .mp-tiles li.new, .mp-bar, .ec-sign-card { transition: none; }
  .op-page, .ec-sign.in, .ec-scr { animation: none; }
  .op-line { transform: none; }
  .mp-addr .caret { animation: none; }
  .ec-check .c { animation: none; stroke-dashoffset: 0; }
}

/* ---------- wat kost een website ---------- */
/* hero: kop links, lead rechts onderaan, de calculator eronder over de volle breedte */
.bp-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(32px, 5vw, 64px); }
.bp-hero h1 { font-size: clamp(2.6rem, 7vw, 6.4rem); }
.bp-hero h1 em { font-style: normal; color: var(--signal); }
.bp-hero .lead { margin-top: 0; }

/* calculator: één vraag per keer links, rechts een blad met ring, prijs en je keuzes */
.bp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4.5vw, 64px); border-radius: var(--radius); scroll-margin-top: 96px; }
.bp-main { min-width: 0; }
.bp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 20px; }
.bp-mini { display: none; align-items: center; gap: 10px; font-weight: 600; color: var(--muted-dark); }
.bp-mini b { color: var(--white); font-weight: 800; font-variant-numeric: tabular-nums; }
.bp-mini svg { width: 36px; height: 36px; flex: none; }
.bp-back { margin-left: auto; font: inherit; font-weight: 600; color: var(--muted-dark); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.bp-back:hover { color: var(--white); }
.bp-back[hidden] { display: none; }
.bp-step { border: 0; animation: bp-in .45s var(--ease); }
.bp-step legend { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; margin-bottom: 24px; }
.bp-opts { display: grid; gap: 10px; }
.bp-opts button { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; font: inherit; color: var(--white); background: rgba(255, 255, 255, .04); border: 1.5px solid var(--line-dark); border-radius: var(--radius-sm); padding: 16px 20px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.bp-opts button::before { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; opacity: .35; }
.bp-opts button > span { flex: 1; min-width: 0; }
.bp-opts b { display: block; font-size: 1.1rem; line-height: 1.25; }
.bp-opts small { display: block; margin-top: 3px; font-size: .92rem; line-height: 1.4; color: var(--muted-dark); }
.bp-opts em { flex: none; font-style: normal; font-weight: 800; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.bp-opts em small { margin-top: 0; font-weight: 600; font-size: .8rem; }
.bp-opts button:hover { border-color: var(--white); }
.bp-opts button[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); }
.bp-opts button[aria-pressed="true"] small { color: var(--muted); }
.bp-opts button[aria-pressed="true"]::before { background: var(--signal); opacity: 1; }
.bp-step > .btn { margin-top: 24px; }
.bp-note { margin-top: 16px; font-size: .95rem; color: var(--muted-dark); }
.bp-note a { color: var(--white); text-underline-offset: 3px; }
.bp-result { animation: bp-in .45s var(--ease); }
.bp-result h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.bp-result h2:focus { outline: none; }
.bp-result h2 span { color: var(--signal); white-space: nowrap; }
.bp-result > p { margin-top: 16px; max-width: 34rem; font-size: 1.12rem; color: var(--muted-dark); }
.bp-result > p b { color: var(--white); }
.bp-result .btn-row { margin-top: 24px; }
.bp-lead { margin: 32px 0 20px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
@keyframes bp-in { from { opacity: 0; transform: translateY(12px); } }

/* het blad: de ring sluit per vraag, het oranje stuk valt erin als alles gekozen is */
.bp-sheet { position: sticky; top: 110px; padding: clamp(24px, 3vw, 36px); border-radius: calc(var(--radius) - 8px); background: var(--white); color: var(--ink); }
.bp-dial { position: relative; width: min(100%, 230px); aspect-ratio: 1; margin: 0 auto; }
.bp-dial svg { width: 100%; height: 100%; }
.bp-dial circle, .bp-mini circle { fill: none; stroke-width: 12; transform: rotate(-90deg); transform-origin: 100px 100px; }
.bp-mini circle { stroke-width: 24; }
.bp-dial .track { stroke: var(--paper-2); }
.bp-mini .track { stroke: rgba(255, 255, 255, .14); }
.bp-dial .fill, .bp-mini .fill { stroke: var(--ink); stroke-dasharray: 0 100; transition: stroke-dasharray .6s var(--ease); }
.bp-mini .fill { stroke: var(--white); }
.bp-dial .piece, .bp-mini .piece { stroke: var(--signal); stroke-dasharray: 10 100; stroke-dashoffset: -90; opacity: 0; transition: opacity .4s var(--ease) .3s; }
.bp.done .piece { opacity: 1; }
.bp-sum { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.bp-sum span { font-size: .9rem; font-weight: 600; color: var(--muted); }
.bp-sum strong { margin: 4px 0; font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-empty { margin-top: 20px; text-align: center; color: var(--muted); }
.bp-empty[hidden] { display: none; }
.bp-lines { list-style: none; margin-top: 24px; }
.bp-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.bp-lines li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-lines li.month { margin-top: 10px; padding: 12px 16px; border: 0; border-radius: 12px; background: var(--paper); }
.bp-lines li.add { animation: bp-line .4s var(--ease); }
@keyframes bp-line { from { opacity: 0; transform: translateX(-10px); } }

/* webdesign pagina: verwijzing naar de calculator met een voorbeeldberekening */
.bp-teaser { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bp-teaser > div > p { margin-top: 20px; max-width: 32rem; font-size: 1.2rem; color: var(--muted-dark); }
.bp-teaser .bp-sheet { position: static; }
.bp-teaser .bp-sheet.in .fill { stroke-dasharray: 54 100; transition-delay: .4s; }

/* altijd inbegrepen */
.bp-incl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.bp-incl > div > p { margin-top: 20px; font-size: 1.2rem; color: var(--muted); }
.bp-incl .checks { margin-top: 0; gap: 0; }
.bp-incl .checks li { padding: 16px 0 16px 34px; border-top: 1px solid var(--line); font-size: 1.15rem; font-weight: 600; }
.bp-incl .checks li::before { top: calc(16px + .35em); background: var(--signal); }

/* faq: geen kleine lettertjes, dus alles in gewone letters naast elkaar */
.bp-faq { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 48px) clamp(32px, 6vw, 96px); margin-top: clamp(32px, 5vw, 56px); }
.bp-faq dt { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.bp-faq dd { margin-top: 10px; color: var(--muted); }

.bp-cta { text-align: center; }
.bp-cta p { max-width: 34rem; margin: 20px auto 0; font-size: 1.2rem; color: var(--muted-dark); }
.bp-cta .btn-row { justify-content: center; }

@media (max-width: 860px) {
  .bp-hero-grid, .bp, .bp-teaser, .bp-incl, .bp-faq { grid-template-columns: 1fr; }
  .bp-mini { display: inline-flex; }
  .bp-sheet { position: static; }
  .bp-dial { width: min(100%, 190px); }
}
@media (max-width: 560px) {
  .bp { padding: 22px 16px; border-radius: var(--radius-sm); }
  .bp-opts button { gap: 12px; padding: 14px 16px; }
  .bp-opts button::before { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bp-step, .bp-result, .bp-lines li.add { animation: none; }
  .bp-dial .fill, .bp-mini .fill { transition: none; }
}

/* ============ Over ons en juridische pagina's ============ */
.ov-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(32px, 5vw, 64px); }
.ov-hero h1 { font-size: clamp(2.4rem, 6.6vw, 6.2rem); }
.ov-hero h1 em { font-style: normal; color: var(--signal); }
.ov-portrait { position: relative; justify-self: end; width: min(100%, 440px); }
.ov-portrait .photo { --ar: 4 / 5; }
.ov-portrait figcaption { position: absolute; left: -24px; bottom: 28px; padding: 16px 22px; border-radius: var(--radius-sm); background: var(--white); box-shadow: var(--shadow); color: var(--muted); font-size: .92rem; line-height: 1.3; }
.ov-portrait figcaption b { display: block; color: var(--ink); font-size: 1.15rem; letter-spacing: -.02em; }
.ov-name { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ov-name .ring { width: min(100%, 360px); --ring-w: 14; color: var(--white); }
.ov-name p { margin-top: 20px; color: var(--muted-dark); font-size: 1.15rem; max-width: 36rem; }
.ov-values { list-style: none; margin-top: clamp(32px, 5vw, 56px); }
.ov-values li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 5vw, 72px); padding: clamp(24px, 3vw, 36px) 0; border-top: 2px solid var(--ink); }
.ov-values h3 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.045em; font-weight: 800; }
.ov-values p { color: var(--muted); font-size: 1.1rem; max-width: 36rem; }
.ov-local { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ov-local .photo { --ar: 3 / 2; }
.ov-local p { margin-top: 18px; color: var(--muted); font-size: 1.1rem; }
.ov-local .link-arrow { margin-top: 24px; }
.ov-cta { text-align: center; }
.ov-cta p { margin: 20px auto 0; max-width: 32rem; color: var(--muted-dark); font-size: 1.2rem; }
.ov-cta .btn-row { justify-content: center; }
.legal-hero { padding-bottom: clamp(32px, 4vw, 48px); }
.legal-hero h1 { margin-top: clamp(24px, 4vw, 48px); font-size: clamp(2.6rem, 6vw, 5rem); }
.legal-date { margin-top: 16px; color: var(--muted); }
.legal { max-width: 46rem; font-size: 1.08rem; }
.legal-intro { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.45; letter-spacing: -.01em; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.legal h2 { margin-top: 48px; margin-bottom: 14px; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.035em; }
.legal p, .legal ul { color: #34353a; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 14px; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--ink); }
.legal a { text-underline-offset: 3px; text-decoration-color: var(--signal); }
@media (max-width: 860px) {
  .ov-hero-grid, .ov-name, .ov-values li, .ov-local { grid-template-columns: 1fr; }
  .ov-portrait { justify-self: center; width: min(86%, 380px); }
  .ov-portrait figcaption { left: 12px; }
  .ov-name .ring { width: 180px; }
}

/* ============ Shoots pagina ============ */

/* hoekhaken: herbruikbaar voor focusvak, kop en snijtekens */
.brackets { --bc: currentColor; --bl: 14px; --bw: 2px;
  background:
    linear-gradient(var(--bc) 0 0) 0 0 / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 0 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc) 0 0) 100% 0 / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 100% 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc) 0 0) 0 100% / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 0 100% / var(--bw) var(--bl),
    linear-gradient(var(--bc) 0 0) 100% 100% / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 100% 100% / var(--bw) var(--bl);
  background-repeat: no-repeat; }

/* hero als camerazoeker */
.vf-hero { background: var(--ink); color: var(--white); padding: 12px clamp(8px, 1.5vw, 20px) 0; }
.vf { position: relative; max-width: 1480px; margin: 0 auto; min-height: min(90vh, 880px); border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; }
.vf > .photo { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; z-index: -2; }
.vf::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 24, 61, .85), rgba(0, 24, 61, .15) 55%, rgba(0, 24, 61, .35)); }
/* basisstand onzichtbaar: na de animatie mag het zwarte vlak nooit blijven staan */
.vf.shutter::before { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--ink); opacity: 0; animation: shutter .22s steps(1); pointer-events: none; }
@keyframes shutter { 0% { opacity: .35; } 100% { opacity: 0; } }
.vf-ui { position: absolute; inset: clamp(14px, 2.5vw, 32px); pointer-events: none; font-size: .82rem; font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.vf-ui .frame-corners { position: absolute; inset: 0; --bl: 44px; --bw: 2px; color: rgba(255, 255, 255, .85); }
.vf-ui .thirds { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .14) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .14) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(transparent calc(33.33% - .5px), rgba(255, 255, 255, .14) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(255, 255, 255, .14) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.vf-top { position: absolute; top: 18px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; }
.vf-rec { display: inline-flex; align-items: center; gap: 8px; }
.vf-rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); animation: rec 1.2s steps(1) infinite; }
@keyframes rec { 50% { opacity: .2; } }
.vf-bottom { position: absolute; bottom: 18px; right: 22px; display: flex; gap: 18px; }
.vf-focus { position: absolute; left: 60%; top: 30%; width: clamp(90px, 12vw, 160px); aspect-ratio: 4 / 3; --bl: 18px; --bw: 2px; color: var(--white); }
.vf-focus.hunt { animation: hunt 1s var(--ease) forwards; }
@keyframes hunt { 0% { transform: scale(1.3); color: var(--white); } 35% { transform: scale(.9); } 60% { transform: scale(1.06); } 85% { transform: none; color: var(--white); } 100% { transform: none; color: var(--signal); } }
.vf[data-vf-mode="foto"] .only-video, .vf[data-vf-mode="video"] .only-foto { display: none; }
.vf-content { position: relative; width: 100%; padding: clamp(84px, 10vw, 140px) clamp(28px, 5vw, 72px) clamp(64px, 7vw, 96px); }
.vf-content .crumbs { color: rgba(255, 255, 255, .7); padding: 0 0 20px; }
.vf-content h1 { max-width: 13ch; }
.vf-content .lead { margin-top: 24px; max-width: 34rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: rgba(255, 255, 255, .8); }
.vf-modes { position: absolute; top: clamp(14px, 2.5vw, 32px); left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0, 24, 61, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .2); }
.vf-modes button { font: inherit; font-size: .9rem; font-weight: 600; color: rgba(255, 255, 255, .75); background: none; border: 0; border-radius: 999px; padding: 8px 18px; min-height: 36px; cursor: pointer; }
.vf-modes button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.fb { position: relative; display: inline-block; padding: 0 .1em; margin: 0 -.02em; }
.fb::after { content: ""; position: absolute; inset: .02em -.02em -.04em; --bc: var(--signal); --bl: .3em; --bw: .06em; background:
    linear-gradient(var(--bc) 0 0) 0 0 / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 0 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc) 0 0) 100% 0 / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 100% 0 / var(--bw) var(--bl),
    linear-gradient(var(--bc) 0 0) 0 100% / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 0 100% / var(--bw) var(--bl),
    linear-gradient(var(--bc) 0 0) 100% 100% / var(--bl) var(--bw), linear-gradient(var(--bc) 0 0) 100% 100% / var(--bw) var(--bl);
  background-repeat: no-repeat; transform: scale(1.35); opacity: 0; transition: transform .6s var(--ease) .9s, opacity .3s var(--ease) .9s; }
.in .fb::after { transform: none; opacity: 1; }

/* redactionele tekst: pull quote en twee kolommen */
.editorial .pull { font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; max-width: 20ch; }
.editorial .pull em { font-style: normal; color: var(--signal); }
.columns { margin-top: clamp(40px, 5vw, 64px); columns: 2; column-gap: clamp(32px, 5vw, 72px); font-size: 1.1rem; color: #34353a; }
.columns p { break-inside: avoid; }
.columns p:first-child::first-letter { float: left; font-size: 3.6em; line-height: .82; font-weight: 800; margin: .06em .08em 0 0; color: var(--ink); }
.columns a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--signal); }

/* filmstrook */
.strip-section { background: #00102B; color: var(--white); padding: clamp(80px, 10vw, 136px) 0; }
.strip-section .section-head p { color: var(--muted-dark); }
.strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip-frames { position: relative; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 20px; min-width: 100%; width: max-content; padding: 46px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); background: #0A2652; }
@media (min-width: 1100px) { .strip-frames { width: 100%; } }
.strip-frames::before, .strip-frames::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, .16) 12px 26px, transparent 26px 36px); }
.strip-frames::before { top: 14px; }
.strip-frames::after { bottom: 14px; }
.frame { scroll-snap-align: center; }
.frame-shot { position: relative; }
.frame .photo { --ar: 3 / 4; border-radius: 6px; }
.frame h3 { margin-top: 6px; font-size: 1.35rem; letter-spacing: -.03em; }
.frame p { margin-top: 8px; color: var(--muted-dark); font-size: .98rem; }
.grease { position: absolute; left: -18px; top: -16px; width: calc(100% + 36px); height: calc(100% + 32px); overflow: visible; pointer-events: none; }
/* geen non-scaling-stroke: dat zou pathLength en dus het tekenen breken */
.grease path { fill: none; stroke: var(--signal); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .9s var(--ease), opacity .15s; }
.frame:hover .grease path { stroke-dashoffset: 0; opacity: 1; }
/* op touch één keeper markeren, zoals op een echt contactblad */
@media (hover: none) { .frame:first-child.in .grease path { stroke-dashoffset: 0; opacity: 1; transition-delay: .4s; } }


/* draaiboek */
.callsheet { background: var(--white); border-radius: 20px; box-shadow: var(--shadow); border-top: 8px solid var(--ink); overflow: hidden; }
.cs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 24px clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.cs-head strong { font-size: 1.5rem; letter-spacing: -.035em; font-weight: 800; }
.cs-head span { color: var(--muted); font-size: .92rem; }
.cs-cols { display: grid; grid-template-columns: 1fr 1.4fr 1fr; }
.cs-col { padding: 28px clamp(20px, 3vw, 36px) 32px; }
.cs-col + .cs-col { border-left: 1px solid var(--line); }
.cs-col h3 { font-size: 1.1rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.cs-col h3::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--ink); }
.cs-col:nth-child(2) h3::before { background: var(--signal); }
.cs-col ul { list-style: none; display: grid; gap: 10px; color: #34353a; }
.cs-col ul li { padding-left: 18px; position: relative; }
.cs-col ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1.5px; background: var(--muted); }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table td { padding: 9px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.cs-table tr:last-child td { border-bottom: 0; }
.cs-table td:first-child { width: 4.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-note { padding: 0 clamp(20px, 3vw, 36px) 24px; font-size: .88rem; color: var(--muted); }

/* events met flits */
.event { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.event .photo { --ar: 3 / 2; }
.flash-frame { position: relative; }
.flash-frame::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); background: var(--white); opacity: 0; pointer-events: none; }
.flash-frame.in::after { animation: flash 1s var(--ease) .5s; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: .95; } 100% { opacity: 0; } }
.event p { margin-top: 20px; color: var(--muted); font-size: 1.12rem; max-width: 32rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.chips li { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; font-size: .95rem; }

/* faq als interview */
.qa-list { border-top: 2px solid var(--ink); }
.qa-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(24px, 5vw, 80px); padding: 28px 0; border-bottom: 1px solid var(--line); }
.qa-item dt { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; display: grid; grid-template-columns: 2rem 1fr; }
.qa-item dt::before { content: "V"; color: var(--signal); font-weight: 800; }
.qa-item dd { color: var(--muted); font-size: 1.05rem; }

/* cta met diafragma */
.iris-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.iris-cta h2 { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -.055em; line-height: .95; }
.iris-cta p { margin-top: 24px; max-width: 32rem; color: var(--muted-dark); font-size: 1.2rem; }
.iris-cta .also { margin-top: 32px; font-size: 1rem; }
.iris-cta .also a { color: var(--white); text-underline-offset: 4px; text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.iris { width: min(100%, 420px); justify-self: end; }
.iris .disk { fill: #24252A; }
.iris .ap { transform-box: view-box; transform-origin: center; transform: scale(.06) rotate(-50deg); transition: transform 1.6s var(--ease) .3s; }
.iris.in .ap { transform: none; }
.iris .hole { fill: var(--signal); }
.iris line { stroke: #43444B; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.iris .barrel { fill: none; stroke: var(--white); stroke-width: 6; }

@media (max-width: 1024px) {
  .cs-cols { grid-template-columns: 1fr 1fr; }
  .cs-col:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .event, .iris-cta { grid-template-columns: 1fr; }
  .iris { justify-self: start; width: 220px; order: -1; }
  .qa-item { grid-template-columns: 1fr; }
  .columns { columns: 1; }
  .vf-focus { left: 56%; top: 22%; }
  .vf-bottom { display: none; }
}
@media (max-width: 640px) {
  .strip-frames { grid-auto-columns: 74vw; }
  .cs-cols { grid-template-columns: 1fr; }
  .cs-col + .cs-col { border-left: 0; border-top: 1px solid var(--line); }
  .vf { min-height: 86vh; }
  .vf-focus, .vf-ui .thirds { display: none; }
  .vf-modes { top: auto; bottom: 22px; left: auto; right: 22px; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vf.shutter::before, .vf-rec::before, .vf-focus.hunt, .flash-frame.in::after { animation: none; }
  .vf-focus { color: var(--signal); }
  .fb::after { transform: none; opacity: 1; transition: none; }
  .grease path { transition: none; }
  .iris .ap { transition: none; transform: none; }
}

/* ============ Socials en advertenties pagina ============ */

/* gecentreerde hero met telefoons die uit de rand omhoogkomen */
.hero-center { text-align: center; padding: clamp(28px, 5vw, 56px) 0 0; overflow: hidden; }
.hero-center .crumbs ol { justify-content: center; }
.hero-center h1 { margin: clamp(28px, 4vw, 48px) auto 0; }
.hero-center .lead { margin: 28px auto 0; max-width: 38rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--muted); }
.hero-center .btn-row { justify-content: center; }
.pop-word { color: var(--signal); position: relative; }
.like { display: inline-block; width: .42em; height: .42em; margin-left: .06em; vertical-align: .55em; color: var(--signal); transform: scale(0); }
.in .like { animation: like .7s var(--ease) 1.1s forwards; }
@keyframes like { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
.phones { position: relative; height: clamp(360px, 44vw, 520px); margin-top: clamp(48px, 6vw, 80px); display: flex; justify-content: center; align-items: flex-start; }
.phone { position: relative; width: clamp(200px, 22vw, 280px); aspect-ratio: 9 / 19; border-radius: 40px; background: var(--ink); padding: 10px; box-shadow: 0 30px 60px rgba(0, 24, 61, .22); flex: 0 0 auto; }
.phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 18px; transform: translateX(-50%); border-radius: 999px; background: var(--ink); z-index: 3; }
.phone-screen { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: var(--white); text-align: left; display: flex; flex-direction: column; font-size: .82rem; }
.phone.side { width: clamp(180px, 19vw, 240px); margin-top: 60px; }
.phone.left { transform: rotate(-8deg) translateX(28px); z-index: 1; }
.phone.right { transform: rotate(8deg) translateX(-28px); z-index: 1; }
.phone.center { z-index: 2; }
.ph-top { display: flex; align-items: center; gap: 8px; padding: 40px 14px 10px; }
.ph-av { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; flex: 0 0 auto; }
.ph-av svg { width: 16px; height: 16px; }
.ph-top b { display: block; font-size: .85rem; line-height: 1.1; }
.ph-top small { display: block; color: var(--muted); font-size: .72rem; }
.phone-screen .photo { border-radius: 0; flex: 0 0 auto; }
.ph-actions { display: flex; gap: 14px; padding: 10px 14px 6px; }
.ph-actions svg { width: 20px; height: 20px; }
.ph-actions svg:first-child { color: var(--signal); }
.ph-caption { padding: 0 14px; color: #34353a; line-height: 1.4; }
.ph-cta { margin: 10px 14px; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-weight: 700; }
.ph-cta span { color: var(--signal); }
/* story in de middelste telefoon */
.story { position: absolute; inset: 0; background: var(--ink-2); color: var(--white); }
.story .photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.story-bars { position: absolute; top: 44px; left: 14px; right: 14px; display: flex; gap: 4px; z-index: 2; }
.story-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.story-bars span::after { content: ""; display: block; height: 100%; width: 0; background: var(--white); }
.story-bars span:nth-child(1)::after { animation: seg1 12s linear infinite; }
.story-bars span:nth-child(2)::after { animation: seg2 12s linear infinite; }
.story-bars span:nth-child(3)::after { animation: seg3 12s linear infinite; }
@keyframes seg1 { 0% { width: 0; } 33.3% { width: 100%; } 100% { width: 100%; } }
@keyframes seg2 { 0%, 33.3% { width: 0; } 66.6% { width: 100%; } 100% { width: 100%; } }
@keyframes seg3 { 0%, 66.6% { width: 0; } 100% { width: 100%; } }
.story-user { position: absolute; top: 58px; left: 14px; display: flex; align-items: center; gap: 8px; z-index: 2; font-weight: 700; }
.story-user .ph-av { background: var(--white); color: var(--ink); }
.story-caps { position: absolute; left: 16px; right: 16px; bottom: 28%; z-index: 2; }
.story-caps p { position: absolute; left: 0; right: 0; bottom: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; opacity: 0; }
.story-caps p span { background: var(--white); color: var(--ink); padding: 2px 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.5; }
.story-caps p:nth-child(1) { animation: cap1 12s infinite; }
.story-caps p:nth-child(2) { animation: cap2 12s infinite; }
.story-caps p:nth-child(3) { animation: cap3 12s infinite; }
@keyframes cap1 { 0%, 31% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes cap2 { 0%, 33.3% { opacity: 0; } 35%, 64% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes cap3 { 0%, 66.6% { opacity: 0; } 68%, 98% { opacity: 1; } 100% { opacity: 0; } }
.story-reply { position: absolute; left: 14px; right: 14px; bottom: 18px; z-index: 2; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .8); }

/* twee helften met plusteken */
.halves { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.half { padding: clamp(8px, 2vw, 16px) clamp(24px, 5vw, 72px) clamp(8px, 2vw, 16px) 0; }
.half ~ .half { padding: clamp(8px, 2vw, 16px) 0 clamp(8px, 2vw, 16px) clamp(24px, 5vw, 72px); border-left: 2px solid var(--ink); }
.half h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.045em; font-weight: 800; line-height: 1.02; }
.half > p { margin-top: 16px; color: var(--muted); font-size: 1.1rem; }
.half ul { list-style: none; margin-top: 24px; display: grid; gap: 10px; }
.half li { padding-left: 22px; position: relative; font-weight: 500; }
.half li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.plus { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(64px, 7vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--signal); display: grid; place-items: center; box-shadow: 0 0 0 10px var(--paper); }
.plus svg { width: 40%; height: 40%; }
.halves-note { margin-top: clamp(40px, 5vw, 64px); text-align: center; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -.02em; }

/* contentkalender */
.cal { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.cal-head strong { font-size: 1.25rem; letter-spacing: -.03em; }
.cal-head span { color: var(--muted); font-size: .9rem; }
.cal-days, .cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-days span { padding: 10px 12px; font-size: .8rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); }
.cal-week { border-bottom: 1px solid var(--line); }
.cal-week:last-child { border-bottom: 0; }
.day { min-height: 104px; padding: 10px 10px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.day:nth-child(7) { border-right: 0; }
.day .dn { display: none; }
.day .dd { font-size: .82rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip { display: block; font-size: .78rem; line-height: 1.25; padding: 6px 8px; border-radius: 8px; font-weight: 600; }
.chip b { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.chip-reel { background: var(--ink); color: var(--white); }
.chip-post { background: var(--paper); }
.chip-story { border: 1.5px dashed var(--ink); }
.ad-bar { grid-column: var(--from) / var(--to); grid-row: 2; margin: 0 8px 10px; padding: 6px 10px; border-radius: 8px; background: var(--signal); font-size: .78rem; font-weight: 700; }
.ad-bar b { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; opacity: .75; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; list-style: none; font-size: .9rem; color: var(--muted); justify-content: center; }
.cal-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }


/* stel je maand samen: keuzes links, de feed van een maand groeit rechts mee */
.sm { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "form preview" "lead preview"; gap: 32px clamp(28px, 5vw, 72px); align-items: start; }
.sm-form { grid-area: form; }
.sm-q { border: 0; }
.sm-q + .sm-q { margin-top: 22px; }
.sm-q legend { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.sm-q .ml-chips { margin: 12px 0 0; }
.sm-preview { grid-area: preview; position: sticky; top: 110px; border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.sm-preview h3 { font-size: 1.6rem; letter-spacing: -.04em; font-weight: 800; }
.sm-profile { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.sm-av { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; }
.sm-av svg { width: 26px; height: 26px; }
.sm-profile b { display: block; line-height: 1.2; }
.sm-channels { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; font-size: .88rem; color: var(--muted-dark); min-height: 1.4em; }
.sm-stories { display: flex; gap: 10px; margin-top: 18px; height: 44px; }
.sm-stories i { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--signal); background: radial-gradient(circle, rgba(255, 255, 255, .22) 0 52%, transparent 54%); transform: scale(0); opacity: 0; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.sm-stories i.on { transform: none; opacity: 1; }
.sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 18px; }
.sm-grid i { position: relative; aspect-ratio: 1; border-radius: 6px; border: 1.5px dashed rgba(255, 255, 255, .16); transition: background .35s var(--ease), border-color .35s var(--ease); }
.sm-grid i.on { border: 1.5px solid transparent; background: linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08)); }
.sm-grid i.on:nth-child(3n + 1)::after { content: ""; position: absolute; right: 7px; top: 7px; width: 9px; height: 10px; background: var(--signal); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sm-tag { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: .92rem; }
.sm-tag[hidden] { display: none; }
.sm-tag.ad { background: var(--signal); color: var(--ink); }
.sm-tag.shoot { border: 1.5px dashed rgba(255, 255, 255, .4); }
.sm-line { margin-top: 18px; color: var(--muted-dark); }
.sm-lead { grid-area: lead; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: var(--white); }

/* kort leadformulier onder de prijscalculator en de samensteller */
.ql-title { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.ql-title:focus { outline: none; }
.ql-intro { margin-top: 6px; color: var(--muted); }
.dark .ql-intro, .dark .ql-sent p:not(.ql-title) { color: var(--muted-dark); }
.qlead { margin-top: 16px; }
.ql-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ql-fields label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; }
.ql-fields label.wide { grid-column: 1 / -1; }
.ql-fields small { font-size: inherit; font-weight: 500; opacity: .7; }
.ql-fields input { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 2px solid transparent; border-radius: 12px; transition: border-color .2s var(--ease); }
.dark .ql-fields input { color: var(--white); background: rgba(255, 255, 255, .08); }
.ql-fields input:focus { outline: none; border-color: var(--signal); }
.ql-fields input[aria-invalid="true"] { border-color: #C2410C; }
.dark .ql-fields input[aria-invalid="true"] { border-color: #FF8A5C; }
.ql-error { margin-top: 12px; font-weight: 600; color: #9A3412; }
.dark .ql-error { color: #FFB59A; }
.ql-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px; }
.ql-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
.ql-privacy { font-size: .85rem; color: var(--muted); max-width: 22rem; }
.dark .ql-privacy { color: var(--muted-dark); }
.ql-privacy a { color: inherit; text-underline-offset: 3px; }
.ql-sent { margin-top: 16px; padding: 20px; border-radius: 16px; background: var(--paper); border-left: 4px solid var(--signal); }
.dark .ql-sent { background: rgba(255, 255, 255, .06); }
.ql-sent[hidden] { display: none; }
.ql-sent p + p { margin-top: 6px; }

@media (max-width: 860px) {
  .sm { grid-template-columns: 1fr; }
  .sm { grid-template-areas: "form" "preview" "lead"; }
  .sm-preview { position: static; }
}
@media (max-width: 560px) {
  .ql-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-stories i, .sm-grid i { transition: none; }
}

/* maandcyclus */
.cycle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cycle-visual { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; }
.cycle-visual svg { width: 100%; height: 100%; overflow: visible; }
.cycle-visual .track { fill: none; stroke: var(--paper-2); stroke-width: 10; }
.cycle-visual .arc { fill: none; stroke: var(--signal); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 18 82; transform-origin: 100px 100px; transform: rotate(-122.4deg); transition: transform 1s var(--ease); }
.cycle-visual .node { fill: var(--white); stroke: var(--ink); stroke-width: 3; transition: fill .4s var(--ease), stroke .4s var(--ease); }
.cycle-visual .node.active { fill: var(--signal); stroke: var(--signal); }
.cycle-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.cycle-center strong { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cycle-center span { color: var(--muted); margin-top: 6px; }
.cycle-list { list-style: none; counter-reset: c; }
.cycle-list li { counter-increment: c; display: grid; grid-template-columns: 3rem 1fr; padding: 20px 0; border-top: 1px solid var(--line); transition: opacity .4s var(--ease); }
.cycle-list li::before { content: counter(c, decimal-leading-zero); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.cycle-list li.active::before { color: var(--signal); }
.cycle-list li:not(.active) { opacity: .45; }
.cycle-list h3 { font-size: 1.3rem; margin-bottom: 6px; }
.cycle-list p { color: var(--muted); }

/* faq als reactiedraad */
.thread { list-style: none; max-width: 820px; display: grid; gap: 28px; }
.c-q, .c-a { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.c-a { margin: 14px 0 0 58px; }
.c-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--muted); font-weight: 800; }
.c-a .c-av { background: var(--ink); color: var(--white); }
.c-a .c-av svg { width: 24px; height: 24px; }
.bubble { background: var(--white); border-radius: 4px 20px 20px 20px; padding: 14px 18px; }
.c-a .bubble { background: var(--ink); color: var(--white); }
.bubble small { display: block; font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.c-a .bubble small { color: var(--signal); }
.bubble h3 { font-size: 1.1rem; letter-spacing: -.015em; line-height: 1.3; }
.bubble p { color: var(--muted-dark); }
.c-meta { margin: 6px 0 0 18px; font-size: .8rem; color: var(--muted); display: flex; gap: 14px; }

/* cta met meldingen */
.notify-cta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.notify-cta h2 { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -.055em; line-height: .95; }
.notify-cta p { margin-top: 24px; max-width: 32rem; color: var(--muted-dark); font-size: 1.2rem; }
.notes { list-style: none; display: grid; gap: 12px; }
.note { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; border-radius: 20px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-dark); opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.notes.in .note { opacity: 1; transform: none; }
.notes.in .note:nth-child(2) { transition-delay: .6s; }
.notes.in .note:nth-child(3) { transition-delay: 1.2s; }
.note .ph-av { width: 40px; height: 40px; border-radius: 12px; background: var(--white); color: var(--ink); }
.note .ph-av svg { width: 22px; height: 22px; }
.note b { display: block; }
.note span { color: var(--muted-dark); font-size: .95rem; }
.note time { align-self: start; font-size: .8rem; color: var(--muted-dark); }
.note:first-child { background: rgba(255, 91, 26, .18); border-color: rgba(255, 91, 26, .5); }

@media (max-width: 860px) {
  .halves, .cycle, .notify-cta { grid-template-columns: 1fr; }
  .half, .half ~ .half { padding: 24px 0; border-left: 0; }
  .half ~ .half { border-top: 2px solid var(--ink); }
  .plus { top: 50%; left: auto; right: 0; }
  .phone.side { display: none; }
}
@media (max-width: 640px) {
  .cal-days { display: none; }
  .cal-week { display: block; border-bottom: 0; }
  .day { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; }
  .day:not(:has(.chip)) { display: none; }
  .day .dn { display: inline; font-size: .82rem; font-weight: 700; color: var(--muted); margin-right: -2px; }
  .day .dd { width: 3.2rem; }
  .ad-bar { display: block; margin: 8px 10px; }
  .c-a { margin-left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-bars span::after, .story-caps p { animation: none; }
  .story-bars span:nth-child(1)::after { width: 100%; }
  .story-caps p:nth-child(1) { opacity: 1; }
  .in .like { animation: none; transform: none; }
  .like { transform: none; }
  .note { opacity: 1; transform: none; transition: none; }
  .cycle-visual .arc { transition: none; }
  .cycle-list li:not(.active) { opacity: 1; }
}

/* ============ Homepage ============ */

/* hero: de slogan als beeld */
.home-hero { padding: clamp(48px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.home-h1 { font-size: clamp(3rem, 9vw, 8.4rem); letter-spacing: -.06em; line-height: .9; }
/* iets ruimere letterafstand: anders overlappen de omtrekken van de letters */
.h-ghost { letter-spacing: .01em; color: var(--ink); -webkit-text-stroke: .022em var(--ink); transition: color 1.4s var(--ease) 1.1s; }
.in .h-ghost { color: transparent; }
.mis { color: var(--signal); }
.ring-o { position: relative; display: inline-block; color: transparent; }
.ring-o svg { position: absolute; left: 50%; bottom: .01em; width: .6em; height: .6em; transform: translateX(-50%); overflow: visible; color: var(--ink); }
.ring-o svg path { fill: none; stroke-width: 32; }
.ring-o .ro-base { stroke: currentColor; }
.ring-o .ro-piece { stroke: var(--signal); opacity: 0; }
.ring-o .ro-turn { transform-origin: 100px 100px; transform: rotate(-200deg); transition: transform 1.2s var(--ease) 1.4s; }
.in .ring-o .ro-turn { transform: none; }
.in .ring-o .ro-piece { opacity: 1; transition: opacity .3s var(--ease) 1.4s; }
.h1-sub { display: block; margin-top: clamp(24px, 3vw, 36px); max-width: 34rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.4; letter-spacing: -.015em; font-weight: 600; }
.home-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }
.home-cta .btn-row { margin-top: 0; }
.home-cta small { color: var(--muted); font-size: .95rem; }
.quick { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--line); }
.quick ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.quick a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--paper); text-decoration: none; font-weight: 600; transition: background .25s var(--ease), color .25s var(--ease); }
.quick a::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; }
.quick a:hover { background: var(--ink); color: var(--white); }

/* dienstennavigator: ring in vijf segmenten naast een lijst */
.svc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.svc-list { list-style: none; border-top: 1px solid var(--line); }
.svc-list li { border-bottom: 1px solid var(--line); }
.svc-list a { display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 22px 8px; text-decoration: none; border-radius: 12px; transition: background .25s var(--ease), padding .25s var(--ease); }
.svc-main strong { display: block; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.04em; font-weight: 800; line-height: 1.1; }
.svc-main span { display: block; margin-top: 4px; color: var(--muted); }
.svc-list svg { width: 22px; height: 22px; opacity: .3; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.svc-list li.active a { background: var(--white); padding-left: 16px; }
.svc-list li.active svg { opacity: 1; transform: translateX(4px); }
.svc-ring { position: relative; width: min(100%, 460px); aspect-ratio: 1; justify-self: center; }
.svc-ring svg { width: 100%; height: 100%; overflow: visible; }
.svc-ring circle { fill: none; stroke: var(--ink); stroke-width: 20; transform-origin: 100px 100px; transition: stroke .3s var(--ease), stroke-width .3s var(--ease); cursor: pointer; }
.svc-ring a.active circle { stroke: var(--signal); stroke-width: 26; }
.svc-ring a:not(.active) circle { stroke: #CFCCC3; }
.svc-center { position: absolute; inset: 24%; display: grid; place-content: center; text-align: center; pointer-events: none; }
.svc-center strong { display: block; font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.svc-center span { display: block; margin-top: 8px; color: var(--muted); font-size: .95rem; line-height: 1.35; }

/* cases in browservensters */
.browsers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.browsers > :nth-child(2) { margin-top: clamp(0px, 6vw, 72px); }
.browser { display: block; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
a.browser:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 24, 61, .14); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5D2C9; }
.browser-bar span { margin-left: 10px; flex: 1; font-size: .8rem; color: var(--muted); background: var(--white); border-radius: 6px; padding: 4px 10px; }
.browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.case-meta { padding: 18px 4px 0; }
.case-meta h3 { font-size: 1.4rem; letter-spacing: -.035em; font-weight: 800; }
.case-meta .where { color: var(--muted); font-size: .95rem; }
.case-meta p { margin-top: 8px; color: var(--muted); }
.case-next { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; align-self: stretch; min-height: 320px; padding: clamp(24px, 3vw, 36px); border-radius: 16px; background: var(--ink); color: var(--white); text-decoration: none; position: relative; overflow: hidden; transition: transform .4s var(--ease); }
.case-next:hover { transform: translateY(-6px); }
.case-next::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -20%; bottom: -25%; background: var(--white); -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; opacity: .08; }
.case-next strong { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.045em; font-weight: 800; line-height: 1; }
.case-next span { color: var(--muted-dark); max-width: 18rem; }
.case-next .go-line { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--signal); }

/* een aanspreekpunt: portret met ringstempel */
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 112px); align-items: center; }
.portrait { position: relative; margin: 0; }
.portrait .photo { --ar: 4 / 5; }
.portrait figcaption { margin-top: 14px; color: var(--muted-dark); font-size: .95rem; }
.portrait figcaption b { color: var(--white); }
.stamp { position: absolute; right: -8%; top: 8%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--signal); display: grid; place-items: center; color: var(--ink); box-shadow: 0 16px 40px rgba(0, 24, 61, .3); }
.stamp svg { width: 62%; height: 62%; }
.person p { margin-top: 20px; color: var(--muted-dark); font-size: 1.15rem; max-width: 34rem; }
.promises { list-style: none; margin-top: 36px; border-top: 1px solid var(--line-dark); }
.promises li { padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; }

/* werkgebied */
.towns { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.towns li { display: inline-flex; align-items: center; transition: color .2s var(--ease); }
.towns li::after { content: ""; width: .32em; height: .32em; margin: 0 .35em; background: var(--signal); -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; }
.towns li:last-child::after { display: none; }
.towns li:hover { color: var(--signal); }
.towns-note { margin-top: 28px; color: var(--muted); max-width: 40rem; }

/* faq als open kaarten */
.qcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qcard { background: var(--white); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); position: relative; }
.qcard::before { content: "?"; position: absolute; right: 24px; top: 18px; font-size: 3rem; font-weight: 800; color: var(--signal); line-height: 1; opacity: .9; }
.qcard h3 { font-size: 1.3rem; letter-spacing: -.025em; padding-right: 40px; }
.qcard p { margin-top: 12px; color: var(--muted); }

/* afsluiter: e-mail als beeld */
.mail-cta h2 { font-size: clamp(2.4rem, 6.4vw, 5.6rem); letter-spacing: -.055em; line-height: .95; max-width: 14ch; }
.big-mail { display: inline-block; margin-top: clamp(32px, 4vw, 48px); font-size: clamp(1.8rem, 6vw, 5.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; text-decoration: none; color: var(--white); background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 .08em no-repeat; padding-bottom: .08em; transition: background-size .5s var(--ease), color .3s var(--ease); overflow-wrap: anywhere; }
.big-mail:hover { background-size: 100% .08em; color: var(--signal); }
.mail-cta .btn-row { margin-top: 40px; }
.mail-cta .note-line { margin-top: 20px; color: var(--muted-dark); }

@media (max-width: 1024px) {
  .browsers { grid-template-columns: 1fr 1fr; }
  .browsers > :nth-child(2) { margin-top: 0; }
}
@media (max-width: 860px) {
  .svc, .person, .qcards { grid-template-columns: 1fr; }
  .svc-ring { order: -1; width: min(80%, 340px); }
  .stamp { right: 4%; }
}
@media (max-width: 640px) {
  .browsers { grid-template-columns: 1fr; }
  .h-ghost { -webkit-text-stroke-width: .03em; }
}
@media (prefers-reduced-motion: reduce) {
  .h-ghost { transition: none; }
  .ring-o .ro-turn { transform: none; transition: none; }
  .ring-o .ro-piece { opacity: 1; transition: none; }
  .big-mail { transition: none; }
}

/* ============ Contactpagina ============ */

.contact-hero { padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 5vw, 64px); }
.contact-hero h1 { margin-top: clamp(28px, 4vw, 48px); }
.contact-hero .lead { margin-top: 24px; max-width: 36rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: clamp(80px, 10vw, 136px); }

/* invulzin */
.madlib { background: var(--paper); border-radius: var(--radius); padding: clamp(24px, 4vw, 52px); }
.ml-text { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.75; }
.ml-text input { font: inherit; letter-spacing: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 2px dashed rgba(0, 24, 61, .35); border-radius: 0; padding: 0 2px; margin: 0 2px; min-width: 5ch; max-width: 100%; field-sizing: content; transition: border-color .2s var(--ease); }
.ml-text input::placeholder { color: rgba(0, 24, 61, .6); }
.ml-text input:focus { outline: none; border-bottom: 2px solid var(--signal); }
.ml-text input:focus-visible { outline: none; box-shadow: 0 3px 0 var(--signal); }
.ml-text input[aria-invalid="true"] { border-bottom: 2px solid #C2410C; }
.ml-chips { border: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.ml-chips label { position: relative; cursor: pointer; }
.ml-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ml-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--white); border: 2px solid transparent; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.ml-chips span::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ring-mark) center / contain no-repeat; mask: var(--ring-mark) center / contain no-repeat; opacity: .35; }
.ml-chips label:hover span { border-color: var(--line); }
.ml-chips input:checked + span { background: var(--ink); color: var(--white); }
.ml-chips input:checked + span::before { background: var(--signal); opacity: 1; }
.ml-chips input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.ml-label { display: block; margin-top: 18px; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.025em; }
.ml-msg { display: block; width: 100%; margin-top: 12px; font: inherit; font-size: 1.1rem; line-height: 1.55; color: var(--ink); background: var(--white); border: 2px solid transparent; border-radius: 16px; padding: 16px 18px; resize: vertical; min-height: 140px; transition: border-color .2s var(--ease); }
.ml-msg:focus { outline: none; border-color: var(--signal); }
.ml-msg[aria-invalid="true"] { border-color: #C2410C; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ml-errors { list-style: none; margin-top: 16px; display: grid; gap: 6px; }
.ml-errors li { color: #9A3412; font-weight: 600; font-size: .98rem; display: flex; gap: 8px; align-items: baseline; }
.ml-errors li::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #9A3412; color: var(--white); font-size: .75rem; flex: 0 0 auto; }
.ml-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.ml-foot .btn[disabled] { opacity: .6; cursor: progress; }
.ml-privacy { font-size: .92rem; color: var(--muted); max-width: 26rem; }
.ml-privacy a { color: var(--ink); text-underline-offset: 3px; }
.ml-status { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: #FDECE4; color: #7C2D12; font-weight: 600; }
.ml-status[hidden] { display: none; }
.ml-status a { color: inherit; }

/* bevestiging na verzenden */
.sent { text-align: left; }
.sent[hidden] { display: none; }
.sent .ring { width: 96px; height: 96px; --ring-w: 16; color: var(--ink); margin-bottom: 28px; }
.sent h2 { font-size: clamp(2rem, 4vw, 3rem); }
.sent p { margin-top: 16px; color: var(--muted); font-size: 1.15rem; max-width: 34rem; }

/* zijkolom: rechtstreeks contact en wat er volgt */
.channels { list-style: none; border-top: 2px solid var(--ink); }
.channels li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.channels a, .channels strong { display: inline-block; margin-top: 4px; font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.channels a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }
.next-steps { margin-top: 40px; }
.next-steps h2 { font-size: 1.4rem; letter-spacing: -.03em; }
.next-steps ol { list-style: none; margin-top: 16px; position: relative; }
.next-steps ol::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.next-steps li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 16px; padding: 10px 0; }
.next-steps li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 3px solid var(--ink); position: relative; z-index: 1; }
.next-steps li:first-child::before { background: var(--signal); border-color: var(--signal); }
.next-steps strong { display: block; }
.next-steps p { color: var(--muted); font-size: .98rem; }

/* keuze tussen bericht en agenda */
.contact-switch { display: inline-flex; padding: 4px; margin-bottom: 16px; border-radius: 999px; background: var(--paper); }
.contact-switch button { font: inherit; font-weight: 600; padding: 10px 22px; min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.contact-switch button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.cal-inline { padding: clamp(8px, 1.2vw, 14px); }
.cal-inline .cal-frame { height: 720px; }
/* Cal.com zet kalender en uren pas vanaf ongeveer 770px naast elkaar: de agenda krijgt dan meer breedte */
@media (min-width: 961px) {
  .contact-grid:has(#paneel-afspraak:not([hidden])) { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
}

/* agenda van Cal.com: laadt pas na een klik, tot dan een draaiende ring */
.cal-frame { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--white); }
.cal-frame iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s var(--ease); }
.cal-frame.loaded iframe { opacity: 1; }
.cal-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font-weight: 600; }
.cal-loading .ring { width: 40px; height: 40px; color: var(--ink); animation: cal-spin 1s linear infinite; }
@keyframes cal-spin { to { transform: rotate(360deg); } }

/* popup bij de kennismakingsknoppen */
.afspraak { width: min(1000px, 100% - 32px); height: min(820px, 100dvh - 32px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 16, 43, .35); overflow: hidden; }
.afspraak[open] { animation: afspraak-in .3s var(--ease); }
.afspraak::backdrop { background: rgba(0, 16, 43, .6); }
@keyframes afspraak-in { from { opacity: 0; transform: translateY(16px); } }
html:has(.afspraak[open]) { overflow: hidden; }
.afspraak-box { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: clamp(20px, 3vw, 32px); }
.afspraak-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.afspraak-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.afspraak-head p { margin-top: 8px; color: var(--muted); }
.afspraak-close { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); }
.afspraak-close:hover { background: var(--ink); color: var(--white); }
.afspraak-close svg { width: 20px; height: 20px; }
.afspraak .cal-frame { flex: 1; min-height: 0; border: 1px solid var(--line); }
.afspraak-alt { font-size: .95rem; color: var(--muted); }
.afspraak-alt a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ml-text { line-height: 1.9; }
  .cal-inline .cal-frame { height: 80svh; }
  .afspraak { width: 100%; height: 100dvh; border-radius: 0; }
  .afspraak-box { padding: 16px; gap: 12px; }
}

/* ============ Case pagina's ============ */
/* per case zet <main class="wk"> --case-soft op een zachte tint van de klant */

/* hero: naam groot, gegevens rechts, daaronder de site op computer en gsm op een vlak in de kleur van de klant */
.wk-hero { padding-bottom: 0; }
.wk-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px clamp(32px, 5vw, 72px); align-items: end; margin-top: clamp(32px, 5vw, 64px); }
.wk-head h1 { font-size: clamp(3rem, 9vw, 8rem); }
.wk-facts { padding-bottom: 10px; }
.wk-facts .where { display: block; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.wk-facts .tags { margin-top: 14px; }
.wk-facts .btn { margin-top: 28px; }
.wk-stage { position: relative; margin-top: clamp(48px, 7vw, 88px); padding: clamp(24px, 5vw, 72px) clamp(16px, 7vw, 112px) 0; border-radius: var(--radius); background: var(--case-soft, var(--paper)); overflow: hidden; }
.wk-stage .browser { border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 30px 80px rgba(0, 24, 61, .16); }
.wk-stage .wk-device { position: absolute; right: clamp(12px, 3vw, 48px); bottom: clamp(16px, 4vw, 56px); width: clamp(96px, 16vw, 220px); }
.wk-device { aspect-ratio: 600 / 1298; padding: clamp(5px, .6vw, 8px); border-radius: clamp(18px, 2.6vw, 34px); background: var(--ink); box-shadow: 0 24px 60px rgba(0, 24, 61, .25); }
.wk-device img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: clamp(13px, 2vw, 27px); }

/* de vraag: portret onder de titel, uitspraak van de klant in de tekst */
.wk-portrait { --ar: 4 / 5; margin-top: clamp(28px, 4vw, 40px); max-width: 340px; }
.wk-quote { margin: 36px 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--signal); }
.prose .wk-quote p { font-size: clamp(1.3rem, 2.2vw, 1.65rem); line-height: 1.35; letter-spacing: -.02em; font-weight: 600; color: var(--ink); }
.wk-quote footer { margin-top: 14px; color: var(--muted); font-weight: 600; font-size: 1rem; }

/* voor en na: de oude homepage ligt over de nieuwe, het schuifje bepaalt hoeveel je ervan ziet */
.wk-compare-frame { box-shadow: 0 30px 80px rgba(0, 24, 61, .14); }
.wk-compare { --pos: 50%; position: relative; aspect-ratio: 16 / 10; overflow: hidden; touch-action: pan-y; user-select: none; }
.wk-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wk-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.wk-compare input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.wk-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 1; width: 3px; margin-left: -1.5px; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 24, 61, .12); pointer-events: none; }
.wk-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300183D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: var(--shadow); transition: transform .25s var(--ease); }
.wk-compare:hover .wk-handle::after { transform: scale(1.08); }
.wk-compare input:focus-visible + .wk-handle::after { outline: 3px solid var(--ink); outline-offset: 3px; }
.wk-tag { position: absolute; top: 16px; z-index: 1; padding: 6px 14px; border-radius: 999px; background: rgba(0, 24, 61, .82); color: var(--white); font-size: .85rem; font-weight: 600; pointer-events: none; }
.wk-tag.before { left: 16px; }
.wk-tag.after { right: 16px; }

/* aanvraag in drie stappen: echte schermen naast elkaar, elke stap iets lager */
.wk-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); align-items: start; max-width: 1000px; margin: 0 auto; }
.wk-steps li:nth-child(2) { margin-top: clamp(0px, 5vw, 64px); }
.wk-steps li:nth-child(3) { margin-top: clamp(0px, 10vw, 128px); }
.wk-steps img { width: 100%; height: auto; border-radius: clamp(14px, 2.4vw, 28px); box-shadow: 0 24px 60px rgba(0, 24, 61, .16); }
.wk-steps p { margin-top: 18px; font-weight: 700; letter-spacing: -.01em; }

/* wat we deden: beeld en tekst om beurten links en rechts */
.wk-rows { display: grid; gap: clamp(72px, 10vw, 136px); }
.wk-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.wk-row:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.wk-row:nth-child(even) > :first-child { order: 2; }
.wk-text h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.045em; font-weight: 800; }
.wk-text p { margin-top: 16px; color: var(--muted); font-size: 1.12rem; max-width: 32rem; }
.wk-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wk-collage .photo { --ar: 4 / 3; border-radius: var(--radius-sm); }
.wk-collage .photo:first-child { grid-column: 1 / -1; --ar: 16 / 9; }
.wk-single { --ar: 4 / 3; }
.wk-phones { display: flex; justify-content: center; align-items: center; padding: clamp(36px, 5vw, 64px) clamp(12px, 3vw, 32px); border-radius: var(--radius); background: var(--case-soft, var(--white)); }
.wk-phones .wk-device { width: 31%; max-width: 220px; }
.wk-phones .wk-device:nth-child(1) { transform: translateX(12%) translateY(6%) rotate(-7deg); }
.wk-phones .wk-device:nth-child(2) { position: relative; z-index: 1; }
.wk-phones .wk-device:nth-child(3) { transform: translateX(-12%) translateY(6%) rotate(7deg); }
.wk-stack { position: relative; padding-bottom: 8%; }
.wk-stack img { width: 86%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.wk-stack img + img { position: absolute; right: 0; bottom: 0; width: 64%; box-shadow: 0 24px 60px rgba(0, 24, 61, .18); }

/* de volledige one pager schuift langzaam voorbij in het venster, stopt bij hover */
.wk-scroll { width: 100%; max-width: 620px; justify-self: center; }
.wk-scroll-view { position: relative; aspect-ratio: 1; overflow: hidden; container-type: size; }
.wk-scroll-view img { width: 100%; height: auto; aspect-ratio: auto; }
.wk-scroll.in .wk-scroll-view img { animation: wk-scroll 30s ease-in-out 1s infinite alternate; }
.wk-scroll:hover .wk-scroll-view img { animation-play-state: paused; }
@keyframes wk-scroll { to { transform: translateY(calc(-100% + 100cqh)); } }

/* resultaat, de andere case en afsluiter */
.wk-result { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wk-result p { color: var(--muted-dark); font-size: 1.12rem; max-width: 40rem; }
.wk-result .wk-big { margin-bottom: 28px; color: var(--white); font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.25; letter-spacing: -.03em; font-weight: 600; }
.wk-result .link-arrow { margin-top: 32px; }
.wk-next { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 4vw, 56px); align-items: end; text-decoration: none; }
.wk-next .browser { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.wk-next:hover .browser { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 24, 61, .14); }
.wk-next-body { padding-bottom: 12px; }
.wk-next h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.045em; font-weight: 800; }
.wk-next .where { display: block; margin-top: 6px; color: var(--muted); }
.wk-next p { margin-top: 12px; color: var(--muted); max-width: 30rem; }
.wk-next .link-arrow { margin-top: 20px; }
.wk-next:hover .link-arrow { gap: 14px; border-color: var(--signal); }
.wk-cta { text-align: center; }
.wk-cta h2 { font-size: clamp(2.4rem, 6vw, 5rem); letter-spacing: -.055em; line-height: .98; }
.wk-cta p { margin: 24px auto 0; max-width: 30rem; color: var(--muted-dark); font-size: 1.2rem; }
.wk-cta .btn-row { justify-content: center; }

@media (max-width: 860px) {
  .wk-head, .wk-row, .wk-row:nth-child(even), .wk-result, .wk-next { grid-template-columns: 1fr; }
  .wk-row:nth-child(even) > :first-child { order: 0; }
  .wk-row > .wk-text { order: -1; }
  .wk-portrait { max-width: 280px; }
  .wk-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 24px; }
  .wk-steps li { flex: 0 0 72%; margin-top: 0 !important; scroll-snap-align: center; }
}
/* gsm: browser en gsm schuin over elkaar in plaats van de gsm bovenop, voor en na met de gsm versies */
@media (max-width: 560px) {
  .wk-stage { padding: 24px 16px 72px; }
  .wk-stage .browser { width: 84%; border-bottom: 1px solid var(--line); border-radius: 12px; }
  .wk-stage .wk-device { width: 31%; right: 14px; bottom: 18px; }
  .wk-compare { aspect-ratio: 3 / 4; }
  .wk-handle::after { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .wk-result .link-arrow { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-scroll-view { overflow-y: auto; }
  .wk-scroll.in .wk-scroll-view img { animation: none; }
  .wk-next .browser, .wk-handle::after { transition: none; }
}

/* ============ Werk overzicht ============ */
/* elke case is een vlak in de kleur van de klant (--case-soft op de kaart), de site steekt over de rand en schuift omhoog bij hover */
.pf-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.pf-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 72px); align-items: end; margin-top: clamp(32px, 5vw, 64px); }
.pf-hero .lead { margin-top: 0; padding-bottom: .4em; }
.pf-list { list-style: none; display: grid; gap: clamp(20px, 3vw, 32px); }
.pf-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; border-radius: var(--radius); background: var(--case-soft, var(--paper)); overflow: hidden; isolation: isolate; text-decoration: none; }
.pf-card:focus-visible { border-radius: var(--radius); outline-offset: 4px; }
.pf-list li:nth-child(even) .pf-card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pf-body { padding: clamp(28px, 5vw, 72px); }
.pf-body h2 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); letter-spacing: -.05em; line-height: .95; }
.pf-body .where { display: block; margin-top: 16px; font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.pf-body p { margin-top: 14px; color: var(--muted); max-width: 26rem; }
.pf-body .link-arrow { margin-top: 28px; }
.pf-card:hover .link-arrow { gap: 14px; border-color: var(--signal); }
.pf-shot { align-self: end; margin-right: -10%; padding-top: clamp(40px, 6vw, 88px); }
.pf-list li:nth-child(even) .pf-shot { order: -1; margin: 0 0 0 -10%; }
.pf-shot .browser { border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 30px 80px rgba(0, 24, 61, .16); transform: translateY(8%); transition: transform .7s var(--ease); }
.pf-card:hover .pf-shot .browser { transform: translateY(2%); }
/* de lege plek: open ring in plaats van een screenshot */
.pf-open { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; margin-top: clamp(20px, 3vw, 32px); border: 2px dashed rgba(0, 24, 61, .2); border-radius: var(--radius); }
.pf-open .btn-row { margin-top: 28px; }
.pf-open .ring { justify-self: center; width: min(70%, 260px); margin: clamp(28px, 5vw, 72px); --ring-w: 14; color: var(--ink); }

@media (max-width: 860px) {
  .pf-head, .pf-card, .pf-list li:nth-child(even) .pf-card, .pf-open { grid-template-columns: 1fr; }
  .pf-hero .lead { padding-bottom: 0; }
  .pf-body { padding-bottom: 32px; }
  .pf-shot, .pf-list li:nth-child(even) .pf-shot { order: 0; margin: 0 -14% 0 clamp(28px, 5vw, 72px); padding-top: 0; }
  .pf-open .ring { order: -1; justify-self: start; width: 96px; margin: clamp(28px, 5vw, 72px) clamp(28px, 5vw, 72px) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-shot .browser { transition: none; }
}

/* responsive */
@media (max-width: 1024px) {
  .related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid, .split, .process, .faq-grid, .cta-grid, .cases { grid-template-columns: 1fr; }
  .split > :first-child, .faq-grid > :first-child { position: static; }
  .hero-visual { justify-self: center; width: min(86%, 420px); }
  .process-visual { display: none; }
  .steps li { min-height: 0; opacity: 1; }
  .cases .case:first-child { grid-template-columns: 1fr; }
  .cta .ring { justify-self: start; width: 200px; order: -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .related { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
}

/* animatie: masked headline, fade up stagger */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.mask { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.mask > span { display: block; transform: translateY(108%); transition: transform .9s var(--ease); }
.mask.in > span { transform: none; }
.mask:nth-child(2) > span { transition-delay: .09s; }
.mask:nth-child(3) > span { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .mask > span { opacity: 1; transform: none; transition: none; }
  .btn, .related a, .case .photo img, .ring .ring-piece, .mark, .statement .w, .steps li { transition: none; }
  .ring .ring-piece { transform: none; opacity: 1; }
  .mark { background-size: 100% .13em; }
  .statement .w { opacity: 1; }
  .afspraak[open], .cal-loading .ring { animation: none; }
  @view-transition { navigation: none; }
}

.channel-social { display: flex; gap: 10px; margin-top: 6px; }
.channels .channel-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.channels .channel-social a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.channel-social svg { width: 18px; height: 18px; }
.btn.wa:hover svg { transform: none; }