/* ══════════════════════════════════════════════════════════
   IJzerman Consulting, gedeelde designlaag
   Geladen door de losse pagina's naast hun eigen stylesheet.
   ══════════════════════════════════════════════════════════ */

:root{
  --bx:#410B13; --bxd:#2B060C; --bxl:#6E1624;
  --ice:#A3C3D9; --iced:#7CA6C6; --icel:#C7DCEC;
  --ow:#F5F2EF; --cr:#EAE3DD; --td:#410B13; --tm:#54272E;
  --sig:#D8305D;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --line:rgba(163,195,217,.18);
  --line-d:rgba(65,11,19,.14);
}

/* ── scroll-voortgang ──────────────────────────── */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ice),var(--sig));z-index:200;will-change:transform}

/* ── nav ───────────────────────────────────────── */
nav{transition:padding .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
nav.sc{padding-top:.55rem;padding-bottom:.55rem;background:rgba(245,242,239,.92);
  box-shadow:0 1px 24px rgba(43,6,12,.09);border-bottom-color:var(--line-d)}
.nm a,.lang-switch,.lang-switch strong{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em}
.nm a{position:relative;padding:.25rem 0}
.nm a:not(.cta)::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--bx);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--ease)}
.nm a:not(.cta):hover::after{transform:scaleX(1);transform-origin:0 50%}
.nl img{transition:transform .5s var(--ease)}
.nl:hover img{transform:rotate(-8deg) scale(1.08)}

/* ── labels en terugknop in mono ───────────────── */
.tag,.back{font-family:var(--mono);letter-spacing:.22em}
.tag{display:flex;align-items:center;gap:.7rem;font-weight:500;font-size:.68rem}
.tag::before{content:'';width:28px;height:1px;background:currentColor;opacity:.55;flex:none}
.back{letter-spacing:.14em}
.back span{transition:transform .35s var(--ease);display:inline-block}
.back:hover span{transform:translateX(-4px)}

/* ── scroll-reveal ─────────────────────────────── */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
[data-rv].in{opacity:1;transform:none}

/* ── knoppen met vulling ───────────────────────── */
.iiz-btn,.bp,.bs{font-family:var(--mono);font-weight:500;letter-spacing:.12em;position:relative;overflow:hidden;
  isolation:isolate;transition:color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.iiz-btn::before,.bp::before,.bs::before{content:'';position:absolute;inset:0;z-index:-1;transform:scaleX(0);
  transform-origin:0 50%;transition:transform .45s var(--ease);background:var(--bx)}
.iiz-btn:hover::before,.bp:hover::before,.bs:hover::before{transform:scaleX(1)}

/* ── zichtbare focus ───────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--sig);outline-offset:3px}

/* ── eigen cursor ──────────────────────────────── */
.cur{position:fixed;top:0;left:0;width:24px;height:24px;border:1px solid var(--ice);border-radius:50%;
  transform:translate3d(-100px,-100px,0);pointer-events:none;z-index:300;mix-blend-mode:difference;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease);will-change:transform}
.cur.lg{width:54px;height:54px;background:rgba(163,195,217,.14)}
@media(pointer:coarse),(prefers-reduced-motion:reduce){.cur{display:none}}

/* ── mobiel menu ───────────────────────────────── */
.nvt{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:.45rem}
.nvt i{display:block;width:22px;height:1.5px;background:var(--bx);transition:transform .35s var(--ease),opacity .2s}
.nvt[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nvt[aria-expanded="true"] i:nth-child(2){opacity:0}
.nvt[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nvp{position:fixed;top:0;left:0;right:0;z-index:99;background:var(--bx);padding:5.4rem 1.5rem 2rem;
  transform:translateY(-101%);transition:transform .45s var(--ease);display:none;flex-direction:column;
  box-shadow:0 20px 50px rgba(43,6,12,.35)}
.nvp.open{transform:none}
.nvr{border-bottom:1px solid rgba(163,195,217,.14)}
.nvr:last-child{border-bottom:none;margin-top:1.1rem}
.nvp a,.nvp strong{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);text-decoration:none;display:block;padding:.95rem 0}
.nvp .lang-switch-row{display:flex;gap:.6rem;align-items:center;color:rgba(163,195,217,.5)}
.nvp .lang-switch-row a,.nvp .lang-switch-row strong{display:inline;padding:.95rem 0}
.nvp .cta{background:var(--ice);color:var(--bxd)!important;text-align:center;padding:1rem}
@media(max-width:900px){
  .nvt{display:flex}
  .nvp{display:flex}
  nav{z-index:101}
}

@media(prefers-reduced-motion:reduce){
  [data-rv]{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ── toegankelijkheid ───────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--bx);color:#fff;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 1.6rem;text-decoration:none}
.skip:focus{left:1rem;top:1rem}
.nm a[aria-current="page"]{color:var(--bx)}
.nm a[aria-current="page"]:not(.cta)::after{transform:scaleX(1);transform-origin:0 50%}