/* ==========================================================================
   wf-footer: the site footer, a 1:1 port of the webfluencer.nl footer
   (Tailwind v4 utilities + inline styles, read from the served page).
   Every size, colour, easing and duration below is the original value;
   only the content and the two palettes are ours.
   Shared between world 1 (data-wff-theme="light": white, black type) and
   world 2 (data-wff-theme="dark": AI LAB midnight, white type).
   Source of truth: products/_wf-nav/. Do not edit the copies in world1/ or noveq/.
   ========================================================================== */

.wff{--wff-e:cubic-bezier(.16,1,.3,1);--wff-k:cubic-bezier(.76,0,.24,1);
  --wff-gutter:clamp(16px,2.5vw,20px);            /* px-fluid-gutter */
  --wff-section:clamp(48px,6vw,120px);            /* pt-fluid-section */
  --wff-gapx:clamp(24px,3vw,48px);                /* sm:gap-x-fluid-gap-xl */
  --wff-font:"Switzer","Switzer Fallback",ui-sans-serif,system-ui,sans-serif;
  --wff-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  position:relative;overflow:hidden;background:var(--wff-bg);color:var(--wff-fg);
  font-family:var(--wff-font);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.wff[data-wff-theme="light"]{--wff-bg:#FFFFFF;--wff-fg:#181818;--wff-soft:rgba(24,24,24,.72);--wff-muted:rgba(24,24,24,.65);--wff-line:rgba(24,24,24,.14)}
.wff[data-wff-theme="dark"]{--wff-bg:#050B1C;--wff-fg:#FFFFFF;--wff-soft:rgba(255,255,255,.72);--wff-muted:rgba(255,255,255,.55);--wff-line:rgba(255,255,255,.14)}
.wff *{box-sizing:border-box}
.wff a{text-decoration:none;color:inherit}
.wff button{font:inherit;background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer}
.wff p{margin:0}

/* ---------- layout ---------------------------------------------------------- */
.wff-in{margin:0 auto;max-width:1900px;padding:var(--wff-section) var(--wff-gutter) 0}
/* the whole block rises into view once (opacity + transform, .85s, the site's "c" curve) */
.wff-reveal{opacity:0;transform:translateY(24px);transition:opacity .85s var(--wff-e),transform .85s var(--wff-e)}
.wff.is-in .wff-reveal{opacity:1;transform:none}
.wff-grid{display:grid;grid-template-columns:1fr;row-gap:48px;column-gap:0}
@media (min-width:640px){.wff-grid{grid-template-columns:1fr 1fr;column-gap:var(--wff-gapx)}}
@media (min-width:1280px){
  .wff-grid{grid-template-columns:1fr 1fr .8fr 1.3fr;column-gap:0}
  .wff-col{border-left:1px solid var(--wff-line);padding-left:32px}
  .wff-col:first-child{border-left:0;padding-left:0;padding-right:32px}
}
.wff-col{display:flex;flex-direction:column;gap:24px;min-width:0}
.wff-head{display:flex;align-items:baseline;gap:10px}
.wff-num{font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(9px,.62vw,11px);color:var(--wff-fg)}
.wff-lab{font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:clamp(10px,.57vw,11px);color:var(--wff-muted)}

/* ---------- 01 contact: the address lifts letter by letter, the line draws under it ---- */
.wff-stack{display:flex;flex-direction:column;gap:12px}
.wff-mail{position:relative;display:inline-flex;width:fit-content;max-width:100%;flex-wrap:wrap;font-weight:600;
  font-size:clamp(17px,1.5vw,26px);letter-spacing:-.04em;line-height:1.25;color:var(--wff-fg)}
.wff-mail>span{display:inline-block;transition:transform .5s var(--wff-e),color .5s var(--wff-e);transition-delay:var(--d,0ms)}
.wff-mail:hover>span{transform:translateY(-.09em)}
.wff-mail i{position:absolute;left:0;bottom:-4px;height:1px;width:100%;background:var(--wff-line)}
.wff-mail i+i{background:var(--wff-fg);transform:scaleX(0);transform-origin:left;transition:transform .75s var(--wff-e)}
.wff-mail:hover i+i{transform:scaleX(1)}
.wff-soft{width:fit-content;font-weight:500;letter-spacing:-.02em;font-size:clamp(14px,1.05vw,17px);color:var(--wff-soft);transition:color .3s}
a.wff-soft:hover{color:var(--wff-fg)}
.wff-list{display:flex;flex-direction:column}

/* rolling link: two stacked labels in a clipped box, the arrow slides in from the left */
.wff-roll{display:flex;width:fit-content;align-items:center;gap:8px;color:var(--wff-soft)}
.wff-roll>span:first-child{position:relative;display:block;overflow:hidden}
.wff-roll>span:first-child>span{display:block;font-weight:500;letter-spacing:-.02em;line-height:1.55;font-size:clamp(14px,1.05vw,17px);
  transition:transform .55s var(--wff-k)}
.wff-roll>span:first-child>span+span{position:absolute;inset:0;transform:translateY(100%);color:var(--wff-fg)}
.wff-roll:hover>span:first-child>span:first-child{transform:translateY(-100%)}
.wff-roll:hover>span:first-child>span+span{transform:translateY(0)}
.wff-roll>.wff-arr{display:inline-flex;color:var(--wff-fg);opacity:0;transform:translateX(-6px);transition:transform .5s var(--wff-e),opacity .5s var(--wff-e)}
.wff-roll:hover>.wff-arr{opacity:1;transform:none}
.wff-roll svg{display:block}
/* the navigation column uses the bigger size */
.wff-nav .wff-roll>span:first-child>span{font-weight:600;letter-spacing:-.04em;font-size:clamp(16px,1.35vw,23px)}
.wff-nav .wff-roll .wff-arr svg{width:14px;height:14px}
.wff-list .wff-roll .wff-arr svg{width:12px;height:12px}
.wff-static{display:flex;width:fit-content;align-items:center;gap:8px;color:var(--wff-soft);font-weight:500;letter-spacing:-.02em;line-height:1.55;font-size:clamp(14px,1.05vw,17px)}

/* ---------- 02 studio blocks ---------------------------------------------------- */
.wff-blocks{display:flex;flex-direction:column;gap:32px}
.wff-block{display:flex;flex-direction:column;gap:8px}
.wff-block-t{font-weight:600;letter-spacing:-.03em;font-size:clamp(15px,1.15vw,19px);color:var(--wff-fg)}
.wff-block-t.wff-roll>span:first-child>span{font-weight:600;letter-spacing:-.03em;font-size:clamp(15px,1.15vw,19px)}
.wff-lines{display:flex;flex-direction:column;color:var(--wff-soft);font-size:clamp(14px,1.05vw,17px)}
.wff-lines span{font-weight:500;line-height:1.6;letter-spacing:-.02em}

/* ---------- 04 newsletter ------------------------------------------------------- */
.wff-copy{max-width:380px;line-height:1.6;font-weight:400;font-size:clamp(14px,1.05vw,17px);color:var(--wff-soft)}
.wff-form{display:flex;flex-direction:column;gap:16px}
.wff-field{position:relative;border-bottom:1px solid var(--wff-line);transition:border-color .3s}
.wff-field:focus-within{border-color:var(--wff-fg)}
.wff-field input{width:100%;background:transparent;border:0;padding:14px 56px 14px 0;font:inherit;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(15px,1.15vw,19px);color:var(--wff-fg);outline:none;border-radius:0}
.wff-field input::placeholder{color:var(--wff-muted)}
.wff-field input:disabled{opacity:.6}
/* typing and browser autofill keep the field in the footer's own colour: Chrome paints
   autofilled fields light blue, and the site's generic focus ring squared the field off */
.wff-field input:-webkit-autofill,.wff-field input:-webkit-autofill:hover,.wff-field input:-webkit-autofill:focus,.wff-field input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--wff-bg) inset;box-shadow:0 0 0 1000px var(--wff-bg) inset;-webkit-text-fill-color:var(--wff-fg);caret-color:var(--wff-fg);
  border-radius:0;transition:background-color 99999s ease-in-out 0s}
.wff-field input:autofill{background:var(--wff-bg);color:var(--wff-fg)}
html .wff-field input:focus,html .wff-field input:focus-visible{outline:none;box-shadow:none;background:transparent;border-radius:0}
.wff-field input::selection{background:var(--wff-fg);color:var(--wff-bg)}
.wff-send{position:absolute;right:0;top:50%;width:40px;height:40px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:999px;border:1px solid var(--wff-line);color:var(--wff-fg);transition:background-color .5s var(--wff-e),color .5s var(--wff-e),border-color .5s var(--wff-e)}
.wff-send:hover{border-color:transparent;background:var(--wff-fg);color:var(--wff-bg)}
.wff-send svg{width:14px;height:14px;display:block}
.wff-agree{display:flex;align-items:flex-start;gap:8px;font-size:clamp(11px,.8vw,12.5px);line-height:1.5;color:var(--wff-muted);font-weight:500;letter-spacing:-.01em;cursor:pointer}
.wff-agree input{margin:2px 0 0;accent-color:var(--wff-fg);flex:none}
.wff-agree a{color:var(--wff-soft);text-decoration:underline;text-underline-offset:2px;transition:color .3s}
.wff-agree a:hover{color:var(--wff-fg)}
/* status line the newsletter script appends after the form (both worlds' scripts) */
.wff .ft-note,.wff .ft2-note{margin-top:10px;font-size:clamp(11px,.8vw,12.5px);line-height:1.5;color:var(--wff-soft)}
.wff .ft-note:empty,.wff .ft2-note:empty{display:none}
.wff .ft-note.bad,.wff .ft2-note.bad{color:var(--wff-fg)}

/* ---------- the wordmark ------------------------------------------------------- */
.wff-wm{margin-top:56px}
@media (min-width:768px){.wff-wm{margin-top:80px}}
.wff-wm-clip{overflow:hidden}
.wff-wm svg{display:block;width:100%;height:auto;overflow:visible;transform:translateY(0);transition:transform .85s var(--wff-e)}
.wff:not(.is-in) .wff-wm svg{transform:translateY(18%)}
.wff-wm text{font-family:var(--wff-font);font-weight:600;letter-spacing:-.04em;fill:var(--wff-fg)}
.wff-wm text tspan{fill:var(--wff-dot,#FF5A1F)}
.wff-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- bottom bar --------------------------------------------------------- */
.wff-bar{border-top:1px solid var(--wff-line)}
.wff-bar-in{margin:0 auto;max-width:1900px;display:flex;flex-direction:column;gap:16px;padding:20px var(--wff-gutter)}
@media (min-width:768px){.wff-bar-in{flex-direction:row;align-items:center;justify-content:space-between}
  /* both worlds park a fixed concierge launcher in the bottom-right corner; keep "back to top" clear of it */
  .wff-bar-r{padding-right:72px}}
.wff-bar-l,.wff-bar-r{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:8px}
.wff-bar-l>*{font-weight:500;letter-spacing:-.02em;font-size:clamp(9px,.68vw,12px);color:var(--wff-muted);transition:color .3s}
.wff-bar-l a:hover,.wff-bar-l button:hover{color:var(--wff-fg)}
.wff-clock{font-family:var(--wff-mono);font-variant-numeric:tabular-nums;font-size:clamp(9px,.68vw,12px);color:var(--wff-muted)}
.wff-top{display:flex;align-items:center;gap:10px;color:var(--wff-muted)}
.wff-top-l{font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(9px,.68vw,11px);transition:color .3s}
.wff-top:hover .wff-top-l{color:var(--wff-fg)}
.wff-top-r{position:relative;display:flex;width:28px;height:28px;align-items:center;justify-content:center;overflow:hidden;border-radius:999px;border:1px solid var(--wff-line);transition:border-color .5s var(--wff-e)}
.wff-top-r span{position:absolute;display:flex;transition:transform .5s var(--wff-k)}
.wff-top-r span+span{transform:translateY(28px);color:var(--wff-fg)}
.wff-top:hover .wff-top-r span:first-child{transform:translateY(-28px)}
.wff-top:hover .wff-top-r span+span{transform:translateY(0)}
.wff-top-r svg{width:11px;height:11px;display:block}

/* ---------- a11y + motion ------------------------------------------------------- */
.wff a:focus-visible,.wff button:focus-visible,.wff input:focus-visible{outline:2px solid var(--wff-fg);outline-offset:3px;border-radius:2px}
.wff-send:focus-visible,.wff-top-r:focus-visible{border-radius:999px}
@media (prefers-reduced-motion:reduce){
  .wff-reveal,.wff-wm svg,.wff-mail>span,.wff-mail i,.wff-roll>span:first-child>span,.wff-roll>.wff-arr,.wff-top-r span{transition:none}
  .wff-reveal{opacity:1;transform:none}
  .wff:not(.is-in) .wff-wm svg{transform:none}
}