/* ==========================================================================
   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 ae-teken aan de trap (H-05) ----------
     Twee tekens rond dezelfde rand; de trap is het gereedschap. Grijs ligt op
     het papier en wordt door de onderste trede afgesneden. Groen ligt achter
     het papier en wordt omhooggeduwd tot in het groene slotblok.

     Het groene teken toont alleen binnen .slot: dat vlak (slotblok plus
     voettekst, gezet door site.js) snijdt af wat er aan de bovenkant buiten
     valt, anders loopt het teken op een korte pagina over de sectie erboven
     heen. Zonder JS of zonder slotblok blijft het teken weg; dat is de nette
     terugval. */
  .slot{position:relative;overflow:hidden;}
.ae-groen,.ft-grijs{position:absolute;pointer-events:none;z-index:0;}
.ae-groen svg,.ft-grijs svg{display:block;width:100%;height:auto;}
.ft-grijs{left:-3%;bottom:-14%;width:min(46%,560px);color:var(--ink);opacity:.07;}
.ae-groen{display:none;right:-16%;top:calc(var(--s) * 3);transform:translateY(-72%);
    width:min(92%,1220px);color:var(--accent);opacity:.20;}
.slot .ae-groen{display:block;}
@media(max-width:820px){.ae-groen{right:-40%;width:158%;transform:translateY(-68%);}}
/* 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.

     Het vlak begint op var(--s), niet op nul: zo blijft er over de volle breedte
     groen boven (en onder) staan, de band waar het ae-teken doorheen komt.

     Bewuste afwijking van het prototype: daar is de trap drie treden diep (tot
     3 maal --s) met een padding van 3 maal --s, en dat maakt de voettekst
     68 tot 108 pixel hoger. Hier vervalt in plaats daarvan de ondiepste trede
     (de stapjes op 26% boven en 44% onder), zodat de band past binnen dezelfde
     2 maal --s. De diepe randen liggen exact waar ze lagen, dus de padding en
     de hoogte veranderen niet en er wordt geen tekst geraakt. Het prototype
     doet op mobiel hetzelfde: twee treden binnen dezelfde diepte. */
  .ft-plane{position:relative;z-index:1;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 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)),
      0 calc(100% - var(--s)));}
.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-deep);}
.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-deep);}
.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-deep);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;}
  /* Het prototype op mobiel: band plus één trede, met de bijbehorende padding. */
  .ft-plane{clip-path:polygon(0 var(--s),50% var(--s),calc(50% + var(--s)) calc(var(--s) * 2),100% calc(var(--s) * 2),
      100% calc(100% - var(--s) * 2),calc(50% + var(--s)) calc(100% - var(--s) * 2),50% calc(100% - var(--s)),0 calc(100% - var(--s)));
      padding-top:calc(var(--s) * 2 + 24px);padding-bottom:calc(var(--s) * 2 + 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;}
}