:root {
    --color-primary: rgba(27, 86, 151, 1);
    --color-secondary1: rgba(226, 80, 65, 1);
    --color-secondary2: rgba(97, 189, 109, 1);
    --color-secondary3: rgba(15, 34, 126, 1);
    --color-secondary4: rgba(255, 255, 255, 1);
    --color-text: rgba(62, 62, 62, 1);
  }

  
    .theme .color-primary, .color-primary {
      color: rgba(27, 86, 151, 1);
    }
    .theme .bg-color-primary, .bg-color-primary {
      background-color: rgba(27, 86, 151, 1);
    }
    .theme .border-color-primary, .border-color-primary {
      border-color: rgba(27, 86, 151, 1);
    }
    .theme .fill-color-primary, .fill-color-primary {
      fill: rgba(27, 86, 151, 1);
    }
  
    .theme .color-secondary1, .color-secondary1 {
      color: rgba(226, 80, 65, 1);
    }
    .theme .bg-color-secondary1, .bg-color-secondary1 {
      background-color: rgba(226, 80, 65, 1);
    }
    .theme .border-color-secondary1, .border-color-secondary1 {
      border-color: rgba(226, 80, 65, 1);
    }
    .theme .fill-color-secondary1, .fill-color-secondary1 {
      fill: rgba(226, 80, 65, 1);
    }
  
    .theme .color-secondary2, .color-secondary2 {
      color: rgba(97, 189, 109, 1);
    }
    .theme .bg-color-secondary2, .bg-color-secondary2 {
      background-color: rgba(97, 189, 109, 1);
    }
    .theme .border-color-secondary2, .border-color-secondary2 {
      border-color: rgba(97, 189, 109, 1);
    }
    .theme .fill-color-secondary2, .fill-color-secondary2 {
      fill: rgba(97, 189, 109, 1);
    }
  
    .theme .color-secondary3, .color-secondary3 {
      color: rgba(15, 34, 126, 1);
    }
    .theme .bg-color-secondary3, .bg-color-secondary3 {
      background-color: rgba(15, 34, 126, 1);
    }
    .theme .border-color-secondary3, .border-color-secondary3 {
      border-color: rgba(15, 34, 126, 1);
    }
    .theme .fill-color-secondary3, .fill-color-secondary3 {
      fill: rgba(15, 34, 126, 1);
    }
  
    .theme .color-secondary4, .color-secondary4 {
      color: rgba(255, 255, 255, 1);
    }
    .theme .bg-color-secondary4, .bg-color-secondary4 {
      background-color: rgba(255, 255, 255, 1);
    }
    .theme .border-color-secondary4, .border-color-secondary4 {
      border-color: rgba(255, 255, 255, 1);
    }
    .theme .fill-color-secondary4, .fill-color-secondary4 {
      fill: rgba(255, 255, 255, 1);
    }
  
    .note-editable.panel-body h1, 
    .text-widget-content h1,
    .post-description h1 {
      font-family: Ropa Sans, arial;
      line-height: 1em;
      font-size: 72px;
      color: #3e3e3e;
      
          letter-spacing: normal;
        
    }
  
    .note-editable.panel-body h2, 
    .text-widget-content h2,
    .post-description h2 {
      font-family: Ropa Sans, arial;
      line-height: 1em;
      font-size: 42px;
      color: #3e3e3e;
      
          letter-spacing: normal;
        
    }
  
    .note-editable.panel-body h3, 
    .text-widget-content h3,
    .post-description h3 {
      font-family: Ropa Sans, arial;
      line-height: 1em;
      font-size: 28px;
      color: #3e3e3e;
      
          letter-spacing: normal;
        
    }
  
    .note-editable.panel-body h4, 
    .text-widget-content h4,
    .post-description h4 {
      font-family: Ropa Sans, arial;
      line-height: 1em;
      font-size: 21px;
      color: rgba(38, 38, 38, 1);
      
          letter-spacing: normal;
        
    }
  
    .note-editable.panel-body h5, 
    .text-widget-content h5,
    .post-description h5 {
      font-family: Ropa Sans, arial;
      line-height: 1em;
      font-size: 18px;
      color: #3e3e3e;
      
          letter-spacing: normal;
        
    }
  
    .note-editable.panel-body h6, 
    .text-widget-content h6,
    .post-description h6 {
      font-family: Ropa Sans, arial;
      line-height: 1em;
      font-size: 15px;
      color: #3e3e3e;
      
          letter-spacing: normal;
        
    }
  
        .note-editable.panel-body li, 
        .text-widget-content li, 
      
    .note-editable.panel-body p, 
    .text-widget-content p,
    .post-description p {
      font-family: Open Sans, arial;
      line-height: 1.6em;
      font-size: 16px;
      color: rgba(84, 84, 84, 1);
      
          letter-spacing: normal;
        
    }
  
        .note-editable.panel-body blockquote > p,
        .text-widget-content blockquote > p,
      
    .note-editable.panel-body blockquote, 
    .text-widget-content blockquote,
    .post-description blockquote {
      font-family: Open Sans, arial;
      line-height: 1.6em;
      font-size: 15px;
      color: #3e3e3e;
      
          letter-spacing: normal;
        
    }
  
    body {}
    
    @media screen and (max-width: 480px) {
     .note-editable.panel-body h1, 
       .text-widget-content h1 {
        font-family: Ropa Sans;
        line-height: 1em;
        font-size: 48px !important;
        color: #3e3e3e;
        
            letter-spacing: normal;
          
      }

     .note-editable.panel-body h2, 
       .text-widget-content h2 {
        font-family: Ropa Sans;
        line-height: 1.1em;
        font-size: 26px !important;
        color: #3e3e3e;
        
            letter-spacing: normal;
          
      }

     .note-editable.panel-body h3, 
       .text-widget-content h3 {
        font-family: Ropa Sans;
        line-height: 1em;
        font-size: 22px !important;
        color: #3e3e3e;
        
            letter-spacing: normal;
          
      }

     .note-editable.panel-body h4, 
       .text-widget-content h4 {
        font-family: Ropa Sans;
        line-height: 1em;
        font-size: 18px !important;
        color: rgba(27, 86, 151, 1);
        
            letter-spacing: normal;
          
      }

     .note-editable.panel-body h5, 
       .text-widget-content h5 {
        font-family: Ropa Sans;
        line-height: 1em;
        font-size: 18px !important;
        color: #3e3e3e;
        
            letter-spacing: normal;
          
      }

     .note-editable.panel-body h6, 
       .text-widget-content h6 {
        font-family: Ropa Sans;
        line-height: 1em;
        font-size: 14px !important;
        color: #3e3e3e;
        
            letter-spacing: normal;
          
      }

     .note-editable.panel-body li, 
           .text-widget-content li,    
         .note-editable.panel-body p, 
       .text-widget-content p {
        font-family: Open Sans;
        line-height: 1.6em;
        font-size: 14px !important;
        color: #3e3e3e;
        
            letter-spacing: normal;
          
      }

     .note-editable.panel-body blockquote > p,
           .text-widget-content blockquote > p,
         .note-editable.panel-body blockquote, 
       .text-widget-content blockquote {
        font-family: Open Sans;
        line-height: 1.6em;
        font-size: 14px !important;
        color: #3e3e3e;
        
            letter-spacing: normal;
          
      }

    
      body {}
    }
  

  .page-layout:not(.style-boxed-layout) .grid-content,
  .theme .page-layout:not(.style-boxed-layout) .container,
  .page-layout.header-layout-floating:not(.style-boxed-layout) .main-header-wrapper,
  .page-layout.fixed-header-layout-floating:not(.style-boxed-layout) .fixed-header-wrapper,
  .mega-menu-inner, .megamenu-settings-wrapper {
    max-width: 1100px;
  }

  .style-boxed-layout.page-layout,
  .theme .style-boxed-layout .fixed-header-wrapper, 
  .theme .style-boxed-layout .fixed-header-wrapper.visible,
  #website.theme .fixed-header-layout-floating .fixed-header-wrapper, 
  #website.theme .fixed-header-layout-floating .fixed-header-wrapper.visible
  {
    width: 1100px;
  }
  /*
    #website.theme .header-layout-floating .fixed-header-wrapper, 
    #website.theme .header-layout-floating .fixed-header-wrapper.visible {
      width: 1100px;
    }*/
  /*
    #website.theme .fixed-header-layout-floating .fixed-header-wrapper, 
    #website.theme .fixed-header-layout-floating .fixed-header-wrapper.visible {
      width: calc(1100px - 130px) !important;
  }
  */
  .style-boxed-layout .grid-content,
  .style-boxed-layout .container,
  .style-boxed-layout.header-layout-floating .main-header-wrapper,
  .style-boxed-layout.fixed-header-layout-floating .fixed-header-wrapper {
    max-width: 90%;
  }

  .note-editable.panel-body a,
  .text-widget-content a {
    color: ;
    text-decoration: none;
  }

  .note-editable.panel-body a:hover,
  .text-widget-content a:hover {
    color: ;
    text-decoration: underline;
  }

  .theme .page-layout {
    background: #ffffff;
  }

  .theme .primaryColor,
  .theme .highlightColor:hover,
  .theme .smaller .highlightColor:hover,
  .theme .highlightColor.active,
  .blog-toc-item.active > a,
  .portfolio-filter ul li.active a, 
  .portfolio-filter ul li a:hover,
  .portfolio-list-wrapper .image-overlay a:hover,
  .portfolio-widget-item .primaryColor-bg2:hover,
  .tmdp-pagination [data-role]:hover i, .blog-back-btn:hover i,
  .products-filter-style-1 ul li.active a,
  .products-filter-style-1 ul li a:hover,
  .side-filter .products-filter section > ul > li.active > a,
  .side-filter .products-filter section > ul > li:hover > a,
  .side-filter .products-filter section ul li li:hover > a,
  .side-filter .products-filter section ul li li.active > a,
  .has-subcategories div:hover:before,
  .store6 .product-item-description .product-item-price,
  .post-category a,
  .login-question a,
  .promo-code-toggle-btn,
  .steps-nav-wrapper a.active,
  .steps-nav-wrapper a:hover,
  .steps-nav-wrapper a.active:after,
  .box-select h5,
  .quick-view-wrapper .product-body-container .quick-view-title a:hover,
  .theme .view-details-btn,
  .products-filter .search-form button:hover:after,
  .product-characteristics:hover,
  .product-reviews-link:hover,
  .theme .profile-sidebar li:hover a,
  .member-logout-button,
  .plyr--full-ui input[type=range]
  {
    color: rgba(27, 86, 151, 1) !important;
  }

  .cart-table.style-2 .fake-checkbox.checked,
  .cart-table.style-2 .fake-checkbox:hover:before {
    border: 2px solid rgba(27, 86, 151, 1);
  }

  .theme .active > .website-nav-link {
    color: rgba(27, 86, 151, 1);
  }

  .theme .primaryColor-bg:hover,
  .tmdp-pagination [data-role="0"],
  .theme .active .primaryColor-bg {
    background-color: rgba(27, 86, 151, 1);
    border-color: rgba(27, 86, 151, 1);
  }

  .theme .active .primaryColor-bg,
  .theme .primaryColor-bg:hover,
  .theme .smaller .primaryColor-bg:hover,
  .theme .smaller .active .primaryColor-bg {
    color: #fff !important;
  }

  .theme .signin-button:hover svg,
  .theme .cart-button:hover svg,
  .theme .signin-button.active svg,
  .theme .cart-button.active svg,
  .theme .smaller .signin-button:hover svg,
  .theme .smaller .cart-button:hover svg,
  .theme .smaller .signin-button.active svg,
  .theme .smaller .cart-button.active svg,
  .booking-final-step .booking-name svg {
    fill: rgba(27, 86, 151, 1);
  }

  .theme .primaryColor-bg2, 
  .top-bar .social-media i,
  .theme .read-more,
  .primary-active.active,
  .primary-hover:hover,
  .blog-comment-form a:hover,
  .theme .buttons-wrapper-outer .primaryColor-bg2,
  .product-main-photo.has-badge:after,
  .live-theme .ui-widget-header,
  nav li a:before,
  .store2 .product-item .product-badge,
  .theme .profile-sidebar li a:after,
  .vertical-menu-styling.design-4 li:after,
  .live-theme-message a,
  .next-step-popup svg,
  .form-field .custom-checkbox input[type=checkbox]:checked + .custom-checkbox-label:before,
  .form-field .custom-checkbox input[type=radio]:checked + .custom-checkbox-label:before,
  .elite-widget ul li.active a:after,
  .elite-tab-call-to-action,
  .cart-title:after,
  .product-tabs li a.active:after,
  .checkout-style-2 .checkout-step.active,
  .live-theme .widget-checkout .checkout-info span .variations-update, 
  .product-info .variations-update,
  .fake-checkbox.checked:before,
  .bump-active .tick-wrapper:before,
  .title-border,
  .theme .manage-link,
  .theme .profile-sidebar li a.active,
  .copy-link-icon,
  .fake-checkbox:hover:before,
  .grid-content-store .product-price .price-discount-tag,
  .variation-wrapper-radio .box-select.active:before,
  .variation-wrapper-check .box-select.active:before,
  .product-photo-list li a.active:after,
  .product-photo-list li a:hover:after,
  .next-step-popup.cart-preview-full-height a,
  .plyr button.plyr__control--overlaid,
  .plyr--video .plyr__control:focus-visible, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true],
  .video-thumb-play,
  .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before,
  .post-upvote-button.active,
  .comment-send,
  .video-bottom-play-area .video-playlist-sidebar-btn-wrapper, .video-direcotry-item-btn-wrapper,
  .next-step-popup.cart-preview-full-height a,
  .circle-layout-2 .circle-sidebar .circle-page-item:hover .circle-icon,
  .circle-layout-2 .circle-sidebar .circle-page-item.active .circle-icon,
  .circle-layout-2 .circle-sidebar .circle-page-item.active .circle-video-play-btn,
  .circle-layout-2 .circle-sidebar .circle-page-item:hover .circle-video-play-btn,
  .blog-reading-progress-bar,
  .post-featured-badge,
  .directory-filter-nav.style-2 li.active
  {
    background-color: rgba(27, 86, 151, 1);
  }

  .theme .border-color,
  article blockquote,
  .theme nav li ul,
  .theme .primaryColor-border, 
  blockquote,
  .portfolio-filter ul li.active a,
  .tmdp-pagination [data-role]:hover, .blog-back-btn:hover,
  .theme .profile-sidebar li a.active,
  .products-filter-style-1 ul li.active a,
  .pagination-wrapper li a:hover, .pagination-wrapper li.active a,
  .products-filter-style-2 li.active a,
  .vertical-menu-styling.design-2 li:hover,
  .vertical-menu-styling.design-2 li.active,
  .vertical-menu-styling.design-3 li:hover,
  .vertical-menu-styling.design-3 li.active,
  .form-field .custom-checkbox input[type=checkbox]:checked + .custom-checkbox-label:before,
  .form-field .custom-checkbox input[type=radio]:checked + .custom-checkbox-label:before,
  /*.select-wrapper.style-1 ul li a.active,
  .select-wrapper.style-1 ul li a:hover,
  .select-wrapper.style-2 ul li a.active,
  .select-wrapper.style-2 ul li a:hover,
  .select-wrapper.style-3 ul li a.active,
  .select-wrapper.style-3 ul li a:hover,
  .select-wrapper.style-1 ul li a.active:before,
  .select-wrapper.style-2 ul li a.active:before,
  .select-wrapper.style-3 ul li a.active:before,*/
  .box-select.active, .box-select:hover,
  .circle-select:hover, 
  .circle-select.active, 
  .color-select.active, 
  .color-select:hover,
  .checkout-style-1 .checkout-step.active, 
  .checkout-style-1 .checkout-step:hover,
  .fake-checkbox.checked:before,
  .bump-active .tick-wrapper:before,
  .variation-wrapper-radio .box-select.active:before,
  .variation-wrapper-check .box-select.active:before
  {
    border-color: rgba(27, 86, 151, 1);
  }

  .theme .header-side-style-1 nav ul li.website-nav-link-highlighted > a,
  .theme .header-side-style-1a nav ul li.website-nav-link-highlighted >a {
    border-color: rgba(27, 86, 151, 1);
  }

  .checkout-spinner {
    border-color: rgba(27, 86, 151, 1);
    border-top-color: rgba(0, 0, 0, .2);
    border-right-color: rgba(0, 0, 0, .2);
    border-bottom-color: rgba(0, 0, 0, .2);
  }

  .tmdp-slides-loading,
  #client-ajax-message,
  #portfolio-popup-content.active-loading, 
  #tmdp-simple-lightbox-content.active-loading,
  .loader.active-loading {
    border-left-color: rgba(27, 86, 151, 1);
  }

  .posts-list-wrapper .post-title a,
  article .post-meta a, 
  article .post-meta p,
  .portfolio-filter li a,
  .product-item-description h3,
  .product-item-description .product-item-price,
  .breadcrumb li a, .breadcrumb li span,
  .product-body-container h2,
  .product-page-style-image-top .product-price span,
  article .post-meta span,
  .theme .post-title,
  .comments-list .comment-title,
  .blog-tag-cloud a,
  .post-categories,
  .checkout-wrapper h2,
  .checkout-wrapper .cart-labels span,
  .checkout-wrapper .product-info a,
  .checkout-wrapper .cart-container .qty, 
  .checkout-wrapper .cart-container .row-total,
  .checkout-wrapper .subtotal-wrapper span,
  .live-theme .checkout-wrapper .promo-code-toggle-btn,
  .checkout-wrapper .cart-container .row-delete i,
  .product-price span,
  .products-showing span,
  .filter-lane label,
  .products-filter-style-2 li a,
  .product-body-container h1,
  .checkout-wrapper h1,
  .no-items-text
  {
    color: rgba(62, 62, 62, 1);
  }

  .tmdp-bullets .tmdp-bullet:hover, 
  .tmdp-bullets .tmdp-bullet.active,
  .side-filter .products-filter ul li a:hover:before,
  .side-filter .products-filter ul li.active > a:before {
    background: rgba(27, 86, 151, 1) !important;
    border-color: rgba(27, 86, 151, 1) !important;
  }

  .theme .highlightBg:hover {
    background: rgba(27, 86, 151, 1);
    color: #fff !important;
  }

  .theme .theme18 .navigation-wrapper .active > .website-nav-link {
    background: rgba(27, 86, 151, 1);
    color: #fff;
  }

  .theme .theme18 .navigation-wrapper .active>a:hover {
    color: #fff !important;
  }

  

  

        #header-widget-1531565329804 nav > ul > li > a.website-nav-link {
          padding: 12px;
        }

        #header-widget-1531565329804  ul li a.website-nav-link {
          font-size: 18px;
          font-family: Ropa Sans;
          color: rgba(15, 34, 126, 1);
          text-transform: uppercase;
        }

        .mobile-bottom-dock-menu .with-submenu-shadow li a {
          font-family: Ropa Sans;
        }

        #header-widget-1531565329804 .before, 
        #header-widget-1531565329804 .after, 
        #header-widget-1531565329804 .middle {
          background: #3e3e3e;
        }

        #header-widget-1531565329804 .burger-menu-visible .before, 
        #header-widget-1531565329804 .burger-menu-visible .after, 
        #header-widget-1531565329804 .burger-menu-visible .middle {
          background: rgba(15, 34, 126, 1);
        }

        #header-widget-1531565329804 nav > ul > li:hover a.website-nav-link,
        #header-widget-1531565329804 nav > ul > li.active a.website-nav-link,
        #header-widget-1531565329804 .overlay nav li:hover > div > ul li a.website-nav-link:hover {
          color: rgba(0, 0, 0, 1);
        }

        #header-widget-1531565329804 .with-background nav > ul > li:hover > a, 
        #header-widget-1531565329804 .with-background nav > ul > li.active > a {
          background-color: transparent;
          border-radius: 0px;
        }

        #header-widget-1531565329804 .with-border li:hover:before,
        #header-widget-1531565329804 .with-border li.active:before,
        #header-widget-1531565329804 .border-below li:hover a.website-nav-link:after, 
        #header-widget-1531565329804 .border-below li.active a.website-nav-link:after {
          background: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804 .border-at-left nav > ul > li.active,
        #header-widget-1531565329804 .border-at-left nav > ul > li:hover {
          border-color: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804 .border-below nav > ul > li:after.active,
        #header-widget-1531565329804 .border-below nav > ul > li:after:hover {
          background: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804 nav li:hover > div > ul.with-border {
          border: 1px solid #3e3e3e;
          background-color: #ffffff;
        }

        #header-widget-1531565329804 nav li:hover > div > ul,
        #header-widget-1531565329804 nav li.visible > div > ul {
          background-color: #ffffff;
        }

        #header-widget-1531565329804 nav li:hover > div > ul li a.website-nav-link,
        #header-widget-1531565329804 nav li.visible > div > ul li a.website-nav-link {
          color: #6a6a6a;
        }

        #header-widget-1531565329804 nav li:hover > div > ul li a.website-nav-link:hover {
          color: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804 .vertical-menu-styling.design-1 nav > ul > li,
        #header-widget-1531565329804 .vertical-menu-styling.design-3 nav > ul > li {
          border-color: #3e3e3e;
        }

        #header-widget-1531565329804 .vertical-menu-styling.border-below.left li:after {
          background-color: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804 .overlay nav li > div > ul > li > a.website-nav-link {
          color: rgba(15, 34, 126, 1);
        }

        #header-widget-1531565329804 .horizontal-menu-styling.with-divider nav > ul > li:after {
          background-color: rgba(27, 86, 151, 1);
        }
      

            #header-widget-1533304111444 .hvr-sweep-to-right:before, 
            #header-widget-1533304111444 .hvr-fade:hover, #header-widget-1533304111444 .hvr-fade:focus, #header-widget-1533304111444 .hvr-fade:active, 
            #header-widget-1533304111444 .hvr-rectangle-out:before {
              background: rgba(27, 86, 151, 1) !important;
              border-color: rgba(27, 86, 151, 1) !important;
            }

            #header-widget-1533304111444 .hvr-sweep-to-right:hover, #header-widget-1533304111444 .hvr-sweep-to-right:focus, #header-widget-1533304111444 .hvr-sweep-to-right:active, 
            #header-widget-1533304111444 .hvr-fade:hover, #header-widget-1533304111444 .hvr-fade:focus, #header-widget-1533304111444 .hvr-fade:active, 
            #header-widget-1533304111444 .hvr-rectangle-out:hover, #header-widget-1533304111444 .hvr-rectangle-out:focus, #header-widget-1533304111444 .hvr-rectangle-out:active {
              color: #ffffff !important;
            }
          

            #header-widget-1789665869352 .hvr-sweep-to-right:before, 
            #header-widget-1789665869352 .hvr-fade:hover, #header-widget-1789665869352 .hvr-fade:focus, #header-widget-1789665869352 .hvr-fade:active, 
            #header-widget-1789665869352 .hvr-rectangle-out:before {
              background: rgba(27, 86, 151, 1) !important;
              border-color: rgba(27, 86, 151, 1) !important;
            }

            #header-widget-1789665869352 .hvr-sweep-to-right:hover, #header-widget-1789665869352 .hvr-sweep-to-right:focus, #header-widget-1789665869352 .hvr-sweep-to-right:active, 
            #header-widget-1789665869352 .hvr-fade:hover, #header-widget-1789665869352 .hvr-fade:focus, #header-widget-1789665869352 .hvr-fade:active, 
            #header-widget-1789665869352 .hvr-rectangle-out:hover, #header-widget-1789665869352 .hvr-rectangle-out:focus, #header-widget-1789665869352 .hvr-rectangle-out:active {
              color: #ffffff !important;
            }
          

        #header-widget-1757177051140 nav > ul > li > a.website-nav-link {
          padding: 14px;
        }

        #header-widget-1757177051140  ul li a.website-nav-link {
          font-size: 18px;
          font-family: Ropa Sans;
          color: rgba(15, 34, 126, 1);
          text-transform: uppercase;
        }

        .mobile-bottom-dock-menu .with-submenu-shadow li a {
          font-family: Ropa Sans;
        }

        #header-widget-1757177051140 .before, 
        #header-widget-1757177051140 .after, 
        #header-widget-1757177051140 .middle {
          background: #3e3e3e;
        }

        #header-widget-1757177051140 .burger-menu-visible .before, 
        #header-widget-1757177051140 .burger-menu-visible .after, 
        #header-widget-1757177051140 .burger-menu-visible .middle {
          background: rgba(15, 34, 126, 1);
        }

        #header-widget-1757177051140 nav > ul > li:hover a.website-nav-link,
        #header-widget-1757177051140 nav > ul > li.active a.website-nav-link,
        #header-widget-1757177051140 .overlay nav li:hover > div > ul li a.website-nav-link:hover {
          color: rgba(0, 0, 0, 1);
        }

        #header-widget-1757177051140 .with-background nav > ul > li:hover > a, 
        #header-widget-1757177051140 .with-background nav > ul > li.active > a {
          background-color: transparent;
          border-radius: 0px;
        }

        #header-widget-1757177051140 .with-border li:hover:before,
        #header-widget-1757177051140 .with-border li.active:before,
        #header-widget-1757177051140 .border-below li:hover a.website-nav-link:after, 
        #header-widget-1757177051140 .border-below li.active a.website-nav-link:after {
          background: rgba(27, 86, 151, 1);
        }

        #header-widget-1757177051140 .border-at-left nav > ul > li.active,
        #header-widget-1757177051140 .border-at-left nav > ul > li:hover {
          border-color: rgba(27, 86, 151, 1);
        }

        #header-widget-1757177051140 .border-below nav > ul > li:after.active,
        #header-widget-1757177051140 .border-below nav > ul > li:after:hover {
          background: rgba(27, 86, 151, 1);
        }

        #header-widget-1757177051140 nav li:hover > div > ul.with-border {
          border: 1px solid #3e3e3e;
          background-color: #ffffff;
        }

        #header-widget-1757177051140 nav li:hover > div > ul,
        #header-widget-1757177051140 nav li.visible > div > ul {
          background-color: #ffffff;
        }

        #header-widget-1757177051140 nav li:hover > div > ul li a.website-nav-link,
        #header-widget-1757177051140 nav li.visible > div > ul li a.website-nav-link {
          color: #6a6a6a;
        }

        #header-widget-1757177051140 nav li:hover > div > ul li a.website-nav-link:hover {
          color: rgba(27, 86, 151, 1);
        }

        #header-widget-1757177051140 .vertical-menu-styling.design-1 nav > ul > li,
        #header-widget-1757177051140 .vertical-menu-styling.design-3 nav > ul > li {
          border-color: #3e3e3e;
        }

        #header-widget-1757177051140 .vertical-menu-styling.border-below.left li:after {
          background-color: rgba(27, 86, 151, 1);
        }

        #header-widget-1757177051140 .overlay nav li > div > ul > li > a.website-nav-link {
          color: rgba(15, 34, 126, 1);
        }

        #header-widget-1757177051140 .horizontal-menu-styling.with-divider nav > ul > li:after {
          background-color: rgba(27, 86, 151, 1);
        }
      

            #header-widget-1757177051139 .hvr-sweep-to-right:before, 
            #header-widget-1757177051139 .hvr-fade:hover, #header-widget-1757177051139 .hvr-fade:focus, #header-widget-1757177051139 .hvr-fade:active, 
            #header-widget-1757177051139 .hvr-rectangle-out:before {
              background: rgba(15, 34, 126, 1) !important;
              border-color: rgba(15, 34, 126, 1) !important;
            }

            #header-widget-1757177051139 .hvr-sweep-to-right:hover, #header-widget-1757177051139 .hvr-sweep-to-right:focus, #header-widget-1757177051139 .hvr-sweep-to-right:active, 
            #header-widget-1757177051139 .hvr-fade:hover, #header-widget-1757177051139 .hvr-fade:focus, #header-widget-1757177051139 .hvr-fade:active, 
            #header-widget-1757177051139 .hvr-rectangle-out:hover, #header-widget-1757177051139 .hvr-rectangle-out:focus, #header-widget-1757177051139 .hvr-rectangle-out:active {
              color: #ffffff !important;
            }
          

            #header-widget-1789666234976 .hvr-sweep-to-right:before, 
            #header-widget-1789666234976 .hvr-fade:hover, #header-widget-1789666234976 .hvr-fade:focus, #header-widget-1789666234976 .hvr-fade:active, 
            #header-widget-1789666234976 .hvr-rectangle-out:before {
              background: rgba(27, 86, 151, 1) !important;
              border-color: rgba(27, 86, 151, 1) !important;
            }

            #header-widget-1789666234976 .hvr-sweep-to-right:hover, #header-widget-1789666234976 .hvr-sweep-to-right:focus, #header-widget-1789666234976 .hvr-sweep-to-right:active, 
            #header-widget-1789666234976 .hvr-fade:hover, #header-widget-1789666234976 .hvr-fade:focus, #header-widget-1789666234976 .hvr-fade:active, 
            #header-widget-1789666234976 .hvr-rectangle-out:hover, #header-widget-1789666234976 .hvr-rectangle-out:focus, #header-widget-1789666234976 .hvr-rectangle-out:active {
              color: #ffffff !important;
            }
          

            @media screen and (max-width: 768px) {
              .mobile-menu .header-widget > .text-widget-content span,
              .mobile-menu .header-widget > .text-widget-content p,
              .mobile-menu .header-widget > .text-widget-content a,
              .mobile-menu .header-widget > .text-widget-content blockquote,
              .mobile-menu .header-widget > .text-widget-content h1,
              .mobile-menu .header-widget > .text-widget-content h2,
              .mobile-menu .header-widget > .text-widget-content h3,
              .mobile-menu .header-widget > .text-widget-content h4,
              .mobile-menu .header-widget > .text-widget-content h5,
              .mobile-menu .header-widget > .text-widget-content h6 {
                color: rgba(15, 34, 126, 1) !important;
              }
            }
          

        #header-widget-1531565329804-mobile nav > ul > li > a.website-nav-link {
          padding: 12px;
        }

        #header-widget-1531565329804-mobile  ul li a.website-nav-link {
          font-size: 18px;
          font-family: Ropa Sans;
          color: rgba(15, 34, 126, 1);
          text-transform: uppercase;
        }

        .mobile-bottom-dock-menu .with-submenu-shadow li a {
          font-family: Ropa Sans;
        }

        #header-widget-1531565329804-mobile .before, 
        #header-widget-1531565329804-mobile .after, 
        #header-widget-1531565329804-mobile .middle {
          background: #3e3e3e;
        }

        #header-widget-1531565329804-mobile .burger-menu-visible .before, 
        #header-widget-1531565329804-mobile .burger-menu-visible .after, 
        #header-widget-1531565329804-mobile .burger-menu-visible .middle {
          background: rgba(15, 34, 126, 1);
        }

        #header-widget-1531565329804-mobile nav > ul > li:hover a.website-nav-link,
        #header-widget-1531565329804-mobile nav > ul > li.active a.website-nav-link,
        #header-widget-1531565329804-mobile .overlay nav li:hover > div > ul li a.website-nav-link:hover {
          color: rgba(0, 0, 0, 1);
        }

        #header-widget-1531565329804-mobile .with-background nav > ul > li:hover > a, 
        #header-widget-1531565329804-mobile .with-background nav > ul > li.active > a {
          background-color: transparent;
          border-radius: 0px;
        }

        #header-widget-1531565329804-mobile .with-border li:hover:before,
        #header-widget-1531565329804-mobile .with-border li.active:before,
        #header-widget-1531565329804-mobile .border-below li:hover a.website-nav-link:after, 
        #header-widget-1531565329804-mobile .border-below li.active a.website-nav-link:after {
          background: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804-mobile .border-at-left nav > ul > li.active,
        #header-widget-1531565329804-mobile .border-at-left nav > ul > li:hover {
          border-color: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804-mobile .border-below nav > ul > li:after.active,
        #header-widget-1531565329804-mobile .border-below nav > ul > li:after:hover {
          background: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804-mobile nav li:hover > div > ul.with-border {
          border: 1px solid #3e3e3e;
          background-color: #ffffff;
        }

        #header-widget-1531565329804-mobile nav li:hover > div > ul,
        #header-widget-1531565329804-mobile nav li.visible > div > ul {
          background-color: #ffffff;
        }

        #header-widget-1531565329804-mobile nav li:hover > div > ul li a.website-nav-link,
        #header-widget-1531565329804-mobile nav li.visible > div > ul li a.website-nav-link {
          color: #6a6a6a;
        }

        #header-widget-1531565329804-mobile nav li:hover > div > ul li a.website-nav-link:hover {
          color: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804-mobile .vertical-menu-styling.design-1 nav > ul > li,
        #header-widget-1531565329804-mobile .vertical-menu-styling.design-3 nav > ul > li {
          border-color: #3e3e3e;
        }

        #header-widget-1531565329804-mobile .vertical-menu-styling.border-below.left li:after {
          background-color: rgba(27, 86, 151, 1);
        }

        #header-widget-1531565329804-mobile .overlay nav li > div > ul > li > a.website-nav-link {
          color: rgba(15, 34, 126, 1);
        }

        #header-widget-1531565329804-mobile .horizontal-menu-styling.with-divider nav > ul > li:after {
          background-color: rgba(27, 86, 151, 1);
        }
      

            #header-widget-1533304111444-mobile .hvr-sweep-to-right:before, 
            #header-widget-1533304111444-mobile .hvr-fade:hover, #header-widget-1533304111444-mobile .hvr-fade:focus, #header-widget-1533304111444-mobile .hvr-fade:active, 
            #header-widget-1533304111444-mobile .hvr-rectangle-out:before {
              background: rgba(27, 86, 151, 1) !important;
              border-color: rgba(27, 86, 151, 1) !important;
            }

            #header-widget-1533304111444-mobile .hvr-sweep-to-right:hover, #header-widget-1533304111444-mobile .hvr-sweep-to-right:focus, #header-widget-1533304111444-mobile .hvr-sweep-to-right:active, 
            #header-widget-1533304111444-mobile .hvr-fade:hover, #header-widget-1533304111444-mobile .hvr-fade:focus, #header-widget-1533304111444-mobile .hvr-fade:active, 
            #header-widget-1533304111444-mobile .hvr-rectangle-out:hover, #header-widget-1533304111444-mobile .hvr-rectangle-out:focus, #header-widget-1533304111444-mobile .hvr-rectangle-out:active {
              color: #ffffff !important;
            }
          

            #header-widget-1789665869352-mobile .hvr-sweep-to-right:before, 
            #header-widget-1789665869352-mobile .hvr-fade:hover, #header-widget-1789665869352-mobile .hvr-fade:focus, #header-widget-1789665869352-mobile .hvr-fade:active, 
            #header-widget-1789665869352-mobile .hvr-rectangle-out:before {
              background: rgba(27, 86, 151, 1) !important;
              border-color: rgba(27, 86, 151, 1) !important;
            }

            #header-widget-1789665869352-mobile .hvr-sweep-to-right:hover, #header-widget-1789665869352-mobile .hvr-sweep-to-right:focus, #header-widget-1789665869352-mobile .hvr-sweep-to-right:active, 
            #header-widget-1789665869352-mobile .hvr-fade:hover, #header-widget-1789665869352-mobile .hvr-fade:focus, #header-widget-1789665869352-mobile .hvr-fade:active, 
            #header-widget-1789665869352-mobile .hvr-rectangle-out:hover, #header-widget-1789665869352-mobile .hvr-rectangle-out:focus, #header-widget-1789665869352-mobile .hvr-rectangle-out:active {
              color: #ffffff !important;
            }
          
/* =============================================================================
   BEAUFORT LENDING — BORROWER WAYFINDING MASTER CSS
   Source of truth for every kit page. Do not author CSS in a page.

   Extracted from the three approved Greenville references, whose custom-property
   values were verified byte-identical:
     greenville-hub.html              (city hub)
     greenville-mortgage-programs.html (city program index)
     greenville-fha-loans.html         (individual city-program page)

   USAGE
     tools/build-page.mjs replaces every bl-scenario with the page wrapper
     (e.g. bl-cha-fha) and inlines the result into the page's <style> block.
     Simvoly gets one self-contained code block. There is no external stylesheet.

   TIERS — the builder emits CORE plus the one tier the page type needs.
     CORE      every page
     HUB       city hub only
     INDEX     city program index only
     PROGRAM   individual city-program page only

   NORMALIZATIONS APPLIED (the three sources disagreed; these resolve it)
     hero-actions / cta-actions ....... actions
     section-intro .................... section-heading
     disclaimer / nmls ................ compliance
     .bl-gvl-*-closing ................ closing
     .fha-faq-section ................. faq-section
     .fha-related-section ............. related-section

   DESIGN.md VIOLATIONS FIXED DURING EXTRACTION — do not reintroduce
     1. hub .path-link:hover and index .jump-link:hover animated padding-left.
        DESIGN.md §6: never animate a layout property. Now transform: translateX.
     2. index .local-note used border-left: 3px solid.
        DESIGN.md §6: no colored side border greater than 1px. Now 1px.
     3. hub reduced-motion block never neutralised :hover transforms. Now does.
     4. hub hardcoded a CDN hero image inside CSS. Now the --hero-image custom
        property, set per page, so the stylesheet carries no page content.
============================================================================= */


/* ============================================================ CORE — TOKENS */

.bl-scenario{
  --navy-950: oklch(0.20 0.045 255);
  --navy-900: oklch(0.25 0.055 255);
  --blue-700: oklch(0.48 0.14 250);
  --blue-600: oklch(0.57 0.15 246);
  --blue-100: oklch(0.94 0.035 245);
  --blue-050: oklch(0.975 0.016 245);
  --gold-500: oklch(0.77 0.15 82);
  --ink: oklch(0.24 0.028 255);
  --muted: oklch(0.47 0.025 255);
  --line: oklch(0.89 0.018 245);
  --paper: oklch(0.99 0.006 245);
  --paper-blue: oklch(0.965 0.018 245);
  --white: oklch(0.995 0.004 245);
  --green: oklch(0.57 0.14 153);
  --green-600: oklch(0.57 0.14 153);
  --error: oklch(0.78 0.12 28);
  --radius-sm: 0.45rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.2rem;
  --shadow-sm: 0 0.5rem 1.5rem oklch(0.22 0.04 255 / 0.08);
  --shadow-md: 0 1.2rem 3rem oklch(0.22 0.04 255 / 0.13);
  --content: 72rem;
  --measure: 68ch;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
}

/* ============================================== CORE — RESET AND TYPOGRAPHY */

.bl-scenario, .bl-scenario *, .bl-scenario *::before, .bl-scenario *::after{ box-sizing: border-box; }
.bl-scenario{ scroll-behavior: smooth; }
.bl-scenario{ margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.6; font-kerning: normal; text-rendering: optimizeLegibility; }
.bl-scenario a{ color: inherit; }
.bl-scenario .page-title, .bl-scenario h2, .bl-scenario h3{ margin: 0; color: var(--navy-950); line-height: 1.08; text-wrap: balance; }
.bl-scenario p{ margin: 0; text-wrap: pretty; }
.bl-scenario .shell{ width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.bl-scenario :focus-visible{ outline: 3px solid var(--gold-500); outline-offset: 3px; }
.bl-scenario .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bl-scenario .skip{ position: absolute; left: -9999px; }
.bl-scenario .skip:focus{ left: 1rem; top: 1rem; z-index: 10; padding: 0.75rem 1rem; color: var(--white); background: var(--navy-950); border-radius: var(--radius-sm); }

/* The page block owns the H1. The CMS H1 must be disabled — see 07-page-production-checklist.md. */
.bl-scenario .hero .page-title, .bl-scenario .page-title.page-title{ max-width: 14ch; color: var(--white); font-size: clamp(2.65rem, 6vw, 5rem); font-weight: 800; letter-spacing: -0.045em; }

/* ============================================================== CORE — HERO */

.bl-scenario .hero{ position: relative; overflow: hidden; color: var(--white); background: var(--navy-950); }
.bl-scenario .hero::after{ position: absolute; right: -8rem; bottom: -13rem; width: 28rem; height: 28rem; border: 1px solid oklch(0.70 0.08 240 / 0.28); border-radius: 50%; box-shadow: 0 0 0 4rem oklch(0.70 0.08 240 / 0.07), 0 0 0 8rem oklch(0.70 0.08 240 / 0.04); content: ''; pointer-events: none; }
.bl-scenario .hero-grid{ position: relative; z-index: 1; display: grid; gap: var(--space-2xl); padding-block: var(--space-4xl); }
.bl-scenario .hero-copy{ display: grid; align-content: center; gap: var(--space-lg); }
.bl-scenario .eyebrow{ color: var(--blue-600); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.bl-scenario .hero .eyebrow{ color: oklch(0.80 0.10 235); }
.bl-scenario .hero-lead{ max-width: 58ch; color: oklch(0.90 0.018 245); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.bl-scenario .hero-note{ max-width: 60ch; color: oklch(0.76 0.025 245); font-size: 0.86rem; }

/* =========================================================== CORE — BUTTONS */

.bl-scenario .actions{ display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.bl-scenario .button{ display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.75rem 1.15rem; border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none; font-weight: 800; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease-out, border-color 180ms ease-out; }
.bl-scenario .button:hover{ transform: translateY(-2px); }
.bl-scenario .button-primary{ color: var(--white); background: var(--blue-600); }
.bl-scenario .button-primary:hover{ background: var(--blue-700); }
.bl-scenario .button-outline{ color: var(--white); border-color: oklch(0.75 0.03 245); background: transparent; }
.bl-scenario .button-outline:hover{ border-color: var(--white); background: oklch(0.99 0.005 245 / 0.08); }
.bl-scenario .button-dark{ color: var(--white); background: var(--navy-950); }
.bl-scenario .button-light{ color: var(--navy-950); background: var(--white); }
.bl-scenario .button-quiet{ color: var(--navy-950); border-color: var(--line); background: var(--white); }
.bl-scenario .button[hidden]{ display: none; }

/* ======================================================= CORE — PROOF STRIP */
/* Every claim here needs an inline source link. See the substantiation rule in
   07-page-production-checklist.md. No unqualified superlatives. */

.bl-scenario .proof-strip{ background: var(--white); border-bottom: 1px solid var(--line); }
.bl-scenario .proof-grid{ display: grid; grid-template-columns: repeat(2, 1fr); }
.bl-scenario .proof-item{ padding: 1.3rem 0.8rem; text-align: center; }
.bl-scenario .proof-item strong{ display: block; color: var(--blue-700); font-size: 1.05rem; }
.bl-scenario .proof-item span{ display: block; color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.bl-scenario .proof-item a{ color: var(--blue-700); }

/* ========================================================== CORE — SECTIONS */

.bl-scenario .section{ scroll-margin-top: 1rem; padding-block: var(--space-4xl); }
.bl-scenario .section-alt{ background: var(--paper-blue); }
.bl-scenario .section-dark{ color: var(--white); background: var(--navy-950); }
.bl-scenario .section-white{ background: var(--white); }
.bl-scenario .section-grid{ display: grid; gap: var(--space-2xl); }
.bl-scenario .section-heading{ display: grid; align-content: start; gap: var(--space-md); }
.bl-scenario .section-heading h2{ max-width: 17ch; font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -0.035em; }
.bl-scenario .section-heading p{ max-width: var(--measure); color: var(--muted); font-size: 1.05rem; }
.bl-scenario .section-number{ color: var(--gold-500); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
/* Headings on a dark band go white regardless of wrapper. Previously this was
   scoped to .section-heading, so a full-width .section-dark (no section-grid)
   rendered navy text on the navy background - invisible. */
.bl-scenario .section-dark h2, .bl-scenario .section-dark h3, .bl-scenario .section-dark h4{ color: var(--white); }
.bl-scenario .section-dark .section-heading p{ color: oklch(0.78 0.02 245); }

/* ======================================================= CORE — RULED LISTS */

.bl-scenario .ruled-list{ border-top: 1px solid var(--navy-950); }
.bl-scenario .section-dark .ruled-list{ border-top-color: oklch(0.62 0.03 245); }
.bl-scenario .ruled-item{ display: grid; gap: var(--space-sm); padding-block: var(--space-xl); border-bottom: 1px solid var(--line); }
.bl-scenario .section-dark .ruled-item{ border-bottom-color: oklch(0.36 0.04 255); }
.bl-scenario .ruled-item h3{ font-size: clamp(1.2rem, 2.3vw, 1.55rem); }
.bl-scenario .ruled-item p{ max-width: 72ch; color: var(--muted); }
.bl-scenario .section-dark .ruled-item p{ color: oklch(0.78 0.02 245); }
.bl-scenario .check::before{ content: '\2713'; display: inline-grid; width: 1.55rem; height: 1.55rem; margin-right: 0.6rem; place-items: center; color: var(--navy-950); background: var(--gold-500); border-radius: 50%; font-size: 0.78rem; font-weight: 900; vertical-align: 0.1rem; }

/* ============================================== CORE — OPEN FAQ (NEVER an accordion) */
/* CLAUDE.md Key Rule 8. No details/summary. Questions visible on load.
   The !important declarations defend against Simvoly global styles. */

.bl-scenario .faq-section{ display: flow-root; position: relative; clear: both; width: 100%; padding-block: var(--space-4xl); background: var(--paper-blue) !important; }
.bl-scenario .faq-section > .shell{ display: block !important; float: none !important; width: min(calc(100% - 2rem), var(--content)) !important; max-width: var(--content) !important; margin-inline: auto !important; }
.bl-scenario .faq-heading{ display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.bl-scenario .faq-heading h2{ font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.035em; }
.bl-scenario .faq-heading p{ max-width: var(--measure); color: var(--muted); }
.bl-scenario .faq-list{ display: flow-root; float: none !important; width: 100% !important; max-width: none !important; border-top: 1px solid var(--navy-950); background: transparent !important; }
.bl-scenario .faq-item{ display: grid; float: none !important; position: static !important; clear: both !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; gap: var(--space-sm); padding-block: var(--space-xl); border-bottom: 1px solid var(--line); background: transparent !important; box-shadow: none !important; }
.bl-scenario .faq-item h3{ font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.bl-scenario .faq-item p{ max-width: 72ch; color: var(--muted); }
.bl-scenario .faq-item p a{ color: var(--blue-700) !important; font-weight: 800; text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }
.bl-scenario .faq-item p a:hover{ color: var(--blue-600) !important; }

/* =========================================== CORE — CLOSING ACTION AND LEGAL */

.bl-scenario .closing{ position: relative; clear: both; padding-block: var(--space-4xl); color: var(--white); background: var(--navy-950); text-align: center; }
.bl-scenario .closing-inner{ display: grid; justify-items: center; gap: var(--space-lg); }
.bl-scenario .closing h2{ max-width: 17ch; color: var(--white); font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.04em; }
.bl-scenario .closing p{ max-width: 62ch; color: oklch(0.86 0.02 245); }
.bl-scenario .closing .actions{ justify-content: center; }
.bl-scenario .compliance{ margin-top: var(--space-md); color: oklch(0.70 0.02 245) !important; font-size: 0.78rem; }

/* ================================================== CORE — SOURCE CITATIONS */
/* Inline hyperlink at the point of claim. See the substantiation rule. */

.bl-scenario .source-note{ margin-top: var(--space-sm); max-width: 92ch; color: var(--muted); font-size: 0.82rem; line-height: 1.55; }
.bl-scenario .source-note a{ color: var(--blue-700); }

/* ================================================ CORE — NUMBERED PROCESS ROW */
/* Full-width heading above, then numbered steps side by side with vertical
   rules. Use this instead of a second .section-grid when consecutive sections
   would otherwise repeat the left-heading / right-list layout. */

.bl-scenario .process-section{ background: var(--white); }
.bl-scenario .process-list{ display: grid; border-top: 1px solid var(--navy-950); }
.bl-scenario .process-step{ display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--space-lg); padding-block: var(--space-xl); border-bottom: 1px solid var(--line); }
.bl-scenario .process-step strong{ color: var(--blue-700); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.bl-scenario .process-step h3{ font-size: 1.25rem; }
.bl-scenario .process-step p{ margin-top: 0.45rem; max-width: 58ch; color: var(--muted); }

/* =================================================== CORE — EMBEDDED IFRAME */
/* Third-party form and calculator embeds. A percentage height would collapse:
   height:100% only resolves against a parent with an explicit height, which no
   page sets, so the frame gets a fixed height that steps down on small screens. */

.bl-scenario .embed-frame{ overflow: hidden; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--paper); }
.bl-scenario .embed-frame iframe{ display: block; width: 100%; height: 41rem; border: 0; }
.bl-scenario .embed-note{ margin-top: var(--space-md); max-width: 92ch; color: var(--muted); font-size: 0.82rem; line-height: 1.55; }

/* ================================================= CORE — RESPONSIVE, MOTION */

@media (min-width: 42rem){
  .bl-scenario .shell{ width: min(calc(100% - 3rem), var(--content)); }
  .bl-scenario .proof-grid{ grid-template-columns: repeat(4, 1fr); }
  .bl-scenario .proof-item + .proof-item{ border-left: 1px solid var(--line); }
  .bl-scenario .process-list{ grid-template-columns: repeat(3, 1fr); }
  .bl-scenario .process-step{ grid-template-columns: 1fr; padding-right: var(--space-xl); }
  .bl-scenario .process-step + .process-step{ padding-left: var(--space-xl); border-left: 1px solid var(--line); }
}

@media (min-width: 48rem){
  .bl-scenario .hero-grid{ grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.75fr); }
  .bl-scenario .section-grid{ grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.35fr); }
  .bl-scenario .ruled-item{ grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr); }
  .bl-scenario .faq-item{ grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); }
}

@media (max-width: 38rem){
  .bl-scenario .hero-grid, .bl-scenario .section, .bl-scenario .faq-section, .bl-scenario .closing{ padding-block: var(--space-3xl); }
  .bl-scenario .actions{ display: grid; width: 100%; }
  .bl-scenario .button{ width: 100%; }
  .bl-scenario .embed-frame iframe{ height: 33rem; }
}

@media (prefers-reduced-motion: reduce){
  .bl-scenario{ scroll-behavior: auto; }
  .bl-scenario, .bl-scenario *, .bl-scenario *::before, .bl-scenario *::after{ scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .bl-scenario .button:hover, .bl-scenario .jump-link:hover, .bl-scenario .related-link:hover, .bl-scenario .program-link:hover, .bl-scenario .path-link:hover{ transform: none; }
}


/* ###########################################################################
   TIER: PROGRAM — individual city-program page only
   ####################################################################### */

.bl-scenario .snapshot{ align-self: end; padding: var(--space-xl); background: var(--navy-900); border: 1px solid oklch(0.46 0.04 250); }
.bl-scenario .snapshot-label{ margin-bottom: var(--space-sm); color: oklch(0.80 0.10 235); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.bl-scenario .snapshot-row{ display: grid; grid-template-columns: minmax(7rem, 0.58fr) 1fr; gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid oklch(0.46 0.04 250); }
.bl-scenario .snapshot-row:last-child{ border-bottom: 0; }
.bl-scenario .snapshot-row strong{ color: var(--white); }
.bl-scenario .snapshot-row span{ color: oklch(0.80 0.02 245); }

/* A breadcrumb is orientation, not content. It sits above the H1, so every
   pixel here pushes the hero down. Kept to one compact line. */
.bl-scenario .pathbar{ padding-block: var(--space-sm); background: var(--white); border-bottom: 1px solid var(--line); }
.bl-scenario .pathbar-inner{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; line-height: 1.3; }
.bl-scenario .pathbar-label{ color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.bl-scenario .pathbar a, .bl-scenario .pathbar strong{ font-size: 0.8rem; font-weight: 700; }
.bl-scenario .pathbar a{ color: var(--blue-700); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.bl-scenario .pathbar strong{ color: var(--muted); }

.bl-scenario .jump-grid{ display: grid; gap: var(--space-xl); }
.bl-scenario .jump-copy{ display: grid; align-content: start; gap: var(--space-sm); }
.bl-scenario .jump-copy h2{ max-width: 14ch; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -0.03em; }
.bl-scenario .jump-copy p{ max-width: 48ch; color: var(--muted); }

.bl-scenario .fact-band{ display: grid; gap: 1px; overflow: hidden; margin-top: var(--space-2xl); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); }
.bl-scenario .fact{ display: grid; align-content: center; min-height: 8.25rem; padding: var(--space-lg); background: var(--white); }
.bl-scenario .fact strong{ display: block; color: var(--blue-700); font-size: 1.35rem; line-height: 1.1; }
.bl-scenario .fact span{ display: block; margin-top: 0.55rem; color: var(--muted); font-size: 0.84rem; font-weight: 700; line-height: 1.55; }

.bl-scenario .table-wrap{ overflow-x: auto; margin-top: var(--space-2xl); border: 1px solid var(--line); border-radius: var(--radius-md); }
.bl-scenario .fact-band + .table-wrap{ margin-top: var(--space-lg); }
.bl-scenario table{ width: 100%; min-width: 42rem; border-collapse: collapse; background: var(--white); }
.bl-scenario th, .bl-scenario td{ padding: 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.bl-scenario th{ color: var(--white); background: var(--navy-950); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.bl-scenario td{ color: var(--muted); }
.bl-scenario tbody tr:last-child td{ border-bottom: 0; }
.bl-scenario tbody tr:nth-child(even){ background: var(--blue-050); }

.bl-scenario .guidance-panel{ display: grid; gap: var(--space-lg); padding: var(--space-xl); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.bl-scenario .guidance-panel h3{ font-size: clamp(1.4rem, 3vw, 2rem); }
.bl-scenario .guidance-panel p{ max-width: 68ch; color: var(--muted); }
.bl-scenario .guidance-kicker{ color: var(--blue-700); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }

.bl-scenario .related-section{ display: flow-root; position: relative; clear: both; width: 100%; padding-block: var(--space-4xl); background: var(--paper) !important; }
.bl-scenario .related-section > .shell{ display: block !important; float: none !important; width: min(calc(100% - 2rem), var(--content)) !important; max-width: var(--content) !important; margin-inline: auto !important; }
.bl-scenario .related-list{ display: flow-root; float: none !important; width: 100% !important; max-width: none !important; border-top: 1px solid var(--navy-950); background: transparent !important; }
.bl-scenario .related-link{ display: grid; float: none !important; position: static !important; clear: both !important; width: 100% !important; max-width: none !important; margin: 0 !important; gap: var(--space-sm); padding-block: var(--space-xl); border-bottom: 1px solid var(--line); background: transparent !important; box-shadow: none !important; text-decoration: none; transform: translateX(0); transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease-out; }
.bl-scenario .related-link:hover{ transform: translateX(0.25rem); background: linear-gradient(90deg, var(--blue-050), transparent 75%); }
.bl-scenario .related-link strong{ color: var(--navy-950); font-size: 1.15rem; }
.bl-scenario .related-link p{ color: var(--muted); }
.bl-scenario .related-action{ color: var(--blue-700); font-size: 0.82rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }

@media (min-width: 48rem){
  .bl-scenario .jump-grid{ grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.35fr); }
  .bl-scenario .fact-band{ grid-template-columns: repeat(4, 1fr); }
  .bl-scenario .related-link{ grid-template-columns: minmax(13rem, 0.62fr) minmax(0, 1.2fr) auto; align-items: center; }
}

@media (max-width: 38rem){
  .bl-scenario .related-section{ padding-block: var(--space-3xl); }
  .bl-scenario .snapshot-row{ grid-template-columns: 1fr; }
  .bl-scenario .fact{ min-height: auto; padding: 1.25rem; }
  .bl-scenario .fact-band + .table-wrap{ margin-top: var(--space-md); }
}


                #button-widget-1789666234978 .hvr-sweep-to-right:before, 
                 #button-widget-1789666234978 .hvr-fade:focus, #button-widget-1789666234978 .hvr-fade:active, 
                #button-widget-1789666234978 .hvr-rectangle-out:before {
                  background: var(--color-primary, rgba(27, 86, 151, 1)) !important;
                  border-color: var(--color-primary, rgba(27, 86, 151, 1)) !important;
                }

                #button-widget-1789666234978 .hvr-fade:hover {
                  background: var(--color-primary, rgba(27, 86, 151, 1)) !important;
                }

                #button-widget-1789666234978 .hvr-sweep-to-right:hover, #button-widget-1789666234978 .hvr-sweep-to-right:focus, #button-widget-1789666234978 .hvr-sweep-to-right:active, 
                #button-widget-1789666234978 .hvr-fade:hover, #button-widget-1789666234978 .hvr-fade:focus, #button-widget-1789666234978 .hvr-fade:active, 
                #button-widget-1789666234978 .hvr-rectangle-out:hover, #button-widget-1789666234978 .hvr-rectangle-out:focus, #button-widget-1789666234978 .hvr-rectangle-out:active,
                #button-widget-1789666234978 .hvr-sweep-to-right:hover .btn-text-wrapper span {
                  color: var(--color-, #ffffff) !important;
                }
              

          #socialmedia-widget-1685117767914 .social-media-button i {
          background: transparent;color: #ffffff;
          font-size: 18px;
          height: 18px;
          width: 18px;
          line-height: 18px;
          border-radius: 0px;
        }

        #socialmedia-widget-1685117767914 .social-media-button:hover i {
          background: #666;
        }
      

          #menu-widget-1747345331932 nav > ul > li a {
            padding: 8px;
          }

          #menu-widget-1747345331932  ul li a {
            font-size: 18px;
            font-family: Arial;
            color: rgba(255, 255, 255, 1);
            
          }

          #menu-widget-1747345331932 .before, 
          #menu-widget-1747345331932 .after, 
          #menu-widget-1747345331932 .middle {
            background: #3e3e3e;
          }

          #menu-widget-1747345331932 .burger-menu-visible .before, 
          #menu-widget-1747345331932 .burger-menu-visible .after, 
          #menu-widget-1747345331932 .burger-menu-visible .middle {
            background: rgba(255, 255, 255, 1);
          }

          #menu-widget-1747345331932 nav > ul > li:hover a,
          #menu-widget-1747345331932 nav > ul > li.active a,
          #menu-widget-1747345331932 .overlay nav li:hover > div > ul li a:hover {
            color: rgba(255, 255, 255, 1);
          }

          #menu-widget-1747345331932 .with-background nav > ul > li:hover > a, 
          #menu-widget-1747345331932 .with-background nav > ul > li.active > a {
            background-color: primary;
            border-radius: 0px;
          }

          #menu-widget-1747345331932 .with-border li:hover:before,
          #menu-widget-1747345331932 .with-border li.active:before,
          #menu-widget-1747345331932 .border-below li:hover a:after, 
          #menu-widget-1747345331932 .border-below li.active a:after {
            background: rgba(78, 179, 234, 1);
          }

          #menu-widget-1747345331932 .border-at-left nav > ul > li.active,
          #menu-widget-1747345331932 .border-at-left nav > ul > li:hover {
            border-color: rgba(78, 179, 234, 1);
          }

          #menu-widget-1747345331932 .border-below nav > ul > li:after.active,
          #menu-widget-1747345331932 .border-below nav > ul > li:after:hover {
            background: rgba(78, 179, 234, 1);
          }
/*
          #menu-widget-1747345331932 nav li:hover > div > ul.with-border {
            border: 1px solid #e1e1e1;
            background-color: rgba(27, 86, 151, 1);
          }
*/
          #menu-widget-1747345331932 nav li:hover > div > ul.with-border {
            background-color: rgba(27, 86, 151, 1);
          }

          #menu-widget-1747345331932 nav li > div > ul.with-border li {
            border-bottom: 1px solid #e1e1e1;
          }

          #menu-widget-1747345331932 nav li > div > ul.with-border li:first-child {
            border-top: 1px solid #e1e1e1;
          }

          #menu-widget-1747345331932 nav li:hover > div > ul,
          #menu-widget-1747345331932 nav li.visible > div > ul {
            background-color: rgba(27, 86, 151, 1);
          }

          #menu-widget-1747345331932 nav li:hover > div > ul li a,
          #menu-widget-1747345331932 nav li.visible > div > ul li a {
            color: rgba(255, 255, 255, 1);
          }

          #menu-widget-1747345331932 nav li:hover > div > ul li a:hover {
            color: rgba(78, 179, 234, 1);
          }

          #menu-widget-1747345331932 .vertical-menu-styling.design-1 nav > ul > li,
          #menu-widget-1747345331932 .vertical-menu-styling.design-3 nav > ul > li {
            border-color: #e1e1e1;
          }

          #menu-widget-1747345331932 .vertical-menu-styling.border-below.left li:after {
            background-color: rgba(78, 179, 234, 1);
          }

          #menu-widget-1747345331932 .overlay nav li > div > ul > li > a {
            color: rgba(255, 255, 255, 1);
          }

          #menu-widget-1747345331932 .horizontal-menu-styling.with-divider nav > ul > li:after {
            background-color: #e1e1e1;
          }
          
          .live-theme #container-widget-1685117767915 {
            z-index: 9;
          }
        

          #menu-widget-1758813158628 nav > ul > li a {
            padding: 8px;
          }

          #menu-widget-1758813158628  ul li a {
            font-size: 18px;
            font-family: Arial;
            color: rgba(255, 255, 255, 1);
            
          }

          #menu-widget-1758813158628 .before, 
          #menu-widget-1758813158628 .after, 
          #menu-widget-1758813158628 .middle {
            background: #3e3e3e;
          }

          #menu-widget-1758813158628 .burger-menu-visible .before, 
          #menu-widget-1758813158628 .burger-menu-visible .after, 
          #menu-widget-1758813158628 .burger-menu-visible .middle {
            background: rgba(255, 255, 255, 1);
          }

          #menu-widget-1758813158628 nav > ul > li:hover a,
          #menu-widget-1758813158628 nav > ul > li.active a,
          #menu-widget-1758813158628 .overlay nav li:hover > div > ul li a:hover {
            color: rgba(255, 255, 255, 1);
          }

          #menu-widget-1758813158628 .with-background nav > ul > li:hover > a, 
          #menu-widget-1758813158628 .with-background nav > ul > li.active > a {
            background-color: primary;
            border-radius: 0px;
          }

          #menu-widget-1758813158628 .with-border li:hover:before,
          #menu-widget-1758813158628 .with-border li.active:before,
          #menu-widget-1758813158628 .border-below li:hover a:after, 
          #menu-widget-1758813158628 .border-below li.active a:after {
            background: rgba(35, 163, 234, 1);
          }

          #menu-widget-1758813158628 .border-at-left nav > ul > li.active,
          #menu-widget-1758813158628 .border-at-left nav > ul > li:hover {
            border-color: rgba(35, 163, 234, 1);
          }

          #menu-widget-1758813158628 .border-below nav > ul > li:after.active,
          #menu-widget-1758813158628 .border-below nav > ul > li:after:hover {
            background: rgba(35, 163, 234, 1);
          }
/*
          #menu-widget-1758813158628 nav li:hover > div > ul.with-border {
            border: 1px solid #e1e1e1;
            background-color: #ffffff;
          }
*/
          #menu-widget-1758813158628 nav li:hover > div > ul.with-border {
            background-color: #ffffff;
          }

          #menu-widget-1758813158628 nav li > div > ul.with-border li {
            border-bottom: 1px solid #e1e1e1;
          }

          #menu-widget-1758813158628 nav li > div > ul.with-border li:first-child {
            border-top: 1px solid #e1e1e1;
          }

          #menu-widget-1758813158628 nav li:hover > div > ul,
          #menu-widget-1758813158628 nav li.visible > div > ul {
            background-color: #ffffff;
          }

          #menu-widget-1758813158628 nav li:hover > div > ul li a,
          #menu-widget-1758813158628 nav li.visible > div > ul li a {
            color: #3e3e3e;
          }

          #menu-widget-1758813158628 nav li:hover > div > ul li a:hover {
            color: rgba(27, 86, 151, 1);
          }

          #menu-widget-1758813158628 .vertical-menu-styling.design-1 nav > ul > li,
          #menu-widget-1758813158628 .vertical-menu-styling.design-3 nav > ul > li {
            border-color: #e1e1e1;
          }

          #menu-widget-1758813158628 .vertical-menu-styling.border-below.left li:after {
            background-color: rgba(35, 163, 234, 1);
          }

          #menu-widget-1758813158628 .overlay nav li > div > ul > li > a {
            color: rgba(255, 255, 255, 1);
          }

          #menu-widget-1758813158628 .horizontal-menu-styling.with-divider nav > ul > li:after {
            background-color: #e1e1e1;
          }
          
          .live-theme #container-widget-1685117767915 {
            z-index: 9;
          }