/* wf-cta: the "Jouw workflow, ons systeem" panel of the journal page, lifted out so every page
   of both worlds can carry it above the footer. Source of truth: products/_wf-nav/wf-cta.css
   (copied per world by inject-cta.py). Inside .wfj/.wfc (journal, cases) the tokens come from
   the page; standalone the .wfx wrapper carries them. The .light variant is world 1. */
.wfx{--cta-edge:inset 0 0 0 1px rgba(255,255,255,.07);--j-e:cubic-bezier(.16,1,.3,1);--j-k:cubic-bezier(.6,.01,.05,.95);--j-gutter:clamp(16px,2.5vw,20px);
  --j-ink:#181818;--j-dark:#050B1C;--j-cream:#fbf8f1;
  --j-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;--j-serif:var(--j-sans);
  position:relative;font-family:var(--j-sans);color:var(--j-ink);-webkit-font-smoothing:antialiased}
.wfx *{box-sizing:border-box}
.wfx a{text-decoration:none;color:inherit}
.wfx h2,.wfx p{margin:0}
.wfx a:focus-visible{outline:2px solid var(--cta-ink,#fff);outline-offset:3px;border-radius:999px}

.wfj-ctaw{margin:0 var(--j-gutter);padding:var(--j-gutter) 0}
/* the dark panel stands on the footer's own ground (webfluencer: wrapper in the footer colour, the panel a shade
   lighter with a hairline), so the last gutter under the panel is midnight, not a light slit above the footer */
.wfj-ctaw:has(>.wfj-cta:not(.light)){margin:0;padding:var(--j-gutter);background:linear-gradient(180deg,transparent 50%,var(--foot-bg,#050B1C) 50%)}
.wfj-cta:not(.light){--cta-bg:#0B1431;--cta-edge:inset 0 0 0 1px rgba(255,255,255,.09)}
.wfj-cta{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:clamp(60px,6vw,100px) var(--j-gutter);min-height:clamp(500px,60vh,800px);overflow-x:clip;overflow-y:visible;cursor:crosshair}
@media (min-width:768px){.wfj-cta{overflow:hidden;background:var(--cta-bg,var(--j-dark));border-radius:20px;box-shadow:var(--cta-edge,none)}}
.wfj-cta-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.wfj-cta-static{position:absolute;inset:0;pointer-events:none;z-index:0}
.wfj-ph{position:absolute;aspect-ratio:3/4;border-radius:12px;overflow:hidden;width:clamp(96px,17vw,240px);transform:rotate(var(--r,0deg))}
.wfj-ph img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.wfj-ph{width:28vw}.wfj-ph:nth-child(n+3){display:none}}
.wfj-trail{position:absolute;width:clamp(120px,13.2vw,190px);aspect-ratio:3/4;border-radius:10px;overflow:hidden;will-change:transform,opacity;left:0;top:0;pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.9);opacity:0;
  transition:transform 1.05s cubic-bezier(.22,1.1,.36,1),opacity 1.05s cubic-bezier(.2,.7,.2,1)}
.wfj-trail.on{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}
.wfj-trail.out{opacity:0;transform:translate(-50%,calc(-50% - 16px)) rotate(var(--r,0deg)) scale(.95);transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s cubic-bezier(.2,.7,.2,1)}
.wfj-trail img{width:100%;height:100%;object-fit:cover;display:block}
.wfj-cta-copy{position:relative;z-index:10;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;mix-blend-mode:var(--cta-blend,difference)}
.wfj-cta h2{font-family:var(--j-serif);font-weight:600;color:var(--cta-ink,#fff);line-height:1.05;letter-spacing:-.04em;font-size:clamp(36px,5.8vw,100px)}
.wfj-cta h2 .l{display:block}
.wfj-cta h2 .w{display:inline-block;overflow:hidden;margin-right:.25em}
.wfj-cta h2 .w:last-child{margin-right:0}
.wfj-cta h2 .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--j-k);transition-delay:var(--d,0s);will-change:transform}
.wfj-cta.in h2 .w>span{transform:translateY(0)}
.wfj-cta p{margin-top:clamp(16px,2vw,32px);color:var(--cta-ink,#fff);line-height:1.6;max-width:460px;font-size:clamp(15px,1.15vw,19px);font-weight:400;
  opacity:0;transform:translate3d(0,20px,0);transition:opacity .9s var(--j-k) .6s,transform .9s var(--j-k) .6s}
.wfj-cta.in p{opacity:1;transform:none}
.wfj-cta-btnw{position:relative;z-index:20;display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px)}
.wfj-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;overflow:hidden;
  padding:14px 64px 14px 36px;font-size:clamp(17px,1.4vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.5;
  -webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  opacity:0;transform:translate3d(0,16px,0);transition:opacity .8s var(--j-k) .75s,transform .8s var(--j-k) .75s,background-color .5s ease-out,border-color .5s ease-out,color .5s ease-out,box-shadow .5s ease-out}
.wfj-cta.in .wfj-btn{opacity:1;transform:none}
.wfj-btn-l{position:relative;z-index:1}
.wfj-btn-r{position:absolute;right:5px;top:50%;transform:translateY(-50%);z-index:1;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid transparent;
  transition:background-color .5s,border-color .5s,transform .5s}
.wfj-btn:hover .wfj-btn-r{transform:translateY(-50%) scale(1.05)}
.wfj-btn-r svg{width:12px;height:12px;display:block;transition:color .5s,transform .5s}
.wfj-btn:hover .wfj-btn-r svg{transform:translate(1px,-1px)}
/* desktop: the dark-glass pill on the dark panel */
.wfj-btn.desk{display:none;background:rgba(5,11,28,.4);border:1px solid rgba(255,255,255,.3);color:#fbf8f1;
  box-shadow:0 8px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -.5px 0 rgba(0,0,0,.18)}
.wfj-btn.desk .wfj-btn-r{background:#fbf8f1;border-color:#fbf8f1;color:#181818}
.wfj-btn.desk:hover{background:rgba(251,248,241,.6);border-color:rgba(241,236,224,.55);color:#181818;box-shadow:0 12px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.5)}
.wfj-btn.desk:hover .wfj-btn-r{background:#181818;border-color:#181818;color:#fbf8f1}
/* phone: the light-glass pill on the page background */
.wfj-btn.mob{display:inline-flex;padding:9px 55px 9px 28px;font-size:16px;font-weight:500;letter-spacing:-.06em;background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.15);color:#181818;
  box-shadow:0 0 0 1px rgba(0,0,0,.04),0 4px 24px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.06)}
.wfj-btn.mob .wfj-btn-r{width:32px;height:32px;right:3px;background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.2);color:#181818}
@media (min-width:768px){.wfj-btn.desk{display:inline-flex}.wfj-btn.mob{display:none}}
.wfj-hint{display:none;position:relative;z-index:20;justify-content:center;margin-top:32px;pointer-events:none;
  opacity:0;transform:translate3d(0,-4px,0);transition:opacity .7s var(--j-k) 1s,transform .7s var(--j-k) 1s}
@media (min-width:768px){.wfj-hint{display:flex}}
.wfj-cta.in .wfj-hint{opacity:1;transform:none}
.wfj-hint span{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cta-hint,rgba(255,255,255,.55))}
.wfj-hint i{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;font-style:normal}
.wfj-hint i::before,.wfj-hint i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid currentColor}
.wfj-hint i::before{opacity:.4;animation:wfj-ping 2.5s cubic-bezier(0,0,.2,1) infinite}
.wfj-hint i::after{opacity:.5}
.wfj-hint svg{position:relative;width:12px;height:12px}
@keyframes wfj-ping{75%,100%{transform:scale(2);opacity:0}}


/* ---------- light variant (world 1): a warm off-white panel with dark type ------ */
.wfj-cta.light{--cta-bg:#F2F1EC;--cta-ink:#181818;--cta-hint:rgba(0,0,0,.62);--cta-blend:normal;--cta-edge:inset 0 0 0 1px rgba(0,0,0,.05)}
.wfj-cta.light .wfj-btn.desk{background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.14);color:#181818;
  box-shadow:0 8px 28px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.8)}
.wfj-cta.light .wfj-btn.desk .wfj-btn-r{background:#181818;border-color:#181818;color:#fbf8f1}
.wfj-cta.light .wfj-btn.desk:hover{background:#181818;border-color:#181818;color:#fbf8f1;box-shadow:0 12px 34px rgba(0,0,0,.18)}
.wfj-cta.light .wfj-btn.desk:hover .wfj-btn-r{background:#fbf8f1;border-color:#fbf8f1;color:#181818}
/* standalone (every page except journal and cases): the panel keeps its own ground on a phone
   too, so the type never depends on what the page happens to be at its bottom */
@media (max-width:767px){.wfx .wfj-cta{background:var(--cta-bg,var(--j-dark));border-radius:16px;box-shadow:var(--cta-edge,none);overflow:hidden;
  padding-top:calc(37vw + 36px);padding-bottom:56px;min-height:0;justify-content:flex-start}}   /* the two corner photos (28vw wide, 3:4) stay above the type */
.wfx .wfj-cta:not(.light) .wfj-btn.mob{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.wfx .wfj-cta:not(.light) .wfj-btn.mob .wfj-btn-r{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff}
/* journal and cases sit on a light page: on a phone the panel has no ground there, the type is dark */
@media (max-width:767px){.wfj .wfj-cta:not(.light) h2,.wfj .wfj-cta:not(.light) p,.wfc .wfj-cta:not(.light) h2,.wfc .wfj-cta:not(.light) p{color:var(--j-ink)}}
@media (prefers-reduced-motion:reduce){
  .wfj-cta h2 .w>span,.wfj-cta p,.wfj-btn,.wfj-hint{transition:none}
  .wfj-cta h2 .w>span{transform:none}.wfj-cta p,.wfj-btn,.wfj-hint{opacity:1;transform:none}
  .wfj-hint i::before{animation:none}
}
@media (scripting:none){.wfj-cta h2 .w>span{transform:none}.wfj-cta p,.wfj-btn,.wfj-hint{opacity:1;transform:none}}