/* ==========================================================================
   PolishConnection · COUTURE · kennisbank
   Zelfde identiteit als index: papierwit × navy × koper,
   12-kolomsraster — de gidsen als redactioneel grootboek.
   ========================================================================== */
: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);
}

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

/* ==========================================================================
   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 · pagina-kop
   ========================================================================== */
.phero{
  position:relative; padding-top:clamp(8.5rem, 15vh, 12rem);
  padding-bottom:clamp(3.5rem, 7vh, 5.5rem);
}
.phero-eyebrow{
  grid-column:1 / 8; grid-row:1;
  display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap;
  margin-bottom:clamp(1.8rem, 4vh, 3rem);
}
.phero-eyebrow .rule{ width:3.2rem; height:1px; background:var(--grad); align-self:center; }
.phero-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;
}
.phero-issue b{ color:var(--copper-ink); font-weight:500; }
.phero-title{ grid-column:1 / 13; grid-row:2; }
.phero-title .ln{
  display:block; font-weight:300; color:var(--ink);
  font-size:clamp(2.5rem, 6.6vw, 6.4rem);
  line-height:0.98; letter-spacing:-0.036em; text-wrap:balance;
}
.phero-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(1.6rem, 11vw, 11rem);
}
.phero-side{
  grid-column:7 / 13; grid-row:3;
  margin-top:clamp(2.2rem, 5vh, 3.6rem);
  border-left:1px solid var(--hair);
  padding-left:clamp(1.2rem, 2.5vw, 2.4rem);
}
.phero-cap{
  grid-column:1 / 5; grid-row:3; align-self:end;
  font-family:var(--font-mono); font-size:0.62rem; text-transform:uppercase;
  letter-spacing:0.24em; color:var(--faint); line-height:2;
}
.phero-cap::before{ content:''; display:block; width:2.4rem; height:1px; background:var(--hair-2); margin-bottom:0.9rem; }

/* ==========================================================================
   02 · waarom compliance
   ========================================================================== */
.why{ position:relative; padding-block:clamp(3.5rem, 7vh, 5.5rem) clamp(4rem, 8vh, 6rem); }
.why-copy{ grid-column:1 / 8; }
.why-copy h2{
  margin-top:1.1rem;
  font-size:clamp(1.9rem, 4.2vw, 3.7rem); line-height:1.04; letter-spacing:-0.028em;
  font-weight:300; text-wrap:balance;
}
.why-copy h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-ink); }
.why-copy .lede{ margin-top:1.4rem; max-width:56ch; }
.why-aside{
  grid-column:9 / 13; align-self:end;
  border-left:1px solid var(--hair); padding-left:1.4rem;
  font-size:0.9rem; font-weight:300; color:var(--muted);
}
.why-aside b{ font-weight:500; color:var(--ink-2); }
.why-aside .mono{ display:block; margin-bottom:0.8rem; }

/* ==========================================================================
   03 · het gidsen-grootboek
   ========================================================================== */
.guides{ position:relative; padding-block:clamp(3rem, 6vh, 5rem) clamp(5rem, 10vh, 8rem); }
.guides .ghost{ right:calc(var(--pad) * 0.4); top:-2.5rem; }
.guides-rail{
  grid-column:1 / 13; margin-bottom:1.1rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--faint);
}
.guides-rail b{ color:var(--copper-ink); font-weight:500; }
.guidebook{ grid-column:1 / 13; border-top:1px solid var(--ink); }
.guide{
  position:relative;
  display:grid;
  grid-template-columns:3.4rem minmax(0,0.42fr) minmax(0,1fr) auto;
  align-items:start; gap:clamp(1rem, 2.6vw, 2.8rem);
  padding-block:clamp(1.5rem, 3vh, 2.2rem);
  border-bottom:1px solid var(--hair);
  transition:padding-left 0.35s var(--ease);
}
.guide::before{
  content:''; position:absolute; inset:0; width:0;
  background:linear-gradient(90deg, rgba(180,105,30,0.07), transparent 80%);
  transition:width 0.5s var(--ease); pointer-events:none;
}
.guide:hover{ padding-left:0.9rem; }
.guide:hover::before{ width:100%; }
.guide-idx{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.2em; color:var(--faint); padding-top:0.55rem; }
.guide-titlecol{ position:relative; z-index:2; }
.guide-topic{
  display:block; margin-bottom:0.65rem;
  font-family:var(--font-mono); font-size:0.6rem; font-weight:500;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--copper-ink);
}
.guide h3{
  font-family:var(--font-serif); font-style:italic; font-weight:330;
  font-size:clamp(1.45rem, 2.6vw, 2.15rem); letter-spacing:-0.016em; line-height:1.08;
  color:var(--ink); transition:color 0.3s var(--ease); text-wrap:balance;
}
.guide:hover h3{ color:var(--copper-ink); }
.guide-sum{
  position:relative; z-index:2; padding-top:0.5rem;
  font-size:0.95rem; font-weight:300; color:var(--ink-2); max-width:58ch;
}
.guide-sum b{ font-weight:500; color:var(--ink); }
.guide-linkcol{ justify-self:end; padding-top:0.55rem; }
.guide .textlink{ white-space:nowrap; }
.guidebook-foot{
  grid-column:1 / 13; margin-top:1.4rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint);
}
.guidebook-foot b{ color:var(--copper-ink); font-weight:500; }

/* ==========================================================================
   04 · checklist + platform — donker paneel met leadmagnet
   ========================================================================== */
.lead{ position:relative; background:var(--navy-deep); color:#c6cfdd; padding-block:clamp(6rem, 12vh, 9.5rem); overflow:visible; }
.lead::after{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg, transparent, rgba(217,161,91,0.5), transparent);
}
.lead::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;
}
.lead .margin-no{ color:#5b6b84; }
.lead .margin-no b{ color:var(--copper-hi); }
.lead .margin-no::after{ background:#2a3c58; }
.lead-copy{ grid-column:1 / 7; position:relative; z-index:2; }
.lead-copy .mono{ color:var(--copper-hi); }
.lead-copy h2{
  color:#f4f1ea; margin-top:1.3rem;
  font-size:clamp(2rem, 4.4vw, 3.9rem); line-height:1.02; letter-spacing:-0.028em;
  font-weight:300; text-wrap:balance;
}
.lead-copy h2 em{ font-family:var(--font-serif); font-style:italic; font-weight:340; color:var(--copper-hi); }
.lead-copy .lede{ color:#9fabbf; margin-top:1.5rem; }
.lead-points{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.05rem; }
.lead-point{ display:flex; gap:0.9rem; align-items:baseline; font-weight:300; font-size:0.97rem; color:#b7c1d2; }
.lead-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);
}
.lead-point b{ font-weight:500; color:#eef0f4; }
.lead-actions{ margin-top:2.4rem; display:flex; flex-wrap:wrap; gap:0.8rem; }
.lead .btn-quiet{ border-color:#31415d; color:#e8ebf1; }
.lead .btn-quiet:hover{ border-color:var(--copper-hi); background:rgba(255,255,255,0.04); }

/* checklist-document kantelt over het paneel */
.lead-doc{
  grid-column:7 / 13; position:relative; z-index:3;
  align-self:center; transform:rotate(1.2deg);
  margin-left:clamp(0rem, 2vw, 2rem);
}
.checklist{
  background:var(--white); color:var(--ink-2);
  box-shadow:var(--sh-far); overflow:hidden;
  border:1px solid rgba(18,35,61,0.06);
}
.checklist-head{
  padding:1.5rem 1.7rem 1.3rem; border-bottom:1px solid var(--hair); background:var(--paper);
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.checklist-title{ font-family:var(--font-mono); font-size:0.6rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.checklist-name{ 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); }
.checklist-fmt{
  flex:none; 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;
}
.checklist-rows{ padding:0.4rem 0; }
.checklist-row{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr);
  align-items:baseline; gap:0.9rem; padding:0.68rem 1.7rem;
  font-size:0.88rem; font-weight:300; color:var(--ink-2);
}
.checklist-row + .checklist-row{ border-top:1px solid #f1ede4; }
.checklist-row .no{ font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.14em; color:var(--faint); }
.checklist-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;
}
.lead-doc figcaption{
  margin-top:1.2rem; font-family:var(--font-mono); font-size:0.6rem;
  letter-spacing:0.18em; text-transform:uppercase; color:#5b6b84;
}

/* ==========================================================================
   cta + footer
   ========================================================================== */
.cta{ position:relative; padding-block:clamp(6rem, 13vh, 10rem) clamp(5.5rem, 11vh, 8.5rem); }
.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.036em;
  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){
  .guide{ grid-template-columns:3.4rem minmax(0,1fr) auto; }
  .guide-sum{ grid-column:2; padding-top:0.85rem; }
  .guide-linkcol{ grid-column:3; grid-row:1; }
  .lead-copy{ grid-column:1 / 13; }
  .lead-doc{ grid-column:2 / 12; margin-top:3rem; margin-left:0; }
}
@media (max-width:60rem){
  .gridlines{ display:none; }
  .nav-links{ display:none; }
  .margin-no{ display:none; }
  .phero{ padding-top:7.5rem; }
  .phero-eyebrow{ grid-column:1 / 13; }
  .phero-issue{ display:none; }
  .phero-side{ grid-column:1 / 13; border-left:0; padding-left:0; }
  .phero-cap{ display:none; }
  .why-copy{ grid-column:1 / 13; }
  .why-aside{ grid-column:1 / 13; margin-top:2rem; }
  .guide{ grid-template-columns:2.4rem minmax(0,1fr); row-gap:0.5rem; }
  .guide-sum{ grid-column:2; }
  .guide-linkcol{ grid-column:2; grid-row:auto; justify-self:start; padding-top:0.6rem; }
  .lead-doc{ grid-column:1 / 13; transform:none; }
  .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; }
  .phero-title .ln{ font-size:clamp(2rem, 9.5vw, 3.2rem); }
  .phero-title .ln-2{ margin-left:1.2rem; }
  .checklist-row{ padding-inline:1.1rem; }
  .checklist-head, .checklist-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 */