/* brands-section.css — heading / subtitle / CTA + section box for the homepage
   "Partnering with Leading Brands Across the Globe" section when placed on inner pages.
   The marquee (.nh-bmarquee / .nh-brands__cell), .nh-red and .nh-btn--cyan are already
   defined inline on these pages. Scoped to .nh-brands so it can't affect other sections.
   Reversible: remove the <link> to this file. */

.nh-brands.nh-sec { position: relative; padding: 64px 0; text-align: center; overflow: hidden; }
.nh-brands .nh-sec__head { max-width: 760px; margin: 0 auto 48px; }
.nh-brands .nh-sec__title { font-size: clamp(2rem, 3.4vw, 48px); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.nh-brands h2.nh-sec__title { font-weight: 500; letter-spacing: normal; }
/* :not(#zz):not(#zz) adds 2 ID-units so the red wins over the Odoo #wrap theme's
   light-text rule (which carries an ID) on the cloned pages. */
.nh-brands .nh-sec__title .nh-red,
.nh-brands .nh-sec__title .nh-red:not(#zz):not(#zz) {
  color: #ff1b1f !important; -webkit-text-fill-color: #ff1b1f !important;
}
.nh-brands .nh-sec__sub { margin-top: 16px; font-size: 1rem; color: var(--nh-text, #bdc0cd); line-height: 1.5; max-width: 680px; margin-left: auto; margin-right: auto; }
.nh-brands__cta { display: inline-block; border-radius: 48px; background: var(--blue2, #00B3FB); box-shadow: 0 3px 6px 0 rgba(0,0,0,.30) inset; margin-top: 34px; }
/* Force BLACK button label. On cloned Odoo pages the #wrap theme's `#wrap a{color:#cbd5e1!important}`
   (ID specificity) turns the CTA text light-grey; :not(#zz):not(#zz) adds 2 ID-units so black wins. */
.nh-brands__cta,
.nh-brands__cta:not(#zz):not(#zz),
.nh-brands__cta:not(#zz):not(#zz) * {
  color: #010202 !important; -webkit-text-fill-color: #010202 !important;
}

/* Re-enable the homepage marquee scroll on inner pages. Their copied marquee CSS has an
   unscoped `.nh-bmqtrack{animation:none}` that lands after the --ltr/--rtl animation rules
   (on the homepage the body.home-v2 scope makes the animation win instead). Reassert it with
   higher specificity, gated on no-preference so prefers-reduced-motion:reduce still stops it. */
@media (prefers-reduced-motion: no-preference) {
  .nh-brands .nh-bmqtrack--ltr { animation: nh-bmq-ltr 58s linear infinite !important; }
  .nh-brands .nh-bmqtrack--rtl { animation: nh-bmq-rtl 58s linear infinite !important; }
}
.nh-brands .nh-bmarquee:hover .nh-bmqtrack { animation-play-state: paused !important; }