/* ==========================================================================
   PolishConnection · site-couture · OVER ONS
   Zelfde couture-taal als index.html: papierwit × navy × koper,
   12-kolomsraster, verticale sectienummers, typografie als beeld.
   ========================================================================== */
: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;
}
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; }

.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); }

.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); }

.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);
}

.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; }
}

.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); }

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

/* ==========================================================================
   01 · hero — editoriaal, typografie als beeld
   ========================================================================== */
.hero{
  position:relative; padding-top:clamp(8.5rem, 15vh, 12rem);
  padding-bottom:clamp(4.5rem, 10vh, 8rem);
}
.hero-eyebrow{
  grid-column:1 / 8; 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(2.8rem, 8.4vw, 8.5rem);
  line-height:0.98; 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, 14vw, 15rem);
}
.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:36ch; text-wrap:balance;
}
.hero-title .ln-3 b{ font-weight:500; color:var(--ink); }
.hero-cap{
  grid-column:1 / 5; grid-row:3; margin-top:clamp(2.6rem, 6vh, 4.5rem);
  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; }
.hero-side{
  grid-column:7 / 13; grid-row:3; margin-top:clamp(2.6rem, 6vh, 4.5rem);
  border-left:1px solid var(--hair); padding-left:clamp(1.2rem, 2.5vw, 2.4rem);
}

/* ==========================================================================
   02 · waarom — de markt, editoriaal in twee kolommen
   ========================================================================== */
.why{ position:relative; padding-block:clamp(5rem, 11vh, 8.5rem); }
.why .ghost{ right:calc(var(--pad) * 0.4); top:-2rem; }
.why-head{ grid-column:1 / 8; }
.why-head h2{
  margin-top:1.1rem;
  font-size:clamp(2.1rem, 4.8vw, 4.3rem); line-height:1.02; letter-spacing:-0.03em;
  font-weight:300; text-wrap:balance;
}
.why-head h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-ink); }
.why-col-1{ grid-column:1 / 6; margin-top:clamp(2.4rem, 5vh, 3.6rem); }
.why-col-2{ grid-column:7 / 12; margin-top:clamp(5rem, 11vh, 8rem); }
.why p + p{ margin-top:1.2rem; }
.why-col-1 p, .why-col-2 p{ font-weight:300; font-size:1rem; color:var(--ink-2); max-width:44ch; }
.why-col-1 p b, .why-col-2 p b{ font-weight:500; color:var(--ink); }
.why-col-1 .initial::first-letter{
  font-family:var(--font-serif); font-style:italic; font-weight:340;
  font-size:3.4em; line-height:0.8; float:left;
  padding:0.08em 0.14em 0 0; color:var(--copper-ink);
}
.why-pull{
  grid-column:1 / 13; margin-top:clamp(4.5rem, 10vh, 7.5rem);
  border-top:1px solid var(--ink); padding-top:clamp(2rem, 5vh, 3.4rem);
}
.why-pull .pl-1{
  display:block; font-weight:300; color:var(--ink);
  font-size:clamp(2.2rem, 6.4vw, 6.2rem); line-height:1; letter-spacing:-0.036em; text-wrap:balance;
}
.why-pull .pl-2{
  display:block; margin-top:0.3rem; margin-left:clamp(1.5rem, 12vw, 13rem);
  font-family:var(--font-serif); font-style:italic; font-weight:320;
  font-size:clamp(2.2rem, 6.4vw, 6.2rem); line-height:1; letter-spacing:-0.02em;
  color:var(--copper-ink);
}
.why-pull .pl-note{
  margin-top:clamp(1.6rem, 4vh, 2.6rem); margin-left:auto; max-width:46ch;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--faint); line-height:2;
}

/* ==========================================================================
   03 · de oprichter — donker paneel, editoriaal
   ========================================================================== */
.founder{
  position:relative; background:var(--navy-deep); color:#c6cfdd;
  padding-block:clamp(6rem, 12vh, 9.5rem) clamp(6.5rem, 13vh, 10rem);
}
.founder::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;
}
.founder::after{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,161,91,0.5), transparent);
}
.founder .margin-no{ color:#5b6b84; }
.founder .margin-no b{ color:var(--copper-hi); }
.founder .margin-no::after{ background:#2a3c58; }
.founder-copy{ grid-column:1 / 8; position:relative; z-index:2; }
.founder-copy .mono{ color:var(--copper-hi); }
.founder-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;
}
.founder-copy h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-hi); }
.founder-copy .lede{ color:#9fabbf; margin-top:1.6rem; max-width:52ch; }
.founder-copy p + p{ margin-top:1.2rem; }
.founder-copy .body{ font-weight:300; font-size:1rem; color:#b7c1d2; max-width:52ch; }
.founder-copy .body b{ font-weight:500; color:#eef0f4; }
.founder-quote{
  grid-column:8 / 13; align-self:center; position:relative; z-index:2;
  margin-top:clamp(3rem, 6vh, 0rem);
  border-left:1px solid rgba(217,161,91,0.35); padding-left:clamp(1.4rem, 3vw, 2.6rem);
}
.founder-quote blockquote{ margin:0; }
.founder-quote .q{
  font-family:var(--font-serif); font-style:italic; font-weight:320;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem); line-height:1.25; letter-spacing:-0.015em;
  color:#f4f1ea; text-wrap:balance;
}
.founder-quote .q em{ color:var(--copper-hi); font-style:italic; }
.founder-card{
  grid-column:8 / 13; z-index:2; margin-top:clamp(2.4rem, 5vh, 3.4rem);
  border:1px solid rgba(198,207,221,0.16); background:rgba(252,251,248,0.03);
  padding:1.4rem 1.6rem;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em;
  text-transform:uppercase; color:#8a97ac; line-height:2.2;
}
.founder-card b{ color:var(--copper-hi); font-weight:500; }
.founder-card .name{
  display:block; font-family:var(--font-serif); font-style:italic; font-weight:340;
  font-size:1.5rem; letter-spacing:-0.01em; text-transform:none; color:#f4f1ea;
  margin-bottom:0.5rem;
}

/* ==========================================================================
   04 · het principe — statement
   ========================================================================== */
.statement{
  position:relative;
  padding-block:clamp(8rem, 20vh, 15rem) clamp(9rem, 21vh, 16rem);
}
.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.6rem, 7.4vw, 7.4rem); }
.statement .s-2{ grid-column:2 / 12; font-size:clamp(2.6rem, 7.4vw, 7.4rem); margin-top:0.4rem; color:var(--ink-2); }
.statement .s-3{
  grid-column:3 / 13; justify-self:end; margin-top:1rem;
  font-family:var(--font-serif); font-style:italic; font-weight:320;
  font-size:clamp(3.6rem, 11vw, 11rem); 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 .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 · colofon — het bedrijf achter het platform
   ========================================================================== */
.colofon{ position:relative; padding-block:clamp(4rem, 9vh, 7rem) clamp(5rem, 11vh, 8.5rem); }
.colofon .ghost{ left:calc(var(--pad) * 0.3); top:0; }
.colofon-head{ grid-column:1 / 7; margin-bottom:clamp(2.2rem, 5vh, 3.4rem); }
.colofon-head h2{
  margin-top:1.1rem;
  font-size:clamp(1.9rem, 4vw, 3.4rem); line-height:1.04; letter-spacing:-0.028em;
  font-weight:300; text-wrap:balance;
}
.colofon-head h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-ink); }
.colofon-note{
  grid-column:8 / 13; align-self:end; margin-bottom:clamp(2.2rem, 5vh, 3.4rem);
  font-size:0.9rem; font-weight:300; color:var(--muted); max-width:32ch;
}
.colofon-ledger{ grid-column:1 / 13; border-top:1px solid var(--ink); }
.colofon-row{
  display:grid; grid-template-columns:3.4rem minmax(0,0.55fr) minmax(0,1fr);
  align-items:baseline; gap:clamp(1rem, 3vw, 3rem);
  padding-block:clamp(1rem, 2.2vh, 1.5rem);
  border-bottom:1px solid var(--hair);
  position:relative; transition:padding-left 0.35s var(--ease);
}
.colofon-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;
}
.colofon-row:hover{ padding-left:0.9rem; }
.colofon-row:hover::before{ width:100%; }
.colofon-idx{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.2em; color:var(--faint); }
.colofon-key{
  font-family:var(--font-mono); font-size:0.66rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--copper-ink);
}
.colofon-val{ font-size:1rem; font-weight:300; color:var(--ink); }
.colofon-val a{ border-bottom:1px solid rgba(180,105,30,0.35); transition:color 0.2s var(--ease), border-color 0.2s var(--ease); }
.colofon-val a:hover{ color:var(--copper-ink); border-color:var(--copper); }

/* ---------- cta ---------- */
.cta{ position:relative; padding-block:clamp(5rem, 12vh, 9rem) 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.4rem, 6vw, 5.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; }

/* ---------- footer ---------- */
.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); }
  .founder-copy{ grid-column:1 / 13; }
  .founder-quote{ grid-column:1 / 12; margin-top:3rem; }
  .founder-card{ grid-column:1 / 10; }
}
@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; }
  .hero-cap{ display:none; }
  .hero-side{ grid-column:1 / 13; border-left:0; padding-left:0; }
  .why-head{ grid-column:1 / 13; }
  .why-col-1{ grid-column:1 / 13; }
  .why-col-2{ grid-column:1 / 13; margin-top:1.6rem; }
  .why-pull .pl-2{ margin-left:1.5rem; }
  .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; }
  .colofon-head{ grid-column:1 / 13; }
  .colofon-note{ grid-column:1 / 13; margin-top:-1rem; max-width:44ch; }
  .colofon-row{ grid-template-columns:2.4rem minmax(0,1fr); row-gap:0.25rem; }
  .colofon-val{ grid-column:2; }
  .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; }
}
@media (max-width:44rem){
  .nav-inner{ gap:1rem; }
  .nav-right .btn{ display:none; }
  .hero-title .ln{ font-size:clamp(2.4rem, 11.5vw, 3.8rem); }
  .hero-title .ln-2{ margin-left:1.5rem; }
  .hero-title .ln-3{ margin-left:0; }
  .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 */