:root {
  --ess-white: #fff;
  --ess-black: #000;
  --ess-green-900: #00211e;
  --ess-green-800: #073d2b;
  --ess-green-700: #037045;
  --ess-green-600: #009e4f;
  --ess-green-500: #67d645;
  --ess-green-400: #9ff55d;
  --ess-gray-700: #6b7982;
  --ess-gray-600: #9aa9b7;
  --ess-gray-500: #bacad4;
  --ess-gray-300: #dfeaf1;
  --ess-gray-200: #dbe6ed;
  --ess-gray-100: #ebf2f5;
  --ess-blue-600: #5a6bd6;
  --ess-blue-500: #afc5fa;
  --ess-primary: var(--ess-black);
  --ess-accent: var(--ess-green-400);
  --ess-accent-dark: var(--ess-green-600);
  --ess-accent-deeper: var(--ess-green-800);
  --ess-accent-secondary: var(--ess-blue-600);
  --ess-bg: var(--ess-white);
  --ess-bg-alt: var(--ess-gray-100);
  --ess-bg-dark: var(--ess-green-900);
  --ess-text: var(--ess-green-800);
  --ess-text-muted: var(--ess-gray-700);
  --ess-text-on-dark: var(--ess-white);
  --ess-headline-color: var(--ess-green-900);
  --ess-copytext-color: var(--ess-green-800);
  --ess-border: var(--ess-gray-300);
  --ess-border-strong: var(--ess-gray-500);
  --ess-white-a15: rgba(255, 255, 255, 0.15);
  --ess-white-a30: rgba(255, 255, 255, 0.3);
  --ess-gradient-light: linear-gradient(337deg, var(--ess-gray-500) -22.53%, var(--ess-gray-200) 77.56%);
  --ess-gradient-dark: linear-gradient(126deg, var(--ess-green-800) -2.41%, #033024 11.47%, #00241f 31.6%, var(--ess-green-900) 52.43%);
  --ess-gradient-card-dark: linear-gradient(180deg, var(--ess-green-800) 0%, var(--ess-green-900) 131.48%);
  --ess-gradient-dark-diagonal: linear-gradient(135deg, var(--ess-green-800) 0%, var(--ess-green-900) 50%, var(--ess-green-800) 100%);
  --ess-tagline-color: var(--ess-green-900);
  --ess-tagline-dot: var(--ess-green-700);
  --ess-accent-text: var(--ess-green-700);
  --ess-logo-tint: var(--ess-green-900);
  --ess-font-head: "Plus Jakarta Sans", sans-serif;
  --ess-font-body: "Plus Jakarta Sans", sans-serif;
  --ess-h1: 2rem;
  --ess-h2: 1.5rem;
  --ess-h3: 1.25rem;
  --ess-h4: 1.125rem;
  --ess-h5: 1rem;
  --ess-tagline: 1rem;
  --ess-lh-h1: 1.2;
  --ess-lh-h2: 1.3;
  --ess-lh-h3: 1.3;
  --ess-lh-h4: 1.3;
  --ess-lh-h5: 1.4;
  --ess-ls-head: -0.005em;
  --ess-text-lg: 1.125rem;
  --ess-text-md: 1rem;
  --ess-text-base: 1rem;
  --ess-text-sm: 0.875rem;
  --ess-text-xs: 0.75rem;
  --ess-lh-body: 1.5;
  --ess-lh-body-md: 1.6;
  --ess-r-sm: 0.75rem;
  --ess-r-lg: 1.5rem;
  --ess-r-btn: var(--ess-r-sm);
  --ess-r-card: var(--ess-r-sm);
  --ess-r-card-lg: var(--ess-r-lg);
  --ess-space-tiny: 0.5rem;
  --ess-space-xxs: 1rem;
  --ess-space-xs: 1.25rem;
  --ess-space-sm: 1.5rem;
  --ess-space-md: 3rem;
  --ess-space-lg: 4rem;
  --ess-py-small: 3rem;
  --ess-py-big: 4rem;
  --ess-px: 1.5rem;
  --ess-gap: 3rem;
  --ess-grid-gap-lg: clamp(var(--ess-space-sm), 6vw, 120px);
  --ess-section-pt: var(--ess-py-small);
  --ess-section-pb: var(--ess-py-small);
  --ess-section-pt-small: var(--ess-py-small);
  --ess-section-pt-big: var(--ess-py-big);
  --ess-section-pb-small: var(--ess-py-small);
  --ess-section-pb-big: var(--ess-py-big);
  --ess-container-lg: 1320px;
  --ess-max-w-xxs: 320px;
  --ess-max-w-xs: 400px;
  --ess-max-w-sm: 480px;
  --ess-max-w-md: 560px;
  --ess-max-w-lg: 768px;
  --ess-max-w-xl: 1024px;
  --ess-card-ratio: 16 / 9;
  --ess-card-min-w: 280px;
  --ess-card-pad: var(--ess-py-small);
  /* CHANGE THESE FOR EACH PROJECT */
  --ess-button-icon-display: none; /* Options: 'inline-block' (Default ON) or 'none' (Default OFF) */
  --ess-button-default-icon-path: url(assets/images/icons/button-icon-default.svg); /* Default SVG icon path */
  --ess-btn-min-height: 3rem;
  --ess-btn-sm-min-height: 2.5rem;
  --ess-btn-padding-y: 0.75rem;
  --ess-btn-padding-x: 1.5rem;
  --ess-btn-sm-padding-y: 0.5rem;
  --ess-btn-sm-padding-x: 0.75rem;
  --ess-btn-font-size: var(--ess-text-base);
  --ess-btn-font-weight: 500;
  --ess-btn-border-width: 1px;
  --ess-btn-icon-gap: 0.375rem;
  --ess-btn-radius: var(--ess-r-btn);
  --ess-btn-primary-bg: var(--ess-btn-primary-bg-on-light);
  --ess-btn-primary-border: var(--ess-btn-primary-border-on-light);
  --ess-btn-primary-color: var(--ess-btn-primary-color-on-light);
  --ess-btn-primary-hover-bg: var(--ess-btn-primary-hover-bg-on-light);
  --ess-btn-primary-hover-border: var(--ess-btn-primary-hover-border-on-light);
  --ess-btn-primary-hover-color: var(--ess-btn-primary-hover-color-on-light);
  --ess-btn-secondary-bg: var(--ess-btn-secondary-bg-on-light);
  --ess-btn-secondary-border: var(--ess-btn-secondary-border-on-light);
  --ess-btn-secondary-color: var(--ess-btn-secondary-color-on-light);
  --ess-btn-secondary-hover-bg: var(--ess-btn-secondary-hover-bg-on-light);
  --ess-btn-secondary-hover-border: var(--ess-btn-secondary-hover-border-on-light);
  --ess-btn-secondary-hover-color: var(--ess-btn-secondary-hover-color-on-light);
  --ess-btn-tertiary-bg: var(--ess-btn-tertiary-bg-on-light);
  --ess-btn-tertiary-border: var(--ess-btn-tertiary-border-on-light);
  --ess-btn-tertiary-color: var(--ess-btn-tertiary-color-on-light);
  --ess-btn-tertiary-hover-bg: var(--ess-btn-tertiary-hover-bg-on-light);
  --ess-btn-tertiary-hover-border: var(--ess-btn-tertiary-hover-border-on-light);
  --ess-btn-tertiary-hover-color: var(--ess-btn-tertiary-hover-color-on-light);
  --ess-btn-primary-bg-on-light: var(--ess-accent);
  --ess-btn-primary-border-on-light: var(--ess-accent);
  --ess-btn-primary-color-on-light: var(--ess-green-900);
  --ess-btn-primary-hover-bg-on-light: var(--ess-green-500);
  --ess-btn-primary-hover-border-on-light: var(--ess-green-500);
  --ess-btn-primary-hover-color-on-light: var(--ess-green-900);
  --ess-btn-secondary-bg-on-light: color-mix(in srgb, var(--ess-white) 30%, transparent);
  --ess-btn-secondary-border-on-light: var(--ess-white);
  --ess-btn-secondary-color-on-light: var(--ess-text);
  --ess-btn-secondary-hover-bg-on-light: color-mix(in srgb, var(--ess-green-800) 30%, transparent);
  --ess-btn-secondary-hover-border-on-light: var(--ess-white);
  --ess-btn-secondary-hover-color-on-light: var(--ess-text);
  --ess-btn-tertiary-bg-on-light: transparent;
  --ess-btn-tertiary-border-on-light: transparent;
  --ess-btn-tertiary-color-on-light: var(--ess-text);
  --ess-btn-tertiary-hover-bg-on-light: var(--ess-green-500);
  --ess-btn-tertiary-hover-border-on-light: transparent;
  --ess-btn-tertiary-hover-color-on-light: var(--ess-text);
  --ess-btn-primary-bg-on-dark: var(--ess-accent);
  --ess-btn-primary-border-on-dark: var(--ess-accent);
  --ess-btn-primary-color-on-dark: var(--ess-green-900);
  --ess-btn-primary-hover-bg-on-dark: var(--ess-green-500);
  --ess-btn-primary-hover-border-on-dark: var(--ess-green-500);
  --ess-btn-primary-hover-color-on-dark: var(--ess-green-900);
  --ess-btn-secondary-bg-on-dark: color-mix(in srgb, var(--ess-white) 15%, transparent);
  --ess-btn-secondary-border-on-dark: var(--ess-white);
  --ess-btn-secondary-color-on-dark: var(--ess-white);
  --ess-btn-secondary-hover-bg-on-dark: color-mix(in srgb, var(--ess-accent) 30%, transparent);
  --ess-btn-secondary-hover-border-on-dark: var(--ess-white);
  --ess-btn-secondary-hover-color-on-dark: var(--ess-white);
  --ess-btn-tertiary-bg-on-dark: transparent;
  --ess-btn-tertiary-border-on-dark: transparent;
  --ess-btn-tertiary-color-on-dark: var(--ess-white);
  --ess-btn-tertiary-hover-bg-on-dark: var(--ess-green-700);
  --ess-btn-tertiary-hover-border-on-dark: transparent;
  --ess-btn-tertiary-hover-color-on-dark: var(--ess-white);
  --ess-dur-fast: 150ms;
  --ess-dur-normal: 250ms;
  --ess-dur-slow: 400ms;
  --ess-dur-slower: 600ms;
  --ess-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ess-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ess-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ess-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ess-shadow-sm: 0 1px 3px rgba(0, 33, 30, 0.08), 0 1px 2px rgba(0, 33, 30, 0.12);
  --ess-shadow-md: 0 4px 14px rgba(0, 33, 30, 0.1), 0 2px 4px rgba(0, 33, 30, 0.06);
  --ess-shadow-lg: 0 12px 32px rgba(0, 33, 30, 0.12), 0 4px 8px rgba(0, 33, 30, 0.06);
  --ess-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ess-accent) 25%, transparent);
}

@media (min-width: 992px) {
  :root {
    --ess-text-lg: 1.25rem;
    --ess-text-md: 1.125rem;
    --ess-text-base: 1rem;
    --ess-text-sm: 0.875rem;
    --ess-text-xs: 0.75rem;
    --ess-h1: 3rem;
    --ess-h2: 2rem;
    --ess-h3: 1.5rem;
    --ess-h4: 1.25rem;
    --ess-h5: 1.125rem;
    --ess-space-xxs: 1rem;
    --ess-space-xs: 1.5rem;
    --ess-space-sm: 2rem;
    --ess-space-md: 5rem;
    --ess-space-lg: 7rem;
    --ess-px: 4rem;
    --ess-gap: 4rem;
    --ess-py-small: clamp(2.5rem, 7vh, 4.5rem);
    --ess-py-big: clamp(3.5rem, 10vh, 7rem);
  }
}
@media (min-width: 1440px) {
  :root {
    --ess-px: 7.5rem;
    --ess-grid-gap-lg: 120px;
  }
}