/* uitzendbureau-footer 1.0.0 · 21st.dev @kedhareswer/string-tie-footer, vanilla nagebouwd.
   Maten en timing uit de bron: --r clamp(44px, 7cqw, 92px) als knoopmaat, --R clamp(36px, 10cqw, 150px) als flaphoek,
   flap clip-path .85s cubic-bezier(.22,1,.36,1), letters translateY(105%) naar 0 in 1,1 s met 0,045 s per letter,
   tapes clip-path .75s na .75 s en .95 s, contacten en groet 0,9 s na 0,5 s en 0,65 s, briefje .9s na .3 s.
   Kleuren: flap --m-bg, lichaam --m-ink, knopen --m-primary, koord een lichte tint van --m-line. */
.msm-uitzendbureau-footer {
  --uf-paper: var(--m-bg, #f0f3f0);
  --uf-ink: var(--m-ink, #17262d);
  --uf-body-ink: color-mix(in srgb, var(--m-bg, #f0f3f0) 92%, var(--m-ink, #17262d));
  --uf-accent: var(--m-primary, #e26c35);
  --uf-cord: color-mix(in srgb, var(--m-line, #d3dbd8) 80%, #fff);
  --uf-note: color-mix(in srgb, var(--m-surface, #ffffff) 90%, var(--m-primary, #e26c35));
  --uf-display: var(--m-font-display, 'Archivo', ui-sans-serif, system-ui, sans-serif);
  --uf-sans: var(--m-font-body, 'Public Sans', ui-sans-serif, system-ui, sans-serif);
  --uf-script: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', 'Apple Chancery', cursive;
  --uf-grain: .35;
  --uf-h: max(560px, min(100svh, 860px));
  --uf-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
  background: var(--uf-ink);
  color: var(--uf-ink);
  font-family: var(--uf-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.msm-uitzendbureau-footer *,
.msm-uitzendbureau-footer *::before,
.msm-uitzendbureau-footer *::after { box-sizing: border-box; }
.msm-uitzendbureau-footer button { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.msm-uitzendbureau-footer a { color: inherit; text-decoration: none; }
.msm-uitzendbureau-footer h2,
.msm-uitzendbureau-footer p { margin: 0; }
.msm-uitzendbureau-footer :focus-visible { outline: 2px solid var(--uf-accent); outline-offset: 4px; border-radius: 4px; }
.msm-uitzendbureau-footer .uf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.msm-uitzendbureau-footer .uf-frame { --r: clamp(44px, 7cqw, 92px); --fold: 0px; --R: clamp(36px, 10cqw, 150px); position: relative; display: flex; flex-direction: column; min-height: var(--uf-h); }
.msm-uitzendbureau-footer.is-open .uf-frame { --fold: calc(var(--r) * 2.46); }

/* De flap. */
.msm-uitzendbureau-footer .uf-flapwrap { position: relative; z-index: 3; pointer-events: none; filter: drop-shadow(0 calc(var(--r) * .12) calc(var(--r) * .2) rgba(0, 0, 0, .28)); }
.msm-uitzendbureau-footer .uf-flap { position: relative; pointer-events: auto; background: var(--uf-paper); color: var(--uf-ink); clip-path: inset(0 0 var(--fold) 0 round 0 0 var(--R) var(--R)); transition: clip-path .85s var(--uf-ease); padding: clamp(26px, 4.4cqw, 64px) clamp(16px, 6cqw, 110px) 0; }
.msm-uitzendbureau-footer .uf-flap::before,
.msm-uitzendbureau-footer .uf-panel::before,
.msm-uitzendbureau-footer .uf-letter::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px;
  mix-blend-mode: soft-light;
}
.msm-uitzendbureau-footer .uf-flap::before { opacity: calc(var(--uf-grain) * .9); }
.msm-uitzendbureau-footer .uf-panel::before { opacity: calc(var(--uf-grain) * .7); }
.msm-uitzendbureau-footer .uf-letter::after { opacity: calc(var(--uf-grain) * .8); }
.msm-uitzendbureau-footer .uf-crease { position: absolute; left: 0; right: 0; bottom: var(--fold); height: calc(var(--r) * .5); pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .09), transparent); opacity: 0; transition: opacity .5s, bottom .85s var(--uf-ease); }
.msm-uitzendbureau-footer.is-open .uf-crease { opacity: 1; }
.msm-uitzendbureau-footer .uf-meta { position: relative; display: flex; justify-content: space-between; gap: 12px; font-size: clamp(11px, 1.45cqw, 19px); letter-spacing: .01em; }
.msm-uitzendbureau-footer.is-js .uf-meta span { opacity: 0; transform: translateY(-6px); transition: opacity .8s, transform .8s var(--uf-ease); }
.msm-uitzendbureau-footer .uf-meta span:nth-child(2) { transition-delay: .08s; }
.msm-uitzendbureau-footer .uf-meta span:nth-child(3) { transition-delay: .16s; }
.msm-uitzendbureau-footer.is-in .uf-meta span { opacity: 1; transform: none; }
.msm-uitzendbureau-footer .uf-head { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: clamp(36px, 7.5cqw, 120px); }
.msm-uitzendbureau-footer .uf-title { font-family: var(--uf-display); font-weight: 600; font-size: clamp(44px, 10.5cqw, 160px); line-height: .9; letter-spacing: -.045em; white-space: nowrap; text-align: center; clip-path: inset(-.25em -.4em -.02em -.4em); }
.msm-uitzendbureau-footer .uf-title em { font-style: italic; font-weight: 500; letter-spacing: -.04em; margin-left: .06em; }
.msm-uitzendbureau-footer .uf-ch { display: inline-block; }
.msm-uitzendbureau-footer.is-js .uf-ch { transform: translateY(105%); transition: transform 1.1s var(--uf-ease); transition-delay: calc(.15s + var(--i) * .045s); }
.msm-uitzendbureau-footer.is-in .uf-ch { transform: none; }
.msm-uitzendbureau-footer.is-in .uf-title:hover .uf-ch { transition: transform .5s var(--uf-ease); }
.msm-uitzendbureau-footer.is-in .uf-title .uf-ch:hover { transform: translateY(-.045em); }
.msm-uitzendbureau-footer .uf-tapes { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: clamp(10px, 1.6cqw, 22px); font-family: var(--uf-display); font-size: clamp(18px, 3.4cqw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.msm-uitzendbureau-footer .uf-tape { position: relative; display: inline-block; padding: .12em .42em .16em; white-space: nowrap; transition: clip-path .75s var(--uf-ease), transform .5s var(--uf-ease); }
.msm-uitzendbureau-footer.is-js .uf-tape { clip-path: inset(-20% 100% -20% 0); }
.msm-uitzendbureau-footer .uf-tape::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tb); clip-path: polygon(0 4%, 1.2% 0, 98.6% 3%, 100% 0, 99.2% 30%, 100% 58%, 98.8% 100%, 1.6% 97%, 0 100%, .9% 64%, 0 34%); transition: filter .4s; }
.msm-uitzendbureau-footer .uf-tape span { position: relative; color: var(--tc); }
.msm-uitzendbureau-footer .uf-tape-a { --tb: var(--uf-accent); --tc: #fff; transform: rotate(-1.6deg) translateX(-.2em); transition-delay: .75s, 0s; }
.msm-uitzendbureau-footer .uf-tape-b { --tb: var(--uf-ink); --tc: var(--uf-paper); margin-top: .06em; transform: rotate(.5deg) translateX(.12em); transition-delay: .95s, 0s; }
.msm-uitzendbureau-footer.is-in .uf-tape { clip-path: inset(-20% -2% -20% -2%); }
.msm-uitzendbureau-footer .uf-tape:hover { transition-delay: 0s, 0s; }
.msm-uitzendbureau-footer .uf-tape-a:hover { transform: rotate(-3deg) translate(-.24em, -.06em); }
.msm-uitzendbureau-footer .uf-tape-b:hover { transform: rotate(1.6deg) translate(.16em, -.05em); }
.msm-uitzendbureau-footer .uf-tape:hover::before { filter: drop-shadow(0 .12em .1em rgba(0, 0, 0, .25)); }
.msm-uitzendbureau-footer .uf-dock { position: relative; height: calc(var(--r) * 2.62); display: flex; justify-content: center; align-items: flex-end; padding-bottom: calc(var(--r) * .22); }

/* De knopen. */
.msm-uitzendbureau-footer .uf-btn { position: relative; display: block; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; filter: drop-shadow(0 calc(var(--r) * .07) calc(var(--r) * .09) rgba(0, 0, 0, .32)) drop-shadow(0 1px 1px rgba(0, 0, 0, .28)); transition: transform .45s var(--uf-ease), filter .45s var(--uf-ease); -webkit-tap-highlight-color: transparent; }
.msm-uitzendbureau-footer .uf-btn:hover { transform: translateY(-3px) scale(1.025); filter: drop-shadow(0 calc(var(--r) * .14) calc(var(--r) * .16) rgba(0, 0, 0, .3)) drop-shadow(0 1px 1px rgba(0, 0, 0, .24)); }
.msm-uitzendbureau-footer .uf-btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.msm-uitzendbureau-footer .uf-btn:focus-visible { outline-offset: 6px; border-radius: 50%; }
.msm-uitzendbureau-footer .uf-spin { display: block; width: 100%; height: 100%; will-change: transform; }
.msm-uitzendbureau-footer .uf-btn svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.msm-uitzendbureau-footer .uf-face { fill: var(--uf-accent); }
.msm-uitzendbureau-footer .uf-gloss { position: absolute; inset: 0; pointer-events: none; }
.msm-uitzendbureau-footer .uf-btn-top { transition: transform .45s var(--uf-ease), filter .45s var(--uf-ease), opacity .4s; }
.msm-uitzendbureau-footer.is-open .uf-btn-top { opacity: 0; pointer-events: none; }

/* Het lichaam. */
.msm-uitzendbureau-footer .uf-body { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; color: var(--uf-body-ink); }
.msm-uitzendbureau-footer .uf-panel { position: absolute; inset: 0; z-index: 2; background: var(--uf-ink); }
.msm-uitzendbureau-footer .uf-dock-b { position: relative; z-index: 4; height: calc(var(--r) * 2.62); display: flex; justify-content: center; align-items: flex-start; padding-top: calc(var(--r) * .22); }
.msm-uitzendbureau-footer .uf-content { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; padding: clamp(28px, 5cqw, 80px) clamp(16px, 8cqw, 140px) clamp(24px, 4cqw, 64px); }
.msm-uitzendbureau-footer .uf-contacts { display: flex; flex-direction: column; gap: clamp(14px, 1.6cqw, 22px); font-size: clamp(14px, 1.55cqw, 20px); }
.msm-uitzendbureau-footer.is-js .uf-contacts { opacity: 0; transform: translateY(14px); transition: opacity .9s .5s, transform .9s .5s var(--uf-ease); }
.msm-uitzendbureau-footer.is-in .uf-contacts { opacity: 1; transform: none; }
.msm-uitzendbureau-footer .uf-k { display: block; font-size: .88em; opacity: .62; margin-bottom: .28em; font-weight: 300; letter-spacing: .01em; }
.msm-uitzendbureau-footer .uf-v { position: relative; display: inline-flex; align-items: center; gap: .5em; font-weight: 500; letter-spacing: .005em; text-align: left; transition: color .25s; }
.msm-uitzendbureau-footer .uf-v:hover { color: var(--uf-paper); }
.msm-uitzendbureau-footer .uf-copied { font-size: .68em; font-weight: 500; padding: .25em .65em; border-radius: 99px; background: var(--uf-accent); color: #fff; opacity: 0; transform: translateX(-6px) scale(.9); transition: opacity .3s, transform .4s var(--uf-ease); }
.msm-uitzendbureau-footer .uf-copied.is-on { opacity: 1; transform: none; }
.msm-uitzendbureau-footer .uf-links { display: flex; flex-direction: column; gap: .3em; }
.msm-uitzendbureau-footer .uf-link { position: relative; display: inline-flex; align-items: center; gap: .35em; width: fit-content; padding-bottom: .06em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--uf-ease), color .25s; }
.msm-uitzendbureau-footer .uf-link:hover { background-size: 0 1px; background-position: 100% 100%; color: var(--uf-paper); }
.msm-uitzendbureau-footer .uf-link svg,
.msm-uitzendbureau-footer .uf-cta svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.msm-uitzendbureau-footer .uf-link svg { width: .7em; height: .7em; flex: none; max-width: none; opacity: 0; transform: translate(-4px, 4px); transition: opacity .3s, transform .4s var(--uf-ease); }
.msm-uitzendbureau-footer .uf-link:hover svg { opacity: 1; transform: none; }
.msm-uitzendbureau-footer .uf-regards { display: flex; flex-direction: column; align-items: center; padding-right: clamp(0px, 2cqw, 40px); }
.msm-uitzendbureau-footer.is-js .uf-regards { opacity: 0; transform: translateY(14px); transition: opacity .9s .65s, transform .9s .65s var(--uf-ease); }
.msm-uitzendbureau-footer.is-in .uf-regards { opacity: 1; transform: none; }
.msm-uitzendbureau-footer .uf-regards-t { font-family: var(--uf-display); font-size: clamp(22px, 2.9cqw, 40px); letter-spacing: -.035em; line-height: 1; margin-right: -.4em; }
.msm-uitzendbureau-footer .uf-sign-text { display: block; font-family: var(--uf-script); font-size: clamp(40px, 5.4cqw, 76px); line-height: 1.1; padding: 0 .2em; transition: clip-path 1.6s cubic-bezier(.55, .1, .35, 1); }
.msm-uitzendbureau-footer.is-js .uf-sign-text { clip-path: inset(-20% 100% -20% 0); }
.msm-uitzendbureau-footer.is-signed .uf-sign-text { clip-path: inset(-20% -10% -20% 0); }
.msm-uitzendbureau-footer .uf-bottom { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin: 0 clamp(16px, 8cqw, 140px); padding: 18px 0 clamp(24px, 3cqw, 40px); border-top: 1px solid color-mix(in srgb, var(--uf-body-ink) 18%, transparent); font-size: 13px; opacity: .72; }

/* Het briefje. */
.msm-uitzendbureau-footer .uf-letter { position: absolute; z-index: 1; left: 50%; bottom: calc(100% - var(--tuck)); --tuck: clamp(30px, 4cqw, 60px); width: min(620px, calc(100% - 32px)); height: calc(var(--r) * 2.46 - var(--r) * .14 + var(--tuck)); transform: translate(-50%, calc(var(--r) * 1.2)); transition: transform .7s var(--uf-ease); background: var(--uf-note); color: var(--uf-ink); border-radius: 4px 4px 0 0; box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 10px 30px rgba(0, 0, 0, .25); padding: clamp(12px, 1.9cqw, 26px) clamp(16px, 2.6cqw, 36px) var(--tuck); display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1cqw, 12px); overflow: hidden; }
.msm-uitzendbureau-footer .uf-letter::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 calc(1.7em - 1px), color-mix(in srgb, var(--uf-ink) 7%, transparent) calc(1.7em - 1px) 1.7em); opacity: .9; }
.msm-uitzendbureau-footer.is-open .uf-letter { transform: translate(-50%, 0); transition: transform .9s .3s var(--uf-ease); }
.msm-uitzendbureau-footer .uf-letter > * { position: relative; z-index: 1; }
.msm-uitzendbureau-footer .uf-letter > .uf-stamp { position: absolute; right: clamp(12px, 2cqw, 28px); top: clamp(10px, 1.6cqw, 22px); width: clamp(84px, 10cqw, 130px); height: auto; max-width: none; overflow: visible; color: var(--uf-accent); opacity: .5; transform: rotate(-9deg); fill: none; stroke: currentColor; stroke-width: 1.4; }
.msm-uitzendbureau-footer .uf-stamp text { fill: currentColor; stroke: none; font-family: var(--uf-sans); font-size: 6.5px; font-weight: 600; letter-spacing: .04em; text-anchor: middle; }
.msm-uitzendbureau-footer .uf-note-k { font-size: clamp(10px, 1.05cqw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--uf-accent); font-weight: 600; }
.msm-uitzendbureau-footer .uf-note-t { font-family: var(--uf-display); font-size: clamp(16px, 2.1cqw, 28px); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; max-width: 26em; padding-right: clamp(0px, 7cqw, 90px); }
.msm-uitzendbureau-footer .uf-note-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: clamp(12px, 1.2cqw, 15px); }
.msm-uitzendbureau-footer .uf-cta { display: inline-flex; align-items: center; gap: .5em; padding: .55em 1.05em; border-radius: 99px; background: var(--uf-ink); color: var(--uf-paper); font-weight: 500; transition: background .3s, transform .3s var(--uf-ease); }
.msm-uitzendbureau-footer .uf-cta:hover { background: var(--uf-accent); transform: translateY(-1px); }
.msm-uitzendbureau-footer .uf-cta svg { width: .8em; height: .8em; max-width: none; transition: transform .3s var(--uf-ease); }
.msm-uitzendbureau-footer .uf-cta:hover svg { transform: translate(2px, -2px); }
.msm-uitzendbureau-footer .uf-ghost { font-weight: 500; opacity: .75; text-decoration: underline; text-underline-offset: 3px; transition: opacity .2s; }
.msm-uitzendbureau-footer .uf-ghost:hover { opacity: 1; }

/* Het koord. */
.msm-uitzendbureau-footer .uf-cord { position: absolute; left: 0; top: 0; z-index: 5; overflow: visible; max-width: none; pointer-events: none; }
.msm-uitzendbureau-footer .uf-cord path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.msm-uitzendbureau-footer .uf-cord-shadow { stroke: rgba(0, 0, 0, .32); }
.msm-uitzendbureau-footer .uf-cord-body { stroke: var(--uf-cord); }
.msm-uitzendbureau-footer .uf-cord-twist { stroke: rgba(255, 255, 255, .2); }
.msm-uitzendbureau-footer .uf-cord-tip { stroke: #a0a6ae; stroke-linecap: round; }
.msm-uitzendbureau-footer .uf-cord .uf-hit { stroke: transparent; stroke-width: 22px; pointer-events: none; cursor: grab; touch-action: none; }
.msm-uitzendbureau-footer .uf-cord.is-loose .uf-hit { pointer-events: stroke; }
.msm-uitzendbureau-footer .uf-cord.is-drag .uf-hit { cursor: grabbing; }

@container (max-width: 640px) {
  .msm-uitzendbureau-footer .uf-content { grid-template-columns: 1fr; align-items: start; gap: 40px; }
  .msm-uitzendbureau-footer .uf-regards { align-items: flex-start; padding-right: 0; }
  .msm-uitzendbureau-footer .uf-regards-t { margin-right: 0; }
  .msm-uitzendbureau-footer .uf-note-t { font-size: 15px; }
  .msm-uitzendbureau-footer .uf-meta span:nth-child(2) { display: none; }
  .msm-uitzendbureau-footer .uf-title { font-size: clamp(34px, 11cqw, 160px); }
}
@media (prefers-reduced-motion: reduce) {
  .msm-uitzendbureau-footer *,
  .msm-uitzendbureau-footer *::before { transition-duration: .01s !important; transition-delay: 0s !important; }
  .msm-uitzendbureau-footer .uf-ch,
  .msm-uitzendbureau-footer .uf-meta span { transform: none; }
}