/* ==========================================================================
   PolishConnection · premium-v2 · COUTURE
   De luxe-identiteit van 'refined' (papierwit × navy × koper)
   op de compositorische lef van 'editorial':
   asymmetrisch 12-kolomsraster · enorme serif-display · overlappende lagen ·
   één doorlopende koperen draad (BE↔PL) · één horizontaal scrollend moment.
   ========================================================================== */
:root{
  --paper:      #fcfbf8;
  --paper-2:    #f7f4ee;
  --white:      #ffffff;
  --ink:        #12233d;
  --ink-2:      #33415c;
  --muted:      #6b7385;
  --faint:      #979dab;

  --navy:       #16304f;
  --navy-deep:  #0d1c31;
  --copper:     #b4691e;
  --copper-ink: #935416;
  --copper-hi:  #d9a15b;
  --copper-soft:#f4e9dc;

  --hair:       #e8e2d7;
  --hair-2:     #ded6c8;
  --gridline:   rgba(22,48,79,0.055);

  --grad: linear-gradient(105deg, #16304f 0%, #6e4a28 52%, #b4691e 100%);

  --font-sans:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-serif:'Fraunces', Georgia, serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --sh-far: 0 40px 80px -36px rgba(22,48,79,0.32), 0 20px 42px -26px rgba(0,0,0,0.12);
  --sh-near: 0 1px 2px rgba(18,35,61,0.06), 0 10px 28px -16px rgba(22,48,79,0.2);

  --maxw:96rem;
  --pad:clamp(1.25rem, 4.5vw, 4rem);
  --gap:clamp(0.9rem, 1.6vw, 1.6rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--font-sans); font-weight:400;
  font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; position:relative;
}
/* warme lichtval — alsof de pagina door een hoog raam belicht wordt */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(52% 44% at 82% -6%, rgba(180,105,30,0.10), transparent 70%),
    radial-gradient(40% 38% at 8% 4%,  rgba(22,48,79,0.055), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.5), transparent 30%);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; color:var(--ink); font-weight:300; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:4px; }
::selection{ background:rgba(180,105,30,0.18); }

/* ---------- zichtbaar 12-kolomsraster ---------- */
.gridlines{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
}
.gridlines .cols{
  height:100%; display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap);
}
.gridlines .cols i{ border-left:1px solid var(--gridline); }
.gridlines .cols i:first-child{ border-left-color:rgba(22,48,79,0.09); }
.gridlines .edge{ position:absolute; inset:0 var(--pad); border-right:1px solid rgba(22,48,79,0.09); pointer-events:none; }

/* ---------- rastercontainer ---------- */
.g{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr));
  column-gap:var(--gap);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
}

/* ---------- typografie ---------- */
.serif{ font-family:var(--font-serif); font-style:italic; font-weight:340; letter-spacing:-0.015em; }
.mono{
  font-family:var(--font-mono); font-size:0.66rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.26em; color:var(--copper-ink);
}
.mono-mute{ color:var(--faint); }
.lede{
  font-size:clamp(1.05rem, 1.25vw, 1.2rem); line-height:1.6;
  font-weight:300; color:var(--ink-2); max-width:46ch;
}
.small{ font-size:0.875rem; line-height:1.55; color:var(--muted); }

/* nummer in de marge, verticaal */
.margin-no{
  position:absolute; left:calc(var(--pad) * 0.32); top:0;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-mono); font-size:0.62rem; font-weight:500;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--faint);
  display:flex; align-items:center; gap:0.9rem; z-index:3;
}
.margin-no b{ color:var(--copper-ink); font-weight:500; }
.margin-no::after{ content:''; width:1px; height:3.4rem; background:var(--hair-2); }

/* spookcijfer — enorme cursieve Fraunces als contourvorm */
.ghost{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(9rem, 24vw, 22rem); line-height:0.75;
  color:rgba(180,105,30,0.06);
  -webkit-text-stroke:1px rgba(180,105,30,0.22);
}

/* reveals */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation:none !important; transition-duration:0.01ms !important; }
}

/* knoppen */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  min-height:48px; padding:0.62rem 1.5rem;
  border-radius:0; font-size:0.95rem; font-weight:500;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color 0.2s var(--ease), color 0.2s var(--ease),
             border-color 0.2s var(--ease), box-shadow 0.25s var(--ease),
             transform 0.18s var(--ease);
}
.btn svg{ width:0.85rem; height:0.85rem; transition:transform 0.25s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:scale(0.98); }
.btn-primary{
  background:var(--navy); color:#fff;
  box-shadow:0 1px 2px rgba(18,35,61,0.14), 0 16px 34px -16px rgba(22,48,79,0.55);
}
.btn-primary:hover{
  background:var(--navy-deep);
  box-shadow:0 0 0 1px rgba(180,105,30,0.35), 0 2px 4px rgba(18,35,61,0.16), 0 20px 44px -16px rgba(22,48,79,0.6);
}
.btn-quiet{ background:transparent; border-color:var(--hair-2); color:var(--ink); }
.btn-quiet:hover{ border-color:var(--copper); background:var(--white); }
.btn-sm{ min-height:40px; padding:0.42rem 1.05rem; font-size:0.885rem; }
.textlink{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.94rem; font-weight:500; color:var(--copper-ink);
  border-bottom:1px solid rgba(180,105,30,0.35); padding-bottom:0.2rem;
  transition:gap 0.22s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.textlink svg{ width:0.8rem; height:0.8rem; }
.textlink:hover{ gap:0.85rem; color:var(--copper); border-color:var(--copper); }

/* ==========================================================================
   de koperen draad — één lijn die van de hero tot de cta loopt
   ========================================================================== */
.thread{
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.thread svg{ width:100%; height:100%; }
.thread path{
  fill:none; stroke:url(#threadGrad); stroke-width:1.6px;
  vector-effect:non-scaling-stroke; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(180,105,30,0.35));
}
.thread .thread-echo{
  stroke:rgba(180,105,30,0.1); stroke-dasharray:0.001 0 !important;
  stroke-dashoffset:0 !important; filter:none; stroke-width:1px;
}

/* ==========================================================================
   nav
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto; z-index:50;
  border-bottom:1px solid transparent;
  transition:background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.nav.scrolled{ background:rgba(252,251,248,0.97); border-bottom-color:var(--hair); }
.nav-inner{
  max-width:var(--maxw); margin-inline:auto; padding:1.05rem var(--pad);
  display:flex; align-items:center; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:0.65rem; }
.brand-mark{
  width:1.9rem; height:1.9rem; flex:none;
  background:var(--grad); color:#fff; display:grid; place-items:center;
}
.brand-mark svg{ width:0.9rem; height:0.9rem; }
.brand-name{ font-weight:500; font-size:1.02rem; letter-spacing:-0.018em; color:var(--ink); white-space:nowrap; }
.brand-name span{ font-weight:300; color:var(--muted); }
.nav-links{ display:flex; align-items:center; gap:0.35rem; margin-right:auto; }
.nav-links a{
  font-size:0.9rem; color:var(--ink-2); white-space:nowrap;
  padding:0.45rem 0.75rem;
  transition:color 0.2s var(--ease);
}
.nav-links a:hover{ color:var(--copper-ink); }
.nav-links a[aria-current="page"]{ color:var(--copper-ink); }
.nav-right{ display:flex; align-items:center; gap:0.75rem; }
.lang{ display:flex; border:1px solid var(--hair-2); background:var(--white); }
.lang button{
  font-family:var(--font-mono); font-size:0.66rem; font-weight:500; letter-spacing:0.1em;
  padding:0.32rem 0.6rem; color:var(--muted);
  transition:color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lang button:hover{ color:var(--ink); }
.lang button[aria-pressed="true"]{ color:#fff; background:var(--navy); }
.login{ font-size:0.9rem; color:var(--ink-2); transition:color 0.2s var(--ease); }
.login:hover{ color:var(--copper-ink); }

/* ==========================================================================
   01 · hero — asymmetrisch, koptekst over de kaart heen
   ========================================================================== */
.hero{
  position:relative; padding-top:clamp(8.5rem, 15vh, 12rem);
  padding-bottom:clamp(4rem, 9vh, 7rem); overflow:visible;
}
.hero-eyebrow{
  grid-column:1 / 7; grid-row:1;
  display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap;
  margin-bottom:clamp(2rem, 5vh, 3.6rem);
}
.hero-eyebrow .rule{ width:3.2rem; height:1px; background:var(--grad); align-self:center; }
.hero-issue{
  grid-column:10 / 13; grid-row:1; justify-self:end; text-align:right;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--faint); line-height:2;
}
.hero-issue b{ color:var(--copper-ink); font-weight:500; }

.hero-title{ grid-column:1 / 13; grid-row:2; position:relative; z-index:4; }
.hero-title .ln{
  display:block; font-weight:300; color:var(--ink);
  font-size:clamp(3rem, 9.6vw, 9.75rem);
  line-height:0.96; letter-spacing:-0.04em; text-wrap:balance;
}
.hero-title .ln-2{
  font-family:var(--font-serif); font-style:italic; font-weight:320;
  letter-spacing:-0.02em; color:var(--copper-ink);
  margin-left:clamp(2rem, 16vw, 17rem);
}
.hero-title .ln-3{
  font-size:clamp(1.15rem, 2.1vw, 1.75rem); font-weight:300;
  letter-spacing:-0.012em; line-height:1.3; color:var(--ink-2);
  margin-top:clamp(1.2rem, 3vh, 2.2rem); margin-left:clamp(0rem, 8vw, 8.5rem);
  max-width:34ch; text-wrap:balance;
}
.hero-title .ln-3 b{ font-weight:500; color:var(--ink); }

/* kaart als kunstwerk — laag ónder de kop, rechts uit het raster geschoven */
.map-art{
  position:absolute; z-index:1; pointer-events:none;
  top:clamp(4rem, 10vh, 8rem); right:calc(-0.06 * 100vw);
  width:min(62rem, 64vw); opacity:0.98;
}
.map-art .stage{ position:relative; }
#map{ width:100%; height:auto; overflow:visible; }
#map .dot{ fill:#cfc9bb; opacity:0; transition:opacity 0.7s var(--ease); }
#map.lit .dot{ opacity:0.7; }
#map .dot.be{ fill:var(--navy); }
#map .dot.pl{ fill:var(--copper); }
#map.lit .dot.be, #map.lit .dot.pl{ opacity:1; }
#map .halo{ opacity:0.1; }
#map .halo.be{ fill:var(--navy); }
#map .halo.pl{ fill:var(--copper); }
#map .arc{ fill:none; stroke:url(#arcGrad); stroke-width:0.24; stroke-linecap:round; }
#map .pulse{ fill:var(--copper); }
#map .pulse.rev{ fill:var(--navy); }
#map .node{ fill:var(--navy); }
#map .node.pl{ fill:var(--copper); }
#map .node-ring{ fill:none; stroke:var(--paper); stroke-width:0.42; }
#map .ping{ fill:none; stroke:var(--copper); stroke-width:0.13; }
#map .ping.be{ stroke:var(--navy); }
.pin{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:0.45rem;
  padding:0.32rem 0.7rem 0.32rem 0.55rem;
  background:var(--white); border:1px solid var(--hair);
  box-shadow:var(--sh-near); white-space:nowrap;
  font-size:0.78rem; font-weight:500; color:var(--ink);
  opacity:0; transition:opacity 0.7s var(--ease) 0.9s;
}
.map-art .stage.lit .pin{ opacity:1; }
.pin i{ width:6px; height:6px; border-radius:99px; flex:none; }
.pin.be i{ background:var(--navy); }
.pin.pl i{ background:var(--copper); }
.pin small{ font-family:var(--font-mono); font-size:0.58rem; color:var(--muted); letter-spacing:0.1em; }

/* onderregel hero: lede + acties rechts, registers-notitie eronder */
.hero-side{
  grid-column:7 / 13; grid-row:3; z-index:4;
  margin-top:clamp(2.6rem, 7vh, 5rem);
  padding-left:clamp(0rem, 2vw, 2rem);
  border-left:1px solid var(--hair);
  padding-left:clamp(1.2rem, 2.5vw, 2.4rem);
}
.hero-actions{ margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:0.8rem; }
.hero-note{
  margin-top:1.8rem; display:flex; flex-wrap:wrap; align-items:center;
  gap:0.6rem 0.9rem; font-family:var(--font-mono); font-size:0.68rem;
  letter-spacing:0.12em; color:var(--muted);
}
.hero-note b{ font-weight:500; color:var(--ink-2); letter-spacing:0.14em; }
.hero-note .tick{ width:0.85rem; height:0.85rem; color:var(--copper); }
.hero-note .sep{ width:3px; height:3px; border-radius:99px; background:var(--hair-2); }
.hero-cap{
  grid-column:1 / 5; grid-row:3; align-self:end; z-index:4;
  font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase;
  letter-spacing:0.24em; color:var(--faint); line-height:2;
}
.hero-cap::before{ content:''; display:block; width:2.4rem; height:1px; background:var(--hair-2); margin-bottom:0.9rem; }

/* ==========================================================================
   02 · verificatie — dicht gezet grootboek, enorm mono-serif contrast
   ========================================================================== */
.registers{ position:relative; padding-block:clamp(4.5rem, 9vh, 7rem) clamp(5rem, 10vh, 8rem); }
.registers .ghost{ right:calc(var(--pad) * 0.4); top:-2rem; }
.reg-head{ grid-column:1 / 7; margin-bottom:clamp(2.4rem, 5vh, 4rem); }
.reg-head h2{
  margin-top:1.1rem;
  font-size:clamp(2rem, 4.6vw, 4.1rem); line-height:1.02; letter-spacing:-0.03em;
  font-weight:300; text-wrap:balance;
}
.reg-head h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-ink); }
.reg-note{
  grid-column:9 / 13; align-self:end; margin-bottom:clamp(2.4rem, 5vh, 4rem);
  font-size:0.9rem; font-weight:300; color:var(--muted); max-width:24ch;
}
.ledger{ grid-column:1 / 13; border-top:1px solid var(--ink); }
.ledger-row{
  display:grid;
  grid-template-columns:3.4rem minmax(0,0.5fr) minmax(0,1fr) auto;
  align-items:baseline; gap:clamp(1rem, 3vw, 3rem);
  padding-block:clamp(1.1rem, 2.4vh, 1.7rem);
  border-bottom:1px solid var(--hair);
  position:relative; transition:padding-left 0.35s var(--ease);
}
.ledger-row::before{
  content:''; position:absolute; inset:0 0 0 0; width:0;
  background:linear-gradient(90deg, rgba(180,105,30,0.07), transparent 80%);
  transition:width 0.5s var(--ease); pointer-events:none;
}
.ledger-row:hover{ padding-left:0.9rem; }
.ledger-row:hover::before{ width:100%; }
.ledger-idx{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.2em; color:var(--faint); }
.ledger-code{
  font-family:var(--font-serif); font-style:italic; font-weight:320;
  font-size:clamp(1.9rem, 4.4vw, 3.6rem); letter-spacing:-0.02em; line-height:1;
  color:var(--ink); transition:color 0.3s var(--ease);
}
.ledger-row:hover .ledger-code{ color:var(--copper-ink); }
.ledger-what{ font-size:0.95rem; font-weight:300; color:var(--muted); }
.ledger-state{
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--copper-ink); white-space:nowrap;
  display:inline-flex; align-items:center; gap:0.5rem;
}
.ledger-state::before{ content:''; width:5px; height:5px; border-radius:99px; background:var(--copper); box-shadow:0 0 8px rgba(180,105,30,0.7); }

/* ==========================================================================
   03 · hoe het werkt — het horizontale moment
   ========================================================================== */
.hs{ position:relative; height:380vh; }
.hs-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--paper-2);
  border-block:1px solid var(--hair);
}
.hs-sticky::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 88% 0%, rgba(180,105,30,0.09), transparent 68%);
}
.hs-rail{
  position:absolute; top:clamp(5.4rem, 10vh, 7rem); left:var(--pad); right:var(--pad);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.28em;
  text-transform:uppercase; color:var(--faint); z-index:5;
}
.hs-rail b{ color:var(--copper-ink); font-weight:500; }
.hs-progress{ width:clamp(6rem, 14vw, 12rem); height:1px; background:var(--hair-2); position:relative; }
.hs-progress i{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--grad); }
.hs-track{
  display:flex; align-items:center; gap:clamp(3rem, 8vw, 8rem);
  padding-inline:var(--pad); will-change:transform;
}
.hs-panel{ flex:0 0 auto; width:min(44rem, 82vw); position:relative; }
.hs-intro .mono{ margin-bottom:1.4rem; display:inline-block; }
.hs-intro h2{
  font-size:clamp(2.4rem, 5.4vw, 5rem); line-height:1; letter-spacing:-0.034em;
  font-weight:300; text-wrap:balance;
}
.hs-intro h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-ink); }
.hs-intro .lede{ margin-top:1.6rem; }
.hs-intro .hint{
  margin-top:2.4rem; display:inline-flex; align-items:center; gap:0.8rem;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--faint);
}
.hs-intro .hint::after{ content:''; width:3.2rem; height:1px; background:var(--grad); }
.hs-step{ padding-left:clamp(3.5rem, 7vw, 7rem); }
.hs-no{
  position:absolute; left:-0.04em; top:50%; transform:translateY(-56%);
  font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(8rem, 17vw, 15rem); line-height:1;
  color:rgba(180,105,30,0.08); -webkit-text-stroke:1px rgba(180,105,30,0.3);
  pointer-events:none; user-select:none;
}
.hs-step h3{
  position:relative; z-index:2;
  font-size:clamp(1.7rem, 3.2vw, 2.7rem); font-weight:300; letter-spacing:-0.024em; line-height:1.05;
}
.hs-step h3 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-ink); }
.hs-step p{
  position:relative; z-index:2; margin-top:1.2rem;
  font-weight:300; font-size:1rem; color:var(--ink-2); max-width:42ch;
}
.hs-step p b{ font-weight:500; color:var(--ink); }
.hs-step .mono{ display:inline-block; margin-bottom:1.1rem; }
.hs-cta{ width:min(30rem, 70vw); }
.hs-cta .serif{ font-size:clamp(1.7rem, 3vw, 2.6rem); color:var(--ink); display:block; line-height:1.15; }
.hs-cta .textlink{ margin-top:1.8rem; }

/* fallback: mobiel + reduced motion → verticaal */
@media (max-width:60rem){
  .hs{ height:auto; }
  .hs-sticky{ position:static; height:auto; overflow:visible; padding-block:4.5rem 5rem; }
  .hs-rail{ position:static; margin-bottom:2.4rem; padding-inline:0; margin-inline:var(--pad); }
  .hs-track{ flex-direction:column; align-items:flex-start; gap:3.5rem; transform:none !important; }
  .hs-panel{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .hs{ height:auto; }
  .hs-sticky{ position:static; height:auto; overflow:visible; padding-block:4.5rem 5rem; }
  .hs-rail{ position:static; margin-bottom:2.4rem; padding-inline:0; margin-inline:var(--pad); }
  .hs-track{ flex-direction:column; align-items:flex-start; gap:3.5rem; transform:none !important; }
  .hs-panel{ width:100%; max-width:44rem; }
}

/* ==========================================================================
   04 · statement — de grote ademruimte
   ========================================================================== */
.statement{
  position:relative;
  padding-block:clamp(9rem, 24vh, 17rem) clamp(12rem, 26vh, 19rem);
}
.statement .s-ln{
  display:block; font-weight:300; color:var(--ink);
  letter-spacing:-0.04em; line-height:0.98; text-wrap:balance;
}
.statement .s-1{ grid-column:1 / 11; font-size:clamp(2.8rem, 8vw, 8rem); }
.statement .s-2{ grid-column:2 / 12; font-size:clamp(2.8rem, 8vw, 8rem); margin-top:0.4rem; color:var(--ink-2); }
.statement .s-3{
  grid-column:4 / 13; justify-self:end; margin-top:1rem;
  font-family:var(--font-serif); font-style:italic; font-weight:320;
  font-size:clamp(4.5rem, 13vw, 13rem); letter-spacing:-0.02em;
  color:var(--copper-ink); line-height:0.9;
  text-shadow:0 0 60px rgba(180,105,30,0.25);
}
.statement .s-note{
  grid-column:8 / 13; margin-top:clamp(2.6rem, 6vh, 4.5rem);
  border-left:1px solid var(--hair); padding-left:1.4rem;
}
.statement .statement-cta{
  display:flex; width:max-content; margin-top:1.35rem;
  min-height:44px; font-family:var(--font-sans); font-size:0.9rem;
}
.statement .s-tag{
  grid-column:1 / 4; margin-top:clamp(2.6rem, 6vh, 4.5rem); align-self:start;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--faint); line-height:2.1;
}

/* ==========================================================================
   05 · vertrouwen — donker paneel, dossier kantelt eroverheen
   ========================================================================== */
.trust{
  position:relative; background:var(--navy-deep); color:#c6cfdd;
  padding-block:clamp(6rem, 12vh, 9.5rem) clamp(7rem, 13vh, 10rem);
  overflow:visible;
}
.trust::before{
  content:''; position:absolute; inset:auto -10% -40% -10%; height:80%;
  background:radial-gradient(48% 58% at 72% 100%, rgba(180,105,30,0.16), transparent 70%);
  pointer-events:none;
}
.trust::after{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,161,91,0.5), transparent);
}
.trust .margin-no{ color:#5b6b84; }
.trust .margin-no b{ color:var(--copper-hi); }
.trust .margin-no::after{ background:#2a3c58; }
.trust-copy{ grid-column:1 / 7; position:relative; z-index:2; }
.trust-copy .mono{ color:var(--copper-hi); }
.trust-copy h2{
  color:#f4f1ea; margin-top:1.3rem;
  font-size:clamp(2.2rem, 5vw, 4.4rem); line-height:1.0; letter-spacing:-0.03em;
  font-weight:300; text-wrap:balance;
}
.trust-copy h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-hi); }
.trust-copy .lede{ color:#9fabbf; margin-top:1.5rem; }
.trust-points{ margin-top:2.4rem; display:flex; flex-direction:column; gap:1.05rem; }
.trust-point{ display:flex; gap:0.9rem; align-items:baseline; font-weight:300; font-size:0.97rem; color:#b7c1d2; }
.trust-point::before{
  content:''; flex:none; width:1rem; height:1px; transform:translateY(-0.28rem);
  background:linear-gradient(90deg,#d9a15b,#b4691e);
  box-shadow:0 0 8px rgba(217,161,91,0.5);
}
.trust-point b{ font-weight:500; color:#eef0f4; }

.trust-doc{
  grid-column:7 / 13; position:relative; z-index:3;
  margin-top:calc(-1 * clamp(8rem, 18vh, 13rem));
  transform:rotate(-1.4deg);
}
.dossier{
  background:var(--white); color:var(--ink-2);
  box-shadow:var(--sh-far); overflow:hidden;
  border:1px solid rgba(18,35,61,0.06);
}
.dossier-head{
  padding:1.5rem 1.7rem 1.3rem; border-bottom:1px solid var(--hair);
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  background:var(--paper);
}
.dossier-title{ font-family:var(--font-mono); font-size:0.6rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.dossier-co{ margin-top:0.5rem; font-family:var(--font-serif); font-style:italic; font-weight:340; font-size:1.35rem; letter-spacing:-0.01em; color:var(--ink); }
.dossier-sub{ margin-top:0.2rem; font-family:var(--font-mono); font-size:0.66rem; color:var(--faint); letter-spacing:0.06em; }
.dossier-state{
  flex:none; display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500; color:var(--copper-ink);
  padding:0.36rem 0.75rem; background:var(--copper-soft); border:1px solid #e6d3ba;
  white-space:nowrap;
}
.dossier-state svg{ width:0.72rem; height:0.72rem; }
.dossier-rows{ padding:0.4rem 0; }
.dossier-row{
  display:grid; grid-template-columns:5.2rem minmax(0,1fr) auto;
  align-items:center; gap:1rem; padding:0.86rem 1.7rem;
}
.dossier-row + .dossier-row{ border-top:1px solid #f1ede4; }
.dossier-row .code{ font-family:var(--font-mono); font-size:0.78rem; font-weight:500; letter-spacing:0.08em; color:var(--ink); }
.dossier-row .what{ font-size:0.85rem; font-weight:300; color:var(--muted); }
.dossier-row .ok{
  display:inline-flex; align-items:center; gap:0.35rem;
  font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.08em; color:var(--copper-ink);
}
.dossier-row .ok svg{ width:0.75rem; height:0.75rem; color:var(--copper); }
.dossier-foot{
  padding:1rem 1.7rem; border-top:1px solid var(--hair); background:var(--paper);
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.1em; color:var(--faint);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.trust-doc figcaption{
  margin-top:1.2rem; font-family:var(--font-mono); font-size:0.6rem;
  letter-spacing:0.18em; text-transform:uppercase; color:#5b6b84;
}

/* ==========================================================================
   06 · voor wie — twee panelen, verschoven en overlappend
   ========================================================================== */
.sides-sec{ position:relative; padding-block:clamp(7rem, 14vh, 11rem) clamp(6rem, 12vh, 9rem); }
.sides-sec .ghost{ left:calc(var(--pad) * 0.3); top:1rem; }
.sides-head{ grid-column:5 / 13; margin-bottom:clamp(3rem, 7vh, 5.5rem); }
.sides-head h2{
  margin-top:1.1rem;
  font-size:clamp(2.2rem, 5.2vw, 4.6rem); line-height:1; letter-spacing:-0.032em;
  font-weight:300; text-wrap:balance;
}
.sides-head h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-ink); }
.sides-head .lede{ margin-top:1.3rem; }
.side{ position:relative; display:flex; flex-direction:column; align-items:flex-start; }
.side-be{
  grid-column:1 / 8; z-index:1;
  background:var(--white); border:1px solid var(--hair);
  padding:clamp(2.2rem, 4vw, 3.6rem);
  box-shadow:var(--sh-near);
}
.side-pl{
  grid-column:7 / 13; z-index:2;
  background:var(--navy); color:#c6cfdd;
  padding:clamp(2.2rem, 4vw, 3.6rem);
  margin-top:clamp(4rem, 10vh, 8rem);
  margin-left:calc(-1 * clamp(1rem, 4vw, 4rem));
  box-shadow:var(--sh-far);
}
.side-flag{
  font-family:var(--font-mono); font-size:0.62rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:0.55rem;
}
.side-flag i{ width:0.9rem; height:2px; }
.side-be .side-flag{ color:var(--navy); }
.side-be .side-flag i{ background:var(--navy); }
.side-pl .side-flag{ color:var(--copper-hi); }
.side-pl .side-flag i{ background:var(--copper-hi); }
.side h3{
  margin-top:1.6rem; font-weight:300; letter-spacing:-0.022em; line-height:1.05;
  font-size:clamp(1.7rem, 2.8vw, 2.5rem);
}
.side h3 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; }
.side-be h3 em{ color:var(--copper-ink); }
.side-pl h3{ color:#f4f1ea; }
.side-pl h3 em{ color:var(--copper-hi); }
.side p{ margin-top:1rem; font-weight:300; font-size:0.985rem; max-width:44ch; }
.side-be p{ color:var(--ink-2); }
.side-pl p{ color:#a9b4c7; }
.side .textlink{ margin-top:auto; padding-top:2.2rem; }
.side-be .textlink{ color:var(--navy); border-color:rgba(22,48,79,0.3); }
.side-be .textlink:hover{ color:var(--copper-ink); border-color:var(--copper); }
.side-pl .textlink{ color:var(--copper-hi); border-color:rgba(217,161,91,0.4); }
.side-pl .textlink:hover{ color:#e8c69a; border-color:var(--copper-hi); }

/* ==========================================================================
   cta + footer
   ========================================================================== */
.cta{ position:relative; padding-block:clamp(7rem, 16vh, 12rem) clamp(6rem, 12vh, 9rem); }
.cta::before{
  content:''; position:absolute; inset:auto 0 0; height:70%;
  background:radial-gradient(55% 70% at 30% 100%, rgba(180,105,30,0.07), transparent 70%);
  pointer-events:none;
}
.cta-kick{ grid-column:1 / 4; }
.cta-body{ grid-column:1 / 12; margin-top:1.6rem; }
.cta-body h2{
  font-size:clamp(2.6rem, 7vw, 6.6rem); line-height:0.98; letter-spacing:-0.038em;
  font-weight:300; text-wrap:balance;
}
.cta-body h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:330; color:var(--copper-ink); }
.cta-body .lede{ margin-top:1.8rem; max-width:52ch; }
.cta-actions{ grid-column:1 / 9; margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:0.8rem; }
.cta-side{
  grid-column:10 / 13; align-self:end; margin-top:2.6rem; justify-self:end; text-align:right;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint); line-height:2.1;
}
.cta-side b{ color:var(--copper-ink); font-weight:500; }

.foot{ position:relative; border-top:1px solid var(--hair); background:var(--white); padding-block:4.5rem 2.5rem; z-index:2; }
.foot-brandcol{ grid-column:1 / 5; }
.foot .brand{ margin-bottom:1.2rem; }
.foot-tag{ font-size:0.9rem; font-weight:300; color:var(--muted); max-width:30ch; line-height:1.6; }
.foot-col-1{ grid-column:6 / 8; }
.foot-col-2{ grid-column:8 / 10; }
.foot-col-3{ grid-column:10 / 13; }
.foot h4{
  margin:0 0 1.1rem; font-family:var(--font-mono); font-size:0.62rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.22em; color:var(--faint);
}
.foot ul{ display:flex; flex-direction:column; gap:0.6rem; }
.foot ul a{ font-size:0.9rem; color:var(--ink-2); transition:color 0.2s var(--ease); }
.foot ul a:hover{ color:var(--copper-ink); }
.foot-legal{
  grid-column:1 / 13; margin-top:3.5rem; padding-top:1.6rem; border-top:1px solid var(--hair);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.75rem;
  font-size:0.8rem; color:var(--faint);
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:72rem){
  .hero-title .ln-2{ margin-left:clamp(1rem, 8vw, 8rem); }
  .map-art{ width:min(48rem, 70vw); opacity:0.8; }
  .trust-copy{ grid-column:1 / 13; }
  .trust-doc{ grid-column:2 / 13; margin-top:3rem; }
}
@media (max-width:60rem){
  .gridlines{ display:none; }
  .nav-links{ display:none; }
  .margin-no{ display:none; }
  .hero{ padding-top:7.5rem; }
  .hero-eyebrow{ grid-column:1 / 13; }
  .hero-issue{ display:none; }
  .map-art{
    position:static; grid-column:1 / 13; grid-row:3; width:100%;
    margin-top:2rem; order:3; pointer-events:auto;
  }
  .hero-title{ grid-row:2; }
  .hero-side{ grid-column:1 / 13; grid-row:4; border-left:0; padding-left:0; }
  .hero-cap{ display:none; }
  .reg-head{ grid-column:1 / 13; }
  .reg-note{ grid-column:1 / 13; margin-top:-1.6rem; max-width:40ch; }
  .ledger-row{ grid-template-columns:2.4rem minmax(0,1fr); row-gap:0.3rem; }
  .ledger-what{ grid-column:2; }
  .ledger-state{ grid-column:2; justify-self:start; }
  .statement .s-1{ grid-column:1 / 13; }
  .statement .s-2{ grid-column:1 / 13; }
  .statement .s-3{ grid-column:1 / 13; justify-self:end; }
  .statement .s-note{ grid-column:1 / 13; }
  .statement .s-tag{ grid-column:1 / 13; margin-top:2rem; }
  .trust-doc{ grid-column:1 / 13; transform:none; }
  .sides-head{ grid-column:1 / 13; }
  .side-be{ grid-column:1 / 13; }
  .side-pl{ grid-column:1 / 13; margin-left:0; margin-top:1.5rem; }
  .cta-body{ grid-column:1 / 13; }
  .cta-actions{ grid-column:1 / 13; }
  .cta-side{ grid-column:1 / 13; justify-self:start; text-align:left; }
  .foot-brandcol{ grid-column:1 / 13; }
  .foot-col-1{ grid-column:1 / 7; }
  .foot-col-2{ grid-column:7 / 13; }
  .foot-col-3{ grid-column:1 / 13; }
  .thread{ display:none; }
}
@media (max-width:44rem){
  .nav-inner{ gap:1rem; }
  .nav-right .btn{ display:none; }
  .hero-title .ln{ font-size:clamp(2.6rem, 12.5vw, 4rem); }
  .hero-title .ln-2{ margin-left:1.5rem; }
  .hero-title .ln-3{ margin-left:0; }
  .dossier-row{ grid-template-columns:4rem minmax(0,1fr) auto; padding-inline:1.1rem; }
  .dossier-head, .dossier-foot{ padding-inline:1.1rem; }
  .foot-col-1, .foot-col-2{ grid-column:1 / 13; }
}

/* === dual switch: doelgroep + taal === */
.aud{ display:flex; border:1px solid var(--hair-2); background:var(--white); }
.aud button{
  font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:normal;
  padding:0.7rem 0.95rem; min-height:44px; color:var(--navy, #16304f); white-space:nowrap;
  transition:color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.aud button:hover{ color:var(--copper-ink, #b4691e); }
.aud button[aria-pressed="true"]{ color:#fff; background:var(--copper-ink, #b4691e); }
.lang select{
  font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:normal;
  padding:0.7rem 0.5rem; min-height:44px; color:var(--navy, #16304f); background:var(--white);
  border:1px solid var(--hair-2); appearance:auto; cursor:pointer;
}
@media (max-width: 900px){ .aud button{ font-size:0.8rem; padding:0.55rem 0.6rem; } }
/* PC:SHARED-CSS — logo, mobiel menu, taalfallback (canoniek, gedeeld) */

/* De doelgroepscheiding leunt op het hidden-attribuut. De UA-regel
   [hidden]{display:none} verliest het echter van élke auteursregel die display
   zet (.foot ul{display:flex}, .btn{display:inline-flex}, .side{display:flex}),
   waardoor verborgen blokken van de andere doelgroep tóch zichtbaar bleven.
   Deze regel maakt hidden bindend. */
[hidden]{ display:none !important; }

.brand{ display:flex; align-items:center; gap:0.65rem; min-height:2.2rem; }
.brand-logo{
  display:block; height:clamp(1.15rem, 2.1vw, 1.5rem); width:auto;
  max-width:min(58vw, 15rem);
}
.foot .brand-logo{ height:clamp(1.3rem, 2.4vw, 1.7rem); }
.drawer .brand-logo{ height:1.25rem; }

/* De desktopkop moet ook met langere FR/PL-labels binnen de viewport blijven.
   Flexbox kromp voordien alleen de onbeschermde loginlink, waardoor
   “Se connecter” over twee regels viel en nav-right rechts uit beeld schoof. */
.nav-inner{ gap:1rem; }
.nav-links a{ padding-inline:0.5rem; }
.nav-right{ flex:none; gap:0.6rem; }
.nav-right .aud button{ padding-inline:0.7rem; }
.nav-right .login{ flex:none; white-space:nowrap; }

/* Tot en met 1424px maakt de volledige linklijst plaats voor de primaire acties.
   Onder 960px nemen de bestaande mobiele lade en hamburger het volledig over. */
@media (max-width:89rem){
  .nav-links{ display:none; }
}

/* hamburger */
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--hair-2, #ded6c8); background:var(--white, #fff); flex:none;
}
.nav-toggle:hover{ border-color:var(--copper, #b4691e); }
.nav-toggle-bars{ display:block; width:18px; height:10px; position:relative; }
.nav-toggle-bars i{
  position:absolute; left:0; right:0; height:1.5px; background:var(--ink, #12233d);
  transition:transform 0.25s var(--ease, ease), opacity 0.2s;
}
.nav-toggle-bars i:first-child{ top:0; }
.nav-toggle-bars i:last-child{ bottom:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:first-child{ top:4px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:last-child{ bottom:4px; transform:rotate(-45deg); }

/* taalfallback-melding (DE) */
.lang-fallback{
  max-width:var(--maxw, 96rem); margin-inline:auto; padding:0.5rem var(--pad, 1.25rem);
  font-family:var(--font-mono, monospace); font-size:0.62rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--copper-ink, #935416);
  background:var(--copper-soft, #f4e9dc); border-top:1px solid #e6d3ba;
}
.lang-fallback[hidden]{ display:none; }

/* mobiele lade */
.drawer{
  position:fixed; inset:0; z-index:60; display:flex; justify-content:flex-end;
  background:rgba(13,28,49,0.5);
}
.drawer[hidden]{ display:none; }
.drawer-panel{
  width:min(23rem, 92vw); height:100%; overflow-y:auto;
  background:var(--navy-deep, #0d1c31); color:#c6cfdd;
  padding:1.1rem var(--pad, 1.25rem) 2.5rem;
  display:flex; flex-direction:column; gap:1.6rem;
  box-shadow:-24px 0 60px -30px rgba(0,0,0,0.6);
}
.drawer-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.drawer-close{
  width:44px; height:44px; flex:none; color:#f4f1ea;
  border:1px solid rgba(217,161,91,0.4); font-size:1.15rem; line-height:1;
}
.drawer-close:hover{ border-color:var(--copper-hi, #d9a15b); color:var(--copper-hi, #d9a15b); }
.drawer-links{ display:flex; flex-direction:column; }
.drawer-links a{
  padding:0.85rem 0; font-size:1.05rem; font-weight:300; color:#e6ebf3;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.drawer-links a[aria-current="page"]{ color:var(--copper-hi, #d9a15b); }
.drawer-links a[hidden]{ display:none; }
.drawer-controls{ display:flex; flex-direction:column; gap:0.55rem; }
.drawer-lbl{
  font-family:var(--font-mono, monospace); font-size:0.6rem; letter-spacing:0.24em;
  text-transform:uppercase; color:#8794ab;
}
.drawer-controls .aud{ display:flex; border-color:rgba(255,255,255,0.18); background:transparent; }
.drawer-controls .aud button{ flex:1; color:#c6cfdd; }
.drawer-controls .aud button[aria-pressed="true"]{ background:var(--copper-ink, #b4691e); color:#fff; }
/* De lade is donker. Met appearance:auto tekent het systeem een lichte
   selectbesturing en blijft alleen onze lichte tekstkleur staan — licht op wit.
   appearance:none geeft ons de volledige besturing terug, inclusief een eigen
   pijltje; de opties zelf blijven systeemdonker-op-licht. */
/* De .lang-omhulling is op de lichte nav wit; in de donkere lade moet die wit
   weg, anders schijnt hij door de half-transparante select heen. */
.drawer-controls .lang{ border:0; background:transparent; }
.drawer-controls .lang select{
  width:100%; appearance:none; -webkit-appearance:none;
  padding:0.7rem 2.2rem 0.7rem 0.75rem;
  background-color:rgba(255,255,255,0.06); color:#e6ebf3;
  border:1px solid rgba(255,255,255,0.22);
  background-image:
    linear-gradient(45deg, transparent 50%, #d9a15b 50%),
    linear-gradient(135deg, #d9a15b 50%, transparent 50%);
  background-position:right 1.15rem center, right 0.8rem center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.drawer-controls .lang select:hover{ border-color:var(--copper-hi, #d9a15b); }
.drawer-controls .lang select option{ color:#12233d; background:#ffffff; }
.drawer-cta{ display:flex; flex-direction:column; gap:0.6rem; }
.drawer-cta .btn{ justify-content:center; }
.drawer-cta .btn-quiet{ border-color:rgba(217,161,91,0.45); color:#e6ebf3; }
.drawer-cta .btn-quiet:hover{ background:rgba(255,255,255,0.06); border-color:var(--copper-hi, #d9a15b); }
.drawer-mail{ font-size:0.85rem; }
.drawer-mail a{ color:var(--copper-hi, #d9a15b); border-bottom:1px solid rgba(217,161,91,0.4); }
body.drawer-open{ overflow:hidden; }

@media (max-width:60rem){
  .nav-links{ display:none; }
  .nav-right .aud, .nav-right .lang, .nav-right .login{ display:none; }
  .nav-right .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-inner{ gap:1rem; }
  .nav-right{ margin-left:auto; }
}
@media (min-width:60.01rem){
  .drawer{ display:none !important; }
}
/* /PC:SHARED-CSS */
/* PC:PAGE-CSS */
/* strikte doelgroepscheiding: het overblijvende paneel neemt de breedte over */
body[data-aud="be"] .sides-sec .side-be{ grid-column:1 / 9; }
body[data-aud="pl"] .sides-sec .side-pl{ grid-column:1 / 9; margin-left:0; margin-top:0; }
.beta-notice{
  position:relative; z-index:8; margin-top:4.9rem;
  padding:0.8rem var(--pad); border-block:1px solid rgba(180,105,30,0.45);
  background:var(--ink); color:#f6f1e9; text-align:center;
  font-family:var(--font-sans); font-size:0.82rem; line-height:1.5;
}
.beta-notice strong{ color:var(--copper-hi); font-weight:650; }
@media (max-width:60rem){
  body[data-aud="be"] .sides-sec .side-be,
  body[data-aud="pl"] .sides-sec .side-pl{ grid-column:1 / 13; }
  .beta-notice{ margin-top:4.5rem; padding:0.75rem 1rem; font-size:0.78rem; text-align:left; }
}
/* /PC:PAGE-CSS */