/* ============================================================
AH Vastgoedadvies — main.css
Design system v1.0 · premium, rustig, warm-zakelijk
============================================================ */
/* ---------- SELF-HOSTED FONTS (woff2, latin) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
src:url("../fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
src:url("../fonts/inter-600.woff2") format("woff2")}
/* Bodoni Moda — hoog-contrast Didone, matcht het AH-logo van Anneke */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400;font-display:swap;
src:url("../fonts/bodoni-400.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;
src:url("../fonts/bodoni-500.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:600;font-display:swap;
src:url("../fonts/bodoni-600.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:700;font-display:swap;
src:url("../fonts/bodoni-700.woff2") format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 600;font-display:swap;
src:url("../fonts/bodoni-italic.woff2") format("woff2")}
@font-face{font-family:"Pinyon Script";font-style:normal;font-weight:400;font-display:swap;
src:url("../fonts/pinyon.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
src:url("../fonts/sourceserif-400.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
src:url("../fonts/sourceserif-italic.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
src:url("../fonts/sourceserif-600.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:500;font-display:swap;
src:url("../fonts/sourceserif-500.woff2") format("woff2")}
/* ---------- TOKENS ---------- */
:root {
/* Navy */
--navy-50:#EEF1F5; --navy-100:#D5DCE6; --navy-200:#AEBBCC; --navy-300:#7E90A9;
--navy-400:#516684; --navy-500:#324B6E; --navy-600:#243B5A; --navy-700:#1B2E47;
--navy-800:#152338; --navy-900:#0E1826; --navy-950:#0A111C;
/* Ink */
--ink-900:#1A1D21; --ink-800:#24282D; --ink-700:#33383F; --ink-500:#5C636D; --ink-400:#7A828C;
/* Sand / champagne */
--sand-50:#FBFAF7; --sand-100:#F5F2EC; --sand-200:#EDE8DE; --champagne-50:#F7F1E6;
/* Warm grey */
--warm-100:#F0EEE9; --warm-200:#E3DFD8; --warm-300:#D2CCC2; --warm-400:#B4ADA1; --warm-500:#8C857A;
/* Gold */
--gold-300:#D8C6A0; --gold-400:#C9B285; --gold-500:#B8975A; --gold-600:#9C7E45;
/* Status */
--success:#4A7C59; --error:#A6483F;
/* Semantic */
--bg-base:var(--sand-50); --bg-alt:var(--sand-100); --bg-deep:var(--sand-200);
--bg-accent:var(--champagne-50); --bg-invert:var(--navy-800);
--text-primary:var(--ink-700); --text-strong:var(--ink-900); --text-muted:var(--ink-500);
--text-on-invert:var(--sand-50); --text-on-invert-muted:var(--navy-200);
--brand:var(--navy-700); --brand-hover:var(--navy-600);
--accent:var(--gold-500); --accent-strong:var(--gold-600);
--border:var(--warm-200); --border-strong:var(--warm-300);
--focus-ring:var(--gold-500);
/* Type */
--font-display:"Bodoni Moda",Didot,"Times New Roman",Georgia,serif;
--font-script:"Pinyon Script",cursive;
--font-text:"Source Serif 4",Georgia,"Times New Roman",serif;
--font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--fs-display:clamp(3.2rem,1.8rem + 6vw,5.6rem);
--fs-h1:clamp(2.7rem,1.8rem + 3.6vw,3.9rem);
--fs-h2:clamp(2.15rem,1.55rem + 2.4vw,3.05rem);
--fs-h3:clamp(1.6rem,1.25rem + 1.3vw,2.1rem);
--fs-h4:1.65rem; --fs-lead:1.375rem; --fs-body:1.125rem; --fs-body-sm:1rem;
--fs-caption:0.875rem; --fs-eyebrow:0.8125rem;
--lh-tight:1.1; --lh-heading:1.2; --lh-body:1.65; --lh-lead:1.55;
--ls-display:-0.02em; --ls-heading:-0.01em; --ls-eyebrow:0.14em;
--fw-regular:400; --fw-medium:500; --fw-semibold:600;
/* Spacing */
--space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
--space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem; --space-11:10rem;
--section-y:clamp(4rem,10vw,8rem); --section-y-lg:clamp(5rem,12vw,10rem);
/* Layout */
--container-xl:1280px; --container-lg:1120px; --container-md:760px; --container-sm:560px;
--gutter:clamp(1.5rem,4vw,3rem); --grid-gap:clamp(1rem,2.5vw,2rem);
/* Radius / shadow */
--radius-sm:4px; --radius-md:8px; --radius-lg:12px;
--shadow-xs:0 1px 2px rgba(26,29,33,.04);
--shadow-sm:0 2px 8px rgba(26,29,33,.05);
--shadow-md:0 8px 24px rgba(26,29,33,.06);
--shadow-lg:0 18px 48px rgba(21,35,56,.08);
--focus-shadow:0 0 0 3px rgba(184,151,90,.25);
/* Motion */
--ease-out-soft:cubic-bezier(.22,1,.36,1);
--dur-fast:160ms; --dur-base:200ms; --dur-card:240ms; --dur-reveal:600ms; --dur-hero:700ms;
--z-nav:100; --z-overlay:200;
}
/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
background:var(--bg-base);color:var(--text-primary);
font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);
font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
/* Vangnet: nooit horizontaal scrollen op mobiel (clip behoudt sticky, i.t.t. hidden) */
html{overflow-x:clip}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy-800);color:var(--sand-50);
padding:12px 20px;border-radius:0 0 var(--radius-md) 0;font-weight:var(--fw-medium);text-decoration:none}
.skip-link:focus{left:0}
::selection{background:var(--gold-300);color:var(--ink-900)}
h1,h2,h3,h4{
font-family:var(--font-display);color:var(--text-strong);font-weight:var(--fw-medium);
line-height:var(--lh-heading);letter-spacing:var(--ls-heading);text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4);font-weight:var(--fw-medium)}
p{max-width:68ch}
/* ---------- LAYOUT ---------- */
.container{max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter)}
.container--md{max-width:var(--container-md)}
.container--lg{max-width:var(--container-lg)}
.section{padding-block:var(--section-y)}
.section--lg{padding-block:var(--section-y-lg)}
.section--air{padding-block:clamp(6rem,14vw,11rem)}
.section--alt{background:var(--bg-alt)}
.section--deep{background:var(--bg-deep)}
.section--accent{background:var(--bg-accent)}
.section--invert{background:var(--bg-invert);color:var(--text-on-invert)}
.section--invert h1,.section--invert h2,.section--invert h3,.section--invert h4{color:var(--text-on-invert)}
.stack>*+*{margin-top:var(--space-5)}
.grid{display:grid;gap:var(--grid-gap)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
/* ---------- TYPOGRAPHY HELPERS ---------- */
.eyebrow{
display:inline-flex;align-items:center;gap:var(--space-3);
font-family:var(--font-body);font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent);
margin-bottom:var(--space-4);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent);display:inline-block}
.section--invert .eyebrow{color:var(--gold-300)}
.section--invert .eyebrow::before{background:var(--gold-300)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--text-primary);max-width:56ch}
.section--invert .lead{color:var(--text-on-invert-muted)}
.muted{color:var(--text-muted)}
.section--invert .muted{color:var(--text-on-invert-muted)}
.measure{max-width:60ch}
.divider{width:48px;height:1px;background:var(--accent);margin:var(--space-6) 0}
/* ---------- BUTTONS ---------- */
.btn{
font-family:var(--font-body);font-size:1rem;font-weight:var(--fw-medium);letter-spacing:.01em;
padding:14px 28px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;
display:inline-flex;align-items:center;gap:var(--space-2);
transition:all var(--dur-base) var(--ease-out-soft);
}
.btn--primary{background:var(--brand);color:var(--text-on-invert)}
.btn--primary:hover{background:var(--brand-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn .arrow{transition:transform var(--dur-base) var(--ease-out-soft)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--secondary{background:transparent;color:var(--brand);border-color:var(--border-strong)}
.btn--secondary:hover{background:var(--bg-alt);border-color:var(--navy-300)}
.btn--ghost{background:transparent;color:var(--brand);padding:14px 8px}
.btn--ghost:hover{box-shadow:inset 0 -1px 0 var(--accent)}
.btn--ghost .arrow{transition:transform var(--dur-base) var(--ease-out-soft)}
.btn--ghost:hover .arrow{transform:translateX(4px)}
.section--invert .btn--primary{background:var(--sand-50);color:var(--navy-800)}
.section--invert .btn--primary:hover{background:#fff}
.section--invert .btn--ghost{color:var(--sand-50)}
.section--invert .btn--ghost:hover{box-shadow:inset 0 -1px 0 var(--gold-300)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-top:var(--space-6)}
/* inline text link */
.tlink{color:var(--brand);padding-bottom:2px;display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-medium);
background-image:linear-gradient(var(--gold-500),var(--gold-500)),linear-gradient(var(--gold-300),var(--gold-300));
background-repeat:no-repeat;background-size:0% 1px,100% 1px;background-position:0 100%,0 100%;
transition:background-size var(--dur-base) var(--ease-out-soft)}
.tlink:hover,.tlink:focus-visible{background-size:100% 1px,100% 1px}
.tlink .arrow{transition:transform var(--dur-base) var(--ease-out-soft)}
.tlink:hover .arrow{transform:translateX(3px)}
.section--invert .tlink{color:var(--sand-50);background-image:linear-gradient(var(--sand-50),var(--sand-50)),linear-gradient(var(--gold-400),var(--gold-400))}
/* ---------- HEADER / NAV ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-nav);
background:rgba(251,250,247,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);transition:box-shadow var(--dur-base) ease}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:baseline;gap:2px;font-family:var(--font-display);font-size:1.35rem;
font-weight:var(--fw-semibold);color:var(--navy-700);letter-spacing:-.01em}
.brand .brand-accent{color:var(--gold-500)}
.brand small{font-family:var(--font-body);font-size:.6rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--text-muted);margin-left:8px;align-self:center}
.nav-links{display:flex;align-items:center;gap:var(--space-5)}
.nav-links a{position:relative;font-size:1rem;font-weight:var(--fw-medium);color:var(--text-primary);
padding:6px 0;transition:color var(--dur-fast) ease}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--accent);transition:width var(--dur-base) var(--ease-out-soft)}
.nav-links a:hover,.nav-links a.active{color:var(--brand)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:var(--space-4)}
.nav-tel{font-weight:var(--fw-medium);color:var(--brand);display:inline-flex;align-items:center;gap:6px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;
align-items:center;justify-content:center;color:var(--brand)}
.nav-toggle svg{width:26px;height:26px;stroke-width:1.5}
@media(max-width:1100px){
.nav-links,.nav .nav-tel{display:none}
.nav-toggle{display:inline-flex}
.nav{height:64px}
}
/* mobile overlay */
.mobile-menu{position:fixed;inset:0;z-index:var(--z-overlay);background:var(--sand-50);
display:flex;flex-direction:column;padding:var(--gutter);
opacity:0;visibility:hidden;transition:opacity var(--dur-base) ease,visibility var(--dur-base) ease}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;height:64px}
.mobile-menu-close{background:none;border:0;cursor:pointer;color:var(--brand);width:44px;height:44px}
.mobile-menu-close svg{width:26px;height:26px;stroke-width:1.5}
.mobile-menu nav{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-8)}
.mobile-menu nav a{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--navy-700);
opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.mobile-menu.open nav a{opacity:1;transform:none}
.mobile-menu.open nav a:nth-child(1){transition-delay:.05s}
.mobile-menu.open nav a:nth-child(2){transition-delay:.09s}
.mobile-menu.open nav a:nth-child(3){transition-delay:.13s}
.mobile-menu.open nav a:nth-child(4){transition-delay:.17s}
.mobile-menu.open nav a:nth-child(5){transition-delay:.21s}
.mobile-menu.open nav a:nth-child(6){transition-delay:.25s}
.mobile-menu .btn{margin-top:auto;justify-content:center}
body.no-scroll{overflow:hidden}
/* ---------- BREADCRUMB ---------- */
.breadcrumb{padding-block:var(--space-4);border-bottom:1px solid var(--border);font-size:var(--fs-caption)}
.breadcrumb .container{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;color:var(--text-muted)}
.breadcrumb a{color:var(--text-muted);transition:color var(--dur-fast) ease}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb .sep{color:var(--warm-400)}
.breadcrumb [aria-current="page"]{color:var(--text-primary)}
/* ---------- HERO ---------- */
.hero{padding-block:clamp(4rem,9vw,8rem)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:var(--fs-display);letter-spacing:var(--ls-display);line-height:1.04;
margin-bottom:var(--space-5);max-width:15ch}
.hero .lead{margin-bottom:var(--space-2)}
.hero-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
border:1px solid var(--border);aspect-ratio:4/5;background:var(--sand-200)}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(14,24,38,0) 72%,rgba(14,24,38,.14) 100%)}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
transition:transform 1200ms var(--ease-out-soft)}
/* zelf-tekenende gouden gevel-overlay (Doorsnede) */
.facade-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
mix-blend-mode:screen;opacity:.5}
.facade-lines path,.facade-lines rect{fill:none;stroke:var(--gold-300);stroke-width:1.25;
vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1;animation:facadeDraw 1.5s var(--ease-out-soft) forwards}
.facade-lines>:nth-child(1){animation-delay:.15s}.facade-lines>:nth-child(2){animation-delay:.30s}
.facade-lines>:nth-child(3){animation-delay:.55s}.facade-lines>:nth-child(4){animation-delay:.65s}
.facade-lines>:nth-child(5){animation-delay:.80s}.facade-lines>:nth-child(6){animation-delay:.88s}
.facade-lines>:nth-child(7){animation-delay:.96s}.facade-lines>:nth-child(8){animation-delay:1.02s}
.facade-lines>:nth-child(9){animation-delay:1.10s}.facade-lines>:nth-child(10){animation-delay:1.18s}
.facade-lines>:nth-child(11){animation-delay:1.28s}
@keyframes facadeDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.facade-lines path,.facade-lines rect{animation:none;stroke-dashoffset:0}.facade-lines{opacity:.32}}
/* hero image reveal (clip-path) */
.hero-media.reveal{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
transition:clip-path 900ms var(--ease-out-soft)}
.hero-media.reveal.is-visible{clip-path:inset(0 0 0 0)}
.hero-media.reveal.is-visible img{transform:scale(1)}
.hero--center{text-align:center}
.hero--center .eyebrow{justify-content:center}
.hero--center .lead,.hero--center p{margin-inline:auto}
.hero--center .btn-row{justify-content:center}
/* ---------- SECTION HEADER ---------- */
.section-head{max-width:640px;margin-bottom:var(--space-8)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
/* ---------- CARDS ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
padding:var(--space-6);transition:transform var(--dur-card) var(--ease-out-soft),
box-shadow var(--dur-card) var(--ease-out-soft),border-color var(--dur-card) ease;height:100%}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--warm-300)}
.card .card-icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--navy-50);
display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4);color:var(--navy-700)}
.card .card-icon svg{width:24px;height:24px;stroke-width:1.5}
.card h3,.card h4{margin-bottom:var(--space-3)}
.card p{font-size:var(--fs-body-sm);color:var(--text-primary)}
.card .card-num{font-family:var(--font-display);font-size:var(--fs-h4);color:var(--gold-500);
display:block;margin-bottom:var(--space-3);line-height:1}
.section--alt .card{background:var(--sand-50)}
/* clickable knowledge card */
.card--link{display:flex;flex-direction:column}
.card-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:var(--space-4);
color:var(--brand);font-weight:var(--fw-medium);font-size:var(--fs-body-sm)}
.card--link:hover .card-more{color:var(--brand-hover)}
.card--link .card-more .arrow{transition:transform var(--dur-base) var(--ease-out-soft)}
.card--link:hover .card-more .arrow{transform:translateX(4px)}
/* value card (minimal, anchored icon for cohesion with .card) */
.value{padding:var(--space-2) 0}
.value .card-icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--navy-50);
color:var(--navy-700);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5)}
.value .card-icon svg{width:26px;height:26px;stroke-width:1.5}
.value h3{font-size:var(--fs-h4);margin-bottom:var(--space-3)}
.card h3{font-size:var(--fs-h4);margin-bottom:var(--space-3);font-weight:var(--fw-semibold)}
/* ---------- SPLIT (text + media) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.split--reverse .split-media{order:-1}
@media(max-width:900px){.split{grid-template-columns:1fr}.split--reverse .split-media{order:0}}
.split-media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--sand-200);
border:1px solid var(--border)}
.split-media picture,.case-media picture{display:block;width:100%;height:100%}
.case-media img{width:100%;height:100%;object-fit:cover}
.split-media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms ease}
.split-media:hover img{transform:scale(1.03)}
/* ---------- AUDIENCE ROW ---------- */
.audience{border-top:1px solid var(--border);padding-top:var(--space-5)}
.audience h3{font-size:1.25rem;margin-bottom:var(--space-2)}
.audience p{font-size:var(--fs-body-sm);color:var(--text-muted)}
/* ---------- CASE / FEATURE ---------- */
.case{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.case{grid-template-columns:1fr}}
.case-media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/2;background:var(--sand-200);border:1px solid var(--border)}
.case-media img{width:100%;height:100%;object-fit:cover}
.case-meta{font-size:var(--fs-caption);color:var(--gold-600);letter-spacing:.02em;
font-weight:var(--fw-medium);margin:var(--space-4) 0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.case-meta span:not(:last-child)::after{content:"·";margin-left:var(--space-2);color:var(--warm-400)}
/* ---------- STATS STRIP ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:var(--space-7) 0}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-5)}}
.stat .stat-num{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.75rem);color:var(--brand);
line-height:1;display:inline-block;margin-bottom:var(--space-2);position:relative;padding-bottom:.28em;
font-variant-numeric:tabular-nums}
.stat .stat-num b{color:var(--gold-500);font-weight:inherit}
.stat .stat-num .unit{font-size:.58em;color:var(--accent-strong)}
.section--invert .stat .stat-num .unit{color:var(--gold-300)}
.stat .stat-num::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);
transition:width .55s var(--ease-out-soft) .85s}
.stat.is-counted .stat-num::after{width:2.4rem}
.stat .stat-num{overflow-wrap:break-word}
.stat .stat-label{font-size:var(--fs-caption);color:var(--text-muted);line-height:1.4}
@media(max-width:480px){.stat .stat-num{font-size:1.75rem}}
.section--invert .stat .stat-num{color:var(--sand-50)}
.section--invert .stats{border-color:var(--navy-600)}
/* ---------- PROCESS STEPS ---------- */
.steps{counter-reset:step;display:grid;gap:var(--space-5)}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:start;
border-top:1px solid var(--border);padding-top:var(--space-5)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
font-family:var(--font-display);font-size:1.5rem;color:var(--gold-500);line-height:1}
.step h3{font-size:1.25rem;margin-bottom:var(--space-2)}
.step p{font-size:var(--fs-body-sm);color:var(--text-primary)}
/* ---------- PERSON ---------- */
.person{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:760px){.person{grid-template-columns:1fr}}
.person-photo{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--sand-200);
border:1px solid var(--border)}
.person-photo img{width:100%;height:100%;object-fit:cover}
.person .person-name{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--text-strong);margin-bottom:var(--space-1)}
.person .person-role{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.12em;
color:var(--gold-600);margin-bottom:var(--space-5);font-weight:var(--fw-semibold)}
.person .person-facts{margin-top:var(--space-5);font-size:var(--fs-body-sm);color:var(--text-muted)}
/* ---------- QUOTE ---------- */
.pullquote{border-left:2px solid var(--accent);padding-left:var(--space-5);max-width:40ch}
.pullquote p{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--brand);
line-height:1.35;font-weight:var(--fw-regular);text-wrap:balance;max-width:none}
.section--invert .pullquote p{color:var(--sand-50)}
.pullquote cite{display:block;margin-top:var(--space-4);font-family:var(--font-body);
font-style:normal;font-size:var(--fs-caption);color:var(--text-muted)}
.pullquote--center{border-left:0;padding-left:0;max-width:32ch;margin-inline:auto;text-align:center}
.pullquote--center::before{content:"";display:block;width:48px;height:1px;background:var(--accent);margin:0 auto var(--space-5)}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border);padding:var(--space-5) 0}
.faq summary{font-family:var(--font-display);font-size:1.25rem;color:var(--text-strong);
cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-body);font-size:1.5rem;color:var(--gold-500);
transition:transform var(--dur-base) ease;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:var(--space-4);color:var(--text-primary)}
/* ---------- CTA STRIP ---------- */
.cta-strip{text-align:center}
.cta-strip h2{margin-bottom:var(--space-5);max-width:20ch;margin-inline:auto}
.cta-strip .lead{margin-inline:auto;margin-bottom:var(--space-6)}
/* ---------- FORM ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,5rem)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact-info dl{margin-top:var(--space-6)}
.contact-info dt{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.1em;
color:var(--text-muted);margin-bottom:4px;font-weight:var(--fw-semibold)}
.contact-info dd{font-size:1.15rem;color:var(--brand);margin-bottom:var(--space-5);font-weight:var(--fw-medium)}
.form{background:#fff;border:1px solid var(--border);border-top:2px solid var(--accent);
border-radius:var(--radius-lg);padding:clamp(1.5rem,4vw,2.5rem)}
.field{margin-bottom:var(--space-6)}
.field select{appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B2E47' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field label{display:block;font-weight:var(--fw-medium);font-size:var(--fs-caption);
color:var(--text-strong);margin-bottom:var(--space-2)}
.field input,.field textarea,.field select{
width:100%;background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
padding:14px 16px;font-family:var(--font-body);font-size:1rem;color:var(--text-primary);
transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.field input:focus,.field textarea:focus,.field select:focus{
outline:none;border-color:var(--brand);box-shadow:var(--focus-shadow)}
.field textarea{min-height:140px;resize:vertical}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .privacy{font-size:var(--fs-caption);color:var(--text-muted);margin:var(--space-4) 0}
.form .btn{width:100%;justify-content:center}
/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy-800);color:var(--text-on-invert);padding-block:var(--space-9) var(--space-6)}
.site-footer .footer-top{border-top:1px solid rgba(216,198,160,.32)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--space-7);
padding-top:var(--space-8)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{font-family:var(--font-display);font-size:1.35rem;font-weight:var(--fw-semibold);color:#fff}
.footer-brand .brand-accent{color:var(--gold-400)}
.footer-col h4{font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.12em;
color:var(--gold-300);margin-bottom:var(--space-4);font-family:var(--font-body);font-weight:var(--fw-semibold)}
.footer-col p,.footer-col a{color:var(--navy-200);font-size:var(--fs-body-sm);display:block;
margin-bottom:var(--space-2);transition:color var(--dur-fast) ease}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);
margin-top:var(--space-8);padding-top:var(--space-5);border-top:1px solid var(--navy-600);
font-size:var(--fs-caption);color:var(--navy-300)}
.footer-bottom a{color:var(--navy-300)}
.footer-bottom a:hover{color:var(--navy-100)}
/* ---------- BACK TO TOP ---------- */
.to-top{position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:var(--z-nav);
width:48px;height:48px;border-radius:50%;background:var(--brand);color:var(--sand-50);border:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity var(--dur-base) ease,transform var(--dur-base) ease,visibility var(--dur-base) ease,background var(--dur-base) ease}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brand-hover)}
.to-top svg{width:22px;height:22px;stroke-width:1.75}
/* ---------- REVEAL / MOTION ---------- */
.reveal{opacity:0;transform:translateY(30px);
transition:opacity var(--dur-reveal) var(--ease-out-soft),transform var(--dur-reveal) var(--ease-out-soft)}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1!important;transform:none!important}
}
/* ============================================================
BLOG / MAGAZINE — "De Doorsnede"
============================================================ */
.read-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
background:var(--accent);z-index:calc(var(--z-nav) + 1)}
.mag-masthead{text-align:center;padding-block:clamp(3rem,7vw,5.5rem) var(--space-6)}
.mag-masthead .eyebrow{justify-content:center}
.mag-masthead h1{font-size:var(--fs-display);letter-spacing:var(--ls-display)}
.mag-masthead p{margin-inline:auto;color:var(--text-muted)}
/* featured story */
.mag-feature{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:clamp(360px,52vw,560px);
display:flex;align-items:flex-end;border:1px solid var(--border)}
.mag-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mag-feature::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(14,24,38,0) 30%,rgba(14,24,38,.82) 100%)}
.mag-feature .fx{position:relative;z-index:1;padding:clamp(1.5rem,4vw,3rem);color:var(--sand-50);max-width:60ch}
.mag-feature .cat{color:var(--gold-300)}
.mag-feature h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.6rem);margin:var(--space-3) 0}
.mag-feature .meta,.mag-feature p{color:var(--navy-100)}
/* category filter chips */
.mag-filter{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin:var(--space-7) 0}
.chip{font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--fw-medium);
padding:8px 16px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;
color:var(--text-primary);cursor:pointer;transition:all var(--dur-fast) ease}
.chip:hover{border-color:var(--navy-300);background:var(--bg-alt)}
.chip.is-active{background:var(--brand);color:var(--sand-50);border-color:var(--brand)}
/* magazine grid + cards */
.mag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.mag-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);
border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur-card) var(--ease-out-soft),
box-shadow var(--dur-card) var(--ease-out-soft),border-color var(--dur-card) ease}
.mag-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--warm-300)}
.mag-card .thumb{aspect-ratio:3/2;overflow:hidden;background:var(--sand-200)}
.mag-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 600ms ease}
.mag-card:hover .thumb img{transform:scale(1.04)}
.mag-card .body{padding:var(--space-5);display:flex;flex-direction:column;flex:1}
.mag-card .cat{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-strong)}
.mag-card h3{font-size:1.3rem;margin:var(--space-3) 0;line-height:1.25}
.mag-card p{font-size:var(--fs-body-sm);color:var(--text-muted);flex:1}
.mag-card .meta{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--border);
font-size:var(--fs-caption);color:var(--text-muted);display:flex;gap:var(--space-3)}
.mag-card .meta .sep{color:var(--warm-400)}
.mag-empty{text-align:center;color:var(--text-muted);padding:var(--space-8) 0;display:none}
.load-more-wrap{text-align:center;margin-top:var(--space-8)}
/* article page */
.article-hero{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/8;background:var(--sand-200);
border:1px solid var(--border);margin-bottom:var(--space-7)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-head{max-width:44rem;margin-inline:auto;text-align:center;margin-bottom:var(--space-6)}
.article-head .cat{color:var(--accent-strong);font-weight:var(--fw-semibold);letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-eyebrow)}
.article-head h1{font-size:var(--fs-h1);margin:var(--space-4) 0}
.article-head .meta{color:var(--text-muted);font-size:var(--fs-caption);display:flex;gap:var(--space-3);justify-content:center}
.article-body{max-width:40rem;margin-inline:auto;font-size:1.15rem;line-height:1.75}
.article-body>p:first-of-type::first-letter{float:left;font-family:var(--font-script);font-weight:400;
font-size:4.6em;line-height:.72;color:var(--accent-strong);padding:.14em .18em .02em 0;
text-shadow:1px 1px 0 rgba(184,151,90,.18)}
.article-body p{margin-bottom:1.3em}
.article-body h2{font-size:var(--fs-h3);margin:2rem 0 .75rem}
.article-body h3{font-size:var(--fs-h4);margin:1.6rem 0 .6rem}
.article-body ul{margin:0 0 1.3em 1.2em;list-style:disc}
.article-body li{margin-bottom:.4em}
.article-body a{color:var(--brand);border-bottom:1px solid var(--accent)}
.article-body hr{border:0;width:48px;height:1px;background:var(--accent);margin:2.5rem auto}
.article-related{border-top:1px solid var(--border);margin-top:var(--space-9);padding-top:var(--space-7)}
@media(max-width:560px){.mag-grid{grid-template-columns:1fr}}
/* ---------- QUOTE-SWEEP (stille bewijs, Doorsnede) ---------- */
.quote-sweep{position:relative;overflow:hidden;background:var(--navy-950);color:var(--sand-50);
padding-block:clamp(5rem,12vw,9rem)}
.quote-sweep::before{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 40%,rgba(247,241,230,.06) 50%,transparent 60%);
background-size:300% 100%;animation:sweep 22s linear infinite}
@keyframes sweep{from{background-position:130% 0}to{background-position:-130% 0}}
.quote-sweep .ql{position:relative;border-left:2px solid var(--accent);
padding-left:clamp(1.25rem,4vw,2.5rem);max-width:46rem;margin-inline:auto}
.quote-sweep blockquote{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.6rem);
line-height:1.32;font-weight:var(--fw-regular);color:var(--sand-50);text-wrap:balance}
.quote-sweep .qline{display:block;opacity:0;transform:translateY(12px);
transition:opacity .6s var(--ease-out-soft),transform .6s var(--ease-out-soft)}
.quote-sweep.in .qline{opacity:1;transform:none}
.quote-sweep.in .qline:nth-child(1){transition-delay:.05s}
.quote-sweep.in .qline:nth-child(2){transition-delay:.22s}
.quote-sweep.in .qline:nth-child(3){transition-delay:.39s}
.quote-sweep.in .qline:nth-child(4){transition-delay:.56s}
.quote-sweep cite{display:block;margin-top:var(--space-5);font-family:var(--font-body);font-style:normal;
font-size:var(--fs-caption);letter-spacing:.04em;color:var(--navy-200)}
@media(prefers-reduced-motion:reduce){.quote-sweep::before{animation:none}
.quote-sweep .qline{opacity:1;transform:none}}
/* ---------- DE LANGE LIJN (MJOP-tijdlijn, Doorsnede) ---------- */
.longline{background:var(--navy-950);color:var(--sand-50)}
.longline .eyebrow{color:var(--gold-300)}.longline .eyebrow::before{background:var(--gold-300)}
.longline h2,.longline h3{color:var(--sand-50)}
.longline .lead{color:var(--navy-200)}
.timeline{max-width:46rem;margin:var(--space-8) auto 0}
.tl-item{display:grid;grid-template-columns:5rem 1fr;position:relative;padding-bottom:var(--space-7)}
.tl-item:last-child{padding-bottom:0}
.tl-year{font-family:var(--font-display);font-size:1.15rem;color:var(--gold-300);padding-top:.05rem}
.tl-content{border-left:1px solid rgba(184,151,90,.28);padding-left:var(--space-5);position:relative}
.tl-item:last-child .tl-content{border-left-color:transparent}
.tl-content::before{content:"";position:absolute;left:-7px;top:.35rem;width:13px;height:13px;border-radius:50%;
border:1.5px solid var(--gold-500);background:var(--navy-950);transition:background .45s ease,box-shadow .45s ease}
.tl-item.is-visible .tl-content::before{background:var(--gold-500);box-shadow:0 0 0 4px rgba(184,151,90,.15)}
.tl-content h3{font-size:1.2rem;margin-bottom:var(--space-2)}
.tl-content p{font-size:var(--fs-body-sm);color:var(--navy-200)}
.longline-kicker{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2rem);color:var(--sand-50);
max-width:34rem;margin:var(--space-8) auto 0;text-align:center;text-wrap:balance;line-height:1.35}
@media(max-width:560px){.tl-item{grid-template-columns:4rem 1fr}}
/* ---------- HET GEBOUWDOSSIER (interactieve doorsnede) ---------- */
.dossier{background:var(--navy-900);color:var(--sand-50)}
.dossier .eyebrow{color:var(--gold-300)}.dossier .eyebrow::before{background:var(--gold-300)}
.dossier h2{color:var(--sand-50)}.dossier .lead{color:var(--navy-200)}
.dossier-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:var(--space-7)}
@media(max-width:820px){.dossier-grid{grid-template-columns:1fr}}
.dossier-viz{position:relative;aspect-ratio:1/1.12;max-width:420px;width:100%;margin-inline:auto}
.dossier-svg{width:100%;height:100%}
.dossier-svg path,.dossier-svg rect,.dossier-svg line{fill:none;stroke:var(--gold-400);stroke-width:1.25;
vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.hot{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
border:1.5px solid var(--gold-400);background:rgba(184,151,90,.14);cursor:pointer;padding:0;
display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease-out-soft)}
.hot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-300)}
.hot:hover,.hot.active{background:var(--gold-500);border-color:var(--gold-500);box-shadow:0 0 0 6px rgba(184,151,90,.16)}
.hot.active::after{background:var(--navy-900)}
.dossier-panel h3{color:var(--sand-50);font-size:var(--fs-h3);margin:var(--space-3) 0}
.dossier-cat{font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.12em;color:var(--gold-300);font-weight:var(--fw-semibold)}
.dossier-panel p{color:var(--navy-200)}
.dossier-panel ul{margin-top:var(--space-5);display:grid;gap:var(--space-3)}
.dossier-panel li{color:var(--navy-100);font-size:var(--fs-body-sm);padding-left:1.4rem;position:relative}
.dossier-panel li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--gold-400)}
/* ---------- FOTO-MOZAÏEK & BEELDBAND ---------- */
.photo-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.5vw,1.25rem)}
.photo-mosaic .pm-cell{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;background:var(--sand-200);border:1px solid var(--border)}
.photo-mosaic .pm-cell picture{display:block;width:100%;height:100%}
.photo-mosaic .pm-cell img{width:100%;height:100%;object-fit:cover;transition:transform 700ms ease}
.photo-mosaic .pm-cell:hover img{transform:scale(1.05)}
@media(max-width:700px){.photo-mosaic{grid-template-columns:1fr 1fr}}
.photo-band{width:100%;aspect-ratio:16/6;overflow:hidden;position:relative;background:var(--sand-200)}
.photo-band picture{display:block;width:100%;height:100%}
.photo-band img{width:100%;height:100%;object-fit:cover}
.photo-band::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(14,24,38,0) 65%,rgba(14,24,38,.16) 100%)}
@media(max-width:700px){.photo-band{aspect-ratio:3/2}}
/* ---------- WOORDENBOEK (glossary) ---------- */
.gloss{max-width:48rem;margin:0 auto}
.gloss-item{border-top:1px solid var(--border);padding:var(--space-5) 0}
.gloss-item:first-child{border-top:0}
.gloss-term{font-family:var(--font-display);font-size:1.35rem;color:var(--text-strong)}
.gloss-def{margin-top:var(--space-2);color:var(--text-primary);max-width:60ch}
.gloss-human{margin-top:var(--space-2);font-family:var(--font-display);font-style:italic;color:var(--accent-strong)}
/* ---------- NL WERKGEBIED-KAART ---------- */
.nlmap-wrap{display:grid;grid-template-columns:1fr .85fr;gap:var(--space-7);align-items:center}
@media(max-width:820px){.nlmap-wrap{grid-template-columns:1fr;gap:var(--space-5)}}
.nlmap{position:relative;max-width:380px;margin-inline:auto;width:100%}
.nlmap svg{width:100%;height:auto;display:block;overflow:visible}
.nlmap .dotfield circle{fill:#cdd6e2}
.nlmap .pulse{fill:var(--accent-strong);cursor:pointer;transition:r .2s ease}
.nlmap .pulse:hover,.nlmap .pulse:focus-visible{r:6.5;outline:none}
.nlmap .pulse:focus-visible{stroke:var(--navy-950,#0a111c);stroke-width:1.5}
.nlmap .pulse-ring{fill:none;stroke:var(--accent-strong);opacity:.45;transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){.nlmap .pulse-ring{animation:nlpulse 2.8s cubic-bezier(.4,0,.2,1) infinite}}
.nlmap .pulses g:nth-child(2) .pulse-ring{animation-delay:.55s}
.nlmap .pulses g:nth-child(3) .pulse-ring{animation-delay:1.1s}
.nlmap .pulses g:nth-child(4) .pulse-ring{animation-delay:1.65s}
.nlmap .pulses g:nth-child(5) .pulse-ring{animation-delay:2.2s}
@keyframes nlpulse{0%{transform:scale(.5);opacity:.5}70%{opacity:0}100%{transform:scale(3);opacity:0}}
.nlmap-tip{position:absolute;transform:translate(-50%,-118%);background:var(--navy-950,#0a111c);color:#fff;padding:.55rem .8rem;border-radius:8px;font-size:.85rem;line-height:1.3;pointer-events:none;white-space:nowrap;box-shadow:0 8px 24px rgba(10,17,28,.28);z-index:3}
.nlmap-tip strong{display:block;font-family:var(--font-display);font-weight:600}
.nlmap-tip .s{opacity:.72;font-size:.78rem}
.nlmap-tip::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--navy-950,#0a111c)}
.nlmap-side .nlmap-legend{list-style:none;padding:0;margin:var(--space-4) 0}
.nlmap-side .nlmap-legend li{display:flex;align-items:center;gap:.6rem;padding:.32rem 0;color:var(--text-primary)}
.nlmap-side .nlmap-legend .dot{width:9px;height:9px;border-radius:50%;background:var(--accent-strong);flex:none}
/* ---------- DUBBELKOP (technisch ⌐ menselijk) ---------- */
.dubbelkop{margin-top:.7rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;font-size:.94rem;line-height:1.4}
.dubbelkop .tech{font-family:var(--font-body);color:var(--text-muted);letter-spacing:.015em}
.dubbelkop .split{color:var(--accent-strong);font-weight:700;font-size:1.05em;line-height:1}
.dubbelkop .human{font-family:var(--font-display);font-style:italic;color:var(--text-strong)}
.section-head.center .dubbelkop,.section-head--center .dubbelkop{justify-content:center;text-align:center}
/* ---------- form-hint + 404-links ---------- */
.field-hint{display:block;margin-top:.4rem;font-size:.85rem;color:var(--text-muted);line-height:1.4}
.notfound-links{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1.1rem;justify-content:center;align-items:center;font-size:.95rem}
.notfound-links .muted{margin-right:.2rem}
/* ============================================================
PRINT / PDF — verzorgde afdruk van kennis- en dienstpagina's
============================================================ */
@media print {
@page { margin: 2cm; }
html { font-size: 11pt; }
body { background: #fff !important; color: #111 !important; }
/* interface weg */
.site-header, .site-footer, .mobile-menu, .nav-toggle, .to-top,
.skip-link, .nav-cta, .read-progress, .btn, .btn-row, form.form,
.cta-strip, .facade-lines, .nlmap-tip, .article-share, .breadcrumb .sep + a[href^="#"] { display: none !important; }
/* donkere vlakken → wit met donkere tekst, geen inktdump */
.section--invert, .quote-sweep, .cta-strip, [class*="--invert"] {
background: #fff !important; color: #111 !important;
}
.section--invert *, .quote-sweep * { color: #111 !important; }
/* decoratieve animaties/pseudo's uit */
.quote-sweep::before, .quote-sweep::after, .stat-num::after,
.nlmap .pulse-ring { display: none !important; animation: none !important; }
* { animation: none !important; transition: none !important; }
.reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }
/* ruimte compacter */
.section, .section--lg, .section--alt { padding: 0.6cm 0 !important; }
/* leesbaarheid + geen wees-koppen */
.article-body { max-width: none !important; }
h1, h2, h3, h4 { page-break-after: avoid; }
figure, img, .card, .icard, .numcard, .gloss-item, .stat, tr { page-break-inside: avoid; }
img { max-width: 100% !important; height: auto !important; }
p, li, blockquote { orphans: 3; widows: 3; }
a { color: #111 !important; text-decoration: underline; }
/* externe bron-URL's tonen ter referentie (interne relatieve links blijven schoon) */
.article-body a[href^="http"]::after,
main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
/* subtiele merkregel bovenaan de afdruk */
main#main::before {
content: "AH Vastgoedadvies — ahvastgoedadvies.nl";
display: block; font-size: 9pt; letter-spacing: .04em; color: #666;
border-bottom: 1px solid #ccc; padding-bottom: .3cm; margin-bottom: .5cm;
}
}
/* ---------- FABLE: Doorsnede-kroonstuk + Manifest + footer-motto ---------- */
.doorsnede-crown h2{max-width:20ch;margin-inline:auto}
.doorsnede-crown .lead{max-width:52ch}
.doorsnede-cta{margin-top:var(--space-5)}
.doorsnede-cta .tlink{font-size:1.02rem}
.manifest{list-style:none;padding:0;margin:var(--space-5) 0 0;max-width:46ch}
.manifest li{font-family:var(--font-display);font-size:1.16rem;line-height:1.5;padding:.55rem 0 .55rem 1.4rem;border-left:2px solid var(--border);position:relative;color:var(--text-strong)}
.manifest li::before{content:"";position:absolute;left:-2px;top:1rem;width:9px;height:2px;background:var(--accent-strong)}
.footer-motto{margin-top:.7rem;font-family:var(--font-display);font-style:italic;color:var(--accent-strong);font-size:.92rem}
/* ---------- FABLE-accent (lyrische band onder hero) ---------- */
.accent-band{padding:var(--space-6) 0 var(--space-4);text-align:center}
.accent-line{font-family:var(--font-display);font-style:italic;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.4;color:var(--text-strong);max-width:32ch;margin:0 auto;position:relative}
.accent-line::before{content:"";display:block;width:28px;height:2px;background:var(--accent-strong);margin:0 auto var(--space-3)}
/* ---------- Signatuur-monogram (Over-manifest) ---------- */
.signoff{margin-top:var(--space-5);text-align:right}
.signoff span{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:2.8rem;line-height:1;color:var(--brand);display:inline-block;position:relative;padding:0 .12em .12em}
.signoff span::after{content:"";position:absolute;left:10%;right:2%;bottom:0;height:2px;background:var(--accent-strong);transform:skewX(-14deg);border-radius:2px}
/* ---------- 404-gevel ---------- */
.nf-facade{display:block;width:132px;height:auto;margin:0 auto var(--space-5)}
/* ---------- Voorbeeld-MJOP preview ---------- */
.mjop-preview{display:grid;grid-template-columns:.85fr 1fr;gap:var(--space-7);align-items:center}
@media(max-width:820px){.mjop-preview{grid-template-columns:1fr;gap:var(--space-5)}}
.mjop-doc{position:relative;background:#fff;border:1px solid #ECE7DE;border-radius:6px;box-shadow:0 22px 55px rgba(27,46,71,.14);padding:1.6rem 1.6rem 0;max-width:360px;margin-inline:auto;overflow:hidden;aspect-ratio:1/1.34}
.doc-head{display:flex;flex-direction:column;gap:.15rem}
.doc-title{font-family:var(--font-display);font-size:1.3rem;color:var(--brand);line-height:1.1}
.doc-sub{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-muted)}
.doc-rule{height:2px;background:var(--accent-strong);width:46px;margin:.7rem 0 1.1rem}
.doc-section{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-400);margin:1rem 0 .55rem;font-weight:600}
.doc-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.72rem}
.doc-row .b{height:9px;border-radius:3px;background:#E7E9EE;display:inline-block}
.b-lbl{width:38%}.b-lbl2{width:52%}.b-lbl3{width:45%}
.doc-row .b-val{background:#D6DCE6}
.doc-fade{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 80%)}
.mjop-ask h3{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--brand);margin:0 0 .6rem}
.form--inline{margin-top:1.1rem}
.inline-row{display:flex;gap:.6rem;flex-wrap:wrap}
.inline-row input[type=email]{flex:1 1 220px;padding:14px 16px;border:1px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:1rem;color:var(--text-primary);background:#fff}
.inline-row input[type=email]:focus{outline:none;border-color:var(--accent-strong)}
.inline-row .btn{flex:0 0 auto}
/* ---------- Dossiers ---------- */
.dossier-plank{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:820px){.dossier-plank{grid-template-columns:1fr}}
.dossier-folder{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #ECE7DE;border-top:3px solid var(--accent-strong);border-radius:4px 10px 10px 10px;padding:1.4rem 1.4rem 1.25rem;text-decoration:none;box-shadow:0 8px 26px rgba(27,46,71,.05);transition:transform var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.dossier-folder:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(27,46,71,.10)}
.dossier-folder .folder-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-strong);font-weight:600;font-family:var(--font-body)}
.dossier-folder .fh{font-family:var(--font-display);font-size:1.35rem;color:var(--brand);margin:.4rem 0 .5rem;line-height:1.15}
.dossier-folder .fp{color:var(--text-primary);font-size:.98rem;line-height:1.5;flex:1}
.dossier-folder .card-more{margin-top:1rem;font-family:var(--font-body);font-weight:500;color:var(--brand);font-size:.95rem}
.dossier-list{list-style:none;padding:0;margin:0;counter-reset:none}
.dossier-item{border-top:1px solid var(--border)}
.dossier-item:last-child{border-bottom:1px solid var(--border)}
.dossier-item a{display:flex;gap:1.1rem;align-items:baseline;padding:1.15rem .2rem;text-decoration:none}
.dossier-item a:hover .dh{color:var(--accent-strong)}
.dossier-item .dnum{font-family:var(--font-display);font-size:1.25rem;color:var(--accent-strong);flex:0 0 auto;min-width:2ch}
.dossier-item .dtext{display:flex;flex-direction:column;gap:.2rem}
.dossier-item .dh{font-family:var(--font-display);font-size:1.2rem;color:var(--brand);line-height:1.2;transition:color var(--dur-fast) ease}
.dossier-item .dp{color:var(--text-primary);font-size:.98rem;line-height:1.5;max-width:62ch}
.dossier-item .dmeta{font-size:.8rem;color:var(--text-muted);letter-spacing:.02em}
/* ---------- Micro-interacties (research 2026): veld-focus + tijdlijn-draad + verzend-vinkje ---------- */
.field label{transition:color var(--dur-base) ease}
.field:focus-within label{color:var(--gold-600)}
.timeline{position:relative}
.timeline::before{content:"";position:absolute;left:5rem;top:.4rem;bottom:.4rem;width:2px;margin-left:-1px;background:linear-gradient(var(--gold-500),var(--gold-400));transform:scaleY(var(--tl-p,0));transform-origin:top;border-radius:2px}
@media(max-width:560px){.timeline::before{left:4rem}}
.tl-year{opacity:.5;transition:opacity var(--dur-base) var(--ease-out-soft),color var(--dur-base) ease}
.tl-item.is-visible .tl-year{opacity:1;color:var(--gold-500)}
.check-draw{width:58px;height:58px;margin:0 auto var(--space-4);display:block}
.check-draw circle{fill:none;stroke:var(--gold-300);stroke-width:3}
.check-draw path{fill:none;stroke:var(--gold-500);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:checkdraw .55s var(--ease-out-soft) .15s forwards}
@keyframes checkdraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.check-draw path{animation:none;stroke-dashoffset:0}.timeline::before{transform:scaleY(1)}}
/* ---------- Archival-index: fig.-labels op beeldrasters ---------- */
.pm-cell.fig{position:relative;margin:0}
.pm-cap{position:absolute;left:0;bottom:0;font-family:var(--font-body);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(27,46,71,.72);padding:.22rem .55rem;border-radius:0 7px 0 6px;pointer-events:none}
.pm-legend{margin-top:var(--space-3);font-family:var(--font-body);font-size:.78rem;letter-spacing:.08em;color:var(--text-muted);text-align:right}
/* ---------- Fable-vervolg: meetvizier + kaart-goudrand + fig-captions ---------- */
.dossier-viz::before,.dossier-viz::after{content:"";position:absolute;background:var(--gold-300);opacity:0;transition:opacity var(--dur-fast) ease;pointer-events:none;z-index:2}
.dossier-viz::before{left:var(--mx,50%);top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.dossier-viz::after{top:var(--my,50%);left:0;right:0;height:1px;transform:translateY(-.5px)}
.dossier-viz.aiming::before,.dossier-viz.aiming::after{opacity:.32}
.dossier .hot{z-index:3}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-card) var(--ease-out-soft);z-index:1}
.card:hover::before{transform:scaleX(1)}
.split-media.fig,.case-media.fig{margin:0}
.fig-cap{display:block;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--border);font-family:var(--font-body);font-size:.85rem;line-height:1.5}
.fig-cap .ct{color:var(--text-primary)}
.fig-cap .cx{color:var(--gold-500);font-weight:700;margin:0 .3rem}
.fig-cap .cm{color:var(--text-muted);font-style:italic}
.section--invert .fig-cap .ct{color:var(--sand-50)}.section--invert .fig-cap .cm{color:var(--navy-200)}
/* ---------- Casus-tijdas (Anatomie van een opdracht) ---------- */
.casus .gvl{color:var(--gold-300);font-weight:600}
.casus .dsn{color:var(--gold-400);font-weight:700;margin:0 .3rem}
.casus .dsnT{color:var(--navy-200);font-style:italic}
/* ---------- De Proefopname (doorsnede-instrument) ---------- */
.po-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-7);align-items:start}
@media(max-width:820px){.po-wrap{grid-template-columns:1fr}}
.po-q{border:0;border-top:1px solid var(--border);padding:var(--space-5) 0;margin:0}
.po-q:first-child{border-top:0}
.po-q legend{font-family:var(--font-display);font-size:1.15rem;color:var(--text-strong);padding:0;margin-bottom:.7rem;line-height:1.3}
.po-opt{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;cursor:pointer;color:var(--text-primary)}
.po-opt input{accent-color:var(--gold-600);width:1.05rem;height:1.05rem}
.po-viz{position:sticky;top:96px}
.po-svg{width:100%;max-width:320px;height:auto;display:block;margin-inline:auto}
.po-svg .frame{fill:none;stroke:var(--navy-200);stroke-width:1.4}
.po-svg .zone{fill:transparent;stroke:var(--gold-400);stroke-width:1.3;transition:fill .5s var(--ease-out-soft)}
.po-svg .zone.is-known{fill:rgba(184,151,90,.32)}
.po-svg .zlabel{fill:var(--navy-400);font-family:var(--font-body);font-size:8px;letter-spacing:.1em}
.po-progress{text-align:center;margin-top:var(--space-3);font-size:.85rem;letter-spacing:.06em;color:var(--text-muted)}
.po-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-4)}
@media(max-width:640px){.po-cols{grid-template-columns:1fr}}
.po-col h3{font-size:1.15rem;margin-bottom:.6rem}
.po-col ul{list-style:none;padding:0;margin:0}
.po-col li{padding:.4rem 0 .4rem 1.4rem;position:relative;color:var(--text-primary);border-top:1px solid var(--border)}
.po-col li:first-child{border-top:0}
.po-col--known li::before{content:"";position:absolute;left:0;top:.95rem;width:9px;height:9px;border-radius:2px;background:var(--gold-500)}
.po-col--unknown li::before{content:"";position:absolute;left:0;top:.9rem;width:9px;height:9px;border-radius:2px;border:1.4px solid var(--gold-400)}
.po-self{margin-top:var(--space-6);background:#F3EFE7;border-left:3px solid var(--gold-500);padding:var(--space-5)}
.po-self ol{margin:.5rem 0 0;padding-left:1.2rem}
.po-self li{font-family:var(--font-display);font-size:1.1rem;line-height:1.5;padding:.35rem 0;color:var(--text-strong)}
@media(prefers-reduced-motion:reduce){.po-svg .zone{transition:none}}
/* ---------- B6 monogram-sluitsteen + B5 Staat van het Seizoen ---------- */
.cta-monogram{margin-top:var(--space-6);text-align:center}
.cta-monogram span{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.75rem;color:var(--gold-300);position:relative;display:inline-block;padding:0 .1em .12em}
.cta-monogram span::after{content:"";position:absolute;left:12%;right:4%;bottom:0;height:1.5px;background:var(--gold-400);transform:skewX(-13deg);border-radius:2px}
.season{max-width:44rem;margin:var(--space-5) auto 0;padding:var(--space-4) var(--space-5);border:1px solid var(--border);border-left:3px solid var(--gold-500);background:#fff;border-radius:0 8px 8px 0;text-align:left}
.season-eyebrow{display:block;font-family:var(--font-body);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:600;margin-bottom:.35rem}
.season-text{font-family:var(--font-display);font-size:1.15rem;line-height:1.45;color:var(--text-strong);margin:0}
/* ---------- Woordenboek-glossen (CSS-tooltip, twee registers) ---------- */
.tgloss{position:relative;border-bottom:1px dotted var(--gold-500);cursor:help;color:inherit}
.tgloss:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
.tgloss-pop{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);width:min(280px,78vw);background:var(--navy-950);color:#fff;padding:.7rem .85rem;border-radius:8px;font-family:var(--font-body);font-size:.84rem;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none;box-shadow:0 12px 34px rgba(10,17,28,.32);opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;z-index:30;text-align:left}
.tgloss-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--navy-950)}
.tgloss:hover .tgloss-pop,.tgloss:focus .tgloss-pop,.tgloss:focus-within .tgloss-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.tgloss-pop .gp-tech{display:block;color:#fff}
.tgloss-pop .gp-mens{display:block;color:var(--gold-300);font-style:italic;margin-top:.35rem}
@media(prefers-reduced-motion:reduce){.tgloss-pop{transition:none}}
/* ---------- Onderzoek-upgrades: waarborgen + rapportage-tabel ---------- */
.waarborg{background:#fff;border:1px solid var(--border);border-top:3px solid var(--gold-500);border-radius:4px 4px 8px 8px;padding:var(--space-5)}
.waarborg h3{font-size:1.2rem;color:var(--brand);margin-bottom:.5rem}
.waarborg p{font-size:.98rem;line-height:1.55;color:var(--text-primary)}
.table-wrap{margin-top:var(--space-2);overflow-x:auto;-webkit-overflow-scrolling:touch}
.report-table{width:100%;border-collapse:collapse;background:#fff;font-family:var(--font-body);font-size:.96rem;box-shadow:0 10px 30px rgba(27,46,71,.06)}
.report-table thead th{text-align:left;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-400);font-weight:600;padding:.9rem 1rem;border-bottom:2px solid var(--gold-500);background:var(--sand-50,#faf8f4)}
.report-table td{padding:.85rem 1rem;border-bottom:1px solid var(--border);color:var(--text-primary);vertical-align:top}
.report-table td.num{font-variant-numeric:tabular-nums;text-align:center;font-family:var(--font-display);color:var(--brand);width:8rem}
.report-table tbody tr:last-child td{border-bottom:0}
.report-table .prio-hoog{color:var(--gold-600);font-weight:600}
.table-note{margin-top:.7rem;font-size:.8rem;letter-spacing:.03em;text-align:right}
@media(max-width:620px){.report-table{font-size:.86rem}.report-table td,.report-table th{padding:.6rem .6rem}}
/* ============================================================
EDITIE GROOT — beeld-eerst uplift (Fraunces, covers, cinema)
============================================================ */
/* krul-accentwoord in koppen (Pinyon Script, goud) */
em.acc,.acc{font-family:var(--font-script);font-style:normal;font-weight:400;
color:var(--accent-strong);letter-spacing:.01em;font-size:1.22em;line-height:.9}
.section--invert em.acc,.section--invert .acc,.hero--cinema em.acc{color:var(--gold-300)}
/* ---------- CINEMA-HERO (home): titel óp het beeld ---------- */
.hero--cinema{position:relative;padding:0;min-height:min(92svh,860px);display:flex;align-items:flex-end;
background:var(--navy-950);overflow:hidden}
.hero--cinema .hc-bg{position:absolute;inset:0;z-index:0}
.hero--cinema .hc-bg picture,.hero--cinema .hc-bg{display:block;width:100%;height:100%}
.hero--cinema .hc-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;
transform:scale(1.06);transition:transform 2400ms var(--ease-out-soft)}
.hero--cinema.is-visible .hc-bg img,.hero--cinema .hc-bg img{transform:scale(1)}
.hero--cinema .hc-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(78deg,rgba(10,17,28,.88) 0%,rgba(10,17,28,.62) 38%,rgba(10,17,28,.18) 72%,rgba(10,17,28,.38) 100%),
linear-gradient(180deg,rgba(10,17,28,.28) 0%,rgba(10,17,28,0) 30%,rgba(10,17,28,.55) 100%)}
.hero--cinema .facade-lines{z-index:2;left:auto;right:0;width:min(46vw,560px);opacity:.4}
.hero--cinema .hc-content{position:relative;z-index:3;width:100%;
padding-block:clamp(6rem,16vh,9rem) clamp(3.5rem,8vh,5.5rem)}
.hero--cinema .eyebrow{color:var(--gold-300)}
.hero--cinema .eyebrow::before{background:var(--gold-300)}
.hero--cinema h1{color:#fff;font-size:var(--fs-display);font-weight:var(--fw-semibold);
line-height:1.02;letter-spacing:-0.025em;max-width:14ch;margin-bottom:var(--space-5)}
.hero--cinema .lead{color:var(--navy-100);max-width:52ch}
.hero--cinema .lead .tgloss{border-bottom-color:var(--gold-400)}
.hero--cinema .btn-row{margin-top:var(--space-6)}
.hero--cinema .btn--primary{background:var(--sand-50);color:var(--navy-900)}
.hero--cinema .btn--primary:hover{background:#fff}
.hero--cinema .btn--ghost{color:var(--sand-50)}
.hero--cinema .btn--ghost:hover{box-shadow:inset 0 -1px 0 var(--gold-300)}
/* scroll-cue: dun goud koord dat de doorsnede in wijst */
.hc-cue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3;
display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--navy-200);
font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.hc-cue::after{content:"";width:1px;height:44px;background:linear-gradient(var(--gold-400),transparent);
animation:cueDrop 2.2s var(--ease-out-soft) infinite}
@keyframes cueDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(prefers-reduced-motion:reduce){.hc-cue::after{animation:none}}
@media(max-width:900px){
.hero--cinema{min-height:82svh}
.hero--cinema .facade-lines{width:74vw;opacity:.22}
}
/* ---------- PAGE-COVER: full-bleed fotocover per pagina ---------- */
.page-cover{position:relative;height:clamp(280px,46vh,540px);overflow:hidden;background:var(--navy-900)}
.page-cover picture{display:block;width:100%;height:100%}
.page-cover img{width:100%;height:100%;object-fit:cover}
.page-cover::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(10,17,28,.16) 0%,rgba(10,17,28,0) 34%,rgba(10,17,28,.44) 100%)}
.page-cover .pc-fig{position:absolute;right:0;bottom:0;z-index:2;
font-family:var(--font-body);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
color:#fff;background:rgba(27,46,71,.78);padding:.3rem .7rem;border-radius:6px 0 0 0}
.page-cover .pc-rule{position:absolute;left:var(--gutter);bottom:1.2rem;z-index:2;width:52px;height:2px;background:var(--gold-400)}
/* de eerste sectie ná een cover mag dichter op het beeld kruipen */
.page-cover + section.hero,.page-cover + section.section{padding-top:clamp(2.5rem,6vw,4.5rem)}
/* ---------- HOOFDSTUK-CONTOURCIJFERS bij section-heads ---------- */
.section-head{position:relative}
.section-head .chapter{position:absolute;right:-.5rem;top:-2.2rem;z-index:-1;pointer-events:none;
font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:clamp(5.5rem,12vw,9rem);
line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold-300);opacity:.5;user-select:none}
.section--invert .section-head .chapter,.longline .section-head .chapter{-webkit-text-stroke-color:rgba(216,198,160,.4)}
.section-head.center .chapter{right:auto;left:50%;transform:translateX(-50%)}
@media(max-width:700px){.section-head .chapter{font-size:4.5rem;top:-1.6rem}}
/* koppen wat steviger in Fraunces */
h2{font-weight:var(--fw-semibold)}
.hero h1{font-weight:var(--fw-semibold)}
/* beeldband-caption over het beeld */
.photo-band{position:relative}
.photo-band .pb-cap{position:absolute;left:var(--gutter);bottom:1rem;z-index:2;color:#fff;
font-family:var(--font-display);font-style:italic;font-size:clamp(1.05rem,2vw,1.4rem);
text-shadow:0 1px 14px rgba(10,17,28,.5);max-width:34ch}
/* ---------- GHOST-TYPO: groot sierwoord óp de fotocover ---------- */
.page-cover .pc-ghost{position:absolute;left:clamp(1rem,4vw,3rem);bottom:.02em;z-index:2;pointer-events:none;
font-family:var(--font-script);font-weight:400;font-size:clamp(3.6rem,11vw,8.5rem);line-height:1;
color:rgba(251,250,247,.92);text-shadow:0 2px 26px rgba(10,17,28,.45);user-select:none;
max-width:92%;overflow:hidden;text-overflow:clip;white-space:nowrap}
@media(max-width:700px){.page-cover .pc-ghost{font-size:clamp(2.6rem,13vw,4rem)}}
/* ghost-woord achter section-heads (contourvariant) */
.chapter-host{position:relative}
.chapter--word{position:absolute;right:-.25em;top:-1.15em;z-index:0;pointer-events:none;
font-family:var(--font-display);font-style:italic;font-weight:var(--fw-semibold);
font-size:clamp(3.2rem,8vw,6.5rem);line-height:1;color:transparent;
-webkit-text-stroke:1px var(--gold-300);opacity:.55;user-select:none;white-space:nowrap}
.chapter-host>*:not(.chapter--word){position:relative;z-index:1}
.section--invert .chapter--word,.longline .chapter--word{-webkit-text-stroke-color:rgba(216,198,160,.38)}
@media(max-width:700px){.chapter--word{font-size:2.6rem;top:-1em;right:0}}
/* ---------- DROP CAP: sierlijke beginletter van een verhaal ---------- */
.dropcap::first-letter{float:left;font-family:var(--font-script);font-weight:400;
font-size:4.2em;line-height:.72;color:var(--accent-strong);padding:.14em .16em .02em 0}
.section--invert .dropcap::first-letter{color:var(--gold-300)}
/* ---------- MOBIEL MENU: strakke uitlijning ---------- */
.mobile-menu{overflow-y:auto}
.mobile-menu .container:last-child{display:flex;flex-direction:column;flex:1;padding-bottom:var(--space-6)}
.mobile-menu nav{margin-top:var(--space-6);gap:0}
.mobile-menu nav a{font-size:1.4rem;line-height:1.25;padding:.85rem 0;width:100%;
border-bottom:1px solid var(--border)}
.mobile-menu nav a:first-child{border-top:1px solid var(--border)}
.mobile-menu .btn{margin-top:var(--space-7);width:100%;justify-content:center}
/* ============================================================
RONDE 3 — visuele QA-fixes (screenshots 11/7)
============================================================ */
/* leesletter: UI-elementen expliciet terug naar Inter */
.nav-links a,.breadcrumb,.site-footer,.stat .stat-label,.mag-card .meta,
.pc-fig,.pm-cap,.pm-legend,.po-progress{font-family:var(--font-body)}
/* mobiele header: CTA-knop van de balk af (staat al in het mobiele menu) */
@media(max-width:680px){
.nav .nav-cta{display:none}
.nav{gap:var(--space-3)}
}
/* cinema-hero: hardere scrim + betere leesbaarheid */
.hero--cinema .hc-scrim{
background:linear-gradient(78deg,rgba(10,17,28,.94) 0%,rgba(10,17,28,.78) 36%,rgba(10,17,28,.34) 68%,rgba(10,17,28,.5) 100%),
linear-gradient(180deg,rgba(10,17,28,.38) 0%,rgba(10,17,28,.08) 34%,rgba(10,17,28,.66) 100%)}
.hero--cinema h1{text-shadow:0 2px 28px rgba(10,17,28,.55)}
.hero--cinema .lead{color:var(--sand-50);text-shadow:0 1px 18px rgba(10,17,28,.65)}
.hero--cinema .btn--ghost{border:1px solid rgba(251,250,247,.4);padding:14px 24px}
@media(max-width:900px){
.hero--cinema .hc-content{padding-top:clamp(7rem,18vh,10rem)}
.hero--cinema h1{font-size:clamp(2.2rem,8.4vw,3.4rem);max-width:100%}
.hero--cinema .eyebrow{font-size:.7rem;letter-spacing:.1em}
.hc-cue{display:none}
em.acc,.acc{font-size:1.1em}
}
@media(max-width:480px){
.hero--cinema h1{font-size:2rem;line-height:1.08}
.hero--cinema .eyebrow{white-space:normal;line-height:1.6}
}
/* nooit horizontaal overlopende koppen */
h1,h2,h3,.hero--cinema h1{overflow-wrap:break-word;hyphens:auto}
/* ghost-contourwoorden: zichtbaarder */
.chapter--word{-webkit-text-stroke:1.3px var(--gold-400);opacity:.9}
.section--invert .chapter--word,.longline .chapter--word{-webkit-text-stroke-color:rgba(216,198,160,.55)}
/* cover-sierwoord: niet tegen de rand plakken */
.page-cover .pc-ghost{left:clamp(1.4rem,4vw,3rem);padding-left:.08em;bottom:.06em}
/* statistieken: royaler */
.stat .stat-num{font-size:clamp(2.4rem,4.5vw,3.5rem)}
.stat .stat-label{font-size:.95rem;line-height:1.5;color:var(--ink-500)}
/* ============================================================
RONDE 4 — Bodoni-identiteit + AH-logo (naar Anneke's huisstijl)
============================================================ */
/* Bodoni heeft dunne haarlijnen → koppen iets steviger + luchtiger */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.005em}
h1{letter-spacing:-.01em}
.hero--cinema h1,.hero h1{font-weight:500}
.mag-feature h2,.article-head h1{font-weight:500}
/* kapotte/overbodige scroll-hint definitief uit */
.hc-cue{display:none!important}
/* ---------- AH | CONSULTANCY — logo-lockup ---------- */
.ah-logo{display:inline-flex;align-items:center;gap:.62rem;line-height:1}
.ah-logo .ah-mono{display:inline-flex;align-items:center;gap:.42rem;
font-family:var(--font-display);font-weight:600;font-size:1.72rem;letter-spacing:.01em;
color:var(--navy-800);line-height:.9}
.ah-logo .ah-bar{width:1px;height:1.34em;background:currentColor;opacity:.5;display:inline-block}
.ah-logo .ah-word{font-family:var(--font-body);font-weight:600;font-size:.62rem;
letter-spacing:.34em;text-transform:uppercase;color:var(--ink-500);
padding-left:.05rem;white-space:nowrap}
.ah-logo:hover .ah-mono{color:var(--navy-950)}
.ah-logo:hover .ah-bar{opacity:.85;background:var(--gold-500)}
@media(max-width:1100px){.ah-logo .ah-mono{font-size:1.5rem}.ah-logo .ah-word{font-size:.56rem;letter-spacing:.28em}}
@media(max-width:420px){.ah-logo{gap:.5rem}.ah-logo .ah-word{letter-spacing:.2em}}
/* logo op donkere footer */
.site-footer .ah-logo .ah-mono{color:#fff}
.site-footer .ah-logo .ah-word{color:var(--navy-200)}
.site-footer .ah-logo .ah-bar{background:var(--gold-400);opacity:.7}
/* full monogram-teken voor footer/hero (gestapeld, zoals de huisstijl) */
.ah-crest{display:inline-grid;grid-template-columns:auto 1px auto;align-items:center;gap:1.1rem;
font-family:var(--font-display);color:var(--navy-800)}
.ah-crest .cx{font-size:clamp(3.2rem,7vw,4.8rem);font-weight:600;line-height:.86}
.ah-crest .cbar{width:1px;height:clamp(3.6rem,8vw,5.4rem);background:var(--warm-400)}
.ah-crest-word{display:block;text-align:center;margin-top:.6rem;font-family:var(--font-body);
font-size:.68rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--ink-500);text-indent:.42em}
.site-footer .ah-crest{color:#fff}.site-footer .ah-crest .cbar{background:var(--gold-400)}
.site-footer .ah-crest-word{color:var(--navy-200)}
/* ============================================================
RONDE 5 — Anneke's ECHTE logo als afbeelding + A-watermerk
============================================================ */
/* logo in de navigatiebalk */
.brand.ah-logo{gap:0}
.ah-logo-img{height:52px;width:auto;display:block}
@media(max-width:1100px){.ah-logo-img{height:46px}}
@media(max-width:420px){.ah-logo-img{height:42px}}
.mobile-menu-head .ah-logo-img{height:46px}
/* logo in de footer (wit) */
.ah-logo-footer{height:96px;width:auto;display:block;margin-bottom:.2rem}
/* subtiel A-watermerk (Bodoni) achter de afsluitende call-to-action — op elke pagina */
.cta-strip{position:relative;overflow:hidden}
.cta-strip::before{content:"A";position:absolute;top:50%;left:50%;transform:translate(-50%,-53%);
font-family:var(--font-display);font-weight:700;font-size:clamp(13rem,30vw,26rem);line-height:1;
color:currentColor;opacity:.045;z-index:0;pointer-events:none;user-select:none}
.cta-strip>*{position:relative;z-index:1}
.section--invert .cta-strip::before{opacity:.06}
/* zelfde A fluisterzacht achter de intro-sectie (alleen desktop) */
@media(min-width:900px){
.section--air.section--alt{position:relative;overflow:hidden}
.section--air.section--alt::before{content:"A";position:absolute;right:2%;top:-8%;
font-family:var(--font-display);font-weight:700;font-size:26rem;line-height:1;
color:var(--navy-900);opacity:.035;z-index:0;pointer-events:none;user-select:none}
.section--air.section--alt .container{position:relative;z-index:1}
}
/* ============================================================
RONDE 6 — LUXE MINIMALISME (Anneke's keuze) + SVG-logo
Monochroom, veel lucht, dun, groot, rustig. Goud = spaarzaam.
============================================================ */
:root{
/* Monochroom paper/ink palet */
--paper:#F6F5F2; --paper-2:#EFEEEA; --paper-3:#E7E5E0;
--ink:#15171B; --ink-2:#2E3136; --grey:#6E7075; --grey-2:#9A9C9F;
--line-1:#E3E1DC; --line-2:#D3D0CA;
--gold-lux:#B08A4F;
/* Semantische tokens overschrijven → hele site wordt monochroom */
--bg-base:var(--paper); --bg-alt:var(--paper-2); --bg-deep:var(--paper-3);
--bg-accent:var(--paper-2); --bg-invert:#141619;
--text-primary:var(--ink-2); --text-strong:var(--ink); --text-muted:var(--grey);
--text-on-invert:#F6F5F2; --text-on-invert-muted:#B9BABD;
--brand:var(--ink); --brand-hover:#000;
--accent:var(--gold-lux); --accent-strong:var(--gold-lux);
--border:var(--line-1); --border-strong:var(--line-2);
--focus-ring:var(--ink);
/* Meer lucht */
--section-y:clamp(3.75rem,8vw,6.25rem); --section-y-lg:clamp(4.5rem,10vw,8rem);
--fs-lead:1.3rem; --lh-body:1.72;
}
/* Rustiger, groter, dunner */
body{letter-spacing:.002em}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.012em;color:var(--ink)}
h2{font-size:clamp(2.1rem,1.4rem+2.6vw,3.2rem)}
.eyebrow{color:var(--grey);font-weight:600;letter-spacing:.24em;font-size:.72rem}
.eyebrow::before{background:var(--grey-2);width:34px}
.section--invert .eyebrow{color:var(--grey-2)}.section--invert .eyebrow::before{background:var(--grey-2)}
.lead{color:var(--ink-2);max-width:58ch}
.divider{background:var(--line-2);width:56px}
/* Knoppen: strak, plat, geen zware schaduw */
.btn{border-radius:2px;padding:16px 30px;font-weight:500;letter-spacing:.02em;box-shadow:none!important}
.btn--primary{background:var(--ink);color:#F6F5F2;border-color:var(--ink)}
.btn--primary:hover{background:#000;transform:none}
.btn--secondary{border-color:var(--line-2);color:var(--ink)}
.btn--ghost{color:var(--ink)}
.btn--ghost:hover{box-shadow:inset 0 -1px 0 var(--ink)!important}
/* Kaarten: alleen haarlijn, geen schaduw, geen goud-topbalk */
.card{border-radius:2px;box-shadow:none;border-color:var(--line-1)}
.card:hover{transform:translateY(-2px);box-shadow:none;border-color:var(--line-2)}
.card::before{display:none!important}
.card .card-icon,.value .card-icon{background:var(--paper-2);color:var(--ink);border-radius:2px}
.card .card-num{color:var(--grey-2)}
/* Goud terugbrengen: accenten worden ink/grijs, goud alleen op enkele haarlijntjes */
.stat .stat-num{color:var(--ink)}.stat .stat-num b{color:var(--ink)}.stat .stat-num .unit{color:var(--grey)}
.stat .stat-num::after{background:var(--gold-lux)}
.dropcap::first-letter,.article-body>p:first-of-type::first-letter{color:var(--ink)}
em.acc,.acc{color:var(--gold-lux)} /* de één signatuur-toets in goud, verder ink */
.section--invert em.acc,.section--invert .acc{color:var(--gold-lux)}
.mag-card .cat,.article-head .cat{color:var(--grey)}
.pullquote{border-left-color:var(--ink)}.pullquote p{color:var(--ink)}
.faq summary::after{color:var(--grey)}
.step::before{color:var(--grey-2)}
.cta-strip::before{opacity:.04}
.section--air.section--alt::before{color:var(--ink);opacity:.03}
/* Haarlijnen overal dunner/rustiger */
.site-header{background:rgba(246,245,242,.86);border-bottom:1px solid var(--line-1)}
.nav{height:92px}
.nav-links a{font-size:.98rem;color:var(--ink-2)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a::after{background:var(--gold-lux)}
/* ---------- SVG-LOGO (currentColor via mask) ---------- */
.ah-logo-svg{display:block;height:56px;aspect-ratio:1100/749;background:var(--ink);
-webkit-mask:url("../img/ah-logo.svg") center/contain no-repeat;
mask:url("../img/ah-logo.svg") center/contain no-repeat}
@media(max-width:1100px){.ah-logo-svg{height:48px}}
@media(max-width:420px){.ah-logo-svg{height:44px}}
.mobile-menu-head .ah-logo-svg{height:48px}
.site-footer .ah-logo-svg{height:104px;background:#F6F5F2}
.ah-logo-img,.ah-logo-footer{display:none} /* oude raster-img uit */
/* ---------- HERO MINIMAAL (tekst op paper, foto als band) ---------- */
.hero--min{background:var(--bg-base);padding-block:clamp(4.5rem,11vw,8.5rem) clamp(3rem,6vw,4.5rem);
text-align:center}
.hero--min .container{max-width:1000px}
.hero--min .eyebrow{justify-content:center;margin-bottom:var(--space-5)}
.hero--min h1{font-size:clamp(2.9rem,2rem+4.4vw,5.4rem);line-height:1.05;letter-spacing:-.02em;
max-width:18ch;margin:0 auto}
.hero--min .hero-rule{width:64px;height:2px;background:var(--gold-lux);margin:var(--space-6) auto}
.hero--min .lead{margin:0 auto;max-width:60ch;color:var(--ink-2)}
.hero--min .btn-row{justify-content:center;margin-top:var(--space-7)}
.photo-band--hero{margin:0;width:100%;aspect-ratio:16/6.4;overflow:hidden;background:var(--paper-3)}
.photo-band--hero img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
@media(max-width:700px){.photo-band--hero{aspect-ratio:4/3}}
/* footer iets rustiger op bijna-zwart */
.site-footer{background:#141619}
/* hero--min mobiel: titel binnen beeld houden */
@media(max-width:760px){
.hero--min h1{font-size:clamp(2rem,8.5vw,3rem);line-height:1.08;max-width:100%;
overflow-wrap:break-word;hyphens:auto}
.hero--min{padding-block:clamp(3rem,9vw,5rem) clamp(2rem,5vw,3rem)}
}
@media(max-width:420px){.hero--min h1{font-size:1.85rem}}
/* hero--min: definitieve mobiele maat (past binnen 360-390px) */
@media(max-width:760px){.hero--min h1{font-size:clamp(1.55rem,6.2vw,2.4rem)}}
@media(max-width:430px){.hero--min h1{font-size:1.5rem;letter-spacing:-.01em}}
/* hero--min mobiel — DEFINITIEF: script kleiner, normaal afbreken, geen forced break */
@media(max-width:760px){
.hero--min h1{font-size:clamp(1.45rem,5.6vw,2.2rem)!important;max-width:100%;
text-wrap:normal;overflow-wrap:anywhere;line-height:1.14}
.hero--min h1 em.acc{font-size:1em}
}
/* hero--min mobiel — schone eindmaat, regeleinde behouden */
@media(max-width:760px){
.hero--min h1{font-size:1.65rem!important;line-height:1.16;max-width:100%;text-wrap:normal}
.hero--min h1 em.acc{font-size:1em}
}
@media(max-width:430px){.hero--min h1{font-size:1.38rem!important}}
/* hero--min mobiel — eyebrow als afbrekend blok (was inline-flex → forceerde overbreedte) */
@media(max-width:760px){
.hero--min .container{overflow-x:clip}
.hero--min .eyebrow{display:block;font-size:.58rem;letter-spacing:.09em;line-height:1.75;max-width:100%}
.hero--min .eyebrow::before{display:none}
.hero--min h1{font-size:1.5rem!important;max-width:100%}
.hero--min .lead{font-size:1.02rem;max-width:100%}
}
/* ---------- HD inline-SVG logo (echte Bodoni-typografie) ---------- */
:root{--logo-bg:#F6F5F2}
.brand .logo-svg{display:block;height:54px;width:auto;color:var(--ink)}
@media(max-width:1100px){.brand .logo-svg{height:48px}}
@media(max-width:420px){.brand .logo-svg{height:44px}}
.mobile-menu-head .logo-svg{height:48px}
.site-footer{--logo-bg:#141619}
.site-footer .logo-svg{height:100px;width:auto;color:#F6F5F2}
/* ============================================================
HERO IMPACT — grote foto, weinig woorden, zwaar impactvol
============================================================ */
.hero--impact{position:relative;min-height:clamp(560px,90svh,880px);display:flex;align-items:flex-end;
background:#0F1113;overflow:hidden;padding:0}
.hero--impact .hi-bg{position:absolute;inset:0;z-index:0}
.hero--impact .hi-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero--impact .hi-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg,rgba(15,17,19,.42) 0%,rgba(15,17,19,.12) 26%,rgba(15,17,19,.58) 60%,rgba(15,17,19,.9) 100%),
linear-gradient(90deg,rgba(15,17,19,.5) 0%,rgba(15,17,19,.18) 45%,rgba(15,17,19,0) 78%)}
.hero--impact .hi-content{position:relative;z-index:2;width:100%;
padding-block:clamp(3rem,8vh,6rem);text-align:left}
.hero--impact .eyebrow{color:rgba(246,245,242,.72);margin-bottom:var(--space-4)}
.hero--impact .eyebrow::before{background:rgba(246,245,242,.55)}
.hero--impact h1{color:#fff;font-size:clamp(3rem,2rem+5vw,6.4rem);line-height:1.0;letter-spacing:-.02em;
font-weight:500;margin:0;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero--impact h1 .acc{color:var(--gold-lux)}
.hero--impact .lead{color:rgba(246,245,242,.9);max-width:44ch;margin-top:var(--space-5);
font-size:clamp(1.15rem,1rem+.6vw,1.45rem)}
.hero--impact .btn-row{margin-top:var(--space-6)}
.hero--impact .btn--primary{background:#F6F5F2;color:#15171B;border-color:#F6F5F2}
.hero--impact .btn--primary:hover{background:#fff}
@media(max-width:600px){
.hero--impact{min-height:78svh}
.hero--impact h1{font-size:clamp(2.3rem,9vw,3.4rem)}
.hero--impact .eyebrow{font-size:.58rem;letter-spacing:.14em}
}
/* logo: hele vlak klikbaar naar home (niet alleen de letters) */
.brand.ah-logo{display:inline-flex;align-items:center}
.brand .logo-svg{pointer-events:none}
/* stats: label op eigen regel (was tegen het cijfer geplakt) */
.stat .stat-label{display:block;margin-top:.5rem}
/* cookie-melding onderaan pinnen — nooit over het logo/nav */
.cookieadmin_law_container{position:fixed!important;top:auto!important;bottom:0!important;
left:0!important;right:0!important;max-width:none!important;width:100%!important;
margin:0!important;border-radius:0!important;z-index:9999!important}
/* ============================================================
LEESBAARHEID — dikkere, donkerdere leestekst (m.n. mobiel)
============================================================ */
p,li,.lead,.article-body,.gloss-def,dd,.card p,.value p,.step p,.audience p,.faq details p{
font-weight:500}
.lead{color:var(--ink-2)}
@media(max-width:760px){
body{font-size:1.14rem;line-height:1.7}
p,li,.lead,.article-body{color:var(--ink)}
.card p,.step p,.stat .stat-label,.mag-card p{color:var(--ink-2)}
}
/* logo: expliciete verhouding zodat breedte altijd berekent (cross-browser) */
.brand .logo-svg{aspect-ratio:858/310}
/* ============================================================
SECTION--CINEMA — hero-sfeer doorgetrokken + artistieke doorsnede
============================================================ */
.section--cinema{position:relative;overflow:hidden;background:#0F1113;
padding-block:clamp(5rem,12vw,9rem);display:flex;align-items:center;min-height:clamp(440px,62vh,640px)}
.section--cinema .cin-bg{position:absolute;inset:0;z-index:0}
.section--cinema .cin-bg img{width:100%;height:100%;object-fit:cover;object-position:center 55%;
filter:saturate(.82) contrast(1.02)}
.section--cinema .cin-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(90deg,rgba(15,17,19,.9) 0%,rgba(15,17,19,.62) 42%,rgba(15,17,19,.35) 75%,rgba(15,17,19,.5) 100%),
linear-gradient(180deg,rgba(15,17,19,.5) 0%,rgba(15,17,19,.25) 40%,rgba(15,17,19,.7) 100%)}
/* de artistieke gouden doorsnede-lijnen (architect tekent erdoorheen) */
.section--cinema .cin-lines{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
mix-blend-mode:screen;opacity:.55}
.section--cinema .cin-lines path,.section--cinema .cin-lines rect,.section--cinema .cin-lines circle{
fill:none;stroke:var(--gold-lux,#B08A4F);stroke-width:1.25;vector-effect:non-scaling-stroke;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out-soft)}
.section--cinema.is-visible .cin-lines path,.section--cinema.is-visible .cin-lines rect,
.section--cinema.is-visible .cin-lines circle,
.section--cinema .cin-content.is-visible ~ .cin-lines path{stroke-dashoffset:0}
/* val-back: teken sowieso na load via keyframe */
.section--cinema .cin-lines *{animation:cinDraw 1.8s var(--ease-out-soft) .3s forwards}
@keyframes cinDraw{to{stroke-dashoffset:0}}
.section--cinema .cin-content{position:relative;z-index:3;max-width:640px}
.section--cinema .eyebrow{color:var(--gold-lux)}
.section--cinema .eyebrow::before{background:var(--gold-lux)}
.section--cinema h2{color:#fff;font-size:clamp(2rem,1.4rem+2.6vw,3.2rem);max-width:20ch}
.section--cinema p{color:rgba(246,245,242,.9);max-width:46ch}
.section--cinema .tlink{color:#F6F5F2;background-image:linear-gradient(var(--gold-lux),var(--gold-lux)),linear-gradient(rgba(246,245,242,.4),rgba(246,245,242,.4))}
.section--cinema .cin-cta{margin-top:var(--space-5)}
@media(prefers-reduced-motion:reduce){.section--cinema .cin-lines *{animation:none;stroke-dashoffset:0}}
@media(max-width:700px){.section--cinema .cin-lines{opacity:.4}.section--cinema .cin-scrim{background:linear-gradient(180deg,rgba(15,17,19,.55),rgba(15,17,19,.82))}}
/* ---------- Doorsnede-lijnen gedeeld: hero + fotocovers ---------- */
.cin-lines path,.cin-lines rect,.cin-lines circle{fill:none;stroke:var(--gold-lux,#B08A4F);
stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1}
.cin-lines *{animation:cinDraw 1.8s var(--ease-out-soft) .3s forwards}
.hero--impact .cin-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;
pointer-events:none;mix-blend-mode:screen;opacity:.32}
.page-cover{position:relative;overflow:hidden}
.page-cover .cin-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;
pointer-events:none;mix-blend-mode:screen;opacity:.4}
@media(max-width:700px){.hero--impact .cin-lines,.page-cover .cin-lines{opacity:.24}}
/* mobiele hero: betere uitsnede (gang i.p.v. plafond) */
@media(max-width:700px){.hero--impact .hi-bg img{object-position:center 42%}}
/* ============================================================
DOORSNEDE-ART — architecturale doorsnede als kunstwerk (home)
============================================================ */
.doorsnede-art{background:var(--paper);padding-block:clamp(4rem,9vw,7rem);overflow:hidden}
.ds-art-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.ds-art-grid{grid-template-columns:1fr;gap:var(--space-6)}}
.ds-art-text h2{font-size:clamp(2rem,1.4rem+2.4vw,3rem);max-width:16ch}
.ds-art-text p{max-width:42ch;margin-top:var(--space-5)}
.ds-art-viz{margin:0;position:relative}
.ds-art-svg{width:100%;height:auto;display:block;overflow:visible}
/* lijnstijlen — technische tekening met goud-accenten */
.ds-art-svg .l-bold{stroke:var(--ink);stroke-width:2}
.ds-art-svg .l-mid{stroke:var(--ink-2);stroke-width:1.4}
.ds-art-svg .l-thin{stroke:var(--grey);stroke-width:1}
.ds-art-svg .l-cut{stroke:var(--gold-lux);stroke-width:1.6}
.ds-art-svg .l-cut2{stroke:var(--grey-2);stroke-width:1;stroke-dasharray:3 7}
.ds-art-svg .l-dot{fill:var(--gold-lux);stroke:none}
.ds-art-svg [class^="l-"]{stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* tekening: statisch volledig zichtbaar (solide lijnen), zachte entree van het geheel */
.ds-art-svg .ds-el{opacity:1}
.ds-art-viz.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out-soft),transform .8s var(--ease-out-soft)}
.ds-art-viz.reveal.is-visible{opacity:1;transform:none}
/* scan-lijn: de doorsnede beweegt automatisch door het gebouw */
.ds-art-svg .ds-scan line{stroke:var(--gold-lux);stroke-width:2.5;stroke-linecap:round;opacity:.92;
filter:drop-shadow(0 0 3px rgba(176,138,79,.5))}
@media(prefers-reduced-motion:reduce){.ds-art-svg .ds-scan{display:none}}
/* ============================================================
REVEAL-SPLIT — WOW: gevel wegschuiven → doorsnede eronder
============================================================ */
.reveal-split{background:var(--paper);padding-block:clamp(4rem,9vw,7rem);overflow:hidden}
.reveal-split .rs-head{max-width:640px;margin:0 auto clamp(2rem,5vw,3.5rem);text-align:center}
.reveal-split .rs-head .eyebrow{justify-content:center}
.reveal-split .rs-head h2{font-size:clamp(2.1rem,1.4rem+2.8vw,3.4rem)}
.reveal-split .rs-head p{margin:var(--space-4) auto 0;max-width:48ch}
.rs-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:640px;border-radius:var(--radius-lg);
overflow:hidden;box-shadow:var(--shadow-lg);background:#12141a;touch-action:pan-y;cursor:ew-resize;user-select:none}
@media(max-width:700px){.rs-stage{aspect-ratio:4/5}}
/* onderlaag: de doorsnede-tekening op donker */
.rs-draw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:radial-gradient(120% 120% at 70% 30%,#1a1d24 0%,#0f1116 100%)}
.rs-draw .ds-art-svg{width:min(88%,760px);height:auto;overflow:visible}
.rs-draw .ds-art-svg .l-bold{stroke:#F6F5F2;stroke-width:2}
.rs-draw .ds-art-svg .l-mid{stroke:rgba(246,245,242,.82);stroke-width:1.4}
.rs-draw .ds-art-svg .l-thin{stroke:rgba(246,245,242,.5);stroke-width:1}
.rs-draw .ds-art-svg .l-cut{stroke:var(--gold-lux);stroke-width:1.6}
.rs-draw .ds-art-svg .l-cut2{stroke:rgba(246,245,242,.4)}
.rs-draw .ds-art-svg .l-dot{fill:var(--gold-lux)}
.rs-draw .ds-art-svg .ds-scan line{stroke:var(--gold-lux)}
/* bovenlaag: de gevelfoto, weggeknipt tot de splitlijn */
.rs-facade{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split,56%)) 0 0);transition:clip-path .55s var(--ease-out-soft);
will-change:clip-path}
.rs-facade img{width:100%;height:100%;object-fit:cover;object-position:center}
.rs-facade::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(15,17,19,.15),rgba(15,17,19,0) 30%)}
/* labels */
.rs-label{position:absolute;bottom:1.1rem;z-index:4;font-family:var(--font-body);font-size:.66rem;
font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#F6F5F2;
background:rgba(15,17,19,.45);padding:.4rem .7rem;border-radius:3px;backdrop-filter:blur(4px)}
.rs-label--left{left:1.1rem}
.rs-label--right{right:1.1rem;color:var(--gold-lux);background:rgba(15,17,19,.35)}
/* de gouden sleep-lijn + greep */
.rs-handle{position:absolute;top:0;bottom:0;left:var(--split,56%);transition:left .55s var(--ease-out-soft);width:2px;transform:translateX(-1px);
background:var(--gold-lux);border:0;padding:0;z-index:5;cursor:ew-resize;
box-shadow:0 0 18px rgba(176,138,79,.6)}
.rs-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;
border-radius:50%;background:rgba(15,17,19,.7);border:1.5px solid var(--gold-lux);
display:flex;align-items:center;justify-content:center;gap:5px;backdrop-filter:blur(6px);
transition:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base) ease}
.rs-grip span{width:2px;height:14px;background:var(--gold-lux);display:block;border-radius:2px;opacity:.9}
.rs-handle:hover .rs-grip,.rs-handle:focus-visible .rs-grip{transform:translate(-50%,-50%) scale(1.12);
box-shadow:0 0 0 6px rgba(176,138,79,.18)}
/* zachte 'sleep mij'-pulse tot interactie */
.rs-stage:not(.rs-touched) .rs-grip{animation:rsPulse 2.6s var(--ease-out-soft) infinite}
@keyframes rsPulse{0%,100%{box-shadow:0 0 0 0 rgba(176,138,79,.35)}50%{box-shadow:0 0 0 10px rgba(176,138,79,0)}}
@media(prefers-reduced-motion:reduce){.rs-stage:not(.rs-touched) .rs-grip{animation:none}}
/* ============================================================
DIENSTEN — animeerde lijst met hover-beeld (waarde + navigatie)
============================================================ */
.diensten .section-head{text-align:center;max-width:640px;margin:0 auto clamp(1.5rem,4vw,3rem)}
.diensten .section-head .eyebrow{justify-content:center}
.dienst-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-1)}
.dienst a{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);
align-items:center;padding:clamp(1.4rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line-1);
text-decoration:none;color:inherit;transition:padding-left var(--dur-base) var(--ease-out-soft)}
.dienst a:hover{padding-left:clamp(.5rem,1.5vw,1.4rem)}
.d-num{font-family:var(--font-display);font-size:clamp(1rem,1.4vw,1.2rem);color:var(--grey-2);
font-weight:500;padding-top:.2em}
.d-title{display:block;font-family:var(--font-display);font-weight:500;
font-size:clamp(1.7rem,1.2rem+1.8vw,2.6rem);line-height:1.05;color:var(--ink);letter-spacing:-.01em;
transition:color var(--dur-base) ease}
.d-desc{display:block;margin-top:.5rem;max-width:52ch;color:var(--text-muted);font-size:1rem;font-weight:500}
.dienst a:hover .d-title{color:var(--gold-lux)}
.d-arrow{font-size:1.5rem;color:var(--ink);transition:transform var(--dur-base) var(--ease-out-soft),color var(--dur-base) ease}
.dienst a:hover .d-arrow{transform:translateX(8px);color:var(--gold-lux)}
/* hover-beeld dat verschijnt */
.d-thumb{position:absolute;right:clamp(3rem,8vw,8rem);top:50%;width:clamp(180px,20vw,260px);aspect-ratio:3/2;
transform:translateY(-46%) scale(.94) rotate(-2deg);border-radius:var(--radius-md);overflow:hidden;
opacity:0;pointer-events:none;z-index:3;box-shadow:var(--shadow-lg);
transition:opacity var(--dur-card) var(--ease-out-soft),transform var(--dur-card) var(--ease-out-soft);
clip-path:inset(0 0 0 0)}
.d-thumb img{width:100%;height:100%;object-fit:cover}
.dienst a:hover .d-thumb{opacity:1;transform:translateY(-50%) scale(1) rotate(-2deg)}
@media(max-width:820px){.d-thumb{display:none}.d-desc{font-size:.95rem}}
/* ============================================================
MANIFEST — grote regels die één voor één omhoog rijzen
============================================================ */
.manifesto{background:var(--paper-2);padding-block:clamp(5rem,13vw,9rem);text-align:center;overflow:hidden}
.mf-line{font-family:var(--font-display);font-weight:500;line-height:1.04;letter-spacing:-.015em;
font-size:clamp(2.2rem,1.4rem+3.6vw,4.6rem);color:var(--ink);max-width:20ch;margin:0 auto}
.mf-line.reveal{opacity:0;transform:translateY(48px)}
.mf-line.reveal.is-visible{opacity:1;transform:none;transition:opacity .9s var(--ease-out-soft),transform .9s var(--ease-out-soft)}
.mf-line.reveal:nth-child(2).is-visible{transition-delay:.16s}
.mf-line.reveal:nth-child(3).is-visible{transition-delay:.32s}
/* ============================================================
SIGNATURE-BAND — goud handschrift dat zichzelf schrijft + glanst
============================================================ */
.signature-band{background:var(--paper);padding-block:clamp(4.5rem,11vw,8rem);text-align:center;overflow:hidden}
.signature-band .sig-lead{font-family:var(--font-display);font-weight:500;color:var(--ink);
font-size:clamp(1.4rem, 2.4vw, 2.1rem);margin:0 0 .3rem;letter-spacing:-.01em}
.signature-band .sig-script{font-family:var(--font-script);font-weight:400;line-height:1.05;
font-size:clamp(3.2rem, 9vw, 7.5rem);margin:.2rem 0 0;
/* glans-gradient door de gouden krul, continu bewegend */
background:linear-gradient(100deg,#8a6a34 0%,var(--gold-lux) 30%,#e6cf9a 48%,var(--gold-lux) 66%,#8a6a34 100%);
background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:sigShimmer 7s linear infinite}
@keyframes sigShimmer{0%{background-position:130% 0}100%{background-position:-130% 0}}
/* schrijf-reveal op scroll (links→rechts) */
.signature-band .sig-script.reveal{opacity:1;transform:none;clip-path:inset(0 100% 0 -8%)}
.signature-band .sig-script.reveal.is-visible{clip-path:inset(0 -8% 0 -8%);
transition:clip-path 1.8s var(--ease-out-soft)}
.signature-band .sig-lead.reveal{opacity:0;transform:translateY(16px)}
.signature-band .sig-lead.reveal.is-visible{opacity:1;transform:none;transition:opacity .7s var(--ease-out-soft),transform .7s var(--ease-out-soft)}
@media(prefers-reduced-motion:reduce){.signature-band .sig-script{animation:none}
.signature-band .sig-script.reveal{clip-path:none}}
/* ===== RONDE ART (16 juli 2026) — artistieke homelaag ===== */
/* Hoofdstuknummers als contour-cijfers */
.section-head,.rs-head,.case>div.reveal{position:relative}
.ch-no{position:absolute;top:-.52em;left:-.04em;z-index:0;font-family:var(--font-display);font-style:italic;font-weight:400;line-height:1;font-size:clamp(5rem,9vw,8rem);color:transparent;-webkit-text-stroke:1px rgba(21,23,27,.15);pointer-events:none;user-select:none}
.section-head>*:not(.ch-no),.rs-head>*:not(.ch-no),.case>div.reveal>*:not(.ch-no){position:relative;z-index:1}
@media(max-width:700px){.ch-no{font-size:3.6rem;top:-.42em}}
/* Peillijn onder de hero */
.hero--impact{position:relative}
.hero-plumb{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:3;pointer-events:none}
.hp-line{width:1px;height:62px;background:linear-gradient(to bottom,transparent,var(--gold-300,#C9A96A));transform-origin:top;animation:hp-grow 1.5s cubic-bezier(.4,0,.2,1) .7s backwards}
.hp-mark{color:var(--gold-300,#C9A96A);font-size:.78rem;line-height:1;animation:hp-fade 1.2s ease 1.1s backwards}
@keyframes hp-grow{from{transform:scaleY(0)}}
@keyframes hp-fade{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.hp-line,.hp-mark{animation:none}}
/* Fotoband: inzetkader + fig-label */
.photo-band::before{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.38);pointer-events:none;z-index:2}
.pb-fig{position:absolute;top:27px;left:29px;z-index:3;font-family:var(--font-ui,Inter,sans-serif);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
@media(max-width:700px){.photo-band::before{inset:10px}.pb-fig{top:19px;left:21px}}
/* Millimeterpapier achter de cijferband */
.stats{position:relative;padding:clamp(1.6rem,4vw,2.8rem);border:1px solid rgba(21,23,27,.08);background-image:linear-gradient(rgba(21,23,27,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(21,23,27,.04) 1px,transparent 1px);background-size:52px 52px;background-position:center}
/* Kernwaarden: zelftekenende bouwkundige miniaturen */
.vc-art{display:block;width:78px;height:58px;margin-bottom:1.15rem;color:var(--ink,#15171B)}
.vc-art svg{width:100%;height:100%;overflow:visible;display:block}
.vc-art [pathLength]{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) calc(.15s + var(--i,0)*.13s)}
.vc-art .va-gold{stroke:var(--gold-lux,#B08D4A);stroke-width:1.15}
.value.is-visible .vc-art [pathLength]{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.vc-art [pathLength]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}}
/* Signature-band: kalligrafisch moment */
.signature-band .sig-script{font-size:clamp(3rem,7.5vw,5.4rem)}
.sig-flourish{display:block;width:clamp(180px,26vw,300px);margin:1.3rem auto 0;height:auto}
.sig-flourish path{fill:none;stroke:var(--gold-lux,#B08D4A);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease .55s}
.sig-flourish.is-visible path{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.sig-flourish path{stroke-dasharray:none;stroke-dashoffset:0}}
/* Blindstempel bij het uitgelichte project */
.case-media{position:relative;overflow:visible}
.case-media .fig-cap{padding-right:108px}
.ah-stamp{position:absolute;right:-24px;bottom:-24px;width:118px;height:118px;border-radius:50%;background:var(--paper,#F6F5F2);box-shadow:0 0 0 1px rgba(21,23,27,.1);display:block;z-index:3}
.ah-stamp svg{width:100%;height:100%;display:block}
.ah-stamp .st-rot{transform-box:fill-box;transform-origin:center;animation:stamp-rot 48s linear infinite}
.ah-stamp .st-ring{font-family:var(--font-ui,Inter,sans-serif);font-size:8.2px;letter-spacing:1px;text-transform:uppercase;fill:rgba(21,23,27,.6)}
.ah-stamp .st-mid{font-family:var(--font-display);font-size:20px;fill:var(--ink,#15171B);text-anchor:middle}
.ah-stamp .st-rim{fill:none;stroke:rgba(176,141,74,.6);stroke-width:1}
.ah-stamp .st-rim--in{stroke:rgba(21,23,27,.16)}
@keyframes stamp-rot{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ah-stamp .st-rot{animation:none}}
@media(max-width:700px){.ah-stamp{width:90px;height:90px;right:-8px;bottom:-14px}}
/* Diensten: duotoon-hover + contour-nummer */
.dienst .d-thumb img{filter:grayscale(1) contrast(.97);transition:filter .5s ease}
.dienst a:hover .d-thumb img,.dienst a:focus-visible .d-thumb img{filter:none}
.dienst .d-num{font-family:var(--font-display);font-style:italic;font-size:1.9rem;color:transparent;-webkit-text-stroke:1px var(--gold-lux,#B08D4A)}
/* ===== RONDE ART-2 (16 juli 2026) — artistieke laag site-breed ===== */
/* Hero-ghostwoord (home) */
.hi-ghost{position:absolute;right:3vw;bottom:9%;z-index:2;font-family:var(--font-script);font-size:clamp(6rem,12vw,11rem);line-height:1;color:rgba(255,255,255,.13);pointer-events:none;user-select:none;transform:rotate(-4deg)}
@media(max-width:1000px){.hi-ghost{display:none}}
/* Page-covers: inzetkader + maatbalk (alle pagina's met cover) */
.page-cover::before{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.32);pointer-events:none;z-index:2}
.page-cover::after{content:"";position:absolute;left:34px;bottom:34px;width:96px;height:3px;z-index:3;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 12px,transparent 12px 24px)}
@media(max-width:700px){.page-cover::before{inset:10px}.page-cover::after{left:22px;bottom:22px;width:72px}}
/* Magazine De Doorsnede: duotoon tot aanraking */
.mag-card .thumb img{filter:grayscale(1) contrast(.98);transition:transform 600ms ease,filter .5s ease}
.mag-card:hover .thumb img,.mag-card:focus-within .thumb img{filter:none}
/* Portretstempel (Over): binnenvariant */
.person-photo{position:relative}
.ah-stamp--in{right:14px;bottom:14px}
/* Manifesto: peilmerk-ornament */
.manifesto .container::before{content:"\25BD";display:block;text-align:center;color:var(--gold-lux,#B08D4A);font-size:.85rem;margin-bottom:2.2rem;opacity:.9}
/* Hoofdstuknummers op donkere secties */
.section--invert .ch-no{-webkit-text-stroke-color:rgba(246,245,242,.2)}
/* Footer: Hollandse gevellijn over de volle breedte */
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;pointer-events:none;background-repeat:repeat-x;background-position:bottom center;background-size:auto 64px;background-image:url("data:image/svg+xml;utf8,")}
/* ===== RONDE ART-3 (16 juli 2026) — de pennenstreek: 'gebouw' wordt een gebouw ===== */
.sig-gebouw{display:block;width:clamp(340px,54vw,680px);height:auto;margin:1.8rem auto 0;overflow:visible}
.sig-gebouw .sg-word{font-family:var(--font-script,"Pinyon Script",cursive);font-size:118px}
.sig-gebouw .sg-pen{fill:none;stroke:var(--gold-lux,#B08D4A);stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 4.6s cubic-bezier(.6,.03,.72,.55) .5s}
.sig-gebouw.is-visible .sg-pen{stroke-dashoffset:0}
.sig-gebouw .sg-lijn{fill:none;stroke:var(--gold-lux,#B08D4A);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.4s cubic-bezier(.28,.5,.14,1) 5.1s}
.sig-gebouw.is-visible .sg-lijn{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.sig-gebouw .sg-pen,.sig-gebouw .sg-lijn{stroke-dasharray:none;stroke-dashoffset:0;transition:none}}
@media(max-width:700px){.sig-gebouw{width:min(92vw,400px)}}
/* Pennenstreek in de slot-CTA (alle pagina's behalve home) — licht goud op donker */
.sig-gebouw--cta{width:clamp(260px,30vw,430px);margin:0 auto 2.4rem}
.sig-gebouw--cta .sg-pen,.sig-gebouw--cta .sg-lijn{stroke:var(--gold-300,#C9A96A)}
@media(max-width:700px){.sig-gebouw--cta{width:min(80vw,330px)}}
/* ===== RONDE ART-5 (17 juli 2026) — WAUW-laag ===== */
/* Papierkorrel over de hele site */
body::after{content:"";position:fixed;inset:0;z-index:11990;pointer-events:none;opacity:.033;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,")}
/* Blauwdruk-opening (alleen met body.bp-play, 1x per sessie) */
.bp-open{display:none}
body.bp-play .bp-open{display:grid;place-items:center;position:fixed;inset:0;z-index:11980;background:var(--paper,#F6F5F2);pointer-events:none;animation:bp-lift .95s cubic-bezier(.75,0,.25,1) 3s forwards}
.bp-inner{width:min(94vw,1500px)}
.bp-open svg{width:100%;height:auto;display:block}
.bp-open path,.bp-open line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bp-open .bp-l{stroke:rgba(21,23,27,.6);stroke-width:1.25}
.bp-open .bp-m{stroke:rgba(21,23,27,.75);stroke-width:1.6}
.bp-open .bp-g{stroke:var(--gold-lux,#B08D4A);stroke-width:1.4}
.bp-open .bp-el path{stroke-dasharray:1;stroke-dashoffset:1;animation:bp-draw .8s cubic-bezier(.4,0,.3,1) forwards;animation-delay:calc(.12s + var(--i,0)*.028s)}
.bp-word{font-family:var(--font-ui,Inter,sans-serif);font-size:15px;letter-spacing:.42em;text-transform:uppercase;fill:rgba(21,23,27,.62);text-anchor:middle;opacity:0;animation:bp-fade .8s ease 1.5s forwards}
.bp-rule{stroke:rgba(176,141,74,.55);stroke-width:1;opacity:0;animation:bp-fade .8s ease 1.6s forwards}
@keyframes bp-draw{to{stroke-dashoffset:0}}
@keyframes bp-fade{to{opacity:1}}
@keyframes bp-lift{to{transform:translateY(-102%)}}
/* Hero-regels rijzen op (na de opening iets later) */
.hi-content .hl{display:block;overflow:hidden}
.hi-content .hl>span{display:inline-block;transform:translateY(112%);animation:hl-up .95s cubic-bezier(.2,.75,.15,1) forwards}
.hi-content .hl:nth-child(1)>span{animation-delay:.25s}
.hi-content .hl:nth-child(2)>span{animation-delay:.42s}
body.bp-play .hi-content .hl:nth-child(1)>span{animation-delay:3.35s}
body.bp-play .hi-content .hl:nth-child(2)>span{animation-delay:3.52s}
@keyframes hl-up{to{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hi-content .hl>span{transform:none;animation:none}}
/* Eigen cursor (desktop) */
@media(pointer:fine){
.cur-dot{position:fixed;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--gold-lux,#B08D4A);pointer-events:none;z-index:12000;opacity:0;transition:opacity .25s}
.cur-ring{position:fixed;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(176,141,74,.55);pointer-events:none;z-index:12000;opacity:0;transition:opacity .25s,width .3s,height .3s,left .3s,top .3s,border-color .3s}
.cur-dot.is-on,.cur-ring.is-on{opacity:1}
.cur-ring.is-hot{width:52px;height:52px;left:-26px;top:-26px;border-color:var(--gold-lux,#B08D4A)}
}
/* Pagina-overgangen */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-uit .28s ease both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-uit{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
/* Scroll-diepte (progressief, alleen met scroll-driven support) */
@supports (animation-timeline: view()) {
.page-cover{overflow:hidden}
.page-cover img,.photo-band img{animation:cov-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
@keyframes cov-par{from{transform:scale(1.13) translateY(-4.2%)}to{transform:scale(1.13) translateY(4.2%)}}
.ch-no{animation:ch-settle linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
@keyframes ch-settle{from{opacity:0;transform:translateY(.14em)}to{opacity:1;transform:none}}
.site-footer::before{animation:sky-rise linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
@keyframes sky-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
.page-cover img,.photo-band img,.ch-no,.site-footer::before{animation:none}
}
/* ===== RONDE ART-6 (17 juli 2026) — bewegingslaag ===== */
/* Koppen woord voor woord */
.section-head h2 .wv,.rs-head h2 .wv{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.15,1);transition-delay:calc(.06s + var(--wi,0)*.07s)}
.section-head.is-visible h2 .wv,.rs-head.is-visible h2 .wv{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.section-head h2 .wv,.rs-head h2 .wv{opacity:1;transform:none;transition:none}}
/* Magnetische knoppen */
.magneet{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
/* Kaart-tilt + gouden glans */
.tilt{position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1);will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(201,169,106,.14),transparent 62%)}
.tilt:hover::after{opacity:1}
/* Ken Burns op de hero */
.hi-bg img{animation:kb-zet 7s cubic-bezier(.2,.6,.2,1) both}
body.bp-play .hi-bg img{animation-delay:2.9s}
@keyframes kb-zet{from{transform:scale(1.07)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hi-bg img{animation:none}}
/* Foto's ontwikkelen bij het inscrollen (blauwdruk -> werkelijkheid) */
@supports (animation-timeline: view()){
.fig img,.case-media img{animation:ontwikkel linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
@keyframes ontwikkel{from{filter:grayscale(.9) sepia(.22) contrast(.94) brightness(1.05);opacity:.72}to{filter:none;opacity:1}}
}
@media(prefers-reduced-motion:reduce){.fig img,.case-media img{animation:none}}
/* Gouden klik-rimpel */
@media(pointer:fine){
.rippel{position:fixed;width:56px;height:56px;margin:-28px 0 0 -28px;border:1px solid var(--gold-lux,#B08D4A);border-radius:50%;pointer-events:none;z-index:11995;transform:scale(.12);opacity:.9;animation:rip .55s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes rip{to{transform:scale(1);opacity:0}}
}
/* ===== RONDE ART-7 (18 juli 2026) — zoekveld, register, stappen ===== */
/* Magazine-zoekveld */
.mag-zoek{display:flex;align-items:baseline;gap:1rem;max-width:560px;margin:1.6rem auto 2.2rem}
.mag-zoek input{flex:1;border:0;border-bottom:1px solid rgba(21,23,27,.25);background:transparent;padding:.55rem .1rem;font-family:var(--font-display);font-style:italic;font-size:1.25rem;color:var(--ink,#15171B);outline:none;border-radius:0}
.mag-zoek input::placeholder{color:rgba(21,23,27,.38)}
.mag-zoek input:focus{border-bottom-color:var(--gold-lux,#B08D4A)}
.mag-zoek input::-webkit-search-cancel-button{-webkit-appearance:none}
.mz-teller{font-family:var(--font-ui,Inter,sans-serif);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(21,23,27,.5);white-space:nowrap}
.mag-registerlink{text-align:center;margin-top:2.6rem}
/* Register alle-verhalen */
.reg-wrap{max-width:820px;margin-inline:auto}
.reg-groep{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.reg-cat{font-family:var(--font-ui,Inter,sans-serif);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-600,#8f7137);border-bottom:1px solid rgba(21,23,27,.14);padding-bottom:.55rem;margin-bottom:.4rem}
.reg-lijst{list-style:none;margin:0;padding:0}
.reg-lijst li{border-bottom:1px dotted rgba(21,23,27,.18)}
.reg-lijst a{display:flex;align-items:baseline;gap:1rem;padding:.62rem .2rem;text-decoration:none;color:var(--ink,#15171B);transition:background .25s ease,padding-left .25s ease}
.reg-lijst a:hover{background:rgba(176,141,74,.06);padding-left:.7rem}
.reg-num{font-family:var(--font-display);font-style:italic;font-size:.85rem;color:transparent;-webkit-text-stroke:.8px var(--gold-lux,#B08D4A);min-width:2.4rem}
.reg-titel{flex:1;font-family:var(--font-text,serif);font-size:1.02rem}
.reg-min{font-family:var(--font-ui,Inter,sans-serif);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(21,23,27,.45)}
/* Contact: gespreksstappen */
.stappen .stap{position:relative;padding-top:2.6rem}
.stap-num{position:absolute;top:0;left:0;font-family:var(--font-display);font-style:italic;font-size:2.6rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--gold-lux,#B08D4A)}
.stappen .stap h3{margin-bottom:.55rem}
/* ===== Taalknop NL|EN (18 juli 2026) ===== */
.lang-switch{display:flex;align-items:center;margin-left:1.1rem}
.lang-switch a{font-family:var(--font-ui,Inter,sans-serif);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink,#15171B);text-decoration:none;border:1px solid rgba(21,23,27,.25);padding:.34rem .6rem;border-radius:2px;transition:border-color .25s,color .25s,background .25s}
.lang-switch a:hover{border-color:var(--gold-lux,#B08D4A);color:var(--gold-600,#8f7137)}
@media(max-width:980px){.lang-switch{display:none}}
.mobile-menu nav a[lang]{opacity:.75}
/* ===== RONDE ART-8 (18 juli 2026) — vijf-agents-wow: nacht, beheerjaar, menu, draad, sieraden ===== */
/* ---- 1_nacht ---- */
/* ============================================================
AH Vastgoedadvies — nacht.css · "Blauwdruk-nachtmodus"
Cyanotype dark mode: papier wordt diep blauwdruk-blauw,
lijnen worden wit en goud — als een echte architectuur-blauwdruk.
Actief uitsluitend via html[data-thema="nacht"].
Laden NA assets/css/main.css. Geen wijziging aan het licht-thema.
Vereist CSS-nesting (Baseline 2023 — alle evergreen browsers).
============================================================ */
html[data-thema="nacht"] {
/* ---------- 1. TOKEN-OVERRIDES (RONDE-6 palet → cyanotype) ---------- */
/* Papier → blauwdruk-blauw (basis tussen #16283f en #132234) */
--paper:#14263B; /* basisvel */
--paper-2:#112134; /* alt-sectie: een tint dieper */
--paper-3:#0F1D2E; /* deep-sectie */
--ink:#E9EDF4; /* "inkt" wordt gebroken wit */
--ink-2:#D9E1EC;
--grey:#A3B4CA; /* gedempt, maar ≥4.5:1 op --paper */
--grey-2:#8FA3BC;
--line-1:rgba(233,237,244,.16); /* haarlijnen: wit op lage alpha */
--line-2:rgba(233,237,244,.28);
--gold-lux:#C9A96A; /* goud blijft goud, één stap lichter */
/* Goudreeks (gebruikt door facade-lines, footer, eyebrows op donker) */
--gold-300:#DFCFA6; --gold-400:#D3BC85; --gold-500:#C9A96A; --gold-600:#CDB27A;
/* Semantiek die RONDE-6 letterlijk (niet via var) zet */
--bg-invert:#0C1930; /* donkere secties: donkerder dan papier */
--text-on-invert:#EDF1F7; --text-on-invert-muted:#A9BACF;
--brand-hover:#FFFFFF;
--focus-ring:#C9A96A;
/* Oud-palet-tokens die nog los in componenten leven */
--warm-200:rgba(233,237,244,.14); --warm-300:rgba(233,237,244,.26);
--warm-400:#7E93AD; --warm-500:#93A7C0;
--ink-500:#A3B4CA; --ink-400:#93A7C0;
/* Schaduwen: op donker vlak zwaarder en zwart */
--shadow-xs:0 1px 2px rgba(0,0,0,.3);
--shadow-sm:0 2px 8px rgba(0,0,0,.35);
--shadow-md:0 8px 24px rgba(0,0,0,.4);
--shadow-lg:0 18px 48px rgba(0,0,0,.5);
--focus-shadow:0 0 0 3px rgba(201,169,106,.3);
/* Verhoogde vlakken (kaarten/formulieren): iets lichter dan papier */
--nacht-panel:#1B3049;
--nacht-panel-2:#16293F;
--logo-bg:#14263B;
color-scheme:dark; /* native controls, scrollbars, datalists mee in nacht */
/* ---------- 2. BASIS & CHROME ---------- */
& .site-header{background:rgba(16,29,47,.84)}
& .mobile-menu{background:var(--paper)}
& .mobile-menu nav a{color:var(--ink)}
& .breadcrumb .sep{color:rgba(233,237,244,.4)}
& .to-top{color:#12233A}
& .btn--primary{color:#12233A}
& .btn--primary:hover{background:#FFFFFF}
& .chip.is-active{color:#12233A}
& .section--air.section--alt::before{color:#E9EDF4;opacity:.035}
& .lang-switch a{border-color:rgba(233,237,244,.35)}
/* ---------- 3. KAARTEN & VERHOOGDE VLAKKEN (waren hardcoded #fff) ---------- */
& .card,& .mag-card,& .form,& .waarborg,& .season,& .dossier-folder,
& .mjop-doc,& .report-table,& .inline-row input[type=email]{
background:var(--nacht-panel);border-color:var(--line-1)}
& .section--alt .card{background:var(--nacht-panel)}
& .card:hover,& .mag-card:hover{border-color:var(--line-2)}
& .dossier-folder{box-shadow:0 8px 26px rgba(0,0,0,.35)}
& .dossier-folder:hover{box-shadow:0 16px 40px rgba(0,0,0,.45)}
& .mjop-doc{box-shadow:0 22px 55px rgba(0,0,0,.5)}
& .report-table{box-shadow:0 10px 30px rgba(0,0,0,.35)}
& .report-table thead th{background:var(--nacht-panel-2)}
& .doc-row .b{background:rgba(233,237,244,.16)}
& .doc-row .b-val{background:rgba(233,237,244,.3)}
& .doc-fade{background:linear-gradient(to bottom,rgba(27,48,73,0),var(--nacht-panel) 80%)}
& .po-self{background:rgba(233,237,244,.06)}
& .po-svg .zlabel{fill:#8FA3BC}
& .nlmap .dotfield circle{fill:rgba(233,237,244,.25)}
& .nlmap .pulse:focus-visible{stroke:#E9EDF4}
/* ---------- 4. FORMULIEREN ---------- */
& .field input,& .field textarea,& .field select{
background:rgba(233,237,244,.06);border-color:var(--line-2);color:var(--ink)}
& .field input::placeholder,& .field textarea::placeholder{color:rgba(233,237,244,.45)}
& .field select{ /* pijltje: navy → gebroken wit */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E9EDF4' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
& .field select option{background:var(--nacht-panel);color:var(--ink)}
& .mag-zoek input{border-bottom-color:rgba(233,237,244,.3);color:var(--ink)}
& .mag-zoek input::placeholder{color:rgba(233,237,244,.45)}
& .mz-teller{color:rgba(233,237,244,.55)}
/* ---------- 5. DONKERE SECTIES: donkerder blauw dan het papier ---------- */
& .site-footer{background:#0B1727;--logo-bg:#0B1727}
& .footer-bottom{color:#93A7C0}
& .footer-bottom a{color:#93A7C0}
& .footer-bottom a:hover{color:#E9EDF4}
& .quote-sweep,& .longline{background:#0A1626}
& .dossier{background:#0C1930}
& .hero--impact,& .section--cinema{background:#0D1B2D}
& .rs-stage{background:#101F33}
& .rs-draw{background:radial-gradient(120% 120% at 70% 30%,#152A44 0%,#0C1930 100%)}
& .tl-content::before{background:#0A1626}
/* ---------- 6. FOTO'S: gedimd + koele blauwzweem via bestaande wrappers ----------
Aanpak: de wrapper (bestaat al, overflow:hidden) krijgt diepblauw als
achtergrond; de foto wordt gedimd én krijgt opacity .93, zodat het blauw
van de wrapper er subtiel doorheen schemert. Geen nieuwe markup. */
& .hero-media,& .split-media,& .case-media,& .person-photo,& .photo-band,
& .article-hero,& .photo-mosaic .pm-cell,& .mag-card .thumb,& .page-cover{
background:#0E1D30}
& .hero-media img,& .split-media img,& .case-media img,& .person-photo img,
& .photo-band img,& .article-hero img,& .photo-mosaic .pm-cell img,
& .page-cover img,& .mag-feature img,& .hi-bg img,& .cin-bg img{
filter:brightness(.82) saturate(.85);opacity:.93}
/* duotoon-hovers behouden hun grayscale-gedrag, maar gedimd */
& .mag-card .thumb img,& .dienst .d-thumb img{filter:grayscale(1) brightness(.82)}
& .mag-card:hover .thumb img,& .mag-card:focus-within .thumb img,
& .dienst a:hover .d-thumb img,& .dienst a:focus-visible .d-thumb img{
filter:brightness(.9) saturate(.85)}
/* "ontwikkel"-scrollanimatie eindigt op filter:none → zou de dim opheffen; uit in nacht */
& .fig img,& .case-media img{animation:none}
& .ah-stamp{background:var(--nacht-panel);box-shadow:0 0 0 1px rgba(233,237,244,.18)}
& .ah-stamp .st-ring{fill:rgba(233,237,244,.6)}
& .ah-stamp .st-mid{fill:var(--ink)}
& .ah-stamp .st-rim--in{stroke:rgba(233,237,244,.18)}
/* ---------- 7. PAPIERKORREL: multiply → screen (anders onzichtbaar/zwart) ---------- */
& body::after{mix-blend-mode:screen;opacity:.05}
/* ---------- 8. HARDCODED rgba(21,23,27,…)-COMPONENTEN → wit op lage alpha ---------- */
/* hoofdstuk-contourcijfers */
& .ch-no{-webkit-text-stroke-color:rgba(233,237,244,.22)}
/* millimeterpapier achter de cijferband */
& .stats{border-color:rgba(233,237,244,.14);
background-image:linear-gradient(rgba(233,237,244,.07) 1px,transparent 1px),
linear-gradient(90deg,rgba(233,237,244,.07) 1px,transparent 1px)}
/* register alle-verhalen */
& .reg-cat{border-bottom-color:rgba(233,237,244,.18)}
& .reg-lijst li{border-bottom-color:rgba(233,237,244,.24)}
& .reg-lijst a{color:var(--ink)}
& .reg-lijst a:hover{background:rgba(201,169,106,.1)}
& .reg-min{color:rgba(233,237,244,.55)}
/* woordenboek-tooltip: donkerder paneel + rand voor scheiding van blauw papier */
& .tgloss{border-bottom-color:var(--gold-500)}
& .tgloss-pop{background:#0A1626;box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 0 1px rgba(233,237,244,.16)}
& .tgloss-pop::after{border-top-color:#0A1626}
/* blauwdruk-opening: donkere strepen → wit; vel kleurt via --paper vanzelf blauw */
& .bp-open .bp-l{stroke:rgba(233,237,244,.55)}
& .bp-open .bp-m{stroke:rgba(233,237,244,.78)}
& .bp-word{fill:rgba(233,237,244,.72)}
& .bp-rule{stroke:rgba(201,169,106,.6)}
/* eigen cursor */
& .cur-ring{border-color:rgba(201,169,106,.6)}
/* pennenstreek .sig-gebouw + facade-lines + ds-art: kleuren via tokens (goud/inkt→wit) — geen extra regels nodig */
/* ---------- 9. PRINT-GUARD: nachtstand mag nooit donker afdrukken ---------- */
@media print{
--paper:#fff;--paper-2:#fff;--paper-3:#fff;
--ink:#111;--ink-2:#111;--grey:#444;--grey-2:#666;
--line-1:#ddd;--line-2:#ccc;--nacht-panel:#fff;--nacht-panel-2:#fff;
color-scheme:light;
& body::after{display:none}
}
}
/* ============================================================
THEMA-TOGGLE (zichtbaar in beide thema's; element wordt door
nacht.js in .footer-bottom geïnjecteerd — geen bestaande stijl gewijzigd)
============================================================ */
.thema-toggle{background:none;border:0;padding:0;margin:0;cursor:pointer;
font:inherit;color:inherit;letter-spacing:inherit;
text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.thema-toggle:hover{text-decoration-style:solid}
.thema-toggle:focus-visible{outline:2px solid var(--focus-ring,#B08A4F);outline-offset:3px}
html[data-thema="nacht"] .thema-toggle{color:var(--gold-300,#DFCFA6)}
/* ============================================================
ZACHTE OVERGANG BIJ WISSELEN — nacht.js zet ±450ms de klasse
.thema-wissel op ; bestaat verder niet, dus licht-thema
blijft onaangeroerd. Reduced motion: JS zet de klasse niet,
en deze guard vangt het ook in CSS af.
============================================================ */
html.thema-wissel *,html.thema-wissel *::before,html.thema-wissel *::after{
transition:background-color .4s ease,color .4s ease,border-color .4s ease,
fill .4s ease,stroke .4s ease,opacity .4s ease!important}
@media(prefers-reduced-motion:reduce){
html.thema-wissel *,html.thema-wissel *::before,html.thema-wissel *::after{transition:none!important}
}
/* ---- 2_beheerjaar ---- */
/* ============================================================
HET BEHEERJAAR — jaarring + seizoenslijst
Volgt het zelfteken-patroon van de site (pathLength="1" +
stroke-dasharray/dashoffset, vgl. .vc-art / .sig-gebouw).
Tekenen start wanneer de parent .bj-grid (.reveal) door
main.js de klasse .is-visible krijgt.
Tokens uit main.css: --gold-lux (met fallback #B08D4A),
--font-body (Inter), --font-display (Bodoni), sand/ink-schaal.
============================================================ */
/* ---------- layout: tweekoloms, ring naast lijst ---------- */
.beheerjaar .bj-grid{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
gap:clamp(2rem,5vw,4.5rem);
align-items:center;
}
.beheerjaar .bj-ring-wrap{min-width:0}
.beheerjaar .bj-ring{
display:block;
width:min(100%,460px);
height:auto;
margin-inline:auto;
overflow:visible;
}
/* ---------- maandsegmenten (zelftekenend, gestaffeld) ---------- */
.beheerjaar .bj-seg{
fill:none;
stroke:var(--warm-400,#B4ADA1);
stroke-width:10;
stroke-linecap:butt;
stroke-dasharray:1;
stroke-dashoffset:1;
transition:
stroke-dashoffset .65s cubic-bezier(.4,0,.2,1) calc(.12s + var(--i,0)*.07s),
stroke .4s ease,
stroke-width .4s ease;
}
.beheerjaar .bj-grid.is-visible .bj-seg{stroke-dashoffset:0}
/* huidige maand: licht goud op + iets dikker (klasse via beheerjaar.js) */
.beheerjaar .bj-seg.bj-nu{
stroke:var(--gold-lux,#B08D4A);
stroke-width:15;
}
/* ---------- maandletters ---------- */
.beheerjaar .bj-letter{
font-family:var(--font-body,"Inter",system-ui,sans-serif);
font-size:15px;
letter-spacing:.06em;
fill:var(--ink-500,#5C636D);
text-anchor:middle;
dominant-baseline:central;
opacity:0;
transition:opacity .5s ease calc(.35s + var(--i,0)*.07s), fill .4s ease;
}
.beheerjaar .bj-grid.is-visible .bj-letter{opacity:1}
.beheerjaar .bj-letter.bj-nu{
fill:var(--gold-lux,#B08D4A);
font-weight:600;
font-size:18px;
}
/* ---------- seizoensbogen + spaken ---------- */
.beheerjaar .bj-boog{
fill:none;
stroke:var(--gold-lux,#B08D4A);
stroke-width:1.4;
stroke-linecap:round;
opacity:.38;
stroke-dasharray:1;
stroke-dashoffset:1;
transition:stroke-dashoffset 1.4s var(--ease-out-soft,cubic-bezier(.22,1,.36,1)) .9s, opacity .4s ease;
}
.beheerjaar .bj-grid.is-visible .bj-boog{stroke-dashoffset:0}
.beheerjaar .bj-boog.bj-actief{opacity:.95;stroke-width:2}
.beheerjaar .bj-spaak{
fill:none;
stroke:var(--warm-300,#D2CCC2);
stroke-width:1.4;
stroke-linecap:round;
stroke-dasharray:1;
stroke-dashoffset:1;
transition:stroke-dashoffset .5s ease 1.1s;
}
.beheerjaar .bj-grid.is-visible .bj-spaak{stroke-dashoffset:0}
/* ---------- centrum: "het beheerjaar" in kleine caps ---------- */
.beheerjaar .bj-centrum{
font-family:var(--font-body,"Inter",system-ui,sans-serif);
font-size:16px;
letter-spacing:.28em;
text-transform:uppercase;
fill:var(--text-strong,#1A1D21);
text-anchor:middle;
opacity:0;
transition:opacity .8s ease 1.3s;
}
.beheerjaar .bj-centrum--klein{
font-size:11px;
letter-spacing:.34em;
fill:var(--text-muted,#5C636D);
}
.beheerjaar .bj-grid.is-visible .bj-centrum{opacity:1}
/* ---------- seizoenslijst ---------- */
.beheerjaar .bj-lijst{display:grid;gap:clamp(.9rem,2vw,1.4rem);align-content:center}
.beheerjaar .bj-seizoen{
position:relative;
padding:.9rem 1.1rem .95rem 1.4rem;
border-left:2px solid var(--border,#E3DFD8);
transition:border-color .45s ease,background-color .45s ease;
}
.beheerjaar .bj-seizoen-naam{
display:block;
font-family:var(--font-body,"Inter",system-ui,sans-serif);
font-size:var(--fs-eyebrow,.8125rem);
font-weight:var(--fw-medium,500);
letter-spacing:var(--ls-eyebrow,.14em);
text-transform:uppercase;
color:var(--text-muted,#5C636D);
margin-bottom:.3rem;
transition:color .45s ease;
}
.beheerjaar .bj-seizoen p{margin:0;font-size:var(--fs-body-sm,1rem);max-width:44ch}
/* actief seizoen (klasse via beheerjaar.js): goud gemarkeerd */
.beheerjaar .bj-seizoen.bj-actief{
border-left-color:var(--gold-lux,#B08D4A);
background:var(--bg-accent,#F7F1E6);
}
.beheerjaar .bj-seizoen.bj-actief .bj-seizoen-naam{color:var(--gold-lux,#B08D4A)}
/* ---------- reduced motion: alles direct zichtbaar ---------- */
@media (prefers-reduced-motion:reduce){
.beheerjaar .bj-seg,
.beheerjaar .bj-boog,
.beheerjaar .bj-spaak{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.beheerjaar .bj-letter,
.beheerjaar .bj-centrum{opacity:1;transition:none}
}
/* ---------- mobiel: ring boven, lijst eronder ---------- */
@media (max-width:860px){
.beheerjaar .bj-grid{grid-template-columns:1fr;gap:clamp(1.75rem,6vw,2.5rem)}
.beheerjaar .bj-ring{width:min(86vw,420px)}
}
/* ---- 3_menu ---- */
/* ============================================================
BOUWTEKENING-MENU — ahvastgoedadvies.nl
Mobiel menu: gevel-lijntekening tekent zichzelf op de achtergrond,
menuregels rijzen één voor één op. Puur gestuurd door de bestaande
.open-klasse; verrijking gate-t op .mm-verrijkt (gezet door menu.js)
zodat zonder JS niets extra's verborgen raakt.
Laden NA assets/css/main.css.
============================================================ */
/* ---------- 1. De tekening-laag (svg, geïnjecteerd door menu.js) ---------- */
.mm-tekening{
position:absolute;inset-inline:0;bottom:0;height:min(52vh,390px);width:100%;
pointer-events:none;user-select:none;z-index:0;overflow:hidden;
color:var(--ink,#15171B);opacity:.26;display:block}
.mm-tekening svg{width:100%;height:100%;display:block}
/* inhoud (head + container) boven de tekening houden */
.mobile-menu.mm-verrijkt .mobile-menu-head,
.mobile-menu.mm-verrijkt .container{position:relative;z-index:1}
/* lijnen: zelfteken-patroon (pathLength="1" in de svg) */
.mm-tekening path{
fill:none;stroke:currentColor;stroke-width:1.7;vector-effect:non-scaling-stroke;
stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1;
/* dicht: vrijwel direct terug naar 'ongetekend' zodat een her-open opnieuw tekent */
transition:stroke-dashoffset .01s linear}
.mobile-menu.open .mm-tekening path{
stroke-dashoffset:0;
transition:stroke-dashoffset .85s var(--ease-out-soft,cubic-bezier(.22,.61,.36,1));
transition-delay:calc(.28s + var(--i,0)*.09s)}
/* ---------- 2. Oprijs-cascade van de menuregels ---------- */
/* Alleen actief zodra .mm-verrijkt aanwezig is (progressive enhancement). */
.mobile-menu.mm-verrijkt nav a,
.mobile-menu.mm-verrijkt .btn,
.mobile-menu.mm-verrijkt .mm-groet{
opacity:0;transform:translateY(16px);
transition:opacity .35s ease,transform .45s var(--ease-out-soft,cubic-bezier(.22,.61,.36,1))}
.mobile-menu.mm-verrijkt.open nav a,
.mobile-menu.mm-verrijkt.open .btn,
.mobile-menu.mm-verrijkt.open .mm-groet{opacity:1;transform:none}
/* per-regel vertraging, ~60ms stagger (8 regels; overtroeft main.css nth-child 1-6) */
.mobile-menu.mm-verrijkt.open nav a:nth-child(1){transition-delay:.10s}
.mobile-menu.mm-verrijkt.open nav a:nth-child(2){transition-delay:.16s}
.mobile-menu.mm-verrijkt.open nav a:nth-child(3){transition-delay:.22s}
.mobile-menu.mm-verrijkt.open nav a:nth-child(4){transition-delay:.28s}
.mobile-menu.mm-verrijkt.open nav a:nth-child(5){transition-delay:.34s}
.mobile-menu.mm-verrijkt.open nav a:nth-child(6){transition-delay:.40s}
.mobile-menu.mm-verrijkt.open nav a:nth-child(7){transition-delay:.46s}
.mobile-menu.mm-verrijkt.open nav a:nth-child(8){transition-delay:.52s}
.mobile-menu.mm-verrijkt.open .mm-groet{transition-delay:.60s}
.mobile-menu.mm-verrijkt.open .btn{transition-delay:.68s}
/* sluiten: geen vertragingen, alles zakt rustig tegelijk weg (niet fancy) */
.mobile-menu.mm-verrijkt:not(.open) nav a,
.mobile-menu.mm-verrijkt:not(.open) .btn,
.mobile-menu.mm-verrijkt:not(.open) .mm-groet{transition-delay:0s}
/* ---------- 3. Pinyon-accent "tot zo" + gouden haarlijn ---------- */
.mm-groet{
font-family:var(--font-script,"Pinyon Script",cursive);font-weight:400;
font-size:1.9rem;line-height:1;color:var(--gold-lux,#B08D4A);
margin:1.1rem 0 0;transform-origin:left bottom}
.mm-groet::after{
content:"";display:block;width:64px;height:1px;
background:var(--gold-lux,#B08D4A);opacity:.55;margin-top:.55rem}
/* ---------- 4. Reduced motion: alles direct zichtbaar, geen animaties ---------- */
@media (prefers-reduced-motion:reduce){
.mm-tekening path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.mobile-menu.mm-verrijkt nav a,
.mobile-menu.mm-verrijkt .btn,
.mobile-menu.mm-verrijkt .mm-groet{
opacity:1;transform:none;transition:none}
}
/* ---- 4_draad ---- */
/* =============================================================
DE GOUDEN MEETDRAAD — doorlopende haarlijn in de linkermarge
Hoort bij de home (index.html, sectie .hero--impact).
Injectie gebeurt door draad.js: die plaatst
▽
in , geeft de klasse .heeft-draad en
zet de CSS-variabele --draad-top (= onderkant hero in px).
Zelfde goud als .hero-plumb: --gold-lux #B08A4F / --gold-300 #D8C6A0.
============================================================= */
/* Anker: main wordt positioneringscontext, zonder layout-effect */
main.heeft-draad{position:relative}
/* De draadkolom: absoluut, neemt géén ruimte in, nooit klikbaar.
left is zó berekend dat hij BUITEN de .container-kolom blijft:
container = 1280px + gutter-padding; op precies 1280px viewport
klapt de clamp naar 18px — dat valt binnen de lege gutter-rand,
dus nooit over tekst. Max 120px op zeer brede schermen. */
.meetdraad{
display:none;
position:absolute;
top:var(--draad-top,100vh);
bottom:0;
left:clamp(18px,calc((100vw - 1280px)/2 - 40px),120px);
width:13px; /* ruimte voor maatstreepjes; de lijn zelf is 1px */
pointer-events:none;
z-index:2; /* boven sectie-achtergronden, ruim onder nav (100) */
opacity:.38; /* fallback-stand: statisch, ingetogen aanwezig */
}
/* Alleen op brede schermen — daaronder volledig verborgen */
@media(min-width:1280px){
.meetdraad{display:block}
}
/* De haarlijn zelf (1px, goud; loopt zacht in en uit) */
.meetdraad::before{
content:"";
position:absolute;
top:0;bottom:0;left:0;
width:1px;
background:linear-gradient(to bottom,
transparent,
var(--gold-300,#D8C6A0) 34px,
var(--gold-lux,#B08A4F) 22%,
var(--gold-lux,#B08A4F) 94%,
var(--gold-300,#D8C6A0));
transform-origin:top center;
}
/* Maatstreepjes rechts van de lijn:
— elke ~600px een kort streepje van 7px (laag 1)
— elke ~3000px een langer streepje van 12px (laag 2) */
.meetdraad::after{
content:"";
position:absolute;
top:0;bottom:0;left:1px;
width:12px;
background-image:
repeating-linear-gradient(to bottom,
transparent 0,transparent 599px,
var(--gold-lux,#B08A4F) 599px,var(--gold-lux,#B08A4F) 600px),
repeating-linear-gradient(to bottom,
transparent 0,transparent 2999px,
var(--gold-lux,#B08A4F) 2999px,var(--gold-lux,#B08A4F) 3000px);
background-size:7px 100%,12px 100%;
background-repeat:no-repeat;
opacity:.85;
}
/* Het ▽-merk aan de kop van de draad (echo van .hp-mark onder de hero) */
.meetdraad .md-mark{
position:absolute;
top:-.15em;
left:.5px;
transform:translateX(-50%);
color:var(--gold-300,#D8C6A0);
font-size:.78rem;
line-height:1;
font-family:var(--font-ui,Inter,sans-serif);
}
/* Progressief: draad tekent zich met de paginascroll.
Zelfde aanpak als het bestaande @supports-blok in main.css. */
@supports (animation-timeline: scroll()){
.meetdraad{opacity:1}
.meetdraad::before{
animation:draad-groei linear both;
animation-timeline:scroll(root block);
}
.meetdraad::after{
/* streepjes onthullen mee (clip i.p.v. scale: streepjes rekken niet uit) */
animation:draad-streepjes linear both;
animation-timeline:scroll(root block);
}
@keyframes draad-groei{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draad-streepjes{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
}
/* Reduced motion: statisch en rustig, geen animatie */
@media(prefers-reduced-motion:reduce){
.meetdraad::before,.meetdraad::after{animation:none;transform:none;clip-path:none}
.meetdraad{opacity:.38}
}
/* Dit bestand telt 106 regels. */
/* ---- 5_sieraden ---- */
/* ============================================================
SIERADEN — ahvastgoedadvies.nl
(A) Handgeschreven marginalia naast .article-body (blog)
(B) Blauwdruk-hover op .page-cover .cin-lines (dienstpagina's)
Laden NA assets/css/main.css (cascade-overrides op .cin-lines).
============================================================ */
/* ---------- (A) Marge-notities ---------- */
/* anker: de notities worden gepositioneerd t.o.v. de leeskolom zelf,
nooit t.o.v. de viewport — zo kunnen ze niet "zweven" of over de
tekst schuiven wanneer de kolom smaller of breder wordt. */
.article-body{position:relative}
/* standaard (en op alles < 1280px): volledig weg, geen ruimte-claim */
.marge-notitie{display:none}
@media (min-width:1280px){
.marge-notitie{
display:block;
position:absolute;
/* RECHTS van de leeskolom, nooit eroverheen */
left:calc(100% + 40px);
max-width:180px;
font-family:var(--font-script,"Pinyon Script",cursive);
font-size:1.6rem;
line-height:1.3;
font-weight:400;
/* goud-ink mix: warm en duidelijk leesbaar */
color:#55452B; /* fallback */
color:color-mix(in srgb, var(--gold-lux,#B08A4F) 45%, var(--ink,#15171B));
transform:rotate(-2.5deg);
transform-origin:left top;
opacity:0;
transition:opacity 1.1s ease .2s;
pointer-events:none; /* puur decoratief, nooit klik-vanger */
user-select:none;
}
/* dun potlood-streepje eronder */
.marge-notitie::after{
content:"";
display:block;
margin-top:.4rem;
width:70%;
height:1px;
background:linear-gradient(90deg, currentColor 0%, currentColor 55%, transparent 100%);
opacity:.45;
transform:rotate(-1.2deg);
}
.marge-notitie.is-marge-zichtbaar{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.marge-notitie{transition:none}
}
/* print: marginalia horen niet op papier */
@media print{
.marge-notitie{display:none !important}
}
/* ---------- (B) Blauwdruk-hover op de pagina-covers ---------- */
/* Basis: main.css zet .page-cover .cin-lines op opacity .4 (goud) en
laat .cin-lines * eenmalig cinDraw'en bij load. Hier: standaard
vrijwel onzichtbaar, wit, en het tekenwerk gereserveerd voor hover. */
.page-cover .cin-lines{
opacity:.05;
transition:opacity .9s ease;
mix-blend-mode:screen;
}
.page-cover .cin-lines path,
.page-cover .cin-lines rect,
.page-cover .cin-lines circle,
.page-cover .cin-lines line,
.page-cover .cin-lines polyline{
stroke:#fff;
stroke-width:1.6;
animation:none; /* overrule cinDraw uit main.css */
/* zelfteken-effect: werkt omdat de paden pathLength="1" hebben */
stroke-dasharray:1;
stroke-dashoffset:1;
transition:stroke-dashoffset 1.1s var(--ease-out-soft,cubic-bezier(.22,.61,.36,1));
}
@media (hover:hover){
.page-cover:hover .cin-lines{opacity:.85;filter:drop-shadow(0 0 1px rgba(0,0,0,.4))}
.page-cover:hover .cin-lines path,
.page-cover:hover .cin-lines rect,
.page-cover:hover .cin-lines circle,
.page-cover:hover .cin-lines line,
.page-cover:hover .cin-lines polyline{
stroke-dashoffset:0;
}
/* subtiele cascade: de gevel tekent zich in twee ademteugen */
.page-cover .cin-lines *:nth-child(even){transition-delay:.18s}
.page-cover .cin-lines *:nth-child(3n){transition-delay:.32s}
}
/* geen hover-apparaat (touch): lijnen blijven rustig-onzichtbaar;
de cover zelf verliest niets — pc-ghost/pc-fig blijven ongemoeid. */
@media (prefers-reduced-motion:reduce){
.page-cover .cin-lines path,
.page-cover .cin-lines rect,
.page-cover .cin-lines circle,
.page-cover .cin-lines line,
.page-cover .cin-lines polyline{
stroke-dasharray:none;
stroke-dashoffset:0;
transition:none; /* alleen de fade, geen tekenwerk */
}
.page-cover .cin-lines{transition:opacity .6s ease}
}
/* ===== RONDE CONVERSIE (19 juli 2026) — hero-verhelderaar, trust-strip, lead-magneet ===== */
/* ============================================================
COMPONENT: hero-cta — .ah-clarifier
AH Vastgoedadvies · additieve verhelderaar-subregel
------------------------------------------------------------
Erft de .lead-cadans maar rustiger/kleiner. Gebruikt de
bestaande design-tokens (fallbacks = spec-waarden voor het
geval een token ontbreekt). Voeg toe aan main.css.
Kleurcontext geverifieerd tegen main.css (2026-07):
- home-hero = .hero--impact op donker beeld;
.hero--impact .lead = rgba(246,245,242,.9) -> clarifier iets zachter (.74)
- lichte dienstpagina's = .hero (geen invert) -> zachte inkt --text-muted
============================================================ */
.ah-clarifier{
max-width:54ch;
margin:.65rem 0 0; /* net onder de .lead */
color:var(--text-muted,#5C636D);
font-family:var(--font-text,"Source Serif 4",Georgia,serif);
font-size:clamp(1rem,.92rem + .6vw,1.12rem);
line-height:var(--lh-lead,1.55);
text-wrap:balance;
}
/* Home-hero (.hero--impact): links-uitgelijnd binnen .hi-content,
licht op donker beeld -> zachte lichte tint, iets onder de lead. */
.hero--impact .ah-clarifier{
margin-inline:0;
color:rgba(246,245,242,.74);
}
/* Gecentreerde hero-variant (.hero--center) meebewegen met de as. */
.hero--center .ah-clarifier{margin-inline:auto;text-align:center}
/* Donkere/omgekeerde secties (buiten de impact-hero) leesbaar houden. */
.section--invert .ah-clarifier{color:var(--text-on-invert-muted,#AEBBCC)}
/* Lichte dienstpagina-hero's (geen invert, geen impact): zachte inkt. */
.hero:not(.hero--impact):not(.section--invert) .ah-clarifier{color:var(--text-muted,#5C636D)}
/* ============================================================
TRUST-STRIP — AH Vastgoedadvies
Component 2 uit de BOUWSPEC. Append aan main.css (of theme
assets/css/main-v3.css). Gebruikt de ECHTE design-tokens uit
main.css (--border, --gold-500, --text-muted, --accent, ...),
NIET de generieke placeholder-tokens uit de spec.
============================================================ */
.ah-trust{
padding-block:clamp(1.5rem,3vw,2.25rem);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
background:var(--bg-alt);
}
.section--invert .ah-trust,
.ah-trust.ah-trust--invert{
border-color:var(--navy-600);
background:transparent;
}
.ah-trust-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:clamp(1.5rem,4vw,3rem);
justify-content:center;
}
.ah-trust-item{
display:flex;
gap:var(--space-3);
align-items:flex-start;
max-width:34ch;
}
.ah-trust-ic{
flex:0 0 auto;
width:28px;
height:28px;
color:var(--accent);
}
.ah-trust-ic svg{width:100%;height:100%;display:block}
.section--invert .ah-trust-ic{color:var(--gold-300)}
.ah-trust-txt{
display:flex;
flex-direction:column;
gap:2px;
}
.ah-trust-txt strong{
font-family:var(--font-body);
font-weight:var(--fw-semibold);
font-size:var(--fs-body-sm);
letter-spacing:.01em;
color:var(--text-strong);
}
.section--invert .ah-trust-txt strong{color:var(--sand-50)}
.ah-trust-txt>span{
font-size:var(--fs-caption);
line-height:1.45;
color:var(--text-muted);
max-width:none;
}
.section--invert .ah-trust-txt>span{color:var(--text-on-invert-muted)}
/* inline tlink binnen een trust-item iets rustiger */
.ah-trust-txt .tlink{
font-size:inherit;
font-weight:var(--fw-medium);
}
/* ------------------------------------------------------------
Zichtbaar-neutrale Anneke-placeholder.
Leest duidelijk als "in te vullen", nooit als echt feit.
Gebruikt door ROOD-items die (nog) niet mogen renderen.
------------------------------------------------------------ */
/* mobiel: items onder elkaar, links uitgelijnd voor leesbaarheid */
@media(max-width:560px){
.ah-trust-list{
flex-direction:column;
align-items:flex-start;
gap:var(--space-5);
}
.ah-trust-item{max-width:none}
}
/* ============================================================
COMPONENT 6 — LEAD-MAGNEET / ah-magnet
AH Vastgoedadvies · "De Doorsnede"
Toevoegen aan: assets/css/main-v3.css (versie bumpt via filemtime).
Gebruikt bestaande design-tokens uit main.css. Fallbacks meegegeven
voor het geval de v3-cascade een token mist (defensief, niet nodig
maar veilig). Accolade-gebalanceerd.
============================================================ */
.ah-magnet{
display:grid;
gap:2rem;
grid-template-columns:1fr;
padding:clamp(1.75rem,4vw,2.75rem);
background:var(--bg-accent,#F7F1E6);
border:1px solid var(--border,#E3DFD8);
border-top:2px solid var(--accent,#B8975A);
border-radius:var(--radius-lg,12px);
}
@media(min-width:760px){
.ah-magnet{grid-template-columns:1.45fr 1fr;align-items:center}
}
/* linkerkolom — de scan-instap */
.ah-magnet-txt h3{
font-family:var(--font-display,"Bodoni Moda",serif);
font-size:var(--fs-h3,1.9rem);
color:var(--text-strong,#1A1D21);
margin-bottom:var(--space-3,.75rem);
}
.ah-magnet-txt p{
color:var(--text-primary,#33383F);
max-width:52ch;
line-height:var(--lh-body,1.65);
margin-bottom:var(--space-5,1.5rem);
}
.ah-magnet-txt .btn{margin-top:0}
.ah-magnet-reassure{
margin-top:var(--space-4,1rem);
margin-bottom:0;
font-size:var(--fs-caption,.875rem);
letter-spacing:.01em;
}
/* rechterkolom — het tastbare alternatief (voorbeeld-MJOP) */
.ah-magnet-alt{
border-left:1px solid var(--border-strong,#D2CCC2);
padding-left:2rem;
}
.ah-magnet-alt-lead{
font-family:var(--font-display,"Bodoni Moda",serif);
font-size:1.2rem;
color:var(--text-strong,#1A1D21);
margin-bottom:var(--space-2,.5rem);
}
.ah-magnet-alt p{max-width:40ch}
.ah-magnet-alt .muted{
font-size:var(--fs-body-sm,1rem);
line-height:1.55;
margin-bottom:var(--space-4,1rem);
}
.ah-magnet-alt .tlink{font-size:var(--fs-body-sm,1rem)}
@media(max-width:759px){
.ah-magnet-alt{
border-left:0;
padding-left:0;
border-top:1px solid var(--border,#E3DFD8);
padding-top:1.5rem;
}
}
/* donkere/invert-context: kaart blijft leesbaar als hij ooit binnen een
.section--invert wordt geplaatst (defensief; standaard staat hij op licht) */
.section--invert .ah-magnet{
background:rgba(247,241,230,.06);
border-color:rgba(216,198,160,.32);
}
.section--invert .ah-magnet-txt h3,
.section--invert .ah-magnet-alt-lead{color:var(--sand-50,#FBFAF7)}
.section--invert .ah-magnet-txt p{color:var(--text-on-invert-muted,#AEBBCC)}
@media(prefers-reduced-motion:reduce){
.ah-magnet.reveal{opacity:1;transform:none}
}
/* ===== RONDE VERGELIJKING (19 juli 2026) — specialist vs. beheerbureau ===== */
.ah-compare .cmp{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;column-gap:clamp(1rem,3vw,2.4rem);margin-top:var(--space-7);border-top:1px solid var(--border)}
.ah-compare .cmp>span{padding:.8rem .1rem;border-bottom:1px solid var(--border);font-size:var(--fs-body-sm);line-height:1.4}
.ah-compare .cmp-dim{font-family:var(--font-body);font-size:var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);align-self:center}
.ah-compare .cmp-a{color:var(--text-strong);font-weight:var(--fw-medium);box-shadow:inset 2px 0 0 var(--gold-lux);padding-left:1rem !important}
.ah-compare .cmp-b{color:var(--text-muted)}
.ah-compare .cmp-h{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-caption);letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--ink) !important}
.ah-compare .cmp-h.cmp-a{color:var(--gold-600,#8f7137)}
.ah-compare .cmp-h.cmp-b{color:var(--text-primary)}
.ah-compare .cmp-foot{text-align:center;margin-top:var(--space-6);font-style:italic;max-width:60ch;margin-inline:auto}
@media(max-width:720px){
.ah-compare .cmp{grid-template-columns:1fr 1fr;column-gap:1.2rem}
.ah-compare .cmp-dim{grid-column:1 / -1;border-bottom:0;padding:1rem 0 .1rem;color:var(--gold-600,#8f7137)}
.ah-compare .cmp-h.cmp-dim{display:none}
}
/* ===== CREATIEF-RONDE-2 (24-7-2026): reveal-failsafe + proces-verbaal-showcase (v2 uplift) ===== */
/* Failsafe: draait de JS niet (fout/oude cache), dan wordt alles na 2,6s alsnog zichtbaar. */
@keyframes ahRevealFailsafe{to{opacity:1;transform:none;clip-path:none}}
html:not(.js-ok) .reveal{animation:ahRevealFailsafe .7s ease 2.6s forwards}
.pv-showcase{max-width:560px;margin:3.4rem auto 0;text-align:center}
.pv-stapel{position:relative;display:block}
.pv-blad-onder{position:absolute;inset:10px -8px -10px 8px;background:#EFECE5;border-radius:4px;
transform:rotate(1.6deg);box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.pv-doc{position:relative;background:#FDFCFA;color:#15171B;text-align:left;border-radius:4px;
padding:1.9rem 2rem 1.6rem 2.4rem;transform:rotate(-1.4deg);margin-inline:auto;overflow:hidden;
box-shadow:0 30px 60px -18px rgba(0,0,0,.55),0 6px 18px rgba(0,0,0,.35);
transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s ease}
.pv-showcase:hover .pv-doc{transform:rotate(-.5deg) translateY(-7px);
box-shadow:0 44px 80px -20px rgba(0,0,0,.6),0 10px 24px rgba(0,0,0,.4),0 0 0 1px rgba(176,138,79,.25)}
.pv-marge{position:absolute;top:0;bottom:0;left:1.55rem;width:1px;background:rgba(176,138,79,.35)}
.pv-watermerk{position:absolute;right:-14px;bottom:-10px;width:190px;opacity:.05;pointer-events:none}
.pv-watermerk path{stroke:#15171B;stroke-width:5;stroke-linejoin:round}
.pv-kop{display:flex;align-items:baseline;gap:.45rem;border-bottom:1px solid var(--gold-lux,#B08A4F);padding-bottom:.55rem}
.pv-logo{font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:.02em}
.pv-logosub{font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:#6b6f76}
.pv-nr{margin-left:auto;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:#9a9ea5}
.pv-titel{font-family:var(--font-display);font-size:1.28rem;font-weight:500;margin:.95rem 0 .45rem}
.pv-plaats{font-family:var(--font-ui,Inter,sans-serif);font-size:.72rem;color:#6b6f76;margin:0 0 .85rem;
display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.pv-invul{display:inline-block;width:var(--w,30%);border-bottom:1px dotted #A9ADB3;height:.85em}
.pv-lijn{display:block;height:6px;border-radius:3px;background:#E8E5DF;margin:.5rem 0;width:0;
transition:width .9s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.pv-showcase.is-visible .pv-lijn{width:var(--w,90%)}
html:not(.js-ok) .pv-lijn{width:var(--w,90%)}
.pv-punten{list-style:none;margin:1.05rem 0 0;padding:0;font-family:var(--font-ui,Inter,sans-serif);font-size:.8rem;color:#3d4148}
.pv-punten li{display:flex;align-items:center;gap:.55rem;margin:.42rem 0}
.pv-check{width:15px;height:15px;border:1.4px solid var(--gold-lux,#B08A4F);border-radius:3px;position:relative;flex:none}
.pv-check::after{content:"";position:absolute;inset:2px 2px 3px 2px;border-left:2px solid var(--gold-lux,#B08A4F);
border-bottom:2px solid var(--gold-lux,#B08A4F);transform:rotate(-48deg) scale(0);transform-origin:center;
transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.pv-showcase.is-visible .pv-punten li:nth-child(1) .pv-check::after{transform:rotate(-48deg) scale(1);transition-delay:1.15s}
.pv-showcase.is-visible .pv-punten li:nth-child(2) .pv-check::after{transform:rotate(-48deg) scale(1);transition-delay:1.5s}
.pv-showcase.is-visible .pv-punten li:nth-child(3) .pv-check::after{transform:rotate(-48deg) scale(1);transition-delay:1.85s}
html:not(.js-ok) .pv-check::after{transform:rotate(-48deg) scale(1)}
.pv-sigs{display:flex;gap:1.4rem;margin-top:1.35rem}
.pv-sig{flex:1;min-width:0}
.pv-sig svg{width:100%;height:34px;display:block}
.pv-sig path{fill:none;stroke:var(--gold-lux,#B08A4F);stroke-width:2.1;stroke-linecap:round;
stroke-dasharray:1;stroke-dashoffset:1}
.pv-showcase.is-visible .pv-sig path{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) 2.2s}
.pv-showcase.is-visible .pv-sig--2 path{transition-delay:2.9s}
html:not(.js-ok) .pv-sig path{stroke-dashoffset:0}
.pv-sig-naam{display:block;border-top:1px solid #C9CCD1;margin-top:.15rem;padding-top:.3rem;
font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#6b6f76;text-align:center}
.pv-zegel{position:absolute;right:1.15rem;top:4.35rem;width:74px;height:74px;pointer-events:none;
opacity:0;transform:rotate(14deg) scale(1.7);
transition:opacity .5s ease 4.4s,transform .5s cubic-bezier(.34,1.56,.64,1) 4.4s}
.pv-showcase.is-visible .pv-zegel{opacity:.85;transform:rotate(9deg) scale(1)}
html:not(.js-ok) .pv-zegel{opacity:.85;transform:rotate(9deg) scale(1)}
.pv-zegel svg{width:100%;height:100%;overflow:visible}
.pv-zegel .pz-rim{fill:none;stroke:rgba(176,138,79,.55);stroke-width:1.6}
.pv-zegel .pz-rim--in{stroke:rgba(176,138,79,.4);stroke-width:1}
.pv-zegel .pz-ring{font-family:var(--font-ui,Inter,sans-serif);font-size:10.5px;letter-spacing:.24em;
text-transform:uppercase;fill:rgba(176,138,79,.7)}
.pv-zegel .pz-mid{font-family:var(--font-display);font-size:15px;fill:rgba(176,138,79,.8);text-anchor:middle}
.pv-onderschrift{margin-top:1.7rem;font-size:.86rem;max-width:46ch;margin-inline:auto;color:inherit;opacity:.75}
@media (max-width:560px){.pv-doc{padding:1.4rem 1.2rem 1.2rem 1.7rem}.pv-sigs{gap:.9rem}
.pv-zegel{width:56px;height:56px;top:4rem;right:.7rem}.pv-marge{left:1.1rem}}
html[data-thema="nacht"] .pv-doc{background:#F4F1EA;color:#15171B}
html[data-thema="nacht"] .pv-blad-onder{background:rgba(244,241,234,.35)}
/* ===== RONDE-2c: gespreksverloop in contactkolom ===== */
.contact-verloop{list-style:none;margin:1.9rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--hairline,rgba(21,23,27,.12))}
.contact-verloop li{display:flex;gap:.8rem;align-items:baseline;margin:.7rem 0;font-size:.9rem}
.contact-verloop .cv-num{font-family:var(--font-display);color:var(--gold-lux,#B08A4F);font-size:.82rem;letter-spacing:.06em;flex:none}
.contact-verloop .cv-txt strong{font-weight:600}