/* HBS FANS — approved WHITE navigation / contained logo / soft motion.
   One navigation layer, built over the older app.css header rules.
   No hanging badge, no wordmark backing and no duplicate scroll listeners. */
:root{--header-h:76px}
body{padding-top:var(--header-h)}
.topbar,.topbar.is-scrolled{
  position:fixed!important;top:0;right:0;left:0;z-index:1800;
  background:#fff!important;border-bottom:1px solid #ececef!important;
  box-shadow:0 3px 16px rgba(25,26,32,.055)!important;
  transition:box-shadow .66s cubic-bezier(.22,1,.36,1),border-color .48s ease,background-color .48s ease!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  color:#24272c;isolation:isolate;
}
.topbar::before,.topbar::after{display:none!important}
/* A change in elevation rather than a new skin when scrolling. */
.topbar.is-scrolled{
  background:#fff!important;border-bottom-color:#e9e9ed!important;
  box-shadow:0 9px 26px rgba(24,25,32,.095)!important;
}
.topbar .topbar__inner,.topbar.is-scrolled .topbar__inner{
  display:grid!important;grid-template-columns:110px minmax(0,1fr) auto;
  align-items:center;gap:20px!important;height:76px!important;min-height:76px;
  transition:none!important;
}
/* The ENTIRE supplied HBS FANS logo stays INSIDE the white header on every device. */
.topbar.is-scrolled .topbar__inner{height:76px!important;min-height:76px!important;}
.topbar .brand--image,.topbar.is-scrolled .brand--image{
  grid-column:1;grid-row:1;justify-self:start;min-width:106px!important;
  width:106px;height:70px!important;max-width:106px;display:flex;align-items:center;justify-content:center;
  align-self:center;position:relative;overflow:hidden;z-index:1;
  margin:0!important;padding:0;transition:none!important;
}
.topbar .brand__logo-shell,.topbar.is-scrolled .brand__logo-shell{
  position:static!important;inset:auto!important;top:auto!important;right:auto!important;
  box-sizing:border-box;width:106px!important;height:70px!important;max-width:106px;
  display:grid;place-items:center;overflow:hidden;filter:none!important;transform:none!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;padding:0!important;isolation:auto;
  transition:none!important;
}
.topbar .brand__logo-shell::before,.topbar .brand__logo-shell::after{
  content:none!important;display:none!important;
}
.topbar .brand__logo{
  display:block;width:100px!important;height:67px!important;object-fit:contain;object-position:center;
  filter:none!important;transform:none;transform-origin:center;
  transition:transform .56s cubic-bezier(.22,1,.36,1), filter .42s ease!important;
}
.topbar.is-scrolled .brand--image,.topbar.is-scrolled .brand__logo-shell{height:70px!important}
.topbar.is-scrolled .brand__logo{width:100px!important;height:67px!important;transform:scale(.975)!important}
@media(hover:hover) and (pointer:fine){
  .topbar .brand--image:hover .brand__logo{transform:scale(1.02)!important;filter:none!important}
  .topbar.is-scrolled .brand--image:hover .brand__logo{transform:scale(1.005)!important}
}
.topbar .brand--image:hover .brand__logo-shell{filter:none!important;box-shadow:none!important}

/* Desktop: central links, thin red underline, no dark glass buttons. */
.topbar .nav--desktop{
  grid-column:2;grid-row:1;justify-content:center;align-items:stretch;
  align-self:stretch;min-width:0;gap:0!important;display:flex!important;
  position:static!important;opacity:1;visibility:visible;pointer-events:auto;
}
.topbar .nav--desktop>a,.topbar .nav--desktop .more-toggle{
  display:flex;align-items:center;justify-content:center;gap:5px;align-self:stretch;
  position:relative;flex:0 0 auto;min-height:0;padding:0 clamp(6px,.95vw,14px)!important;
  color:#34363b!important;background:transparent!important;
  border:0;border-radius:0!important;font:750 13px/1.2 Heebo,Arial,sans-serif!important;
  white-space:nowrap;text-shadow:none!important;transform:none;
  transition:color .36s cubic-bezier(.22,1,.36,1),background-color .36s ease;
}
.topbar .nav--desktop>a:hover,.topbar .nav--desktop>a.is-active,
.topbar .nav--desktop .more-toggle:hover,.topbar .nav--desktop .more-toggle[aria-expanded="true"]{
  color:#cf0a30!important;background:transparent!important;text-shadow:none!important;transform:none;
}
.topbar .nav--desktop>a::before{display:none!important}
.topbar .nav--desktop>a::after{
  content:"";display:block!important;position:absolute;left:50%!important;right:auto!important;
  width:calc(100% - 24px)!important;max-width:66px;bottom:13px!important;height:3px!important;border-radius:2px!important;
  background:#da0b35!important;box-shadow:none!important;
  transform:translateX(-50%) scaleX(0)!important;transform-origin:center;
  transition:transform .44s cubic-bezier(.22,1,.36,1)!important;
}
.topbar .nav--desktop>a.is-active::after,.topbar .nav--desktop>a:hover::after{transform:translateX(-50%) scaleX(1)!important}
.topbar.is-scrolled .nav--desktop>a::after{bottom:13px!important}
/* Legacy app.css colors the SVGs white for the removed black header. Set the
   default explicitly, including SVG <use> inheritance, without requiring hover. */
.topbar .nav--desktop>a .nav__item-icon,
.topbar .nav--desktop .more-toggle .nav__item-icon,
.topbar .nav--desktop .more-toggle .icon--xs{
  display:block!important;width:15px!important;height:15px!important;
  opacity:1!important;visibility:visible!important;color:#646970!important;
  fill:currentColor!important;filter:none!important;
  transform:translate3d(0,0,0);transform-origin:center;
  transition:color .33s ease, transform .46s cubic-bezier(.22,1,.36,1)!important;
}
.topbar .nav--desktop>a:hover .nav__item-icon,
.topbar .nav--desktop>a.is-active .nav__item-icon,
.topbar .nav--desktop .more-toggle:is(:hover,[aria-expanded="true"],.is-active) .icon{
  color:#ca0b33!important;transform:translate3d(0,-1px,0) scale(1.065);
}
.topbar .actions :is(.icon-btn,.account) > .icon,
.topbar .nav-toggle > .icon{
  color:#292c33!important;fill:currentColor!important;
  opacity:1!important;visibility:visible!important;filter:none!important;
  transition:color .32s ease,transform .38s cubic-bezier(.22,1,.36,1)!important;
}
.topbar .actions :is(.icon-btn,.account):hover > .icon,
.topbar .nav-toggle:hover > .icon{color:#d50832!important;}

.topbar .actions{
  grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;
  gap:5px!important;margin:0!important;min-width:0;direction:rtl;
}
.topbar .actions .icon-btn,.topbar .actions .account,.topbar .nav-toggle{
  display:grid;place-items:center;flex:0 0 auto;width:41px!important;height:41px!important;
  min-width:41px!important;min-height:41px!important;padding:0!important;
  border:1px solid transparent!important;border-radius:5px!important;
  background:transparent!important;box-shadow:none!important;backdrop-filter:none;
  color:#292c33!important;transition:color .28s ease,background .32s ease,border-color .32s ease,transform .3s cubic-bezier(.22,1,.36,1)!important;
}
.topbar .actions .account{display:flex;justify-content:center;max-width:41px!important}
.topbar .actions .account span{display:none}
.topbar .actions .icon-btn:hover,.topbar .actions .account:hover,.topbar .nav-toggle:hover{
  color:#d50832!important;background:#fff1f4!important;border-color:#f4d2db!important;box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
  .topbar .actions .icon-btn:hover,.topbar .actions .account:hover,.topbar .nav-toggle:hover{transform:translateY(-1px)}
}
.topbar .actions :is(.icon-btn,.account):active,.topbar .nav-toggle:active{transform:scale(.96)}
.topbar .icon-btn .icon,.topbar .account .icon,.topbar .nav-toggle .icon{width:20px;height:20px;filter:none}
.topbar .actions .icon-btn--admin{background:#fff5f7!important;color:#b5092d!important}
.topbar .notify69-badge{border-color:#fff;background:#d50832;top:-3px;right:-3px}
.topbar .nav-toggle{display:none!important}
.topbar .nav--desktop :is(a,button):focus-visible,.topbar .actions a:focus-visible,
.topbar .nav-toggle:focus-visible,.bottom-nav :is(a,button):focus-visible{
  outline:2px solid #d10a33;outline-offset:-3px;
}

/* Phone / small tablet: menu right, logo centered, search left. */
@media(max-width:900px){
  :root{--header-h:68px}
  body{padding-top:var(--header-h);padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .topbar .topbar__inner,.topbar.is-scrolled .topbar__inner{
    display:grid!important;grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);
    gap:5px!important;height:68px!important;min-height:0;position:relative;padding:0!important;
  }
  .topbar .brand--image,.topbar.is-scrolled .brand--image{
    grid-column:2;grid-row:1;justify-self:center;align-self:center;
    width:90px!important;min-width:90px!important;max-width:90px;height:65px!important;margin:0!important;overflow:hidden;
  }
  .topbar .brand__logo-shell,.topbar.is-scrolled .brand__logo-shell{
    width:90px!important;height:65px!important;max-width:90px;
  }
  .topbar .brand__logo{width:86px!important;height:61px!important}
  .topbar.is-scrolled .topbar__inner{height:68px!important;min-height:68px!important}
  .topbar.is-scrolled .brand--image,.topbar.is-scrolled .brand__logo-shell{height:65px!important}
  .topbar.is-scrolled .brand__logo{width:86px!important;height:61px!important;transform:scale(.975)!important}
  .topbar .nav--desktop{display:none!important}
  .topbar .actions{grid-column:3;grid-row:1;justify-self:end;direction:rtl;margin:0!important;gap:0!important}
  .topbar .actions .icon-btn:first-child{display:grid!important}
  .topbar .actions .icon-btn:not(:first-child),.topbar .actions .account{display:none!important}
  .topbar .actions .icon-btn:first-child{width:44px!important;height:44px!important;min-height:44px!important;min-width:44px!important}
  .topbar .nav-toggle,.topbar.is-scrolled .nav-toggle{
    grid-column:1;grid-row:1;display:grid!important;justify-self:start;align-self:center;
    order:0;width:44px!important;height:44px!important;min-width:44px!important;
    min-height:44px!important;background:transparent!important;color:#24272c!important;
  }
  .topbar .nav-toggle[aria-expanded="true"]{color:#ce0b32!important;background:#fff0f3!important}
  /* White bottom dock: four destinations and a live drawer trigger. */
  .bottom-nav{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;
    position:fixed;z-index:998;right:0;left:0;bottom:0;
    height:calc(66px + env(safe-area-inset-bottom));min-height:0;
    padding:0 4px env(safe-area-inset-bottom);background:#fff!important;
    border-top:1px solid #e7e7eb!important;box-shadow:0 -7px 28px rgba(21,21,25,.08)!important;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .bottom-nav>a,.bottom-nav>button{
    appearance:none;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-width:0;min-height:63px;padding:7px 1px 5px;margin:0;border:0;border-radius:0;
    background:transparent;color:#575b64!important;font:750 10px/1.15 Heebo,Arial,sans-serif;
    text-align:center;cursor:pointer;transition:color .18s ease,background .18s ease,transform .15s ease;
  }
  .bottom-nav :is(a,button) .icon{width:21px;height:21px;color:inherit!important;filter:none;transform:none!important}
  .bottom-nav :is(a,button)>span{white-space:nowrap}
  .bottom-nav a::before{display:none!important}
  .bottom-nav :is(a,button):is(.is-active,.is-open){color:#d50832!important;background:transparent}
  .bottom-nav :is(a,button).is-pressed{transform:scale(.94)}
  .bottom-nav :is(a,button).is-active::after,.bottom-nav>button.is-open::after{
    content:"";position:absolute;bottom:0;right:calc(50% - 12px);width:24px;height:2px;background:#d50832;
  }
  /* Same white navigation language inside the already-existing drawer. */
  .mobile-menu-backdrop{background:rgba(20,18,21,.43)}
  .mobile-drawer{background:#fff;color:#24272c;border-left:1px solid #ecebef;box-shadow:-18px 0 60px #12121730}
  .mobile-drawer__head{background:#fff;border-bottom:1px solid #ecebef;height:68px;flex-basis:68px}
  .mobile-drawer__brand{height:58px}
  .mobile-drawer__brand img{width:91px;height:57px;object-fit:contain;filter:none}
  .mobile-drawer__close{background:#f6f6f7;border:1px solid #e7e7ea;color:#2c2e35}
  .mobile-drawer__close:hover{background:#fff1f4;color:#d50832}
  .mobile-drawer__body{background:#fff}
  .mobile-drawer__guide{background:#fff5f7;border:1px solid #f4dce2;color:#22252b}
  .mobile-drawer__guide small{color:#c80830}
  .mobile-drawer__guide span{color:#666a71}
  .mobile-nav-section{border-color:#ededf0}
  .mobile-nav-section h3{color:#a10829}
  .mobile-nav-list>a{color:#272a32}
  .mobile-nav-list>a:hover,.mobile-nav-list>a.is-active{background:#fff3f6;border-color:#f6e0e5}
  .mobile-nav-list__icon{background:#fff0f3;color:#c90731}
  .mobile-nav-list small{color:#727780}
  .mobile-nav-list>a>.icon{color:#999ca3}
  .mobile-nav-chips a{background:#f8f8fa;color:#3c4049;border-color:#e9e9ec}
  .mobile-nav-chips a:hover{background:#fff0f3;color:#bc092b}
  .mobile-drawer__account{background:#fafafa;border-color:#ececee;color:#282b31}
  .mobile-drawer__account small{color:#7a7d84}
  .mobile-drawer__account>a,.mobile-drawer__account-actions>a{background:#fff;border:1px solid #ececf0;color:#2d3138}
  .mobile-drawer__account-actions>a:last-child{background:#d20b34;border-color:#d20b34;color:#fff}
}
@media(min-width:901px) and (max-width:1120px){
  .topbar .topbar__inner,.topbar.is-scrolled .topbar__inner{grid-template-columns:103px minmax(0,1fr) auto;gap:7px!important}
  .topbar .brand--image,.topbar.is-scrolled .brand--image{width:99px;max-width:99px;min-width:99px!important}
  .topbar .brand__logo-shell,.topbar.is-scrolled .brand__logo-shell{width:99px!important;max-width:99px}
  .topbar .nav--desktop>a,.topbar .nav--desktop .more-toggle{font-size:11.5px!important;padding:0 6px!important}
  .topbar .actions{gap:0!important}
  .topbar .actions .icon-btn,.topbar .actions .account{width:37px!important;min-width:37px!important}
}
@media(max-width:360px){
  .topbar .brand--image,.topbar.is-scrolled .brand--image{width:82px!important;min-width:82px!important}
  .topbar .brand__logo-shell,.topbar.is-scrolled .brand__logo-shell{width:82px!important}
  .topbar .brand__logo{width:77px!important;height:57px!important}
  .topbar.is-scrolled .brand__logo{width:77px!important;height:57px!important;transform:scale(.975)!important}
  .bottom-nav :is(a,button){font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){
  .topbar,.topbar.is-scrolled,
  .topbar .topbar__inner,.topbar.is-scrolled .topbar__inner,
  .topbar .brand--image,.topbar.is-scrolled .brand--image,
  .topbar .brand__logo-shell,.topbar.is-scrolled .brand__logo-shell,
  .topbar .brand__logo,.topbar.is-scrolled .brand__logo,
  .topbar .nav--desktop>a,.topbar .nav--desktop .more-toggle,
  .topbar .actions .icon-btn,.topbar .actions .account,.topbar .nav-toggle,
  .bottom-nav :is(a,button),.mobile-drawer :is(a,button){transition:none!important;animation:none!important}
}
@media(min-width:901px){
 .topbar .nav--desktop .more-toggle.is-active{color:#cf0a30!important}
 .topbar .nav--desktop .more-toggle.is-active::after{
  content:"";position:absolute;left:50%!important;right:auto!important;width:38px!important;bottom:13px!important;height:3px;background:#da0b35;border-radius:2px;transform:translateX(-50%);
 }
}


/* Component motion has a single approved declaration below. */
@media(max-width:900px){
  .mobile-menu-backdrop{transition:opacity .26s ease}
  .mobile-nav-list>a{transition:background .28s ease,border-color .28s ease,color .28s ease,transform .3s cubic-bezier(.22,1,.36,1)}
  .bottom-nav :is(a,button){transition:color .28s ease,background .28s ease,transform .22s cubic-bezier(.22,1,.36,1)}
}

/* Same approved white navigation while Accessibility > Reduce transparency is active. */
body.a11y-reduce-transparency .topbar,
body.a11y-reduce-transparency .topbar.is-scrolled,
body.a11y-reduce-transparency .bottom-nav,
body.a11y-reduce-transparency .mobile-drawer{
  background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* V1 Motion pass. Stable 76/68px header: only compositor-friendly transforms
   and color/elevation changes. A single translucent white inter-page veil. */
@media(hover:hover) and (pointer:fine){
  .topbar .nav--desktop>a:hover .nav__item-icon,
  .topbar .nav--desktop .more-toggle:hover .nav__item-icon{
    transform:translate3d(0,-1px,0) scale(1.065);
  }
  .topbar .actions :is(.icon-btn,.account):hover > .icon,
  .topbar .nav-toggle:hover > .icon{transform:scale(1.075)}
}
.topbar .nav--desktop>a.is-active .nav__item-icon{transform:scale(1.035)}
.topbar .actions :is(.icon-btn,.account) > .icon,
.topbar .nav-toggle > .icon{transform-origin:center;transition:color .32s ease,transform .38s cubic-bezier(.22,1,.36,1)!important}
/* The underline remains centered in RTL throughout its opening motion. */
.topbar .nav--desktop>a::after{transform-origin:center!important}
/* Mega menu: restrained content arrival in the EXISTING panel, no layout shifts. */
@media(min-width:901px){
  .topbar .mega-menu{transition:opacity .30s ease, transform .40s cubic-bezier(.22,1,.36,1), visibility .40s!important}
  .topbar .mega-menu__intro,
  .topbar .mega-menu__group,
  .topbar .mega-menu__quick>a{
    opacity:.90;transform:translate3d(0,6px,0);
    transition:opacity .37s ease,transform .49s cubic-bezier(.22,1,.36,1)!important;
  }
  .topbar .mega-menu.is-open :is(.mega-menu__intro,.mega-menu__group,.mega-menu__quick>a){opacity:1;transform:translate3d(0,0,0)}
  .topbar .mega-menu.is-open .mega-menu__group:nth-child(2){transition-delay:35ms!important}
  .topbar .mega-menu.is-open .mega-menu__group:nth-child(3){transition-delay:65ms!important}
  .topbar .mega-menu.is-open .mega-menu__group:nth-child(4){transition-delay:95ms!important}
  .topbar .mega-menu.is-open .mega-menu__group:nth-child(5){transition-delay:120ms!important}
}
@media(max-width:900px){
  /* Drawer slides on one axis; its contents flow gently, not the entire page. */
  .mobile-drawer{transition:transform .43s cubic-bezier(.22,1,.36,1),visibility .43s!important}
  .mobile-menu-backdrop{transition:opacity .26s ease!important}
  .mobile-drawer .mobile-nav-section{
    opacity:.88;transform:translate3d(5px,0,0);
    transition:opacity .32s ease,transform .42s cubic-bezier(.22,1,.36,1)!important;
  }
  .mobile-drawer.is-open .mobile-nav-section{opacity:1;transform:translate3d(0,0,0)}
  .mobile-drawer.is-open .mobile-nav-section:nth-of-type(2){transition-delay:35ms!important}
  .mobile-drawer.is-open .mobile-nav-section:nth-of-type(3){transition-delay:70ms!important}
  .mobile-drawer.is-open .mobile-nav-section:nth-of-type(4){transition-delay:105ms!important}
  .bottom-nav :is(a,button) .icon{transition:color .30s ease,transform .36s cubic-bezier(.22,1,.36,1)!important}
  .bottom-nav :is(a,button):active .icon{transform:scale(.92)!important}
  .bottom-nav :is(a,button).is-active::after,
  .bottom-nav>button.is-open::after{transition:transform .38s cubic-bezier(.22,1,.36,1);transform-origin:center}
}
.page-transition{
  background:linear-gradient(135deg,rgba(255,255,255,.955),rgba(252,248,249,.955))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition:opacity .18s cubic-bezier(.22,.61,.36,1),visibility 0s linear .19s!important;
  will-change:opacity;
}
html.hbs-nav-leaving .page-transition,
html.hbs-nav-arrival .page-transition{
  background:linear-gradient(135deg,rgba(255,255,255,.955),rgba(252,248,249,.955))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition-delay:0s!important;
}
html.hbs-nav-arrival.hbs-nav-reveal .page-transition{
  transition:opacity .42s cubic-bezier(.22,1,.36,1),visibility 0s linear .43s!important;
}
.page-transition__glow{display:none!important}
.page-transition__loader{transition:opacity .22s ease,transform .36s cubic-bezier(.22,1,.36,1)!important}
.page-transition__brand{color:#24272c!important;text-shadow:none!important}
.page-transition__brand i{color:#c50b31!important}
.page-transition__brand b{color:#30323a!important}
.page-transition__track{background:rgba(197,11,49,.12);box-shadow:none}
.page-transition__track i{box-shadow:none}
/* Accessibility: no decorative motion or intermediate invisible states. */
@media(prefers-reduced-motion:reduce){
  .page-transition{display:none!important}
  .topbar .brand__logo,.topbar.is-scrolled .brand__logo{transform:none!important;transition:none!important}
  .topbar .nav--desktop>a::after,.topbar .nav--desktop .nav__item-icon,
  .topbar .actions .icon,.topbar .mega-menu,
  .topbar .mega-menu :is(.mega-menu__intro,.mega-menu__group,.mega-menu__quick>a),
  .mobile-drawer,.mobile-menu-backdrop,.mobile-drawer .mobile-nav-section,
  .bottom-nav :is(a,button) .icon{transition:none!important;animation:none!important}
  .topbar .mega-menu :is(.mega-menu__intro,.mega-menu__group,.mega-menu__quick>a),
  .mobile-drawer .mobile-nav-section{opacity:1!important;transform:none!important}
}

/* More menu chevron: a soft quarter-turn from the RTL-side arrow to downward.
   Driven by the existing aria-expanded state, without additional JS or layout shift. */
.topbar .nav--desktop .more-toggle > .icon--xs{
  transform:rotate(0deg)!important;
  transform-origin:50% 50%!important;
  transition:transform .48s cubic-bezier(.22,1,.36,1),color .30s ease!important;
}
.topbar .nav--desktop .more-toggle[aria-expanded="true"] > .icon--xs{
  transform:rotate(-90deg)!important;
  color:#ca0b33!important;
}
@media(prefers-reduced-motion:reduce){
  .topbar .nav--desktop .more-toggle > .icon--xs{transition:none!important}
}