/* ==========================================================================
   wf-nav: header + fullscreen menu, a 1:1 port of the webfluencer.nl navigation
   (Next.js / Tailwind v4 / Framer Motion source, read from the served chunks).
   Every duration, easing, size, colour and stagger below is the original value.
   Shared between world 1 (data-wfn-theme="light") and world 2 ("dark").
   Source of truth: products/_wf-nav/. Do not edit the copies in world1/ or noveq/.
   ========================================================================== */

@font-face{font-family:"Switzer";src:url(/assets/fonts/switzer-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Switzer";src:url(/assets/fonts/switzer-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --wfn-gutter:clamp(16px,2.5vw,20px);            /* --spacing-fluid-gutter */
  --wfn-white:#fbf8f1;                             /* tailwind "white" on that site */
  --wfn-ink:#181818;
  --wfn-font:"Switzer","Switzer Fallback",ui-sans-serif,system-ui,sans-serif;
  --wfn-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --wfn-k:cubic-bezier(.76,0,.24,1);               /* k / y in the source */
  --wfn-e:cubic-bezier(.22,1,.36,1);
  --wfn-c:cubic-bezier(.16,1,.3,1);
  --wfn-m:cubic-bezier(.4,0,.2,1);
  --wfn-spring:cubic-bezier(.22,1,.36,1);          /* replaced at runtime by a linear() spring (stiffness 220, damping 22) */
  --wfn-spring-dur:1.1s;
  --wfn-spring2:cubic-bezier(.22,1,.36,1);         /* spring 400 / 25 for the desktop burger */
  --wfn-spring2-dur:.6s;
}

/* ---------- header --------------------------------------------------------- */
.wfn{position:fixed;top:0;left:0;right:0;z-index:8600;padding:var(--wfn-gutter) var(--wfn-gutter) 0;font-family:var(--wfn-font);pointer-events:auto;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
.wfn *,.wfm *{box-sizing:border-box}
.wfn a,.wfm a{text-decoration:none;color:inherit}
.wfn button,.wfm button{font:inherit;background:none;border:0;padding:0;margin:0;color:inherit}
.wfn-bar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 20px;overflow:hidden;margin:0 auto;
  max-width:2000px;height:54px;border-radius:0;
  background-color:rgba(255,255,255,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);box-shadow:0 0 0 0 transparent;
  transition:background-color .15s ease-out,-webkit-backdrop-filter .15s ease-out,backdrop-filter .15s ease-out,box-shadow .15s ease-out,
    max-width var(--wfn-spring-dur) var(--wfn-spring),height var(--wfn-spring-dur) var(--wfn-spring),border-radius var(--wfn-spring-dur) var(--wfn-spring)}
.wfn.is-scrolled .wfn-bar{max-width:350px;height:48px;border-radius:12px;
  transition:background-color .6s var(--wfn-m),-webkit-backdrop-filter .6s var(--wfn-m),backdrop-filter .6s var(--wfn-m),box-shadow .6s var(--wfn-m),
    max-width var(--wfn-spring-dur) var(--wfn-spring),height var(--wfn-spring-dur) var(--wfn-spring),border-radius var(--wfn-spring-dur) var(--wfn-spring)}
/* dark world: transparent bar at the top, dark glass pill when scrolled (D() in the source) */
.wfn[data-wfn-theme="dark"].is-scrolled .wfn-bar{background-color:rgba(30,30,30,.55);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.15),inset 0 -.5px 0 0 rgba(255,255,255,.05),0 0 0 .5px rgba(255,255,255,.1),0 8px 32px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.1)}
/* light world: the site's own light header variant (dark:false) */
.wfn[data-wfn-theme="light"] .wfn-bar{background-color:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.3),inset 0 -.5px 0 0 rgba(255,255,255,0),0 0 0 .5px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.03),0 1px 3px rgba(0,0,0,0)}
.wfn[data-wfn-theme="light"]:not(.is-scrolled) .wfn-bar{border-radius:16px}
.wfn[data-wfn-theme="light"].is-scrolled .wfn-bar{background-color:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.55),inset 0 -.5px 0 0 rgba(255,255,255,.1),0 0 0 .5px rgba(0,0,0,.08),0 8px 32px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05)}
@media (max-width:767px){
  .wfn .wfn-bar{border-radius:16px}
  .wfn[data-wfn-theme="dark"] .wfn-bar{background-color:rgba(30,30,30,.35);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
    box-shadow:inset 0 1px 0 0 rgba(255,255,255,.08),inset 0 -.5px 0 0 rgba(255,255,255,0),0 0 0 .5px rgba(255,255,255,.06),0 4px 16px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,0)}
  .wfn.is-scrolled .wfn-bar{max-width:240px}
  /* the AI Lab tag needs a wider capsule on a phone, and a slightly smaller wordmark, or "Lab" runs out of the pill */
  .wfn.is-scrolled .wfn-bar:has(.wfn-tag){max-width:min(312px,calc(100% - 32px))}
  .wfn.is-scrolled .wfn-bar:has(.wfn-tag) .wfn-logo .wfn-wm{font-size:19px}
  .wfn.is-scrolled .wfn-bar:has(.wfn-tag) .wfn-logo .wfn-wm .wfn-tag{margin-left:8px;padding:0 7px;height:20px}
}

/* the intro: every part is masked and rises 115% into place (staggered in JS) */
.wfn-mask{overflow:hidden}
.wfn-mask-pad{padding-top:14px;margin-top:-14px}
.wfn-mask-cta{padding-top:6px;margin-top:-6px}
.wfn-in{transform:translateY(115%);opacity:0}
/* The header parts rise into place when wf-nav.js adds .is-ready. With no scripting that
   class never arrives and the whole navigation, the language pill included, would stay at
   opacity 0: the site would open with no way to move around it. Show the settled state. */
@media (scripting: none){.wfn-in{transform:none;opacity:1}}
.wfn.is-ready .wfn-in{transform:none;opacity:1}
.wfn.is-ready .wfn-in{transition:transform .6s var(--wfn-k),opacity .6s var(--wfn-k)}
.wfn.is-ready .wfn-logo-in{transition-duration:.65s;transition-delay:.15s}
.wfn.is-ready.is-fast .wfn-in{transition-duration:.5s}
.wfn.is-ready.is-fast .wfn-logo-in{transition-delay:0s}

/* logo */
.wfn-logo-wrap{flex:none;overflow:hidden}
.wfn-logo{display:block;height:34px;transition:opacity .15s var(--wfn-m)}
.wfn-logo:hover{opacity:.8}
@media (min-width:768px){.wfn-logo{height:38px}}
.wfn-logo .wfn-wm{display:inline-flex;align-items:center;height:100%;font-family:var(--wfn-font);font-weight:600;font-size:22px;letter-spacing:-.04em;white-space:nowrap;line-height:1}
.wfn-logo .wfn-wm .wfn-thin{font-weight:500;opacity:.78;margin-right:.18em}
.wfn-logo .wfn-wm .wfn-dot{color:var(--wfn-logo-dot,#FF5A1F)}
.wfn-logo .wfn-wm .wfn-tag{margin-left:12px;padding:0 9px;height:22px;display:inline-flex;align-items:center;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px currentColor;opacity:.85}
.wfn[data-wfn-theme="dark"] .wfn-logo,.wfm[data-wfn-theme="dark"] .wfn-logo{color:var(--wfn-white)}
.wfn[data-wfn-theme="light"] .wfn-logo,.wfm[data-wfn-theme="light"] .wfn-logo{color:var(--wfn-ink)}
.wfm .wfn-logo{color:var(--wfn-white)}

/* centre: the sentence nav "Cases, Journal, Over ons" */
.wfn-links-pos{display:none;position:absolute;left:50%;top:50%;transform:translate(calc(-50% + 3vw),-50%)}
.wfn-links{display:flex;align-items:center;gap:3px;transition:opacity .3s var(--wfn-m),filter .3s var(--wfn-m),transform .3s var(--wfn-m)}
.wfn.is-scrolled .wfn-links,.wfn.is-scrolled .wfn-right{opacity:0;filter:blur(6px);transform:scale(.95);pointer-events:none}
.wfn-link{display:inline-block;font-weight:500;letter-spacing:-.025em;line-height:22px;font-size:clamp(14px,1.2vw,20px);transition:opacity .4s var(--wfn-k)}
.wfn-links.is-hover .wfn-link:not(:hover){opacity:.6}
.wfn-link>span{position:relative;display:inline-block}
.wfn-sep{display:inline-block;margin:0 .42em 0 .5em;font-weight:300;opacity:.45;line-height:22px;font-size:clamp(14px,1.2vw,20px);transform:translateY(-.04em)}
.wfn[data-wfn-theme="dark"] .wfn-sep{color:var(--wfn-white)}
.wfn[data-wfn-theme="light"] .wfn-sep{color:var(--wfn-ink)}
.wfn[data-wfn-theme="dark"] .wfn-link,.wfn[data-wfn-theme="dark"] .wfn-cta{color:var(--wfn-white)}
.wfn[data-wfn-theme="light"] .wfn-link,.wfn[data-wfn-theme="light"] .wfn-cta{color:var(--wfn-ink)}

/* right: language pill + "Plan een gesprek" */
.wfn-right{display:none;align-items:center;gap:20px;flex:none;transition:opacity .3s var(--wfn-m),filter .3s var(--wfn-m),transform .3s var(--wfn-m)}
.wfn-lang{display:inline-flex;align-items:center;border-radius:999px;border:1px solid;padding:2px}
.wfn-lang>*{padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:14px;transition:color .3s var(--wfn-m),background-color .3s var(--wfn-m)}
.wfn-lang[data-tone="white"]{border-color:rgba(251,248,241,.2)}
.wfn-lang[data-tone="white"] .on{background:var(--wfn-white);color:var(--wfn-ink)}
.wfn-lang[data-tone="white"] a{color:rgba(251,248,241,.6)}
.wfn-lang[data-tone="white"] a:hover{color:var(--wfn-white)}
.wfn-lang[data-tone="dark"]{border-color:rgba(0,0,0,.15)}
.wfn-lang[data-tone="dark"] .on{background:var(--wfn-ink);color:#fff}
.wfn-lang[data-tone="dark"] a{color:rgba(0,0,0,.5)}
.wfn-lang[data-tone="dark"] a:hover{color:#000}
.wfn-cta{display:inline-flex;align-items:center;gap:6px;font-weight:500;letter-spacing:-.025em;font-size:clamp(14px,1.2vw,20px)}
.wfn-roll{position:relative;display:block;overflow:hidden}
.wfn-roll>span{display:block;line-height:1.4;transition:transform .55s var(--wfn-k)}
.wfn-roll>span+span{position:absolute;inset:0;transform:translateY(100%)}
.wfn-cta:hover .wfn-roll>span:first-child{transform:translateY(-100%)}
.wfn-cta:hover .wfn-roll>span+span{transform:translateY(0)}
.wfn-cta svg{width:13px;height:13px;transition:transform .3s var(--wfn-m)}
.wfn-cta:hover svg{transform:translate(2px,-2px)}

/* desktop burger: appears in the pill once scrolled (spring 400/25, delay .1s) */
.wfn-open{display:none;position:absolute;right:20px;top:calc(50% - 20px);width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:scale(.5);filter:blur(6px);pointer-events:none;
  transition:opacity var(--wfn-spring2-dur) var(--wfn-spring2),transform var(--wfn-spring2-dur) var(--wfn-spring2),filter var(--wfn-spring2-dur) var(--wfn-spring2)}
.wfn.is-scrolled .wfn-open{opacity:1;transform:none;filter:blur(0);pointer-events:auto;transition-delay:.1s}
.wfn-open .fill{position:absolute;inset:0;border-radius:999px;background:rgba(251,248,241,0);transform:scale(.9);transition:background-color .6s var(--wfn-e),transform .6s var(--wfn-e)}
.wfn-open .ring{position:absolute;inset:0;border-radius:999px;box-shadow:0 0 0 1px rgba(251,248,241,0);transform:scale(.75);transition:box-shadow .7s var(--wfn-e),transform .7s var(--wfn-e)}
.wfn-open:hover .fill{background:rgba(251,248,241,.1);transform:scale(1)}
.wfn-open:hover .ring{box-shadow:0 0 0 1px rgba(251,248,241,.2);transform:scale(1.05)}
.wfn[data-wfn-theme="light"] .wfn-open:hover .fill{background:rgba(0,0,0,.05)}
.wfn[data-wfn-theme="light"] .wfn-open:hover .ring{box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.wfn-open .bars{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.wfn-open .bars i{display:block;height:1.5px;width:18px;background:var(--wfn-white);transition:width .5s var(--wfn-e)}
.wfn-open .bars i:nth-child(2){transition-delay:60ms}
.wfn-open .bars i:nth-child(3){transition-delay:120ms}
.wfn-open:hover .bars i:nth-child(1){width:14px}
.wfn-open:hover .bars i:nth-child(3){width:10px}
.wfn[data-wfn-theme="light"] .wfn-open .bars i{background:var(--wfn-ink)}

/* mobile burger: three 20px bars, the outer two fold into an X */
.wfn-toggle{position:relative;z-index:60;display:flex;flex-direction:column;gap:5px;padding:4px;cursor:pointer;opacity:0;transition:opacity .6s var(--wfn-k) .25s}
.wfn.is-ready .wfn-toggle{opacity:1}
.wfn.is-ready.is-fast .wfn-toggle{transition-duration:.5s;transition-delay:0s}
.wfn-toggle i{display:block;width:20px;height:1.5px;background:var(--wfn-white);transition:transform .3s cubic-bezier(0,0,.2,1),opacity .3s var(--wfn-m)}
.wfn[data-wfn-theme="light"] .wfn-toggle i{background:var(--wfn-ink)}
.wfn.is-open .wfn-toggle i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.wfn.is-open .wfn-toggle i:nth-child(2){opacity:0}
.wfn.is-open .wfn-toggle i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (min-width:1024px){
  .wfn-links-pos{display:block}
  .wfn-right{display:flex}
  .wfn-open{display:flex}
  .wfn-toggle{display:none}
}

/* ---------- the menu ------------------------------------------------------- */
.wfm{position:fixed;inset:0;z-index:8700;display:flex;flex-direction:column;font-family:var(--wfn-font);-webkit-font-smoothing:antialiased;color:var(--wfn-white)}
.wfm[hidden]{display:none}
.wfm-bg{position:absolute;inset:0;background:#0a0a0a;clip-path:inset(0 0 100% 0)}
.wfm-glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 80% 50% at 70% 40%,rgba(255,255,255,.02) 0%,transparent 70%)}
.wfm-body{position:relative;z-index:10;display:flex;flex-direction:column;height:100%}
.wfm-top{flex:none;padding:var(--wfn-gutter) var(--wfn-gutter) 0;transform:translateY(-140px)}
.wfm-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:54px;border-radius:16px;
  background-color:rgba(30,30,30,.35);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.08),inset 0 -.5px 0 0 rgba(255,255,255,0),0 0 0 .5px rgba(255,255,255,.06),0 4px 16px rgba(0,0,0,.08)}
.wfm-clocks{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center;gap:14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:rgba(251,248,241,.4);white-space:nowrap}
.wfm-clocks>div{display:flex;align-items:center;gap:10px}
.wfm-dot{display:block;width:5px;height:5px;border-radius:999px;background:rgba(251,248,241,.7);animation:wfm-pulse 2.4s cubic-bezier(.4,0,.6,1) infinite}
.wfm-vbar{display:block;width:1px;height:11px;background:rgba(251,248,241,.15)}
.wfm-hl{display:block;width:24px;height:1px;background:rgba(251,248,241,.15)}
.wfm-time{font-variant-numeric:tabular-nums;color:rgba(251,248,241,.55)}
@keyframes wfm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.wfm-topright{display:flex;align-items:center;gap:16px;flex:none}
.wfm-topright .wfn-lang{display:none}
.wfm-close{display:flex;align-items:center;gap:12px;cursor:pointer}
.wfm-close-lbl{display:none;position:relative;overflow:hidden;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;line-height:14px;color:rgba(251,248,241,.45);transition:color .5s var(--wfn-m)}
.wfm-close-lbl>span{display:block;transition:transform .55s var(--wfn-k)}
.wfm-close-lbl>span+span{position:absolute;inset:0;transform:translateY(100%)}
.wfm-close:hover .wfm-close-lbl{color:var(--wfn-white)}
.wfm-close:hover .wfm-close-lbl>span:first-child{transform:translateY(-100%)}
.wfm-close:hover .wfm-close-lbl>span+span{transform:translateY(0)}
.wfm-close-btn{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px}
.wfm-close-btn .ring{position:absolute;inset:0;border-radius:999px;border:1px solid rgba(251,248,241,.15);transition:border-color .5s var(--wfn-m)}
.wfm-close-btn .fill{position:absolute;inset:0;border-radius:999px;background:var(--wfn-white);transform:scale(0);transition:transform .6s var(--wfn-e)}
.wfm-close-btn svg{position:relative;width:13px;height:13px;color:var(--wfn-white);transition:color .6s var(--wfn-e),transform .6s var(--wfn-e)}
.wfm-close:hover .wfm-close-btn .ring{border-color:transparent}
.wfm-close:hover .wfm-close-btn .fill{transform:scale(1)}
.wfm-close:hover .wfm-close-btn svg{transform:rotate(90deg);color:var(--wfn-ink)}

.wfm-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
/* Short viewports (landscape phones) hold fewer rows than the menu has. The list keeps its
   centred rhythm while it fits and becomes scrollable once it does not: "safe center" falls
   back to flex-start when the content overflows, so the first row is never clipped either. */
.wfm-nav{flex:1;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;
  padding:10vh var(--wfn-gutter) 0;min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media (max-height:560px){.wfm-nav{padding-top:24px;padding-bottom:max(24px,env(safe-area-inset-bottom))}}
.wfm-item{overflow:hidden;flex:none}
.wfm-hair{height:1px;transform-origin:left center;transform:scaleX(0);background:rgba(255,255,255,.08);transition:background-color .5s var(--wfn-e)}
.wfm-hair.is-near{background:rgba(255,255,255,.22)}
.wfm-item-in{transform:translateY(115%)}
.wfm-link{display:flex;align-items:center;gap:20px;padding:clamp(8px,1.7vw,14px) 0}
.wfm-num{flex:none;font-family:var(--wfn-mono);font-size:11px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.2);transition:color .5s var(--wfn-e)}
.wfm-lbl{position:relative;font-weight:600;letter-spacing:-.05em;line-height:.95;font-size:clamp(30px,5.4vw,62px);color:rgba(255,255,255,.85);transform:translateX(0);
  transition:color .5s var(--wfn-e),transform .7s var(--wfn-e)}
.wfm-lbl .ext{display:inline-block;margin-left:.18em;font-size:.55em;vertical-align:.32em;letter-spacing:0}
.wfm-arr{overflow:hidden;width:40px;height:40px;margin-left:auto;flex:none}
.wfm-arr svg{width:100%;height:100%;color:rgba(255,255,255,.5);transform:translate(-110%,110%);transition:transform .5s var(--wfn-e)}
.wfm-nav.is-hover .wfm-num{color:rgba(255,255,255,.08)}
.wfm-nav.is-hover .wfm-lbl{color:rgba(255,255,255,.12)}
.wfm-link.is-on .wfm-num{color:rgba(255,255,255,.5)}
.wfm-link.is-on .wfm-lbl{color:var(--wfn-white);transform:translateX(12px)}
.wfm-link.is-on .wfm-arr svg{transform:translate(0,0)}
.wfm-mlang{overflow:hidden;margin-top:24px;padding:0 4px}
.wfm-mlang-in{transform:translateY(115%)}
.wfm-mlang a{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(251,248,241,.5);transition:opacity .3s var(--wfn-m),color .3s var(--wfn-m)}
.wfm-mlang a:hover{color:var(--wfn-white)}

/* right panel: 55% wide, clipped in from the right, media per link */
.wfm-panel{display:none;position:relative;width:55%;overflow:hidden;clip-path:inset(0 0 0 100%)}
.wfm-panel-in{position:absolute;inset:var(--wfn-gutter);border-radius:18px;overflow:hidden;background:#0a0a0a}
.wfm-panel-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(10,10,10,.3) 0%,transparent 40%),linear-gradient(to top,rgba(10,10,10,.25) 0%,transparent 30%)}
.wfm-media{position:absolute;inset:0;opacity:0;pointer-events:none}   /* opacity 0 does not stop hit-testing: an idle collage must never catch a click meant for the active one */
.wfm-media.is-active{pointer-events:auto}
.wfm-media[data-kind="collage"]{transition:opacity .5s var(--wfn-e)}
.wfm-media[data-kind="image"],.wfm-media[data-kind="video"]{transform:scale(1.15);transition:opacity .6s var(--wfn-e),transform 1.2s var(--wfn-e)}
.wfm-media[data-kind="image"].is-default{transform:scale(1.1)}
.wfm-media.is-active{opacity:1}
.wfm-media[data-kind="image"].is-active,.wfm-media[data-kind="video"].is-active{transform:scale(1)}
.wfm-media img,.wfm-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wfm-card{position:absolute;transform-origin:center center;opacity:0;transform:translateY(24px) scale(.85) rotate(calc(var(--r) * .5));
  transition:opacity .45s var(--wfn-c),transform .45s var(--wfn-c)}
.wfm-media.is-active .wfm-card{opacity:1;transform:translateY(0) scale(1) rotate(var(--r));transition-duration:1s;transition-delay:var(--d,0s)}
.wfm-card-in{position:relative;border-radius:14px;overflow:hidden;background:#181818;aspect-ratio:var(--ar,3/4);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08)}
.wfm-card-in img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wfm-card-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,10,.55) 0%,rgba(10,10,10,.18) 45%,rgba(10,10,10,.1) 100%)}
.wfm-card-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wfm-card-logo>span{width:46%;height:26%;display:flex;align-items:center;justify-content:center;transform:scale(var(--ls,1));color:#fff;font-weight:600;letter-spacing:-.03em;font-size:clamp(11px,1.1vw,16px);text-align:center;line-height:1.1;text-shadow:0 1px 8px rgba(0,0,0,.35)}
/* the numbered caption of a service card sits on a frosted glass plate (the Kora testimonial card:
   blurred backdrop, faint white fill, hairline rim, 16px corners), rising in after the card itself */
.wfm-card-cap{position:absolute;left:7%;right:7%;bottom:7%;display:flex;flex-direction:column;gap:3px;color:#fff;
  padding:clamp(10px,1.1vw,16px) clamp(12px,1.3vw,18px);border-radius:16px;
  background:rgba(12,12,14,.6);border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14);   /* dark glass: a fixed ground under white type whatever the photo (AA on all six) */
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--wfn-k),transform .8s var(--wfn-k);transition-delay:calc(var(--d,0s) + .35s)}
.wfm-media.is-active .wfm-card-cap{opacity:1;transform:none}
.wfm-card-cap b{font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:clamp(12px,1.25vw,19px)}
/* linked cards (the journal): the whole card is the link, the title plate appears on hover or focus, the card comes forward */
.wfm-card-link{position:absolute;inset:0;z-index:5;border-radius:inherit;display:block}
.wfm-card-link:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.wfm-card.has-link .wfm-card-in{transition:transform .5s var(--wfn-k),box-shadow .5s var(--wfn-k)}
.wfm-card.has-link:hover,.wfm-card.has-link:focus-within{z-index:40!important}
.wfm-card.has-link:hover .wfm-card-in,.wfm-card.has-link:focus-within .wfm-card-in{transform:scale(1.04);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.wfm-media.is-active .wfm-card-cap-hover{opacity:0;transform:translateY(8px);transition-delay:0s;transition-duration:.35s}
.wfm-media.is-active .wfm-card.has-link:hover .wfm-card-cap-hover,.wfm-media.is-active .wfm-card.has-link:focus-within .wfm-card-cap-hover{opacity:1;transform:none}
.wfm-card-cap-hover b{font-size:clamp(11px,1.05vw,15px);line-height:1.2}
@media (prefers-reduced-motion:reduce){.wfm-card.has-link .wfm-card-in{transition:none}.wfm-card.has-link:hover .wfm-card-in{transform:none}}

@media (min-width:768px){
  .wfm-topright{gap:20px}
  .wfm-topright .wfn-lang{display:inline-flex}
  .wfm-close-lbl{display:block}
  .wfm-close-btn{width:44px;height:44px}
  .wfm-main{flex-direction:row}
  .wfm-nav{max-width:45%;padding-top:14vh}
  .wfm-link{gap:32px}
  .wfm-arr{width:56px;height:56px}
  .wfm-mlang{display:none}
  .wfm-panel{display:block}
}
@media (min-width:1024px){.wfm-clocks{display:flex}}

/* ---------- light world: the same menu on the studio's warm white -------------- */
.wfm[data-wfn-theme="light"]{color:var(--wfn-ink)}
.wfm[data-wfn-theme="light"] .wfm-bg{background:#F5F5F0}
.wfm[data-wfn-theme="light"] .wfm-glow{background:radial-gradient(ellipse 80% 50% at 70% 40%,rgba(49,87,229,.05) 0%,transparent 70%)}
.wfm[data-wfn-theme="light"] .wfm-topbar{background-color:rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.55),inset 0 -.5px 0 0 rgba(255,255,255,.1),0 0 0 .5px rgba(0,0,0,.08),0 8px 32px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05)}
.wfm[data-wfn-theme="light"] .wfn-logo{color:var(--wfn-ink)}
.wfm[data-wfn-theme="light"] .wfm-clocks{color:rgba(24,24,24,.45)}
.wfm[data-wfn-theme="light"] .wfm-dot{background:rgba(24,24,24,.7)}
.wfm[data-wfn-theme="light"] .wfm-vbar,.wfm[data-wfn-theme="light"] .wfm-hl{background:rgba(24,24,24,.15)}
.wfm[data-wfn-theme="light"] .wfm-time{color:rgba(24,24,24,.6)}
.wfm[data-wfn-theme="light"] .wfm-close-lbl{color:rgba(24,24,24,.5)}
.wfm[data-wfn-theme="light"] .wfm-close:hover .wfm-close-lbl{color:var(--wfn-ink)}
.wfm[data-wfn-theme="light"] .wfm-close-btn .ring{border-color:rgba(24,24,24,.15)}
.wfm[data-wfn-theme="light"] .wfm-close-btn .fill{background:var(--wfn-ink)}
.wfm[data-wfn-theme="light"] .wfm-close-btn svg{color:var(--wfn-ink)}
.wfm[data-wfn-theme="light"] .wfm-close:hover .wfm-close-btn svg{color:#fff}
.wfm[data-wfn-theme="light"] .wfm-hair{background:rgba(0,0,0,.08)}
.wfm[data-wfn-theme="light"] .wfm-hair.is-near{background:rgba(0,0,0,.22)}
.wfm[data-wfn-theme="light"] .wfm-num{color:rgba(0,0,0,.25)}
.wfm[data-wfn-theme="light"] .wfm-lbl{color:rgba(24,24,24,.85)}
.wfm[data-wfn-theme="light"] .wfm-arr svg{color:rgba(0,0,0,.5)}
.wfm[data-wfn-theme="light"] .wfm-nav.is-hover .wfm-num{color:rgba(0,0,0,.1)}
.wfm[data-wfn-theme="light"] .wfm-nav.is-hover .wfm-lbl{color:rgba(24,24,24,.14)}
.wfm[data-wfn-theme="light"] .wfm-link.is-on .wfm-num{color:rgba(0,0,0,.55)}
.wfm[data-wfn-theme="light"] .wfm-link.is-on .wfm-lbl{color:var(--wfn-ink)}
.wfm[data-wfn-theme="light"] .wfm-mlang a{color:rgba(24,24,24,.5)}
.wfm[data-wfn-theme="light"] .wfm-mlang a:hover{color:var(--wfn-ink)}
.wfm[data-wfn-theme="light"] .wfm-panel-in{background:#E9E9E3}
.wfm[data-wfn-theme="light"] .wfm-panel-veil{background:linear-gradient(to right,rgba(233,233,227,.3) 0%,transparent 40%),linear-gradient(to top,rgba(233,233,227,.25) 0%,transparent 30%)}
.wfm[data-wfn-theme="light"] .wfm-card-in{background:#fff;box-shadow:0 20px 50px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08),inset 0 0 0 1px rgba(0,0,0,.06)}

/* ---------- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .wfn-bar,.wfn-links,.wfn-right,.wfn-open,.wfn-in,.wfn-toggle,.wfm-hair,.wfm-lbl,.wfm-arr svg,.wfm-media,.wfm-card{transition:none!important}
  .wfm-dot{animation:none}
}

/* No scripting: the header parts, and above all the burger, are revealed by a class wf-nav.js
   adds. Without it a phone had no navigation at all. This block sits at the END of the file on
   purpose: the .wfn-toggle{opacity:0} declaration is further down than where the guard used to
   be, and at equal specificity the later rule wins. */
@media (scripting: none){.wfn-in{transform:none;opacity:1}.wfn-toggle,.wfn-open{opacity:1}}

/* while the concierge sheet is open (html.cc-lock, phones: full-screen) the header steps aside */
@media (max-width:809px){html.cc-lock .wfn{opacity:0;pointer-events:none;transition:opacity .25s ease}}

/* landscape phones (panel wider than it is high): the collage is laid out for a near-square panel, so it
   becomes a centred square on the panel's height; captions drop the number and tighten */
@media (min-width:768px) and (max-height:520px){
  .wfm-media[data-kind="collage"]{left:50%;right:auto;width:auto;aspect-ratio:1/1;transform:translateX(-50%)}
  .wfm-card-cap{left:6%;right:6%;bottom:6%;padding:5px 8px;border-radius:9px;gap:0}
  .wfm-card-cap b{font-size:10px;line-height:1.15}
  /* hover titles (journal) clamp to two lines here: a 5-line title cannot fit a 90px card, the link's aria-label carries the full name */
  .wfm-card-cap-hover b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---- the cookie choice, centred, the page frosted behind it until a choice is made -------------
   Both worlds: the banner (.cc, built by cl-consent.js / consent.js) moves from the corner to the
   middle of the viewport, and while it asks (html.cc-ask) a fixed veil blurs and dims the whole
   page. The veil (9590) sits above the header (8600), the menu (8700), the concierge (8500) and
   the preferences dialog of world 2 (9300), and below the banner (9600); the preferences dialog itself is
   lifted to 9700 so granular consent stays reachable while the veil is up. After a
   choice the veil fades and the page turns sharp. Reduced motion: no transitions, same veil. */
html body .cc{left:50%;top:50%;right:auto;bottom:auto;width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  z-index:9600;transform:translate(-50%,-50%) translateY(14px) scale(.98);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
html body .cc.on{transform:translate(-50%,-50%)}
html body .cc-dialog{z-index:9700}   /* the preferences dialog above the veil (9590) and the banner (9600); it opens from the banner */
body::before{content:"";position:fixed;inset:0;z-index:9590;pointer-events:none;opacity:0;visibility:hidden;
  background:rgba(12,12,14,.28);-webkit-backdrop-filter:blur(18px) saturate(1.05);backdrop-filter:blur(18px) saturate(1.05);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),visibility 0s linear .6s}
html.cc-ask body::before{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
html.cc-ask{overscroll-behavior:none}
@media (max-height:520px){html body .cc{width:min(560px,calc(100vw - 24px))}}
@media (prefers-reduced-motion:reduce){html body .cc,body::before{transition:none}html body .cc{transform:translate(-50%,-50%)}}