/* Brand: the client's logo (gold) in header and footer.
   Header: a visible but soft tint, so the gold logo does not sit on pure white.
   The header logo adapts: WIDE version (emblem + B2B + "INTERNATIONAL" beside it, same height) on large screens, where the menu has room;
   the original STACKED logo on smaller screens. The wide version is derived from the client's file (assets/logo-b2b-mark.png = its top part;
   "INTERNATIONAL" is typed text in a matching gold): ask the client to approve it or to supply an official horizontal logo. */
header.site-header { background:#e4edf6; border-bottom:1px solid #cddbe8; }
.brand-logo { display:block; height:58px; width:auto; }
.brand-wide { display:none; align-items:center; }
.brand-mark { display:block; height:54px; width:auto; }
.brand-intl { margin-left:12px; font-size:15.5px; font-weight:500; letter-spacing:3px; line-height:1; white-space:nowrap;
  background:linear-gradient(90deg,#8f6516,#c79f3f 45%,#8a5f12); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (min-width:1400px) { .brand-stacked { display:none; } .brand-wide { display:flex; } }
.brand-logo-footer { display:block; height:64px; width:auto; margin-inline:auto; }
@media (max-width:560px) { .brand-logo { height:46px; } }

/* Sticky header on every screen size. It stays in the page flow (position: sticky), so nothing jumps when you scroll.
   After a few pixels of scrolling (class .fx-scrolled, set by effects.js) it fades to a slightly translucent, blurred bar with a soft shadow. */
header.site-header { position:sticky !important; top:0; z-index:50; }
html { scroll-padding-top:90px; }
@media (prefers-reduced-motion: no-preference) {
  header.site-header { transition:background-color .45s ease, box-shadow .45s ease, border-color .45s ease, backdrop-filter .45s ease, -webkit-backdrop-filter .45s ease; }
}
header.site-header.fx-scrolled {
  background-color:rgba(228,237,246,.88); border-bottom-color:rgba(205,219,232,.7); box-shadow:0 6px 22px rgba(6,43,79,.12);
  -webkit-backdrop-filter:saturate(1.5) blur(12px); backdrop-filter:saturate(1.5) blur(12px);
}