/* === Lock navbar height for default & scrolled states === */
        :root{
          --bar-h: 82px;   /* navbar height (desktop) */
          --logo-h: 76px;  /* image height inside the slot */
          --brand-w: 200px;/* fallback width; your JS may override */
          --logo-scale-desktop: 1.90!important; /* optional visual boost, no layout change */
        }
        
        /* Remove Bootstrap's vertical padding that inflates height at page top */
        nav.navbar.responsive-sticky{
          padding-block: 0 !important;         /* top & bottom = 0 */
          height: var(--bar-h) !important;      /* lock bar height */
        }
        
        @media (max-width: 991.98px) {
            :root {
                --bar-h: 65px!important;
                --logo-h: 46px;
                --logo-scale-desktop: 1;
            }
        }
        
        
        
        
        /* Make the inner container exactly the bar height and center items */
        nav.navbar.responsive-sticky .container-fluid{
          height: 100% !important;
          min-height: 0 !important;
          display: flex !important;
          align-items: center !important;
        }
        
        /* Brand "slot" has fixed size so swapping logos doesn’t move layout */
        nav.navbar.responsive-sticky .navbar-brand{
          position: relative !important;
          display: inline-block !important;
          width: var(--brand-w) !important;     /* JS may set this to widest logo */
          height: 100% !important;
          margin: 0 !important;
          padding: 0 !important;
          line-height: 0 !important;
          overflow: visible !important;         /* allow logo to overflow if scaled */
        }
        
        /* Stack all logos at the same spot; only one visible per state */
        nav.navbar.responsive-sticky .navbar-brand img{
          position: absolute;
          left: 0;
          top: 59%;
          transform: translateY(-50%) scale(var(--logo-scale-desktop)); /* bigger look */
          transform-origin: left center;
          height: var(--logo-h) !important;
          width: auto !important;
          display: block !important;
          opacity: 0; visibility: hidden;
          transition: opacity .2s ease;
        }
        
        /* Default (page top) */
        nav.navbar.responsive-sticky .navbar-brand img.default-logo{
          opacity: 1; visibility: visible;
        }
        
        /* Scrolled (alt logo) */
        nav.navbar.responsive-sticky.scrolled .navbar-brand img.default-logo{
          opacity: 0; visibility: hidden;
        }
        nav.navbar.responsive-sticky.scrolled .navbar-brand img.alt-logo{
          opacity: 1; visibility: visible;
        }
        
        /* Prevent child margins from adding height */
        nav.navbar.responsive-sticky .navbar-nav,
        nav.navbar.responsive-sticky .header-icon{ margin-block: 0 !important; }
        
        /* Mobile */
        @media (max-width: 991.98px){
          :root{ --bar-h: 60px; --logo-h: 46px; --logo-scale-desktop: 1; }
          nav.navbar.responsive-sticky .navbar-brand img.default-logo,
          nav.navbar.responsive-sticky .navbar-brand img.alt-logo{
            opacity: 0 !important; visibility: hidden !important;
          }
          nav.navbar.responsive-sticky .navbar-brand img.mobile-logo{
            opacity: 1 !important; visibility: visible !important;
          }
        }
    
    
        :root{
          --underline-color: #BFD63C;
          --underline-thickness: 3px;
          --underline-gap: 6px;
          --anim-duration: 800ms;
          --anim-ease: cubic-bezier(.165,.84,.44,1);
        }
        
        /* Hide any legacy underline bar */
        .u-underline-shrink-center .separator-animation{ display:none !important; }
        
        .text-highlight{
          position: relative;
          display: inline-block;
          padding-bottom: calc(var(--underline-thickness)*2 + var(--underline-gap));
        }
        
        /* Two underline lines (shorter than text width) */
        .u-underline-shrink-center .text-highlight::after{
          content: "";
          position: absolute;
          left: 0; bottom: 0;
          width: 100%;
          height: calc(var(--underline-thickness)*2 + var(--underline-gap));
        
          transform: scaleX(0);
          transform-origin: center;
          transition: transform var(--anim-duration) var(--anim-ease);
        
          background-repeat: no-repeat, no-repeat;
          background-image:
            linear-gradient(var(--underline-color), var(--underline-color)),
            linear-gradient(var(--underline-color), var(--underline-color));
        
          /* Make them shorter (shrink from both ends) */
          background-size:
            85% var(--underline-thickness),   /* top line */
            70% var(--underline-thickness);   /* bottom line */
        
          /* Keep them centered */
          background-position:
            50% calc(100% - (var(--underline-gap) + var(--underline-thickness))),
            50% 100%;
        }
        
        /* Trigger animation */
        .u-underline-shrink-center.shadow-in .text-highlight::after{ transform: scaleX(1); }