/* ==========================================================================
   DECLAER — afsluitende CTA + footer
   Overgezet uit Declaer-ce-markering.html, blok "AFSLUITING".
   De footer is op elke pagina identiek; alleen de drie tekstregels in de CTA
   wisselen, en die staan in het blok final-cta.
   ========================================================================== */

/* ---------- footer ----------
     Opbouw: een licht vlak over de VOLLE breedte als bovenband, met een getrapte
     onderrand die in drie treden afdaalt. Daaronder het donkere deel met de
     navigatie. De trap is dus de grens tussen licht en donker, niet een los blok. */
  /* zelfde donker als de CTA erboven, zodat de trap een uitsnede in EEN vlak is
     in plaats van een grens tussen twee net verschillende zwarten */
  .ft{--s:clamp(34px,3.6vw,54px);background:var(--ink);color:var(--muted-on-ink);position:relative;}
/* Het vlak is een wig: de bovenrand daalt naar rechts, de onderrand stijgt naar rechts.
     Twee tegengestelde trappen dus, geen kopie van dezelfde vorm. De bovenrand is
     tegelijk de onderrand van de CTA erboven. */
  .ft-plane{background:var(--paper);color:var(--ink);
    padding:calc(var(--s) * 2 + clamp(18px,2vw,30px)) 0 calc(var(--s) * 2 + clamp(20px,2.4vw,34px));
    clip-path:polygon(
      0 0,
      26% 0,
      calc(26% + var(--s)) var(--s),
      58% var(--s),
      calc(58% + var(--s)) calc(var(--s) * 2),
      100% calc(var(--s) * 2),
      100% calc(100% - var(--s) * 2),
      calc(74% + var(--s)) calc(100% - var(--s) * 2),
      74% calc(100% - var(--s)),
      calc(44% + var(--s)) calc(100% - var(--s)),
      44% 100%,
      0 100%);}
.ft-plane-in{display:grid;grid-template-columns:1.15fr 1.05fr .95fr 1.05fr;gap:clamp(22px,3vw,44px);align-items:start;}
.ft-mark{align-self:end;}
.ft-plane .brand{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,64px);
    letter-spacing:.02em;line-height:1;color:var(--ink);}
.ft-claim{font-family:var(--body);font-style:italic;font-size:13.5px;color:var(--accent);margin:10px 0 0;}
.ft-blurb{font-size:14px;line-height:1.7;color:var(--ink);margin:0;max-width:34ch;}
.ft-lines{font-family:var(--mono);font-size:11.5px;line-height:2.1;letter-spacing:.03em;color:var(--muted);}
.ft .ft-plane a{display:inline;font-size:inherit;font-family:inherit;letter-spacing:inherit;
    color:var(--ink);padding:0;}
.ft .ft-plane a:hover{color:var(--accent);}
.ft-ent{display:flex;flex-wrap:wrap;gap:16px 30px;
    font-family:var(--mono);font-size:11px;line-height:1.95;letter-spacing:.03em;color:var(--muted);}
/* adres is een routelink: onderstreping en pijl verschijnen bij hover */
  .ft-ent a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
    transition:color .15s ease,text-decoration-color .15s ease;}
.ft-ent a:hover,.ft-ent a:focus-visible{color:var(--accent);text-decoration-color:currentColor;}
.ft-ent .rt{opacity:.5;}
.ft-ent a:hover .rt{opacity:1;}
.ft-ent strong{display:block;color:var(--ink);font-weight:400;letter-spacing:.12em;
    text-transform:uppercase;font-size:10px;margin-bottom:4px;}
.ft-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin:0 0 10px;}
.ft-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);
    padding:clamp(34px,4vw,52px) 0 clamp(30px,3.4vw,44px);}
.ft h3{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--on-ink);margin:0 0 14px;font-weight:400;}
.ft a{display:block;color:var(--muted-on-ink);font-size:14.5px;padding:5px 0;transition:color .15s ease;}
.ft a:hover{color:var(--accent-2);}
.ft-bar{border-top:1px solid rgba(255,255,255,.08);padding:18px 0 24px;display:flex;
    justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;}
.ft .ft-bar a{display:inline;font-size:inherit;letter-spacing:inherit;color:var(--muted-on-ink);padding:0;}
.ft-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;}
.ft .ft-legal a{display:inline-flex;align-items:center;min-height:24px;}
.ft .ft-bar a.ft-top{display:inline-flex;align-items:center;min-height:24px;gap:8px;white-space:nowrap;color:var(--accent-2);}
.ft-top svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:1000px){
  .ft-plane-in{grid-template-columns:1fr 1fr;gap:30px;}
  .ft-nav{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  .ft-plane-in,.ft-nav{grid-template-columns:1fr;}
  .ft-plane{clip-path:polygon(0 0,50% 0,calc(50% + var(--s)) var(--s),100% var(--s),
      100% calc(100% - var(--s)),calc(50% + var(--s)) calc(100% - var(--s)),50% 100%,0 100%);
      padding-top:calc(var(--s) + 24px);padding-bottom:calc(var(--s) + 24px);}
}
/* ---------- korrel over de hele pagina ---------- */
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.62;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");}

/* ---------- zegel: leesvoortgang + terug naar boven ---------- */
/* ---------- scroll-linked "verklaard" seal (progress + back-to-top) ---------- */
  .seal{position:fixed;left:22px;bottom:22px;z-index:96;display:block;background:none;border:0;padding:0;
    cursor:pointer;opacity:0;transform:translateY(10px) scale(.94);pointer-events:none;
    transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);}
.seal.show{opacity:1;transform:none;pointer-events:auto;}
.seal-ring{position:relative;width:62px;height:62px;border-radius:50%;
    background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 30%,transparent),inset 0 0 0 1px rgba(255,255,255,.09);
    display:grid;place-items:center;transition:box-shadow .3s ease,transform .5s cubic-bezier(.2,.7,.2,1);}
.seal-ring svg{position:absolute;inset:0;width:62px;height:62px;transform:rotate(-90deg);}
.seal-track{fill:none;stroke:rgba(255,255,255,.13);stroke-width:5;}
.seal-prog{fill:none;stroke:var(--accent-2);stroke-width:5;stroke-linecap:round;
    stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset .1s linear;}
.seal-ck{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:55;stroke-dashoffset:55;transform:rotate(90deg);transform-origin:50px 50px;
    transition:stroke-dashoffset .1s linear;}
.seal:hover .seal-ring{transform:translateY(-2px);
    box-shadow:0 14px 30px color-mix(in srgb,var(--ink) 36%,transparent),inset 0 0 0 1px rgba(255,255,255,.14);}
.seal:focus-visible{outline:none;}
.seal:focus-visible .seal-ring{box-shadow:0 0 0 3px var(--accent),0 10px 26px color-mix(in srgb,var(--ink) 30%,transparent);}
.seal.done .seal-ring{box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 34%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 40%,transparent),0 0 0 6px color-mix(in srgb,var(--accent) 10%,transparent);
    animation:sealpulse .55s cubic-bezier(.2,.7,.2,1);}
@media(max-width:640px){
  .seal{left:16px;bottom:16px;}
  .seal-ring,.seal-ring svg{width:52px;height:52px;}
}
@media(prefers-reduced-motion:reduce){
  .seal{opacity:1 !important;transform:none !important;pointer-events:auto;}
  .seal-prog,.seal-ck{transition:none;}
  .seal.done .seal-ring{animation:none;}
}