/* ============================================================================
   LANGUAGE CAPSULE, World 1 (Creative Studio)
   Loaded after style.css, before a11y-focus.css.

   The composition. Collapsed it is one small silver capsule reading NL with a
   3px azure point after it: the point is the quiet indicator that there is
   something on the other side of this control. On hover, focus or touch the
   point stretches into a leaning hairline and EN arrives behind it, so the
   capsule reads NL / EN, current on the left, destination on the right in
   azure. One glass refraction crosses the capsule as it opens.

   The material is the site's own silver member: --gl-silver over --gl-rim-silver,
   the same pair .btn-secondary uses, with the azure edge that rim already carries
   raised a little on open. Dark ink text. No fill, no dark button, no flag, no
   globe, no select, no dropdown panel.

   The size rule. It sits below the Book a call CTA (60px tall) and below the
   primary links (15px / 500): 34px tall, 12px / 550. It is the smallest thing in
   the header on purpose.

   Everything animates between 180 and 240ms and stops entirely under
   prefers-reduced-motion, where the open state still resolves, just instantly.
   ========================================================================== */

.w1-lang{
  /* .nav is pointer-events:none with its children opted back in, and the header
     is a space-between flex row. An auto left margin absorbs all the free space,
     which parks the capsule next to the CTA on the right without touching .nav
     and without moving anything on pages that do not have the control yet. */
  pointer-events:auto;
  margin-left:auto;
  margin-right:10px;
  align-self:center;

  position:relative;
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 13px;
  border-radius:999px;
  background:var(--gl-silver,linear-gradient(135deg,rgba(255,255,255,.80),rgba(240,245,252,.62)));
  box-shadow:var(--gl-rim-silver,0 0 0 1px rgba(255,255,255,.95),0 0 0 2px rgba(150,200,255,.22),inset 0 1px 0 #fff,0 6px 16px rgba(6,26,54,.08));
  -webkit-backdrop-filter:var(--glass-blur-m,blur(22px) saturate(1.4));
  backdrop-filter:var(--glass-blur-m,blur(22px) saturate(1.4));
  color:var(--ink,#242424);
  font-family:inherit;
  font-size:12px;
  font-weight:550;
  letter-spacing:.055em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:background .22s var(--ease,cubic-bezier(.22,.9,.3,1)),
             box-shadow .22s var(--ease,cubic-bezier(.22,.9,.3,1)),
             transform .22s var(--ease,cubic-bezier(.22,.9,.3,1));
}
/* a touch target that clears 44px without growing the capsule */
.w1-lang::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;border-radius:999px}

/* ---- the refraction: one specular pass across the glass on open ---------- */
.w1-lang-glass{
  position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(106deg,
    rgba(255,255,255,0) 28%,
    rgba(255,255,255,.85) 46%,
    rgba(174,212,255,.45) 56%,
    rgba(255,255,255,0) 76%);
  opacity:0;transform:translateX(-120%);
  transition:transform .24s var(--ease,cubic-bezier(.22,.9,.3,1)),opacity .24s var(--ease,cubic-bezier(.22,.9,.3,1));
}

/* ---- the face ------------------------------------------------------------ */
.w1-lang-face{position:relative;z-index:1;display:inline-flex;align-items:center}
.w1-lang-now{display:inline-block;color:var(--ink,#242424);opacity:.78;transition:opacity .2s var(--ease,cubic-bezier(.22,.9,.3,1))}

/* the quiet indicator: a 3px azure point that becomes the separating hairline */
.w1-lang-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:13px;height:12px;
  transition:width .2s var(--ease,cubic-bezier(.22,.9,.3,1))}
.w1-lang-mark i{
  display:block;width:3px;height:3px;border-radius:50%;
  background:#4AA3FF;box-shadow:0 0 0 2px rgba(120,185,255,.16);
  transition:width .2s var(--ease,cubic-bezier(.22,.9,.3,1)),
             height .2s var(--ease,cubic-bezier(.22,.9,.3,1)),
             border-radius .2s var(--ease,cubic-bezier(.22,.9,.3,1)),
             transform .2s var(--ease,cubic-bezier(.22,.9,.3,1)),
             box-shadow .2s var(--ease,cubic-bezier(.22,.9,.3,1));
}

/* the destination, crossfading in from behind the hairline */
.w1-lang-next{
  display:inline-block;max-width:0;opacity:0;overflow:hidden;
  color:#1E7BE6;transform:translateX(-5px);
  transition:max-width .21s var(--ease,cubic-bezier(.22,.9,.3,1)),
             opacity .18s var(--ease,cubic-bezier(.22,.9,.3,1)),
             transform .21s var(--ease,cubic-bezier(.22,.9,.3,1));
}

/* ---- open ---------------------------------------------------------------- */
.w1-lang.is-open,
.w1-lang:hover,
.w1-lang:focus-visible{
  background:var(--gl-silver-h,linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,248,255,.78)));
  box-shadow:var(--gl-rim-silver-h,0 0 0 1px #fff,0 0 0 2px rgba(150,200,255,.44),inset 0 1px 0 #fff,0 10px 22px rgba(6,26,54,.10));
}
.w1-lang.is-open .w1-lang-glass,
.w1-lang:hover .w1-lang-glass,
.w1-lang:focus-visible .w1-lang-glass{opacity:1;transform:translateX(120%)}

.w1-lang.is-open .w1-lang-now,
.w1-lang:hover .w1-lang-now,
.w1-lang:focus-visible .w1-lang-now{opacity:1}

.w1-lang.is-open .w1-lang-mark,
.w1-lang:hover .w1-lang-mark,
.w1-lang:focus-visible .w1-lang-mark{width:15px}
.w1-lang.is-open .w1-lang-mark i,
.w1-lang:hover .w1-lang-mark i,
.w1-lang:focus-visible .w1-lang-mark i{
  width:1px;height:11px;border-radius:1px;transform:rotate(14deg);
  background:rgba(74,163,255,.55);box-shadow:none;
}

.w1-lang.is-open .w1-lang-next,
.w1-lang:hover .w1-lang-next,
.w1-lang:focus-visible .w1-lang-next{max-width:32px;opacity:1;transform:none}

/* the visitor has already asked for the other language somewhere: the
   destination reads a shade more present. Pre-highlight only, never a redirect. */
.w1-lang.is-pref .w1-lang-mark i{background:#2A8FFF;box-shadow:0 0 0 3px rgba(120,185,255,.20)}
.w1-lang.is-pref .w1-lang-next{color:#1667CC}

/* committing: the capsule settles by a hair while the page changes */
.w1-lang.is-going{transform:scale(.985)}

/* no reachable equivalent (the /en/ tree is generated later, so this is real) */
.w1-lang.is-off{cursor:default;opacity:.55}
.w1-lang.is-off .w1-lang-next{color:var(--grey,#616161)}
.w1-lang.is-off .w1-lang-mark i{background:#9AA4B2;box-shadow:none}

/* The accessible name and the announcement channel. Both are visually hidden and
   neither is ever display:none, because display:none is also hidden from
   assistive technology. The name lives in the control's own content rather than
   in an aria-label so each language can carry its own lang attribute and be
   pronounced correctly: see the STRINGS table in js/lang.js. */
.w1-lang-sr,
.w1-lang-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- focus ---------------------------------------------------------------
   a11y-focus.css is loaded last and its base rule (html a:focus-visible) also
   sets border-radius:8px, which would square off a pill. This keeps the studio
   ring exactly as it is everywhere else and only restores the pill radius. The
   selector outranks the base rule on specificity, so load order does not matter. */
html .w1-lang:focus-visible{
  outline:2px solid var(--fx-ink,#1E7BE6);
  outline-offset:3px;
  border-radius:999px;
}
@media (prefers-contrast:more){
  html .w1-lang:focus-visible{outline-width:3px}
  .w1-lang{box-shadow:0 0 0 1px rgba(15,23,42,.35),var(--gl-rim-silver)}
  .w1-lang-now{opacity:1}
}

/* ---- mobile navigation (<=900px) -----------------------------------------
   style.css turns the header into a two row grid below 900: logo and CTA on row
   one, the four destinations in a full width capsule on row two. Row one is full
   at 390 (logo 179 + CTA 139 leaves 44px), so the capsule takes the right hand
   end of ROW TWO instead, its right edge flush with the CTA above it.

   The width it needs is reserved by the grid, not by a magic margin: a third
   column is added, sized by the capsule itself, and the CTA is spanned across
   columns two and three so row one is unchanged. Scoped with :has, so a page
   that has not received the snippet yet keeps exactly the layout it has today.

   THE CONSTANT FOOTPRINT RULE, and it is the whole reason the mobile
   composition differs from the desktop one.

   The capsule sits in a grid column that is sized by the capsule. Anything that
   makes it wider therefore makes the links column narrower, and at 390 there is
   no slack: taking 20px from the links row pushes "Case studies" onto a second
   line. That reflow would happen at the exact moment the visitor's finger is on
   the control, which is the worst possible moment for the row under it to jump.

   So below 900 the capsule does not grow, in any state. Instead of revealing EN
   beside NL, the token RESOLVES IN PLACE: NL and EN are stacked in one slot of
   fixed width and crossfade, and the azure point stays put as the constant. Only
   opacity animates, so there is no intermediate width either, and the row cannot
   reflow at rest, open, or mid transition. It also reads as a sibling of the AI
   LAB capsule, where the incoming label resolves in place too.

   The slot is 20px, which holds any two capital Latin letters at this size with
   room to spare, so it does not move when the token changes. */
@media (max-width:900px){
  .nav:has(.w1-lang){grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px}
  .nav:has(.w1-lang) .nav-book{grid-area:1/2/2/4}
  .nav:has(.w1-lang) .nav-links{grid-area:2/1/3/3}
  .nav:has(.w1-lang) .w1-lang{
    grid-area:2/3/3/4;
    justify-self:end;
    align-self:stretch;
    height:40px;
    margin:0;
    padding:0 12px;
    border-radius:20px;
    background:var(--nv-glass,var(--glass-bg));
    box-shadow:var(--nv-rim,var(--glass-rim-sm));
    -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  }
  .nav:has(.w1-lang) .w1-lang:hover,
  .nav:has(.w1-lang) .w1-lang:focus-visible,
  .nav:has(.w1-lang) .w1-lang.is-open{
    background:var(--gl-silver-h,rgba(255,255,255,.92));
    box-shadow:var(--gl-rim-silver-h);
  }

  /* one slot, two tokens, stacked */
  .nav:has(.w1-lang) .w1-lang-face{position:relative}
  .nav:has(.w1-lang) .w1-lang-now{display:inline-block;width:20px;text-align:center;opacity:1}
  .nav:has(.w1-lang) .w1-lang-next{
    position:absolute;left:0;top:0;bottom:0;
    display:flex;align-items:center;justify-content:center;
    width:20px;max-width:none;overflow:visible;
    transform:none;opacity:0;
    transition:opacity .18s var(--ease,cubic-bezier(.22,.9,.3,1));
  }
  /* The point is the constant: same box in both states, so nothing can shift.
     It also stays a POINT here rather than stretching into the separating
     hairline it becomes on desktop. The hairline separates NL from EN, and on
     mobile there is nothing to separate: the tokens share one slot. Left to
     morph it reads as a dangling slash after the token. Instead it takes a small
     azure halo as the token resolves, which is the feedback without the growth. */
  .nav:has(.w1-lang) .w1-lang-mark,
  .nav:has(.w1-lang) .w1-lang:hover .w1-lang-mark,
  .nav:has(.w1-lang) .w1-lang:focus-visible .w1-lang-mark,
  .nav:has(.w1-lang) .w1-lang.is-open .w1-lang-mark{width:12px}
  .nav:has(.w1-lang) .w1-lang:hover .w1-lang-mark i,
  .nav:has(.w1-lang) .w1-lang:focus-visible .w1-lang-mark i,
  .nav:has(.w1-lang) .w1-lang.is-open .w1-lang-mark i{
    width:3px;height:3px;border-radius:50%;transform:none;
    background:#2A8FFF;box-shadow:0 0 0 3px rgba(120,185,255,.28);
  }

  /* open: the token resolves from NL to EN, in place, opacity only */
  .nav:has(.w1-lang) .w1-lang:hover .w1-lang-now,
  .nav:has(.w1-lang) .w1-lang:focus-visible .w1-lang-now,
  .nav:has(.w1-lang) .w1-lang.is-open .w1-lang-now{opacity:0}
  .nav:has(.w1-lang) .w1-lang:hover .w1-lang-next,
  .nav:has(.w1-lang) .w1-lang:focus-visible .w1-lang-next,
  .nav:has(.w1-lang) .w1-lang.is-open .w1-lang-next{max-width:none;opacity:1;transform:none}
}
/* Every pixel the capsule gives back is a pixel the four destinations keep, and
   the Dutch labels are not written yet. */
@media (max-width:400px){
  .nav:has(.w1-lang) .w1-lang{padding:0 9px;font-size:11.5px;letter-spacing:.05em}
}

/* ---- reduced motion -------------------------------------------------------
   Every transition off. The open state still resolves, it just resolves at once,
   and the refraction layer is removed rather than left mid sweep. */
@media (prefers-reduced-motion:reduce){
  .w1-lang,
  .w1-lang-glass,
  .w1-lang-face,
  .w1-lang-now,
  .w1-lang-mark,
  .w1-lang-mark i,
  .w1-lang-next{transition:none !important;animation:none !important}
  .w1-lang-glass{display:none}
  .w1-lang.is-going{transform:none}
}