:root {
  /* ==============================================
     FONTS (Families)
     ============================================== */
  /* ==============================================
     FONT FAMILY VAR CHAIN
     Tier 1: master vars (HubL-resolved from theme.global_fonts).
     Tier 2: per-element vars cascade up to masters; deepest fallback
             is the per-element HubL value, preserving today's behavior
             when no override is set.
     Tier 3: legacy aliases keep existing Tailwind utilities working.
     Override surface: css/custom-css/fonts.css (typically only Tier 1
     needs setting; Tier 2 for per-element exceptions).
     ============================================== */

  /* Tier 1 — Masters */
  --font-body:    "Lato", sans-serif;
  --font-heading: "Merriweather", serif;

  /* Tier 2 — Per-element (cascade up to masters; HubL element value is deepest fallback) */
  --font-h1:               var(--font-heading, "Merriweather", serif);
  --font-h2:               var(--font-heading, "Merriweather", serif);
  --font-h3:               var(--font-heading, "Merriweather", serif);
  --font-h4:               var(--font-heading, "Merriweather", serif);
  --font-h5:               var(--font-heading, "Merriweather", serif);
  --font-h6:               var(--font-heading, "Merriweather", serif);
  --font-body-base:        var(--font-body,    "Lato", sans-serif);
  --font-link:             var(--font-body,    "Lato", sans-serif);
  --font-button-primary:   var(--font-body,    "Lato", sans-serif);
  --font-button-secondary: var(--font-body,    "Lato", sans-serif);
  --font-button-tertiary:  var(--font-body,    "Lato", sans-serif);
  --font-button-quartenary:var(--font-body,    "Lato", sans-serif);
  --font-form-title:       var(--font-heading, "Merriweather", );
  --font-form-input:       var(--font-body);
  --font-form-button:      var(--font-body,    "Lato", sans-serif);
  --font-nav:              var(--font-body);
  --font-footer:           var(--font-body);

  /* Tier 3 — Tailwind back-compat aliases (do not reverse direction; see implementation prompt) */
  --font-primary:   var(--font-body);
  --font-secondary: var(--font-heading);

  /* ==============================================
     BODY
     ============================================== */
  --body-size: 18px;
  --body-color: #151515;
  --body-line-height: 160%;
  --body-letter-spacing: 0em;
  --body-mobile-size: 16px;
  --body-margin-top: 0px;
  --body-margin-bottom: 22px;
  --body-mobile-margin-top: 0px;
  --body-mobile-margin-bottom: 22px;

  /* ==============================================
     HEADINGS (H1 - H6)
     ============================================== */

  /* H1 */
  --h1-size: 60px;
  --h1-color: #002e6d;
  --h1-transform: none;
  --h1-line-height: 120%;
  --h1-letter-spacing: 0em;
  --h1-mobile-size: 50px;
  --h1-margin-top: 0px;
  --h1-margin-bottom: 22px;
  --h1-mobile-margin-top: 0px;
  --h1-mobile-margin-bottom: 22px;

  /* H2 */
  --h2-size: 42px;
  --h2-color: #222222;
  --h2-transform: none;
  --h2-line-height: 120%;
  --h2-letter-spacing: 0em;
  --h2-mobile-size: 32px;
  --h2-margin-top: 0px;
  --h2-margin-bottom: 22px;
  --h2-mobile-margin-top: 0px;
  --h2-mobile-margin-bottom: 22px;

  /* H3 */
  --h3-size: 30px;
  --h3-color: #002e6d;
  --h3-transform: none;
  --h3-line-height: 120%;
  --h3-letter-spacing: 0em;
  --h3-mobile-size: 24px;
  --h3-margin-top: 0px;
  --h3-margin-bottom: 22px;
  --h3-mobile-margin-top: 0px;
  --h3-mobile-margin-bottom: 22px;

  /* H4 */
  --h4-size: 24px;
  --h4-color: #002e6d;
  --h4-transform: none;
  --h4-line-height: 120%;
  --h4-letter-spacing: 0em;
  --h4-mobile-size: 20px;
  --h4-margin-top: 0px;
  --h4-margin-bottom: 22px;
  --h4-mobile-margin-top: 0px;
  --h4-mobile-margin-bottom: 22px;

  /* H5 */
  --h5-size: 16px;
  --h5-color: #002e6d;
  --h5-transform: none;
  --h5-line-height: 140%;
  --h5-letter-spacing: 0em;
  --h5-mobile-size: 16px;
  --h5-margin-top: 0px;
  --h5-margin-bottom: 22px;
  --h5-mobile-margin-top: 0px;
  --h5-mobile-margin-bottom: 22px;

  /* H6 */
  --h6-size: 14px;
  --h6-color: #002e6d;
  --h6-transform: none;
  --h6-line-height: 140%;
  --h6-letter-spacing: 0em;
  --h6-mobile-size: 14px;
  --h6-margin-top: 0px;
  --h6-margin-bottom: 22px;
  --h6-mobile-margin-top: 0px;
  --h6-mobile-margin-bottom: 22px;

  /* ==============================================
     LINKS
     ============================================== */
  /* ==============================================
     FORMS
     ============================================== */
  --form-label-size: 16px;
  --form-label-weight: bold;
  --form-field-margin-top: 0px;
  --form-field-spacing: 22px;
  --form-field-padding-top: 16px;
  --form-field-padding-right: 24px;
  --form-field-padding-bottom: 16px;
  --form-field-padding-left: 24px;
  --form-field-mobile-padding-top: 16px;
  --form-field-mobile-padding-right: 16px;
  --form-field-mobile-padding-bottom: 16px;
  --form-field-mobile-padding-left: 16px;
  --form-field-font-size: 14px;
  --form-field-mobile-font-size: 14px;
  --form-textarea-height: 150px;
  --form-focus-border-color: #002e6d;
  --color-error: #EF6B51;
  /* ==============================================
     SECONDARY BUTTON
     ============================================== */
  --btn-secondary-color: #FFFFFF;
  --btn-secondary-bg: 

  
  
    
  


  rgba(0, 46, 109, 1.0)

;
  --btn-secondary-border-top: 1px solid #002e6d;
  --btn-secondary-border-right: 1px solid #002e6d;
  --btn-secondary-border-bottom: 1px solid #002e6d;
  --btn-secondary-border-left: 1px solid #002e6d;
  --btn-secondary-radius: 0px;
  --btn-secondary-hover-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-secondary-hover-bg: 

  
  
    
  


  rgba(1, 58, 135, 1.0)

;

  /* ==============================================
     TERTIARY BUTTON
     ============================================== */
  --btn-tertiary-color: #FFFFFF;
  --btn-tertiary-bg: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
  --btn-tertiary-border-top: 1px solid #75BAFF;
  --btn-tertiary-border-right: 1px solid #75BAFF;
  --btn-tertiary-border-bottom: 1px solid #75BAFF;
  --btn-tertiary-border-left: 1px solid #75BAFF;
  --btn-tertiary-radius: 0px;
  --btn-tertiary-hover-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-tertiary-hover-bg: 

  
  
    
  


  rgba(0, 46, 109, 1.0)

;

  /* ==============================================
     QUARTENARY BUTTON
     ============================================== */
  --btn-quartenary-color: #002e6d;
  --btn-quartenary-bg: 

  
  
    
  


  rgba(255, 255, 255, 0.0)

;
  --btn-quartenary-border-top: 2px solid #002e6d;
  --btn-quartenary-border-right: 2px solid #002e6d;
  --btn-quartenary-border-bottom: 2px solid #002e6d;
  --btn-quartenary-border-left: 2px solid #002e6d;
  --btn-quartenary-radius: 0px;
  --btn-quartenary-hover-color: 

  
  
    
  


  rgba(255, 255, 255, 1.0)

;
  --btn-quartenary-hover-bg: 

  
  
    
  


  rgba(0, 46, 109, 1.0)

;

  /* ==============================================
     LINKS
     ============================================== */
  --link-color: #0270E0;
  --link-hover: #0048b8;
  --link-active: #2a98ff;
}

body {
  font-family: Lato, sans-serif; font-style: normal; font-weight: normal; text-decoration: none
  font-family: var(--font-body-base); /* MUST stay after  */
}

h1, .h1 {
  font-family: Merriweather, serif; font-style: normal; font-weight: 700; text-decoration: none
  font-family: var(--font-h1); /* MUST stay after  */
}

h2, .h2 {
  font-family: Merriweather, serif; font-style: normal; font-weight: 700; text-decoration: none
  font-family: var(--font-h2); /* MUST stay after  */
}

h3, .h3 {
  font-weight: 700; text-decoration: none; font-family: Merriweather, serif; font-style: normal
  font-family: var(--font-h3); /* MUST stay after  */
}

h4, .h4 {
  font-weight: normal; text-decoration: none; font-family: Merriweather, serif; font-style: normal
  font-family: var(--font-h4); /* MUST stay after  */
}

h5, .h5 {
  font-weight: normal; text-decoration: none; font-family: Merriweather, serif; font-style: normal
  font-family: var(--font-h5); /* MUST stay after  */
}

h6, .h6 {
  font-weight: normal; text-decoration: none; font-family: Merriweather, serif; font-style: normal
  font-family: var(--font-h6); /* MUST stay after  */
}

a {
  font-weight: normal; text-decoration: underline; font-family: Lato, sans-serif; font-style: normal
  font-family: var(--font-link); /* MUST stay after  */
}