.elementor-30 .elementor-element.elementor-element-3f3ed59{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-e587b47{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-30 .elementor-element.elementor-element-ddbefff{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-ddbefff *//* ==================================================================
   KARIKARI LAB — ACTIVE MENU HIGHLIGHT (Elementor Nav Menu widget)
   Where: Elementor → select the page (or Site Settings → Custom CSS,
          or Appearance → Customize → Additional CSS so it applies site-wide).
   Needs: the Nav Menu widget has CSS class  menu  (Advanced → CSS Classes).
   Elementor itself adds the "active" class to the link of the page you are on
   (a.elementor-item-active / li.current-menu-item). This CSS only styles it,
   so the yellow bar moves automatically from page to page.
   ================================================================== */

/* ---------- 1. Normal (inactive) items ---------- */
.menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
  font-family: 'Archivo', Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: #3C3F45 !important;
  background: transparent !important;
  padding: 6px 0 4px !important;
  margin: 0 !important;
  border-bottom: 3px solid transparent !important;   /* reserves the space so nothing jumps */
  transition: color .2s, border-color .2s;
}
.menu .elementor-nav-menu--main .elementor-nav-menu > li { margin: 0 clamp(9px, 1.1vw, 17px) !important; }

/* Turn off Elementor's built-in pointer lines (they would double up with ours) */
.menu .elementor-nav-menu--main .elementor-item::before,
.menu .elementor-nav-menu--main .elementor-item::after { display: none !important; content: none !important; }

/* Hover: darker text only (no yellow, so hover never looks "active") */
.menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus {
  color: #0C0D0F !important;
  border-bottom-color: transparent !important;
}

/* ---------- 2. ACTIVE item — the one page you are on ---------- */
.menu .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item.elementor-item-active,
.menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a.elementor-item,
.menu .elementor-nav-menu--main .elementor-nav-menu > li.current_page_item > a.elementor-item {
  color: #0C0D0F !important;
  border-bottom: 3px solid #F5DC0F !important;
}

/* Parents/ancestors are NOT highlighted (keeps it to one item at a time) */
.menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor:not(.current-menu-item) > a.elementor-item:not(.elementor-item-active),
.menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-parent:not(.current-menu-item) > a.elementor-item:not(.elementor-item-active),
.menu .elementor-nav-menu--main .elementor-nav-menu > li.current_page_ancestor:not(.current_page_item) > a.elementor-item:not(.elementor-item-active) {
  border-bottom-color: transparent !important;
  color: #3C3F45 !important;
}

/* ---------- 3. "Work with us" button ----------
   In Appearance → Menus → Screen Options tick "CSS Classes", then give the
   "Work with us" item the class:  cta   (it never gets the yellow bar)        */
.menu .elementor-nav-menu--main .elementor-nav-menu > li.cta > a.elementor-item,
.menu .elementor-nav-menu--main .elementor-nav-menu > li.cta > a.elementor-item.elementor-item-active {
  background: #0C0D0F !important;
  color: #FFFFFF !important;
  padding: 13px 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  border-bottom: 0 !important;
}
.menu .elementor-nav-menu--main .elementor-nav-menu > li.cta > a.elementor-item:hover {
  background: #1663CF !important;
  color: #FFFFFF !important;
}

/* ---------- 4. Phones & tablets: the dropdown menu ---------- */
.menu .elementor-nav-menu--dropdown a.elementor-item,
.menu .elementor-nav-menu--dropdown a.elementor-sub-item {
  font-family: 'Archivo', Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #3C3F45 !important;
  background: #FFFFFF !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #EFEDE8;
  border-left: 4px solid transparent !important;
}
.menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.menu .elementor-nav-menu--dropdown li.current-menu-item > a.elementor-item,
.menu .elementor-nav-menu--dropdown li.current_page_item > a.elementor-item {
  color: #0C0D0F !important;
  border-left: 4px solid #F5DC0F !important;       /* yellow bar on the left, like the design */
  background: #FFFFFF !important;
}
.menu .elementor-nav-menu--dropdown li.cta > a.elementor-item,
.menu .elementor-nav-menu--dropdown li.cta > a.elementor-item.elementor-item-active {
  background: #0C0D0F !important;
  color: #FFFFFF !important;
  text-align: center;
  border-left: 0 !important;
}

/* ==================================================================
   IF THE YELLOW BAR STILL DOES NOT MOVE
   Elementor only marks a link active when the menu item's URL matches the page.
   Check in Appearance → Menus:
   - Use "Pages" (or Custom Links with the FULL page URL), never "#".
     A custom link of "#" is marked active on EVERY page — that is the
     "stuck on one item" symptom.
   - Home: Custom Link with your site's full homepage URL (https://yoursite.com/).
   - Clear caches after saving (Elementor → Tools → Regenerate CSS & Data,
     plus your cache plugin).

   LAST-RESORT PER-PAGE RULES (works with no menu matching at all).
   Find a page's number: edit the page, look at the URL ...post=123.
   Find a menu item's number: Inspect the link, the <li> has menu-item-45.
   Then add one line per page, e.g. Research page (123) → menu item 45:

   body.page-id-123 .menu .elementor-nav-menu--main li.menu-item-45 > a.elementor-item {
     color:#0C0D0F !important; border-bottom:3px solid #F5DC0F !important;
   }
   Homepage:
   body.home .menu .elementor-nav-menu--main li.menu-item-HOMEID > a.elementor-item { ...same... }
   ================================================================== *//* End custom CSS */