/* Desktop scrolled-nav state, ported to match oTToLabs_Contact_Webhook_Production.html
   exactly. The unscrolled state (78px, 32px side margins) was already correct once the
   stray ui-on-dark/ui-on-light bloat rules were neutralized in styles.css — but for the
   *scrolled* state, styles.css has several competing same-specificity rules (58px, 74px,
   78px, 86px) whose relative order differs from the reference file, so the wrong one
   (78px/86px) was winning. This uses !important, matching the reference's own rule, so it
   wins outright regardless of position among the non-important competitors in styles.css.
   Scoped to desktop — mobile already has its own separately-tuned, working nav (mobile-nav-fix.css). */
@media (min-width: 701px) {
  body.ui-scrolled .top-nav,
  body.ui-on-dark.ui-scrolled .top-nav,
  body.ui-on-light.ui-scrolled .top-nav {
    top: 12px !important;
    left: clamp(92px, 9vw, 176px) !important;
    right: clamp(92px, 9vw, 176px) !important;
    height: 58px !important;
    padding: 0px 16px 0px 26px !important;
  }

  body.ui-scrolled .top-nav .nav-brand,
  body.ui-on-dark.ui-scrolled .top-nav .nav-brand,
  body.ui-on-light.ui-scrolled .top-nav .nav-brand {
    font-size: 21px !important;
    transform: none !important;
    opacity: 1 !important;
  }

  body.ui-scrolled .top-nav .nav-links,
  body.ui-on-dark.ui-scrolled .top-nav .nav-links,
  body.ui-on-light.ui-scrolled .top-nav .nav-links {
    gap: 30px !important;
  }

  body.ui-scrolled .top-nav .nav-links a,
  body.ui-on-dark.ui-scrolled .top-nav .nav-links a,
  body.ui-on-light.ui-scrolled .top-nav .nav-links a {
    font-size: 14px !important;
    font-weight: 560 !important;
    letter-spacing: -0.02em !important;
    opacity: 0.86 !important;
  }

  body.ui-scrolled .top-island-cta,
  body.ui-on-dark.ui-scrolled .top-island-cta,
  body.ui-on-light.ui-scrolled .top-island-cta {
    height: 44px !important;
    min-width: 142px !important;
    padding: 0 22px !important;
    font-size: 15px !important;
  }
}