:root {

    --neutral-50:  #ffffff;
    --neutral-100: #f7f6f2;
    --neutral-200: #f3f4f6;
    --neutral-250: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6B7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;

    --brand-lighter: #2a5480;
    --brand-light:   #2a5480;
    --brand:         #10294b;
    --brand-dark:    #0b1a2b;
    --brand-darker:  #060f19;

    --brand-alt-lighter: #79D55F;
    --brand-alt-light:   #6BBE54;
    --brand-alt:         #569A43;
    --brand-alt-dark:    #006838;
    --brand-alt-darker: #004324;

    --accent:        #6aa433;
    --accent-hover:  #7cbb3d;
    --accent-dark:   #4e7a25;
    --on-accent:     #fff;

    --surface:       var(--neutral-50);
    --surface-alt:   var(--neutral-100);
    --surface-muted: var(--neutral-200);

    --text:          var(--neutral-800);
    --text-muted:    var(--neutral-600);

    --border:        var(--neutral-250);
    --border-strong: var(--neutral-300);

    --danger: #c80000;

    --white: var(--neutral-50);
    --black: var(--neutral-900);

    --rw-bg-primary-gradient: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
    --rw-bg-accent-gradient:  linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);

    --rw-small-radius:         4px;
    --rw-card-radius:          10px;
    --rw-carousel-card-radius: 20px;
    --rw-quote-color:          rgba(16, 41, 75, 0.1);

    --font-display: "Instrument Serif", serif;
    --font-body:    "Manrope", sans-serif;

    --spacing-xs:  5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 50px;
    --gutter:  16px;

    --transition-base: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;

    --header-height:          120px;

    --header-content-height:  120px;
    --header-padding:         15px;
    --container-padding:      clamp(20px, 3vw, 40px);
    --content-max-width:      100%;
    --section-padding:        clamp(40px, 8vw, 100px);

    --section-narrow-padding: 40px;
    --section-padding-lr:     clamp(20px, 8vw, 60px);

    --row-content-width:      1340px;
    --card-padding:           clamp(15px, 3vw, 30px);
    --card-border-radius:     4px;

    --card-shadow:            0 2px 12px rgba(0, 0, 0, 0.07);

    --card-shadow-hover:      0 10px 24px rgba(0, 0, 0, 0.13);

    --card-lift:              4px;

    --card-image-zoom:        1.04;
    --grid-gap:               clamp(16px, 2vw, 30px);

    --video-card-bg:   var(--brand-dark);
    --video-play-size: clamp(56px, 6vw, 76px);

    --video-title-padding: clamp(15px, 3vw, 20px);

    --video-arrow-size: 40px;
    --video-arrow-gap:  clamp(12px, 1.25vw, 20px);

    --header-shadow:     0 8px 8px rgba(0, 0, 0, 0.1);
    --admin-bar-mobile:  46px;
    --admin-bar-desktop: 32px;
    --page-bar-height:   40px;

    --nav-text:          var(--black);
    --nav-hover-bg:      var(--accent);

    --nav-submenu-bg:       var(--surface);
    --nav-submenu-text:     var(--text);
    --nav-submenu-hover:    var(--surface-alt);
    --nav-submenu-radius:   12px;
    --nav-submenu-shadow:   0 12px 32px rgba(0, 0, 0, 0.09),
                            0 2px 6px rgba(0, 0, 0, 0.04);
    --nav-submenu-width:    230px;

    --nav-submenu-mega-bridge: 32px;

    --nav-submenu-rise:     6px;
    --nav-submenu-gap:      10px;
    --nav-submenu-duration: 0.2s;

    --rw-logo-speed:  46s;
    --rw-logo-height: 40px;
    --rw-logo-gap:    64px;

    --footer-bg:      var(--brand-dark);
    --footer-bar-bg:  var(--brand-darker);
    --footer-text:    rgba(255, 255, 255, 0.72);
    --footer-rule:    rgba(255, 255, 255, 0.12);

    --footer-logo-w:  200px;

    --footer-social-size: 60px;

    --footer-col-gap: clamp(20px, 4vw, 60px);

    --logo-height:          104px;
    --logo-height-scrolled: 80px;

    --header-phone-gap:          30px;
    --header-phone-gap-scrolled: 8px;

    --header-transition: 0.2s ease-in-out;

    --nav-font-size: 15px;
    --nav-padding-x: 20px;

    --header-height-scrolled: 100px;
    --logo-height-scrolled:   80px;
    --header-pad-block:       10px;

    --page-pad-inline:        clamp(20px, 2.5vw, 48px);

    --p-size:  clamp(14px, 1.5vw, 17px);
}

@media (max-width: 1340px) { :root { --nav-padding-x: 15px; } }
@media (max-width: 1280px) { :root { --nav-padding-x: 12px; } }

@media (max-width: 1160px) { :root { --nav-padding-x: 10px; } }
@media (max-width: 1024px) { :root { --nav-font-size: 14px; } }
@media (max-width:  992px) { :root { --nav-font-size: 13px; } }

@media (max-width: 991px) { :root { --logo-height: 64px; } }