/* TLX Mega Menu – Frontend */

.tlxmm{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  isolation: isolate; /* keeps mix-blend-mode inside header */
  font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* WP admin bar offset */
.admin-bar .tlxmm{ top: 32px; }
@media (max-width: 782px){
  .admin-bar .tlxmm{ top: 46px; }
}

.tlxmm__bar{
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff; /* base color for glass mode over dark sections */
}

/* Open state: turn white to match dropdown */
.tlxmm.is-solid .tlxmm__bar{
  background: rgba(255,255,255,.96);
  border-bottom-color: rgba(0,0,0,.08);
  color: #0f1211;
}

/* Glass mode tone (JS sets: .is-on-dark / .is-on-light)
   This avoids the “gray text on light backgrounds” issue that can happen with blend-mode.
*/
.tlxmm.is-glass.is-on-light .tlxmm__bar{
  background: rgba(255,255,255,.48);
  border-bottom-color: rgba(0,0,0,.06);
  color: #0f1211;
}
.tlxmm.is-glass.is-on-dark .tlxmm__bar{
  background: rgb(0 0 0 / 8%);
  border-bottom-color: rgba(255,255,255,.14);
  color: #fff;
}

/* Tone-specific explicit link colors (prevents Elementor/global opacity styles from making items look gray) */
.tlxmm.is-glass.is-on-light .tlxmm__link,
.tlxmm.is-glass.is-on-light .tlxmm__caret{
  color: #0f1211 !important;
  opacity: 1 !important;
}
.tlxmm.is-glass.is-on-dark .tlxmm__link,
.tlxmm.is-glass.is-on-dark .tlxmm__caret{
  color: #fff !important;
  opacity: 1 !important;
}

/* Ensure links/caret follow bar color cleanly */
.tlxmm.is-glass .tlxmm__link,
.tlxmm.is-glass .tlxmm__caret{
  mix-blend-mode: normal;
  color: inherit;
}

.tlxmm__inner{
  max-width: 1220px;
  margin: 0 auto;
  padding: 14px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 22px;
}

.tlxmm__brand img{
  height: 34px;
  display: block;
  object-fit: contain;

  /* LCP: isolate the logo from the glass blur + transitions (separate composited layer) */
  will-change: transform;
  transform: translateZ(0);
  content-visibility: auto;
}
.tlxmm__brand-text{ font-weight:800; letter-spacing:.06em; font-size: 12px; }

.tlxmm__nav{
  display:flex;
  align-items:center;
  gap: 28px; /* increased spacing between menu items and CTA */
}

/* Mobile overlay container must NEVER impact desktop layout.
   We keep it display:none above the breakpoint.
*/
.tlxmmMobile{ display:none; }

/* Mobile hamburger (hidden on desktop)
   NOTE: Elementor/themes sometimes force button display values.
   We use !important so desktop never shows the burger.
*/
.tlxmm__burger{
  display:none !important;
  width:44px;
  height:44px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: inherit;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tlxmm.is-solid .tlxmm__burger{
  background: transparent !important;
  border-color: transparent !important;
}
.tlxmm__burger svg{ display:block; width:22px; height:22px; }
.tlxmm__burger svg path{ stroke: currentColor !important; }
.tlxmm__burger:hover{ background: transparent !important; }
.tlxmm.is-solid .tlxmm__burger:hover{ background: transparent !important; }
.tlxmm__burger:active{ transform: scale(.985); }
.tlxmm__burger:focus{ outline: none !important; }
.tlxmm.is-on-dark .tlxmm__burger{ color: #f3f5f7 !important; }
.tlxmm.is-on-light .tlxmm__burger{ color: #0f1211 !important; }
.tlxmm.is-solid .tlxmm__burger{ color: #0f1211 !important; }

/* Mobile overlay should not exist on desktop layout at all */
.tlxmmMobile{ display:none; }

.tlxmm__link{
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  text-decoration:none;
  font-weight: 600;
  font-size: 13px;
  background: transparent !important;
  border: 0 !important;
  padding: 8px 0;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.tlxmm__caret{
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .85;
  margin-top: -2px;
  transition: transform .18s ease;
}
.tlxmm__toggle[aria-expanded="true"] .tlxmm__caret{
  transform: rotate(225deg);
}

.tlxmm__link{
  position: relative;
}
.tlxmm__link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: rgba(138,196,139,.95);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s cubic-bezier(.2,.8,.2,1);
  border-radius: 999px;
}
.tlxmm__link:hover::after,
.tlxmm__toggle[aria-expanded="true"]::after{
  transform: scaleX(1);
}
.tlxmm__link:hover{
  color: #8AC48B !important;
}

.tlxmm__cta{
  background: rgba(138, 197, 140, .92);
  color: #fff; /* requested: CTA text should be white */
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

/* Panels (floated into <body> by JS) */
.tlxmm__panel,
.tlxmm-float-panel{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: #fff;
  color: #0f1211;
  border-bottom: 1px solid rgba(0,0,0,.08);
  z-index: 100000;
  opacity: 0;
  transform: translateY(-6px) scale(.995);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}

.tlxmm-float-panel.is-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.tlxmm__panel-inner{
  max-width: 1220px;
  margin: 0 auto;
  padding: 34px 22px 26px;
}

/* SERVICES layout */
.tlxmm__services-grid{
  display:grid;
  grid-template-columns: repeat(2, 280px);
  gap: 34px;
  align-items:center; /* vertically centered */
  justify-content: center;
  justify-items: center;
  text-align: left;
}

.tlxmm__service-card{
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 280px;
  max-width: 100%;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Services panel: keep grid vertically centered within the dropdown */
.tlxmm__panel-inner--services{
  display: flex;
  align-items: center;
  min-height: 220px;
}
.tlxmm__panel-inner--services .tlxmm__services-grid{
  width: 100%;
}

/* Dark overlay behind menu when a dropdown is open */
.tlxmm__backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  /* Must sit under the fixed header (z-index: 9999) but above the page */
  z-index: 9990;
}
.tlxmm__backdrop.is-open{
  opacity: 1;
  pointer-events: auto;
}

.tlxmm__icon{
  width: 34px; height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  background: #8AC48B;
  color: #fff;
}

.tlxmm__icon img{ width:18px; height:18px; display:block; }

.tlxmm__service-title{ font-weight: 700; font-size: 13px; }
.tlxmm__service-desc{ font-size: 12px; line-height: 1.45; opacity: .78; }

.tlxmm__service-card:hover,
.tlxmm__service-card:focus{
  background: rgba(138,196,139,.08);
  border-color: rgba(138,196,139,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  transform: translateY(-2px);
}


/* CASES layout */
.tlxmm__cases-head{ margin-bottom: 16px; }
.tlxmm__eyebrow{ font-size: 10px; letter-spacing:.12em; font-weight: 700; color:#8AC48B; }
.tlxmm__intro{ font-size: 12px; opacity:.8; margin-top: 4px; }

.tlxmm__cases-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  align-items: stretch;
  padding-top: 16px;
}

.tlxmm__case-card{
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  overflow:hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  min-width: 0; /* prevents “garbled” overflow in grids */
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, border-color .18s ease;
}

.tlxmm__case-imgwrap{
  height: 190px;
  background:#111;
  overflow:hidden;
  flex: 0 0 auto;
}

.tlxmm__case-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.tlxmm__case-body{
  padding: 12px 12px 14px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.tlxmm__case-title{ font-weight: 700; font-size: 12px; }
.tlxmm__case-desc{ font-size: 11px; opacity:.72; line-height: 1.4; }
.tlxmm__case-link{ font-size: 11px; font-weight: 700; opacity:.8; margin-top: 6px;   color: #1f5c32;
}

.tlxmm__case-card:hover,
.tlxmm__case-card:focus{
  border-color: rgba(138,196,139,.45);
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
  transform: translateY(-3px);
}
.tlxmm__case-card:hover .tlxmm__case-title{
  color: #1f5c32;
}
.tlxmm__case-card:hover .tlxmm__case-img{
  transform: scale(1.04);
}

.tlxmm__view-all{
  display:inline-flex;
  gap: 8px;
  align-items:center;
  margin-top: 16px;
  text-decoration:none;
  color: inherit;
  font-weight: 700;
  font-size: 12px;
  opacity: .8;
}

/* ---------------------------
   Mobile full-screen overlay
--------------------------- */
.tlxmmMobile{
  position: fixed;
  inset: 0;
  z-index: 200000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.tlxmmMobile.is-open,
.tlxmmMobile.is-closing{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.tlxmmMobile__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  opacity: 0;
  will-change: opacity;
}

.tlxmmMobile__panel{
  position: absolute;
  inset: 0;
  background: #fff;
  color: #0f1211;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  transform: translate3d(110vw,0,0);
}

.tlxmmMobile__wrap{
  width:100%;
  max-width: 620px;
  margin: 0 auto;
  min-height: 100%;
  padding: 0 24px 24px;
}


.tlxmmMobile__top{
  padding: 24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.tlxmmMobile__brand img{ height: 22px; width:auto; display:block; }
.tlxmmMobile__brandText{ font-weight:800; letter-spacing:.06em; font-size: 12px; }

.tlxmmMobile__content{ padding-top: 18px; }

.tlxmmMobile__close{
  color: #0f1211 !important;
  width: 44px;
  height: 44px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.tlxmmMobile__close:hover{ background: transparent !important; }
.tlxmmMobile__close:active{ transform: scale(.98); }
.tlxmmMobile__close svg{ width:22px; height:22px; display:block; }
.tlxmmMobile__close svg path{ stroke: currentColor !important; }

/* Elementor/global styles isolation (mobile overlay only)
   Elementor can apply global button/link colors on hover/active/focus.
   We hard-reset the common properties here to keep the menu consistent.
*/
.tlxmmMobile, .tlxmmMobile *{ box-sizing: border-box; }
.tlxmmMobile a, .tlxmmMobile button{
  font-family: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.tlxmmMobile button{ -webkit-appearance:none; appearance:none; }

.tlxmmMobile__nav{ display:flex; flex-direction:column; gap: 10px; }

.tlxmmMobile__item,
.tlxmmMobile__accBtn{
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: #0f1211;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.tlxmmMobile__item:hover,
.tlxmmMobile__accBtn:hover{
  background: rgba(138,196,139,.08);
  border-color: rgba(138,196,139,.35);
  color: #0f1211 !important;
}

/* Force nested text/icons to remain dark (some themes target children on hover) */
.tlxmmMobile__item:hover *,
.tlxmmMobile__accBtn:hover *{ color: #0f1211 !important; }

/* Prevent Elementor active/focus colors (e.g. pink background + white text)
   Keep active accordion subtle + on-brand.
*/
.tlxmmMobile__accBtn:active,
.tlxmmMobile__accBtn:focus,
.tlxmmMobile__accBtn[aria-expanded="true"]{
  background: rgba(138,196,139,.10) !important;
  border-color: rgba(138,196,139,.45) !important;
  color: #0f1211 !important;
}
.tlxmmMobile__accBtn:active *,
.tlxmmMobile__accBtn:focus *,
.tlxmmMobile__accBtn[aria-expanded="true"] *{ color: #0f1211 !important; }

.tlxmmMobile__chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .75;
  transition: transform .18s ease;
}

.tlxmmMobile__accBtn[aria-expanded="true"] .tlxmmMobile__chev{
  transform: rotate(225deg);
}

.tlxmmMobile__accPanel{
  padding: 8px 6px 14px;
}

.tlxmmMobile__subItem{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  text-decoration:none;
  color: #0f1211;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  margin-top: 10px;
}
.tlxmmMobile__subItem:hover{ color:#0f1211 !important; background: rgba(0,0,0,.03) !important; }

.tlxmmMobile__subIcon{
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.tlxmmMobile__subIcon img,
.tlxmmMobile__subIcon svg{ width: 18px; height: 18px; display:block; }
.tlxmmMobile__subIcon svg path{ stroke: currentColor !important; fill: none; }

.tlxmmMobile__thumb{
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(0,0,0,.04);
}
.tlxmmMobile__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.tlxmmMobile__subText{ min-width:0; flex: 1 1 auto; }

.tlxmmMobile__subItem--row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.tlxmmMobile__subTitle{ font-weight: 600; font-size: 14px; }
.tlxmmMobile__subDesc{ display:block; margin-top: 6px; font-size: 12px; line-height: 1.4; opacity: .75; }
.tlxmmMobile__arrow{ font-weight: 700; opacity: .75; }

.tlxmmMobile__viewAll{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-top: 14px;
  text-decoration:none;
  font-weight: 600;
  font-size: 13px;
  color: #0f1211;
  opacity: .85;
}

.tlxmmMobile__cta,
.tlxmmMobile__cta:visited,
.tlxmmMobile__cta:hover,
.tlxmmMobile__cta:active{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: rgba(138, 197, 140, .92);
  color: #fff !important;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
}

.tlxmmMobile__item:focus-visible,
.tlxmmMobile__accBtn:focus-visible,
.tlxmmMobile__subItem:focus-visible,
.tlxmmMobile__cta:focus-visible,
.tlxmmMobile__close:focus-visible{
  outline: 2px solid rgba(138,196,139,.9);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 980px){
  .tlxmm__nav{ display:none !important; }
  .tlxmm__burger{ display:flex !important; }

  .tlxmmMobile{ display:block; }

  .tlxmm__services-grid{ grid-template-columns: 1fr; gap: 18px; }
  .tlxmm__cases-grid{ grid-template-columns: 1fr; }
}

/* Elementor/global style reset inside mobile menu */
.tlxmmMobile, .tlxmmMobile *{ box-sizing: border-box; }
.tlxmmMobile a, .tlxmmMobile button{
  font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}
.tlxmmMobile a, .tlxmmMobile a:hover, .tlxmmMobile a:focus{ text-decoration: none !important; }
.tlxmmMobile button{ -webkit-appearance:none; appearance:none; }

/* Elementor/global style reset inside menu */
.tlxmm, .tlxmm *{ box-sizing: border-box; }
.tlxmm a, .tlxmm button{
  text-transform:none !important;
  letter-spacing: normal !important;
  box-shadow:none !important;
}
.tlxmm__link{ border-radius: 10px; }
.tlxmm__link:hover, .tlxmm__link:focus{ background: transparent !important; }
.tlxmm__link:focus-visible{ outline: 2px solid rgba(138,196,139,.9); outline-offset: 3px; }


@media (prefers-reduced-motion: reduce){
  .tlxmm__bar,
  .tlxmm__backdrop,
  .tlxmm-float-panel,
  .tlxmm__service-card,
  .tlxmm__case-card,
  .tlxmm__link::after{
    transition: none !important;
  }
}


/* SERVICES: keep text black even on hover (prevent violet/blue link styling) */
.tlxmm__service-card,
.tlxmm__service-card:visited{
  color: #0f1211 !important;
}

.tlxmm__service-card:hover,
.tlxmm__service-card:focus{
  color: #0f1211 !important;
}

.tlxmm__service-card:hover .tlxmm__service-title,
.tlxmm__service-card:hover .tlxmm__service-desc,
.tlxmm__service-card:focus .tlxmm__service-title,
.tlxmm__service-card:focus .tlxmm__service-desc{
  color: #0f1211 !important;
}


/* Mobile sub-item layouts */
.tlxmmMobile__subItem--service{
  display:flex;
  align-items:flex-start;
  gap: 12px;
}
.tlxmmMobile__subIcon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #8AC48B;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.tlxmmMobile__subIcon img{ width:18px; height:18px; display:block; }
.tlxmmMobile__subIcon svg{ width:18px; height:18px; display:block; }
.tlxmmMobile__subText{ display:block; min-width:0; }
.tlxmmMobile__subItem--case{
  display:flex;
  align-items:center;
  gap: 12px;
}
.tlxmmMobile__thumb{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  flex: 0 0 auto;
}
.tlxmmMobile__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tlxmmMobile__subItem--case .tlxmmMobile__arrow{ margin-left:auto; }
.tlxmmMobile__subItem--service .tlxmmMobile__arrow{ margin-left:auto; align-self:center; }