/* 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,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)}
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}
  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:22px}}
.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}