.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-209 .elementor-element.elementor-element-06395e9 .elementor-menu-toggle{margin:0 auto;}.elementor-209 .elementor-element.elementor-element-fc961b6{--display:flex;}.elementor-209 .elementor-element.elementor-element-6e7c875{--display:flex;}/* Start custom CSS *//* ==============================================================
   CIBLEX - header 209: bar behaviour + overlay menu
   --------------------------------------------------------------
   The 23 ciblex-* GLOBAL CLASSES carry the static layer (geometry,
   colour, the overlay's closed clip-path, the panel's 25% opacity,
   the footer's 0 opacity). Everything a global class cannot say -
   descendant .elementor-209s, ::after underlines, :hover disclosures,
   body.ciblex-menu-open state and the two menu breakpoints - lives
   here, because that is the only channel that can express it.

   The only script in the header toggles body.ciblex-menu-open and
   tilts .site-main. Every reveal below is therefore CSS-driven and
   keyed off that one class; the 1250ms tilt sets the tempo.
   ============================================================== */

/* ============ 1 - THE BAR ====================================== */

/* Give the SVG link a definite width: WebKit resolves width:auto to
   the SVG's 300px fallback, instead of its 40px-high viewBox proportions. */
html body .elementor.elementor-209 .ciblex-brand{
  width:126.93px;
}

html body .elementor.elementor-209 .ciblex-brand svg{
  width:100%;height:100%;display:block;
}

html body .elementor.elementor-209 .ciblex-track{
  transition:opacity .3s ease,visibility 0s,background-color .3s ease,
             border-color .3s ease,color .3s ease;
}
html body .elementor.elementor-209 .ciblex-track:hover{
  background-color:rgba(2,97,171,.06);
  border-color:rgba(2,97,171,.3);
  color:#0261AB;
}
html body .elementor.elementor-209 .ciblex-lang{
  transition:opacity .3s ease,visibility 0s;
}
html body .elementor.elementor-209 .ciblex-lang-btn{
  transition:background-color .3s ease,color .3s ease;
}
html body .elementor.elementor-209 .ciblex-lang-btn:hover{
  background-color:rgba(0,0,0,.05);
}

/* ---- the language panel ----
   Nothing scripts it, so it is a hover/focus disclosure. visibility
   is transitioned with a delay on the way out only, so the pointer
   can travel from the button into the panel without it vanishing. */
html body .elementor.elementor-209 .ciblex-lang-menu{
  transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
}
html body .elementor.elementor-209 .ciblex-lang:hover .ciblex-lang-menu,
html body .elementor.elementor-209 .ciblex-lang:focus-within .ciblex-lang-menu{
  opacity:1;visibility:visible;transform:none;
  transition-delay:0s,0s,0s;
}
html body .elementor.elementor-209 .ciblex-lang-menu > span{display:block}
html body .elementor.elementor-209 .ciblex-lang-menu a{
  display:block;padding:7px 10px;border-radius:7px;
  font-size:13px;font-weight:500;line-height:1.4;
  color:#54595F;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease;
}
html body .elementor.elementor-209 .ciblex-lang-menu a:hover{
  background-color:rgba(0,0,0,.05);color:#000;
}

/* ---- Menu / Close ----
   The toggle is a real <button>, and Elementor's atomic default for
   e-default-button paints it with a 1px #C36 placeholder border and
   the UA's own button chrome. The global class cannot say "none" to
   either, so it is said here.
   Both labels are stacked in the same 66x22 box, pinned top-right.
   They swap on a short arc rather than a straight cross-fade. */
html body .elementor.elementor-209 .ciblex-menu-toggle{
  border:0;background:none;-webkit-appearance:none;appearance:none;
  font:inherit;color:inherit;
}
html body .elementor.elementor-209 .ciblex-mt-open,
html body .elementor.elementor-209 .ciblex-mt-close{
  transition:opacity .35s ease,transform .5s cubic-bezier(.76,0,.24,1);
  will-change:transform,opacity;
}
html body .elementor.elementor-209 .ciblex-mt-close{
  transform:translate(-5px,10px) rotate(5deg);
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-mt-open{
  opacity:0;transform:translate(5px,-10px) rotate(-5deg);
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-mt-close{
  opacity:1;transform:none;
}

/* the rest of the right-hand set steps aside while the menu is open
   (snippet 385 puts .ciblex-lang back on phones, where it stays up) */
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-lang,
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-track{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}

/* ============ 2 - THE OVERLAY ================================== */

/* The reveal is a clip-path wipe from the top edge. The closed
   polygon is on the global class; this only supplies the motion and
   the open shape. */
html body .elementor.elementor-209 .ciblex-menu-overlay{
  transition:clip-path 1.05s cubic-bezier(.76,0,.24,1);
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-overlay{
  clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}

/* the panel swings in from the bottom-left corner it is anchored to */
html body .elementor.elementor-209 .ciblex-menu-panel{
  transform:translate(-100px,-100px) scale(1.5) rotate(-15deg);
  transition:transform 1.05s cubic-bezier(.76,0,.24,1),
             opacity 1.05s cubic-bezier(.76,0,.24,1);
  will-change:transform,opacity;
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-panel{
  transform:none;opacity:1;
}

html body .elementor.elementor-209 .ciblex-menu-media img.ciblex-menu-image{
  object-fit:cover;
}

/* ---- the primary links ----
   This is an Elementor nav-menu widget, so the anchor is
   .elementor-item and the widget's own colour rules sit in the
   generated half of this same file. The prefix outruns them. */
html body .elementor.elementor-209 .ciblex-menu-nav,
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu--main{
  width:100%;
}
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu{
  display:flex;flex-direction:column;gap:2px;
  list-style:none;margin:0;padding:0;
}
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu li{
  width:100%;overflow:hidden;padding-bottom:4px;
}
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item{
  display:inline-block;position:relative;padding:0;
  font-size:clamp(1.7rem,3.3vw,3rem);font-weight:700;
  letter-spacing:-.032em;line-height:1.14;
  color:#fff;fill:#fff;background:none;
  transform:translateY(120%);opacity:0;will-change:transform;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .6s ease;
}
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item:hover,
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item:focus,
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item.elementor-item-active,
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item.highlighted{
  color:#fff;fill:#fff;background:none;
}

/* ---- the secondary grid ---- */
html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sublink a{
  display:inline-block;position:relative;color:inherit;
  transform:translateY(120%);opacity:0;will-change:transform;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .6s ease,color .3s ease;
}
html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sublink a:hover{
  color:#fff;
}

/* ---- one underline, three places ---- */
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item::after,
html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sublink a::after,
html body .elementor.elementor-209 .ciblex-menu-footer a::after{
  content:"";position:absolute;top:102%;left:0;
  width:100%;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.6,0,.4,1);
}
html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item:hover::after,
html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sublink a:hover::after,
html body .elementor.elementor-209 .ciblex-menu-footer a:hover::after{
  transform:scaleX(1);transform-origin:left;
}

/* ---- the menu footer ---- */
html body .elementor.elementor-209 .ciblex-menu-footer{
  transition:opacity .5s ease;
}
html body .elementor.elementor-209 .ciblex-menu-footer > div:first-child{
  flex:3 1 0%;
}
html body .elementor.elementor-209 .ciblex-menu-footer a{
  display:inline-block;position:relative;
  font-size:13.5px;font-weight:500;color:rgba(255,255,255,.7);
  transition:color .3s ease;
}
html body .elementor.elementor-209 .ciblex-menu-footer a:hover{color:#fff}
html body .elementor.elementor-209 .ciblex-menu-cta a{
  font-size:clamp(15px,1.5vw,18px);font-weight:600;color:#fff;
}
/* the bare separator span between the languages and ciblex.eu; the
   anchors around it restate their own colour, so this only ever
   paints the dash */
html body .elementor.elementor-209 .ciblex-menu-language{
  color:rgba(255,255,255,.3);font-size:13px;
}

/* ---- the staggered entrance ----
   Nothing enters until the wipe has cleared the first row, then the
   links come up one after another and the footer last. */
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item,
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sublink a{
  transform:none;opacity:1;
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu > li:nth-child(1) .elementor-item{transition-delay:.28s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu > li:nth-child(2) .elementor-item{transition-delay:.34s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu > li:nth-child(3) .elementor-item{transition-delay:.40s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu > li:nth-child(4) .elementor-item{transition-delay:.46s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu > li:nth-child(5) .elementor-item{transition-delay:.52s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu > li:nth-child(6) .elementor-item{transition-delay:.58s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(1) a{transition-delay:.46s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(2) a{transition-delay:.49s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(3) a{transition-delay:.52s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(4) a{transition-delay:.55s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(5) a{transition-delay:.58s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(6) a{transition-delay:.61s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(7) a{transition-delay:.64s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(8) a{transition-delay:.67s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(9) a{transition-delay:.70s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(10) a{transition-delay:.73s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-footer{
  opacity:1;transition-delay:.55s;
}

/* ---- the page behind it ----
   The tilt swings the page away from the viewport corners; what shows
   through there has to be the overlay's own blue, and the footer must
   not surface behind the tilted page.

   ONLY where a tilt actually happens, though (2026-09-18). The menu
   script tilts the first of .site-main / #content /
   [data-elementor-type="wp-page"] it finds, and a blog, news or
   case-study single carries none of the three - it renders as
   [data-elementor-type="single-post"] - so pageEl() returns null and
   nothing ever moves there. The blue was backing nothing on those
   pages: it just repainted the body, and since a single's sections
   only paint the centre column, the rails either side of the article
   flipped from white to deep blue the instant the class landed, one
   frame ahead of the wipe. That is the reported "background suddenly
   turns blue" on the singles.

   It costs the ramp pages nothing, because there this rule never won
   in the first place: the theme scrub puts data-ground on <body> and
   body[data-ground]{background-color:var(--cbx-ground)!important}
   outranks it. Measured white on /contact/ with the menu open, both
   before and after this guard. */
html body.ciblex-menu-open:has(.site-main,#content,[data-elementor-type="wp-page"]){background-color:#013A66}
html body.ciblex-menu-open .elementor-location-footer{visibility:hidden}

/* ============ 3 - BREAKPOINTS ================================== */

/* Below 1000px the two menu columns stack: the image becomes a band,
   the links sit under it, the footer is pushed to the bottom. */
@media (max-width:1000px){
  html body .elementor.elementor-209 .ciblex-menu-panel{
    overflow-y:auto;overscroll-behavior:contain;
  }
  html body .elementor.elementor-209 .ciblex-menu-items{
    flex:0 0 auto;flex-direction:column;gap:20px;padding-block-start:78px;
  }
  html body .elementor.elementor-209 .ciblex-menu-media{flex:0 0 24vh;min-height:0}
  html body .elementor.elementor-209 .ciblex-menu-cols{
    flex:0 0 auto;justify-content:flex-start;gap:20px;
  }
  html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item{
    font-size:clamp(1.45rem,5.2vw,2.2rem);
  }
  html body .elementor.elementor-209 .ciblex-menu-footer{
    flex:0 0 auto;margin-block-start:auto;
    flex-direction:column;align-items:flex-start;gap:12px;
  }
}

@media (max-width:620px){
  html body .elementor.elementor-209 .ciblex-hdr{padding-inline:6vw}
  html body .elementor.elementor-209 .ciblex-hdr-r{gap:4px}
  html body .elementor.elementor-209 .ciblex-menu-toggle{width:52px}
  html body .elementor.elementor-209 .ciblex-track{
    padding-inline-start:11px;padding-inline-end:11px;
  }
  html body .elementor.elementor-209 .ciblex-menu-items,
  html body .elementor.elementor-209 .ciblex-menu-footer{
    padding-inline-start:6vw;padding-inline-end:6vw;
  }
  /* on phones the language block stays up over the overlay - snippet
     385 asks for this, and it outranks that snippet, so it repeats it */
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-lang{
    opacity:1;visibility:visible;pointer-events:auto;
  }
}

/* The reveal is navigation, not decoration: with motion reduced it
   still has to arrive, it just arrives at once. */
@media (prefers-reduced-motion:reduce){
  html body .elementor.elementor-209 .ciblex-menu-overlay,
  html body .elementor.elementor-209 .ciblex-menu-panel,
  html body .elementor.elementor-209 .ciblex-menu-footer,
  html body .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item,
  html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sublink a,
  html body .elementor.elementor-209 .ciblex-mt-open,
  html body .elementor.elementor-209 .ciblex-mt-close{
    transition-duration:.01ms;transition-delay:0s;
  }
  html body .elementor.elementor-209 .ciblex-menu-panel{transform:none}
}

/* ---- the tracking pill inside the open menu (phones) ----
   snippet 392's placeTrack() MOVES .ciblex-track into .ciblex-menu-footer at
   <=620px, but the open-menu rule above hides .ciblex-track at (0,4,2) while
   snippet 392's counter-rule is only (0,4,1) - so it lost the cascade and the
   pill stayed invisible inside the menu. Restated here at (0,5,2).
   The descendant .elementor-209 is self-limiting: the pill is only ever a child of
   .ciblex-menu-footer on phones, so this needs no media query and cannot drift
   out of sync with the 620px breakpoint in the script. */
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-footer .ciblex-track{
  opacity:1;visibility:visible;pointer-events:auto;
}

/* ---- the language panel leaves the bar (2026-09-15) -----------------------
   snippet 392 keeps mix-blend-mode:difference on .ciblex-hdr, so the wordmark,
   the Menu label, the EN button and the tracking pill still invert against
   whatever scrolls under them. The PANEL cannot stay inside that: .ciblex-hdr
   is position:fixed, so it is a stacking context - the whole bar composites as
   ONE layer and no descendant can opt out - and under `difference` there is no
   source colour that renders constant white against a varying backdrop.
   So .ciblex-lang-menu is MOVED in the DOM to the header document root, a
   sibling of .ciblex-hdr, where it is an ordinary unblended panel.
   The move costs it the position:absolute anchor it had inside .ciblex-lang,
   so it is re-anchored below. Anchor positioning keeps it under the EN button
   whatever the tracking pill's label width - which matters, because "Track
   shipment" / "Zending volgen" / "Suivre l'envoi" are three different widths.
   Where anchor positioning is unsupported it falls back to the bar's right
   edge: offset, but never broken. */
html body .elementor.elementor-209 .ciblex-lang{anchor-name:--cbxlang}

html body .elementor.elementor-209 .ciblex-lang-menu{
  position:fixed;z-index:60;
  inset-block-start:80px;
  inset-inline-end:5vw;
  background:#ffffff;border:1px solid rgba(0,0,0,.11);border-radius:10px;
  box-shadow:1px 1px 3px 0 rgba(0,0,0,.2);
}
@supports (anchor-name:--a){
  html body .elementor.elementor-209 .ciblex-lang-menu{
    position-anchor:--cbxlang;
    inset-block-start:calc(anchor(block-end) + 6px);
    inset-inline-end:anchor(inline-end);
  }
}
html body .elementor.elementor-209 .ciblex-lang-menu span a{color:#000}
html body .elementor.elementor-209 .ciblex-lang-menu span a:hover{
  background-color:rgba(0,0,0,.05);color:#000;
}

/* the panel is no longer a descendant of .ciblex-lang, so the disclosure
   cannot be a descendant rule any more - :has() keeps it on one gesture */
html body:has(.elementor.elementor-209 .ciblex-lang:hover) .ciblex-lang-menu,
html body:has(.elementor.elementor-209 .ciblex-lang:focus-within) .ciblex-lang-menu,
html body .elementor.elementor-209 .ciblex-lang-menu:hover,
html body .elementor.elementor-209 .ciblex-lang-menu:focus-within{
  opacity:1;visibility:visible;transform:none;
  transition-delay:0s,0s,0s;
}

/* it also sits outside the element the open-menu rule hides, so it has to be
   told to stand down with the rest of the right-hand set */
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-lang-menu{
  opacity:0;visibility:hidden;pointer-events:none;
}

/* ============ 4 - MENU PREVIEW FRAMES (2026-09-15) =============
   Asked for: every MAIN nav item gets its own preview, and the
   sub-links stop moving the picture.

   Why the sub-links were moving it - snippet 392's wireMenu() binds a
   mouseover handler to EVERY <a> inside the overlay whose lowercase
   label is a key in its IMG map, and that map is still keyed on the
   original Dutch build (opticien, nachtzending, over ons, nieuws...).
   Two English sub-link labels collide with it - "Dental" and "FAQ"
   read the same in both languages - so those two swapped the frame,
   while About Us / Services / News, absent from that map, did
   nothing. It was never a designed behaviour, just label matching
   misfiring in a translated build.

   That script cannot be edited from this document (it is a wp_footer
   snippet), but it opens with

       var first = media.querySelector('img.ciblex-menu-image');
       ...
       if (!DEFAULT_IMG) return;

   so dropping .ciblex-menu-image from the resting image makes it bail
   before it binds anything, retiring the label matching wholesale.
   placeTrack() is called separately in boot() and still runs, so the
   tracking pill's phone behaviour is untouched.

   The preview is CSS from here on. It was first keyed on each item's
   WordPress menu-item id rather than its text; as of 2026-09-17 it is
   keyed on neither, only on position - see the block below. Either
   way a translation cannot break it, and the sub-links have no rule.
   ============================================================== */

/* the stack - eight frames, one on show at a time. Geometry and
   object-fit are on .cbx-navimg itself; only state lives here. */
html body .elementor.elementor-209 .ciblex-menu-media .cbx-navimg{
  opacity:0;
  transform:scale(1.06);
  transition:opacity .7s cubic-bezier(.215,.61,.355,1),
             transform .7s cubic-bezier(.215,.61,.355,1);
  pointer-events:none;
}

/* what shows while nothing is hovered */
html body .elementor.elementor-209 .ciblex-menu-media .cbx-navimg-rest{
  opacity:1;transform:none;
}

/* Pairing is by POSITION, not by identity (2026-09-17).

   It used to be one rule per WordPress menu-item id - menu-item-74,
   menu-item-1760 and so on. Those ids belong to the items that existed
   when the block was written, so every item added or replaced since
   arrived with no rule at all: on the live menu only Home (74) and
   Contact (77) still moved the picture, while Track Shipment, Day
   Delivery, Night Delivery and FAQ did nothing. Renaming an item, or
   rebuilding it in the WordPress menu editor, silently broke it too,
   because a rebuilt item gets a new id.

   So nothing below names an item. Each pair is "the Nth main item" ->
   "the Nth hover frame", counted in document order:

     :nth-child(N)                         the Nth <li> of the main list
     :nth-child(N of :not(.cbx-navimg-rest))   the Nth frame in the stack

   Reorder the menu in WordPress and the pairing follows the new order.
   Add an item and it is live immediately. Nothing here is keyed to an
   id, a label or a per-item class, so a translated build cannot break
   it either. Twelve pairs are written out; the menu holds six.

   Only ".elementor-nav-menu--main > ul > li" is counted, so the
   sectors list, the More Ciblex list, the quote CTA and the footer
   links are outside this system entirely - they have no rule and
   cannot touch the frame. Direct-child steps also keep any future
   sub-menu <li> out of the count.

   WHAT HAPPENS WITH MORE ITEMS THAN FRAMES. The frame half of the
   pair simply matches nothing, so no frame is raised - and, crucially,
   the resting frame is NOT lowered either, because the rule that
   lowers it is itself conditional on that frame existing (the
   ":has(> ...)" on .ciblex-menu-media). That is the fix for the blank
   panel: the old rule above dropped the resting frame on ANY main
   item, so an item without a pairing showed an empty box. Now an
   unpaired item leaves whatever is on show exactly as it is.

   MORE FRAMES THAN ITEMS is the same mechanism from the other side:
   frames past the last item are never named by a rule, so they stay
   at rest and are simply unused.

   Geometry, timing and the fade itself are untouched - they live on
   .cbx-navimg above and are not restated here. Only which frame comes
   up, and when, is decided in this block. */

/* the resting frame steps back only when the hovered item HAS a frame */
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(1) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(1 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(2) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(2 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(3) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(3 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(4) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(4 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(5) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(5 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(6) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(6 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(7) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(7 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(8) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(8 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(9) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(9 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(10) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(10 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(11) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(11 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(12) > a:is(:hover,:focus-visible)) .ciblex-menu-media:has(> .cbx-navimg:nth-child(12 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest{
  opacity:0;
}

/* the hovered item's own frame comes up */
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(1) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(1 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(2) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(2 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(3) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(3 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(4) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(4 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(5) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(5 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(6) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(6 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(7) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(7 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(8) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(8 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(9) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(9 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(10) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(10 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(11) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(11 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-items:has(.ciblex-menu-nav .elementor-nav-menu--main > ul.elementor-nav-menu > li.menu-item:nth-child(12) > a:is(:hover,:focus-visible)) .ciblex-menu-media > .cbx-navimg:nth-child(12 of :not(.cbx-navimg-rest)){
  opacity:1;transform:none;
}

/* ---- the held frame ------------------------------------------------
   Everything above is stateless: it can only ever describe what is
   under the pointer right now, never what was under it a moment ago.
   So an unpaired item cannot literally "keep the last frame up" from
   CSS alone - with nothing hovered that has a frame, the stack falls
   back to the resting frame. It never blanks, but it does fall back.

   These rules give that missing memory somewhere to live. They react
   to data-cbx-hold on .ciblex-menu-media, which nothing sets yet, so
   they are inert until the small script in
   SNIPPET-navimg-hold.paste.js is added in Elementor > Custom Code.
   That script does one thing: it remembers the index of the last
   frame actually shown and writes it here while an unpaired item is
   hovered, which pins that frame instead of letting the resting frame
   return. Read it as the opt-in half of the pair - the CSS above is
   correct and complete on its own. */
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="1"]:has(> .cbx-navimg:nth-child(1 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="2"]:has(> .cbx-navimg:nth-child(2 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="3"]:has(> .cbx-navimg:nth-child(3 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="4"]:has(> .cbx-navimg:nth-child(4 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="5"]:has(> .cbx-navimg:nth-child(5 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="6"]:has(> .cbx-navimg:nth-child(6 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="7"]:has(> .cbx-navimg:nth-child(7 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="8"]:has(> .cbx-navimg:nth-child(8 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="9"]:has(> .cbx-navimg:nth-child(9 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="10"]:has(> .cbx-navimg:nth-child(10 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="11"]:has(> .cbx-navimg:nth-child(11 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest,
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="12"]:has(> .cbx-navimg:nth-child(12 of :not(.cbx-navimg-rest))) > .cbx-navimg-rest{
  opacity:0;
}
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="1"] > .cbx-navimg:nth-child(1 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="2"] > .cbx-navimg:nth-child(2 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="3"] > .cbx-navimg:nth-child(3 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="4"] > .cbx-navimg:nth-child(4 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="5"] > .cbx-navimg:nth-child(5 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="6"] > .cbx-navimg:nth-child(6 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="7"] > .cbx-navimg:nth-child(7 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="8"] > .cbx-navimg:nth-child(8 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="9"] > .cbx-navimg:nth-child(9 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="10"] > .cbx-navimg:nth-child(10 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="11"] > .cbx-navimg:nth-child(11 of :not(.cbx-navimg-rest)),
html body .elementor.elementor-209 .ciblex-menu-media[data-cbx-hold="12"] > .cbx-navimg:nth-child(12 of :not(.cbx-navimg-rest)){
  opacity:1;transform:none;
}

/* ============ 5 - THE TWO COLUMN HEADINGS (2026-09-15) =========
   .ciblex-menu-secondary is a 1fr 1fr grid flowing row by row, so a
   heading placed first in the source is simply the grid's first row:
   child 1 lands in column 1, child 2 in column 2, and the ten links
   reflow underneath in the order they already had. The layout is not
   restructured - this only puts a row in front of it.

   Both headings carry ONE class, which is what guarantees they match
   each other in size, weight, colour and top offset - a single class
   cannot drift from itself. The colour is the brand accent already
   carried by .cbx-hook-accent and .cbx-quote-accent.
   ============================================================== */

/* they arrive with the links rather than sitting there ahead of them.
   The sub-links travel a full 120% because .ciblex-menu-sublink masks
   them with overflow:hidden; a heading has no mask of its own, so it
   takes a short lift instead of flying in from nowhere. */
html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sechead{
  transform:translateY(14px);opacity:0;will-change:transform;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .6s ease;
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sechead{
  transform:none;opacity:1;
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sechead:nth-child(1){transition-delay:.40s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sechead:nth-child(2){transition-delay:.43s}

/* The ten links have each moved two places down the grid, so their
   stagger has to move with them: the :nth-child() delays earlier in
   this file still name 1..10 and would now land on the wrong links.
   Restated as 3..12 below, which outranks them by source order. The
   old 1 and 2 stop matching anything on their own, because a heading
   is not a .ciblex-menu-sublink. */
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(3) a{transition-delay:.46s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(4) a{transition-delay:.49s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(5) a{transition-delay:.52s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(6) a{transition-delay:.55s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(7) a{transition-delay:.58s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(8) a{transition-delay:.61s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(9) a{transition-delay:.64s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(10) a{transition-delay:.67s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(11) a{transition-delay:.70s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary > .ciblex-menu-sublink:nth-child(12) a{transition-delay:.73s}

/* ============ 6 - THE QUOTE BUTTON (2026-09-15) ================
   It was a bare text link sharing .ciblex-menu-footer's 13.5px grey
   and that block's scaleX underline. It is a pill from here.

   The <a> IS the pill and never moves, so the click target stays
   where the pointer put it; the two layers that roll are ::before and
   ::after. The real text stays in the DOM, transparent - it is what
   sets the pill's width and what a screen reader announces, so the
   pseudo layers stay presentation only.

   Both pseudo-elements must restate the underline geometry they
   inherit from `.ciblex-menu-footer a::after` (top:102%, height:2px,
   width:100%, background:currentColor, scaleX(0)) or the incoming
   label would render as a 2px bar.
   ============================================================== */

html body .elementor.elementor-209 .ciblex-menu-cta{
  display:inline-block;
  line-height:0;                 /* no inline descender gap under the pill */
}

html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  padding:15px 38px;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:999px;
  font-size:clamp(15px,1.5vw,18px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  text-transform:capitalize;
  color:transparent;
  background-color:transparent;
  transition:background-color .55s cubic-bezier(.76,0,.24,1),
             border-color .55s cubic-bezier(.76,0,.24,1);
}

html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a::before,
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a::after{
  content:"Request your quote";
  position:absolute;
  inset:0;
  width:auto;height:auto;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transform-origin:center;
  transition:transform .55s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a::before{transform:translateY(0)}
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a::after{transform:translateY(105%)}

html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a:hover,
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a:focus-visible{
  color:transparent;
  background-color:#EB6123;
  border-color:#EB6123;
}
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a:hover::before,
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a:focus-visible::before{transform:translateY(-105%)}
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a:hover::after,
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a:focus-visible::after{transform:translateY(0)}

@media (max-width:1000px){
  html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a{
    padding:14px 32px;
  }
}
@media (max-width:620px){
  html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a{
    padding:13px 26px;font-size:15px;
  }
}

/* same contract as the block above: with motion reduced it all still
   arrives, it just arrives at once */
@media (prefers-reduced-motion:reduce){
  html body .elementor.elementor-209 .ciblex-menu-media .cbx-navimg,
  html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sechead,
  html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a,
  html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a::before,
  html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a::after{
    transition-duration:.01ms;transition-delay:0s;
  }
  html body .elementor.elementor-209 .ciblex-menu-media .cbx-navimg{transform:none}
  html body .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sechead{transform:none}
}

/* ============ 7 - THE TWO MENU BUTTONS ARE ONE SYSTEM (2026-09-15) ====
   Phones only, because that is the only place the two ever meet:
   snippet 392's placeTrack() MOVES .ciblex-track into .ciblex-menu-footer
   at <=620px. Two things went wrong when it landed there.

   THE LINE UNDER IT. Section 2 above paints a shared 2px scaleX underline
   on `.ciblex-menu-footer a::after` - every anchor in the footer, because
   the footer is otherwise all text links (the languages, ciblex.eu). The
   tracking pill is an anchor too, so it collected an underline it never
   wanted, drawn 102% down from a box that already has a border. It is not
   a stray border on the button; it is the text-link treatment leaking.

   THE OFFSET. placeTrack inserts the pill as a DIRECT child of the
   footer, while the quote CTA sits one level deeper inside a plain
   e-div-block - and that block carries Elementor's 10px atomic default
   padding. So the two pills started exactly 10px apart on the left edge.
   Zeroing the wrappers' inline padding lines them up; the footer's own
   6vw gutter still applies to both equally.

   The rest is giving the pill the quote button's geometry and type, so
   they read as two instances of one component rather than a button and a
   link - same border, radius, padding, size, weight, capitalisation, and
   the same orange fill on hover on the same curve.

   NOT copied: the CTA's rolling-label effect. That is built from
   ::before/::after with the text hard-coded in `content`, and this pill's
   label is translated per locale ("Zending volgen" / "Suivre l'envoi"),
   so hard-coding it here would break the NL and FR headers. The fill
   carries the same intent without that cost.
   ====================================================================== */
@media (max-width:620px){

  /* the underline belongs to the text links, not to a bordered pill */
  html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-track::after{
    content:none;
  }

  /* both wrappers lose their 10px inset so the pills share a left edge */
  html body .elementor.elementor-209 .ciblex-menu-footer > div{
    padding-inline-start:0;
    padding-inline-end:0;
  }

  /* and the pill takes the quote button's geometry and type */
  html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-track{
    padding:13px 26px;
    border-width:1.5px;
    border-style:solid;
    border-color:rgba(255,255,255,.55);
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:.01em;
    text-transform:capitalize;
    align-self:flex-start;
    transition:background-color .55s cubic-bezier(.76,0,.24,1),
               border-color .55s cubic-bezier(.76,0,.24,1),
               color .55s cubic-bezier(.76,0,.24,1);
  }

  /* snippet 392 gives it a white wash on hover at (0,5,0); this is (0,6,2)
     so it outranks that and matches the quote button instead */
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-footer .ciblex-track:hover,
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-footer .ciblex-track:focus-visible{
    background-color:#EB6123;
    border-color:#EB6123;
    color:#fff;
  }
}

/* ============ 8 - THE PANEL HAS TO BE ABLE TO SCROLL (2026-09-15) =====
   The body lock was never the problem. body.ciblex-menu-open already
   carries overflow:clip (snippet 392 sets it, and it is repeated above),
   and `clip` is deliberate rather than `hidden`: `hidden` on body
   PROPAGATES to the viewport instead of clipping, so a phone grows its
   layout viewport to fit the tilted page and every fixed thing scales
   with it - the overlay measured 1560x3376 in a 390x844 window and the
   Close label sat off screen. That is a solved bug; it must stay `clip`.

   What was actually broken is that the panel never received the gesture.
   The site runs Lenis, which listens on the document and preventDefaults
   wheel and touchmove so it can drive the scroll itself - and lenis.stop()
   is only ever called by the preloader, never by the menu. So with the
   menu open Lenis was still swallowing every gesture and then scrolling a
   body that could not move, while .ciblex-menu-panel's overflow-y:auto
   (set in section 3 at <=1000px) sat there starved.

   Lenis' own opt-out is a [data-lenis-prevent] ancestor, and the Lenis
   stylesheet on this site ALREADY ships the matching rule - but nothing on
   the page ever carried the attribute. One line in the menu script sets it
   on the panel; see HEADER-209-MENU-SCROLL-20260915.paste.txt. Attributes
   cannot be set from here, so only this half lives in CSS.

   -webkit-overflow-scrolling:touch was tried here and REMOVED again: it is
   obsolete (iOS has had momentum scrolling by default since 13), and on
   iOS it promotes the element to its own scrolling layer, which is a known
   way to break a transform transition on that same element - and this
   panel transitions transform. It bought nothing and risked the reveal.
   ====================================================================== */
@media (max-width:1000px){
  html body .elementor.elementor-209 .ciblex-menu-panel{
    /* the panel is the scroller: end the scroll chain here so a flick that
       runs past the last item cannot hand itself back to the locked page,
       and hide the bar over the artwork */
    overscroll-behavior:contain;
    scrollbar-width:none;
  }
  html body .elementor.elementor-209 .ciblex-menu-panel::-webkit-scrollbar{
    width:0;height:0;
  }
}

/* ============ 9 - THE MENU STILL HAS TO ARRIVE (2026-09-15) ===========
   Reported: on mobile the menu opens with no transition at all.

   It is NOT a breakpoint difference. Measured on the live page at 542px
   and at 1422px, the overlay and the panel carry exactly the same
   transition - clip-path 1.05s on the overlay, transform+opacity 1.05s
   on the panel. Nothing in the 1000px or 620px blocks touches either.

   What does change it is the DEVICE. Under prefers-reduced-motion:reduce
   the block in section 3 sets transition-duration to .01ms and cancels
   the panel's transform, so the menu cuts straight to open with nothing
   in between. Measured with the setting forced on: overlay duration 0s,
   panel duration 0s, clip-path already at the open polygon on the first
   frame. Reduce Motion is switched on by a lot of people and very often
   on phones specifically, which is the exact shape of the report -
   desktop animates, the phone snaps.

   The original intent of that block is sound: with motion reduced the
   panel must not swing in from off-screen at 1.5x scale and -15deg. But
   reduced does not mean removed. A cross-fade carries no motion vector,
   so it is the standard substitute - the menu still ARRIVES, it just
   does not travel. The big transform stays cancelled.

   clip-path is dropped rather than transitioned here: it is the one part
   of the reveal that cannot cross-fade (it would pop to closed on the
   way out, cutting the fade short), so under this query the overlay is
   permanently un-clipped and visibility + opacity carry the state. The
   script's own inert toggle still removes it from the tab order.
   ====================================================================== */
@media (prefers-reduced-motion:reduce){

  html body .elementor.elementor-209 .ciblex-menu-overlay{
    clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    opacity:0;
    visibility:hidden;
    /* visibility flips only after the fade has finished, so the panel is
       not yanked out from under a half-faded overlay on the way out */
    transition:opacity .3s linear,visibility 0s linear .3s;
  }
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-overlay{
    opacity:1;
    visibility:visible;
    transition:opacity .3s linear,visibility 0s;
  }

  /* the panel rides the overlay's fade rather than carrying one of its
     own - two stacked fades read as a dip in the middle */
  html body .elementor.elementor-209 .ciblex-menu-panel,
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-panel{
    transform:none;
    opacity:1;
    transition:none;
  }

  /* the links are already placed by section 3's duration override; this
     only makes sure they are not left sitting at their pre-entry offset
     when the transform that would have moved them is cancelled */
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu .elementor-item,
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sublink a,
  html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary .ciblex-menu-sechead{
    transform:none;
    opacity:1;
  }
}

/* ============ 10 - THE MENU BUTTON IS A PHONE TARGET (2026-09-15) =====
   Reported: on mobile it sometimes takes two taps to open the menu.

   Measured on the live page at 542px: the toggle's box is 52 x 22 CSS
   px, sitting 26px from the top and 47px from the right edge. 22px tall
   is HALF the 44px minimum both Apple's HIG and WCAG 2.5.5 ask for, and
   probing around it, a point 12px above the centre already falls outside
   the button. A target that short, in the corner of the screen where the
   thumb arrives at an angle, is simply missed some of the time - which
   is exactly what "sometimes I have to tap twice" looks like.

   The box itself cannot just be made taller: .ciblex-menu-toggle is
   66x22 (52 wide on phones) because both labels are absolutely
   positioned inside it and the bar's 74px layout is built around that
   height. So the HIT area is extended instead, with a transparent
   ::before that reaches past the box. Nothing moves, nothing repaints,
   the button simply becomes catchable - 22 -> 48px tall.

   It grows up, down and right into the bar's own gutter. To the LEFT it
   grows only 2px on purpose: .ciblex-hdr-r sets a 4px gap on phones, and
   reaching further would start stealing taps from the EN language button
   sitting right next to it.

   touch-action:manipulation is the other half. Without it a browser may
   hold a tap back for ~300ms to see whether a second one is coming (a
   double-tap-to-zoom), and a held-back first tap feels precisely like a
   missed one. This target is never double-tapped, so it says so.
   ====================================================================== */
html body .elementor.elementor-209 .ciblex-menu-toggle{
  touch-action:manipulation;
}
html body .elementor.elementor-209 .ciblex-menu-toggle::before{
  content:"";
  position:absolute;
  /* top right bottom left - 22 -> 48 tall, 52 -> 68 wide, all invisible.
     The labels are real children so they still paint above this. */
  inset:-13px -14px -13px -2px;
}

/* the tracking pill and the EN button sit in the same corner and are the
   same kind of small - give them the immediate-click hint too. Their
   boxes are already comfortable, so they need no ::before. */
html body .elementor.elementor-209 .ciblex-track,
html body .elementor.elementor-209 .ciblex-lang-btn{
  touch-action:manipulation;
}

/* ============ BOTTOM NAV: two WordPress menus (2026-09-17) ============
   The ten hand-built links in .ciblex-menu-secondary were replaced by two
   Nav Menu widgets ("Active Sectors" and "More Ciblex"). These rules make the
   widget render as the plain column of text it replaced. Written so it does
   not depend on the ciblex-menu-sublink class landing on the widget. */
html body .elementor.elementor-209 .ciblex-menu-secondary .elementor-widget-nav-menu{
  width:100%;color:rgba(255,255,255,.65);
  font-family:inherit;font-size:13.5px;font-weight:500;line-height:18.9px;
}
html body .elementor.elementor-209 .ciblex-menu-secondary nav.elementor-nav-menu--main{
  display:block !important;width:100%;
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu{
  display:block !important;margin:0;padding:0;list-style:none;
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li{
  display:block;margin:0;padding:0;list-style:none;
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li + li{
  margin-top:5px;
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li > a{
  display:inline-block;position:relative;
  padding:0 !important;margin:0 !important;border:0 !important;
  background:none !important;text-decoration:none !important;
  font-size:13.5px !important;font-weight:500 !important;
  line-height:18.9px !important;letter-spacing:normal !important;
  color:rgba(255,255,255,.65);
  transform:translateY(120%);opacity:0;will-change:transform;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .6s ease,color .3s ease;
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li > a:hover{
  color:#fff;
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li > a::before{
  content:none !important;
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li > a::after{
  content:"";position:absolute;top:102%;left:0;
  width:100%;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.6,0,.4,1);
}
html body .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li > a:hover::after{
  transform:scaleX(1);transform-origin:left;
}
html body .elementor.elementor-209 .ciblex-menu-secondary .elementor-menu-toggle,
html body .elementor.elementor-209 .ciblex-menu-secondary nav.elementor-nav-menu--dropdown{
  display:none !important;
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li > a{
  transform:none;opacity:1;
}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(1) > a{transition-delay:.46s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(2) > a{transition-delay:.49s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(3) > a{transition-delay:.52s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(4) > a{transition-delay:.55s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(5) > a{transition-delay:.58s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(6) > a{transition-delay:.61s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(7) > a{transition-delay:.64s}
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-secondary ul.elementor-nav-menu > li:nth-child(8) > a{transition-delay:.67s}

/* two EMPTY V3 containers sit at the top level of this template and are the
   only in-flow things in it: 20px each, which pushed the whole page down 40px.
   The MCP cannot delete legacy V3 elements, so they are hidden here. */
html body .elementor.elementor-209 > .e-con.e-parent{display:none !important}
/* Let each animated menu button display its own actual Elementor label. */
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a[data-cbx-label]::before,
html body .elementor.elementor-209 .ciblex-menu-footer .ciblex-menu-cta > a[data-cbx-label]::after{content:attr(data-cbx-label);}
html body .elementor.elementor-209 [data-id="2b995f38"]{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
html body .elementor.elementor-209 [data-id="5cd39e8"]{margin-inline-start:0;}
html body .elementor.elementor-209 [data-id="5cd39e8"] > a{text-transform:none;white-space:nowrap;}

/* Dynamic menu stagger: includes FAQ and any links added after it. */
@media(prefers-reduced-motion:no-preference){
html body.ciblex-menu-open .elementor.elementor-209 .ciblex-menu-nav .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item{
 transition-delay:var(--cbx-menu-delay,.28s);
}
}

/* Preserve the exact myCiblex brand casing. */
html body .elementor.elementor-209 [data-id="5cd39e8"] > a,html body .elementor.elementor-209 [data-id="5cd39e8"] > a::before,html body .elementor.elementor-209 [data-id="5cd39e8"] > a::after{text-transform:none;}/* End custom CSS */