/* fix-133: menu stays at the top while scrolling and becomes a thin strip.
   Why it had stopped: body{overflow-x:hidden} turns <body> into its own scroll box, and a sticky header can only stick inside that box
   (which never scrolls). overflow-x:clip hides sideways overflow the same way but does NOT make a scroll box, so sticky works again. */
html body{overflow-x:clip}
/* the grey top bar (phone, e-mail, language) scrolls away; only the menu strip stays */
html body .topbar{position:static!important}
html body .header{position:sticky!important;top:0!important;z-index:60!important;transition:height .22s ease,margin-bottom .22s ease,box-shadow .22s ease,padding .22s ease}
html body .header .logo img{transition:height .22s ease}
html body .header.is-stuck{height:54px;box-shadow:0 6px 20px rgba(5,2,40,.35)}
/* fix-145: the strip is thinner, so the same amount is added below it — the page under it does not jump (smooth on phones) */
html body .header.is-stuck{margin-bottom:calc(var(--hh0,70px) - 54px)}
html body .header.is-stuck .logo img{height:24px;width:auto}
html body .header .logo{transition:margin-top .22s ease}
html body .header.is-stuck .nav-item>a,html body .header.is-stuck .mega-trigger{padding-top:0;padding-bottom:0}
@media (max-width:1100px){
  html body .header.is-stuck{height:50px;margin-bottom:calc(var(--hh0,66px) - 50px)}
  html body .header.is-stuck .logo img{height:27px}
}
/* desktop: the logo sits 18px higher normally (style.css); in the strip it goes back to 0 */
@media (min-width:901px){html body .header.is-stuck .logo{margin-top:0}}
@media (prefers-reduced-motion:reduce){html body .header,html body .header .logo img{transition:none}}

/* Menu button text ("Book a meeting") sits a little lower */
.nav-cta{padding:11px 16px 9px 16px}

/* fix-134: phones — round account icon (same look as the desktop one) in the top bar, and in the strip while scrolling */
.m-acc{display:none}
@media (max-width:900px){
  html body .tb-m-login.tb-m-acc{display:inline-flex!important;align-items:center;justify-content:center;width:30px;height:30px;min-width:30px;padding:0!important;border:1.5px solid rgba(255,255,255,.72);border-radius:50%;background:transparent;color:#fff!important}
  html body .tb-m-login.tb-m-acc svg{width:17px;height:17px;flex:none}
  /* in the strip: no circle, same size as the cart icon (44px tap area, 22px icon) */
  html body .header .m-acc{display:none!important;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff!important}
  html body .header .m-acc svg{width:22px;height:22px;flex:none}
  html body .header.is-stuck .m-acc{display:inline-flex!important}
}

/* ===== fix-135: values given by the owner (applied in the order given) ===== */
.tb-m-lang .tb-globe{width:17px;height:17px}
@media (max-width:900px){html body .tb-m-login.tb-m-acc svg{width:22px;height:22px}}
@media (max-width:900px){html body .tb-m-login.tb-m-acc{border:none}}
@media (max-width:620px){html body .domain-search .domain-title h2{font-size:19px}} /* fix-140b: owner 19px */
.domain-head form{gap:6px;border:none;padding:4px 4px 4px 15px}
.nav-cta:hover{transform:translateY(-1px);box-shadow:none}
.nav-cta{background:none;color:#fff!important;font-weight:600;box-shadow:none}
.nav-cta svg{width:22px;height:22px;flex:none}
.nav-cta{background:#6d3ff0;color:#fff!important;font-weight:600;font-size:14.5px}
.hero .hero-badges .hero-eyebrow{font-size:16px}
/* "background:none; color:#fff" for .eyebrow is limited to the banner (dark background) — on the light sections it would be white on white */
.hero .eyebrow{background:none;color:#fff}
@media (max-width:480px){.hero .hero-badges .hero-eyebrow{font-size:15.5px}}
.hero-review{color:#fff!important;background:none;font-weight:600}
@media (max-width:480px){.hero .hero-badges .hero-review-stars{font-size:15px}}
@media (max-width:480px){.hero .hero-badges .hero-review-g{width:18px;height:18px}}
main .eyebrow{font-weight:600;letter-spacing:.06em}

/* ===== fix-136: dropdown sub-category labels = light green box (same green as the promo card); phone drawer: round Log in / Cart, centred phone line ===== */
html body .mega-group h4{display:inline-block;padding:4px 10px;border-radius:8px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.3)}
html body .mega-mobile-btn{border-radius:999px}
html body .mega-mobile-contact{justify-content:center;text-align:center}
html body .mega-mobile-contact>span{text-align:center}

/* fix-144d (owner): desktop dropdown with the reference theme's own timings (read from its source CSS) —
   opening: the whole panel fades in and rises 30px (0.5s ease); closing is quick (0.1s), like theirs.
   Link under the mouse: text slides 15px right (0.5s ease); a 5px purple bar grows from the left (0.2s linear, after 0.1s). */
@media (min-width:901px){
  html body .mega-panel{translate:0 30px;transition:opacity .1s ease,transform .1s ease,translate .1s ease,visibility .1s}
  html body .mega-item:hover .mega-panel,html body .mega-item:focus-within .mega-panel,html body .mega-item.is-open .mega-panel{translate:0 0;transition:opacity .5s ease,transform .5s ease,translate .5s ease,visibility .5s}
  html body .mega-group li a{position:relative;transition:all .5s ease}
  html body .mega-group li a::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:0;opacity:0;border-radius:2px;background:#5b2fe8;transition:all .2s linear .1s}
  html body .mega-group li a:hover,html body .mega-group li a:focus-visible{padding-left:21px;color:#5b2fe8;background:transparent}
  html body .mega-group li a:hover::before,html body .mega-group li a:focus-visible::before{width:5px;opacity:1}
  html body .mega-group li a:hover .mega-link-icon,html body .mega-group li a:focus-visible .mega-link-icon{color:#5b2fe8}
  html[data-theme=dark] body .mega-group li a:hover{color:#b9a6ff}
}
@media (prefers-reduced-motion:reduce){
  html body .mega-panel,html body .mega-group li a,html body .mega-group li a::before{transition:none!important;translate:none!important}
}