/* ============================================================
   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")}

/* ---------- 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}
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;right: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(16px);
  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)}
.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}
}