:root {
  --neutral-50: #ffffff;
  --neutral-100: #f5f5f1;
  --neutral-200: #e4e5e6;
  --neutral-250: #cccecf;
  --neutral-300: #b3b6b7;
  --neutral-400: #9b9fa0;
  --neutral-500: #828788;
  --neutral-600: #696f71;
  --neutral-700: #505759;
  --neutral-800: #384042;
  --neutral-900: #071113;

  --brand-lighter: #7aa3e1;
  --brand-light: #4881d5;
  --brand: #265dad;
  --brand-dark: #1f4785;
  --brand-darker: #142d53;
  --brand-darkest: #15233d;

  --brand-alt-lighter: #fab561;
  --brand-alt-light: #f8a23a;
  --brand-alt: #f58a07;
  --brand-alt-dark: #da7b07;
  --brand-alt-darker: #b26406;

  --accent: #fbbe3f;
  --accent-hover: #ffcc33;
  --accent-dark: #9a5a00;
  --on-accent: #111111;

  --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);

  --on-dark-fill-subtle: color-mix(in srgb, var(--white) 10%, transparent);
  --on-dark-fill: color-mix(in srgb, var(--white) 18%, transparent);
  --on-dark-rule: color-mix(in srgb, var(--white) 20%, transparent);
  --on-dark-muted: color-mix(in srgb, var(--white) 60%, transparent);

  --scrim-soft: color-mix(in srgb, #000 30%, transparent);
  --scrim-strong: color-mix(in srgb, #000 55%, transparent);

  --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(8, 72, 135, 0.1);

  --font-display: "Archivo", sans-serif;
  --font-body: "Archivo", 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-phone-gap: 30px;
  --header-phone-gap-scrolled: 8px;

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

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

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

  @media (max-width: 1200px) {
    --header-height: 100px;
    --header-content-height: 100px;
    --logo-height: 90px;
  }

  @media (max-width: 1024px) {
    --header-height: 90px;
    --header-content-height: 90px;
    --logo-height: 70px;
  }

  --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: #eeeee7;
  --nav-submenu-text: var(--text);
  --nav-submenu-hover: var(--white);
  --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-item-radius: 3px;

  --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-darkest);
  --footer-bar-bg: var(--brand-darkest);
  --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);

  --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;
  }
}