/* main.css */

/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Utilities
Helper classes with ability to override anything that comes before it
*/


/******************************************/
/*******  css/utilities/_imports.css  *******/
/******************************************/


/* Begin Imports
========================================================================== */

/* Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* B612 Mono */
@import url('https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');


/* Material Symbols Outlined */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
/******************************************/
/********* _variables/z-index.css *********/
/******************************************/

.floating-image {
z-index: 1;
}


table,
.simple-card,
.simple-cards,
.hs-form,
.mixed-content-wrapper,
.widget-type-linked_image,
.hs-video-widget {

	position: relative;
	z-index: 2;
	
}


					
/* Others (that I know of)
 * 
 * 
 * css/elements/elements.css --> .tooltip-content { z-index: 5} ;
 * modules/divider → .glow-frame { z-index: 3; }
 * 
 *  */

  
  
  :root {
	
  }
  
  /******************************************/
  /**********  _variables/_base.css  ********/
  /******************************************/
  
  
  :root {
	font-size: 16px;
  
  /* 
   * For development purposes, use rems when creating layouts. 
   * 1rem = root font size
   * Do not use absolute pixel values. 
   * Almost every part of the RevPartners design style is made up of the sizes below. 
   * 
   *    XS         0.5 rem
   *    Small      1rem
   *    Base       1.5rem
   *    Large      3rem
   *    XL         3.75rem
   *    XXL        7.5rem
   * 
   * */
  
	/* Units 
	 * 
	 * 1 unit is 24 px. This is the most common gap found across the website. 
	 * 
	 * */
	  
	--uxxs: 0.25rem; 
	  --uxs: 0.5rem; 
	  --us: 1rem;
	  --u: 1.5rem;
	  --um: 3rem;
	  --ul: 3.75rem;
	  --uxl: 7.5rem;
	  --uxxl: 15rem;
	  
		/* Gaps */
	  --gap-xxs: var(--uxxs); /* 8px */
	  --gap-xs: var(--uxs); /* 8px */
	  --gap-s: var(--us); /* 16px */
	  --gap: var(--u); /* 24px */
	  --gap-m: var(--um); /* 48px */
	  --gap-l: var(--ul); /* 60px */
	  --gap-xl: var(--uxl); /* 120px */
	  --gap-xxl: var(--uxxl); /* 240px */
  
	  /* Corners */
	  --corner-xxs: .25rem;
	  --corner-s: .75rem;
	  --corner-m: 1rem;
	  --corner-l: 1.125rem;
	  --corner: var(--corner-l);
	  --corner-xl: 2.5rem;
	  --corner-xxl: 7.5rem;
	  --corner-pill: 100rem;
	  --corner-circle: 9999px;
	  
	  /* Border width */
	  --border-width-s: 1px;
	  --border-width: 2px;
	  --border-width-l: 3px;
  
  
  
  
  
	  /* Width of main page content */
	  --max-width: 1400px; 
  
  /* Theme-specific */
  
	  --margin-inline: 1.2rem; /* 24px */
	  --padding-inline: 2.7rem; /* 24px */
	  --margin-block: 7.5rem; /* 120px */
	  --padding-block: 3.75rem; /* 60px */
  
	  --inline: 2.7rem; /* 24px */ 
	  --block: 2.7rem; /* 24px */ 
  
	  
  }
  
  
  @media (max-width: 768px) {
	  :root {
	  font-size: 16px;
	  --margin-inline: var(--gap-m, 2.5rem); /* 48px */
		  --margin-block: 3.75rem; /* 60px */
		  --padding-inline: 1.5rem; /* 24px */
		  --padding-block: 1.5rem; /* 24px */
		  
		  --inline: 1.2rem;
		  --block: 1.2rem;
	  }
  }
  
  
  .content-wrapper {
	  max-width: var(--max-width);
  }
  
  /* Kind of unnecessary, but keeps things clean */
  @media (max-width: 1218px) {
	  .content-wrapper {
		  padding-inline: var(--padding-inline);
	  }
  }
/******************************************/
/**********  _variables/colors.css  *******/
/******************************************/


/* Base Color Palette - RGB Definitions */
:root {
	/* Core Colors */
	--clr-dark-green: rgb(0, 115, 99);
	--clr-dark-green-rgb: 0, 115, 99;
	
	--clr-lime-green: rgb(168, 192, 70);
	--clr-lime-green-rgb: 168, 192, 70;
	
	--clr-orange-base: rgb(249, 160, 47);
	--clr-orange-base-rgb: 249, 160, 47;
	
	--clr-light-green: rgb(208, 206, 56);
	--clr-light-green-rgb: 208, 206, 56;
	
	--clr-gray: rgb(182, 178, 172);
	--clr-gray-rgb: 182, 178, 172;
	
	--clr-black: rgb(0, 0, 0);
	--clr-black-rgb: 0, 0, 0;
	
	--clr-white: rgb(255, 255, 255);
	--clr-white-rgb: 255, 255, 255;
	
	--clr-alert: rgb(248, 43, 43);
	--clr-alert-rgb: 248, 43, 43;

	/* Accent System */
	--clr-accent-1: var(--clr-dark-green);
	--clr-accent-1-rgb: var(--clr-dark-green-rgb);
	--clr-accent-1-bg: #CCE1DE;
	
	--clr-accent-2: var(--clr-lime-green);
	--clr-accent-2-rgb: var(--clr-lime-green-rgb);
	--clr-accent-2-bg: #EBF2D8;
	
	--clr-accent-3: var(--clr-orange-base);
	--clr-accent-3-rgb: var(--clr-orange-base-rgb);
	--clr-accent-3-bg: #FEEBD6;
	
	--clr-accent-4: var(--clr-light-green);
	--clr-accent-4-rgb: var(--clr-light-green-rgb);
	--clr-accent-4-bg: #F4F4D8;
	
	--clr-accent-5: var(--clr-light-green);
	--clr-accent-5-rgb: var(--clr-light-green-rgb);
	--clr-accent-5-bg: #F4F4D8;

	/* Primary (alias to accent-1) */
	--clr-primary: var(--clr-accent-1);
	--clr-primary-rgb: var(--clr-accent-1-rgb);
	--clr-primary-bg: var(--clr-accent-1-bg);

	/* Legacy Color Aliases (Backward Compatibility) */
	--clr-green: var(--clr-accent-1);
	--clr-green-rgb: var(--clr-accent-1-rgb);
	--clr-green-bg: var(--clr-accent-1-bg);
	
	--clr-blue: var(--clr-accent-2);
	--clr-blue-rgb: var(--clr-accent-2-rgb);
	--clr-blue-bg: var(--clr-accent-2-bg);
	
	--clr-orange: var(--clr-accent-3);
	--clr-orange-rgb: var(--clr-accent-3-rgb);
	--clr-orange-bg: var(--clr-accent-3-bg);
	
	--clr-red: var(--clr-accent-4);
	--clr-red-rgb: var(--clr-accent-4-rgb);
	--clr-red-bg: var(--clr-accent-4-bg);
	
	--clr-purple: var(--clr-accent-5);
	--clr-purple-rgb: var(--clr-accent-5-rgb);
	--clr-purple-bg: var(--clr-accent-5-bg);

	/* Theme Variables */
	--clr-secondary: var(--clr-text);
	--clr-bg-alert: rgba(248, 43, 43, 0.2);

	/* Background Utilities */
	--clr-bg-bg: rgba(0, 0, 0, 0.01);
	--clr-bg-bg-2: rgba(0, 0, 0, 0.05);
	--clr-white-bg: rgba(255, 255, 255, 0.2);

	/* Transparent Backgrounds (LEGACY) */
	--clr-bg-primary: var(--clr-primary-bg);
	--clr-bg-green: var(--clr-green-bg);
	--clr-bg-blue: var(--clr-blue-bg);
	--clr-bg-orange: var(--clr-orange-bg);
	--clr-bg-red: var(--clr-red-bg);
	--clr-bg-purple: var(--clr-purple-bg);
	--clr-bg-white: var(--clr-white-bg);

	/* Legacy Background Utilities */
	--clr-primary-light: var(--clr-accent-1-bg);
	--clr-green-light: var(--clr-accent-1-bg);
	--clr-blue-light: var(--clr-accent-2-bg);
	--clr-orange-light: var(--clr-accent-3-bg);
	--clr-red-light: var(--clr-accent-4-bg);
	--clr-purple-light: var(--clr-accent-5-bg);

	/* Opaque Backgrounds (for backward compatibility) */
	--clr-primary-bg-opaque: var(--clr-primary-bg);
	--clr-green-bg-opaque: var(--clr-green-bg);
	--clr-blue-bg-opaque: var(--clr-blue-bg);
	--clr-orange-bg-opaque: var(--clr-orange-bg);
	--clr-red-bg-opaque: var(--clr-red-bg);
	--clr-purple-bg-opaque: var(--clr-purple-bg);

	/* Gradients - Keep for now, may need updating */
	--gradient-byr: linear-gradient(72deg, rgba(49, 154, 251, 1) 25%, rgba(251,170,49,1) 25%, rgba(251,170,49,1) 44%, rgba(251,170,49,1) 75%, rgba(251,49,49,1) 75%);
	--gradient-gyr: linear-gradient(56deg, rgba(23,180,81,1) 25%, rgba(251,170,49,1) 25%, rgba(251,170,49,1) 44%, rgba(251,170,49,1) 75%, rgba(251,49,49,1) 75%);
}

/* Grays - Keep existing scale */
:root,
.light-mode {
	--clr-gray-10: #1D1F2E;
	--clr-gray-20: #2A2C3C;
	--clr-gray-30: #3F425A;
	--clr-gray-40: #545978;
	--clr-gray-50: #696F96;
	--clr-gray-60: #8F8FA3;
	--clr-gray-70: #ABABBA;
	--clr-gray-80: #C3C5D5;
	--clr-gray-90: #E1E2EA;

	/* Semantic Colors */
	--clr-text: rgb(0, 0, 0);
	--clr-title: rgb(0, 0, 0);
	--clr-bg: rgb(255, 255, 255);
	--clr-bg-2: #F3F3F4;
	--clr-bg-3: var(--clr-gray-90);
	--clr-bg-4: #F7F7FD;
	--clr-illustrations: rgb(182, 178, 172);

	/* Strokes */
	--clr-stroke: rgba(182, 178, 172, 0.10);
	--clr-stroke-2: rgba(182, 178, 172, 0.30);
	--clr-stroke-3: rgba(0, 0, 0, 0.20);

	/* Transparent Utilities */
	--clr-text-transparent: rgba(0, 0, 0, 0.2);
	--clr-bg-text: var(--clr-text-transparent);
	--clr-bg-transparent: rgba(255, 255, 255, 0.2);
	--clr-bg-transparent-50: rgba(255, 255, 255, 0.50);
	--clr-bg-transparent-80: rgba(255, 255, 255, 0.80);

	/* Metals - Keep for backward compatibility */
	--clr-copper: #EE6F53;
	--clr-copper-bg: rgba(238, 111, 83, 0.2);
	--clr-bronze: #AC9871;
	--clr-bronze-bg: rgba(172, 152, 113, 0.2);
	--clr-silver: #A0A0A0;
	--clr-silver-bg: rgba(180, 180, 180, 0.2);
	--clr-gold: #BF9604;
	--clr-gold-bg: rgba(191, 150, 4, 0.2);
	--clr-platinum: #6D6A6A;
	--clr-platinum-bg: #FFFFFF;

	/* Required because CSS has smartly dumb inheritence. Disable if stuff breaks */
	color: var(--clr-text);
}


/* Color classes */
/* Turns each color into a class that overrides the text color, background, and border color 

Example usage:

<div class="blue">My text color is blue</div>
<div class="bg-green">My background color is green</div>

*/





.set-primary {
  --clr-primary: var(--clr-primary);
}

.primary.primary, .clr-primary.clr-primary {
	color: var(--clr-primary);
	/* background-color: var(--clr-bg-primary); */
	/* border-color: var(--clr-primary); */
}

.background-primary, .bg-primary {
	background-color: var(--clr-primary);
}

.background-light-primary, .bg-primary-bg {
	background-color: var(--clr-primary-bg);
}

.border-primary {
	border-color: var(--clr-primary);
}

.badge.primary {
	color: var(--clr-primary);
	background-color: var(--clr-primary-bg);
	border-color: var(--clr-primary);
}


.chip.primary {
	color: var(--clr-primary);
	border-color: var(--clr-primary-bg);
	background-color: var(--clr-primary-bg);
	}

a.chip.primary {
	border: 1px solid var(--clr-primary-bg);
	}

a.chip.primary:hover {
	color: var(--clr-bg);
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);
	}


.set-green {
  --clr-primary: var(--clr-green);
}

.green.green, .clr-green.clr-green {
	color: var(--clr-green);
	/* background-color: var(--clr-bg-green); */
	/* border-color: var(--clr-green); */
}

.background-green, .bg-green {
	background-color: var(--clr-green);
}

.background-light-green, .bg-green-bg {
	background-color: var(--clr-green-bg);
}

.border-green {
	border-color: var(--clr-green);
}

.badge.green {
	color: var(--clr-green);
	background-color: var(--clr-green-bg);
	border-color: var(--clr-green);
}


.chip.green {
	color: var(--clr-green);
	border-color: var(--clr-green-bg);
	background-color: var(--clr-green-bg);
	}

a.chip.green {
	border: 1px solid var(--clr-green-bg);
	}

a.chip.green:hover {
	color: var(--clr-bg);
	background-color: var(--clr-green);
	border-color: var(--clr-green);
	}


.set-blue {
  --clr-primary: var(--clr-blue);
}

.blue.blue, .clr-blue.clr-blue {
	color: var(--clr-blue);
	/* background-color: var(--clr-bg-blue); */
	/* border-color: var(--clr-blue); */
}

.background-blue, .bg-blue {
	background-color: var(--clr-blue);
}

.background-light-blue, .bg-blue-bg {
	background-color: var(--clr-blue-bg);
}

.border-blue {
	border-color: var(--clr-blue);
}

.badge.blue {
	color: var(--clr-blue);
	background-color: var(--clr-blue-bg);
	border-color: var(--clr-blue);
}


.chip.blue {
	color: var(--clr-blue);
	border-color: var(--clr-blue-bg);
	background-color: var(--clr-blue-bg);
	}

a.chip.blue {
	border: 1px solid var(--clr-blue-bg);
	}

a.chip.blue:hover {
	color: var(--clr-bg);
	background-color: var(--clr-blue);
	border-color: var(--clr-blue);
	}


.set-orange {
  --clr-primary: var(--clr-orange);
}

.orange.orange, .clr-orange.clr-orange {
	color: var(--clr-orange);
	/* background-color: var(--clr-bg-orange); */
	/* border-color: var(--clr-orange); */
}

.background-orange, .bg-orange {
	background-color: var(--clr-orange);
}

.background-light-orange, .bg-orange-bg {
	background-color: var(--clr-orange-bg);
}

.border-orange {
	border-color: var(--clr-orange);
}

.badge.orange {
	color: var(--clr-orange);
	background-color: var(--clr-orange-bg);
	border-color: var(--clr-orange);
}


.chip.orange {
	color: var(--clr-orange);
	border-color: var(--clr-orange-bg);
	background-color: var(--clr-orange-bg);
	}

a.chip.orange {
	border: 1px solid var(--clr-orange-bg);
	}

a.chip.orange:hover {
	color: var(--clr-bg);
	background-color: var(--clr-orange);
	border-color: var(--clr-orange);
	}


.set-red {
  --clr-primary: var(--clr-red);
}

.red.red, .clr-red.clr-red {
	color: var(--clr-red);
	/* background-color: var(--clr-bg-red); */
	/* border-color: var(--clr-red); */
}

.background-red, .bg-red {
	background-color: var(--clr-red);
}

.background-light-red, .bg-red-bg {
	background-color: var(--clr-red-bg);
}

.border-red {
	border-color: var(--clr-red);
}

.badge.red {
	color: var(--clr-red);
	background-color: var(--clr-red-bg);
	border-color: var(--clr-red);
}


.chip.red {
	color: var(--clr-red);
	border-color: var(--clr-red-bg);
	background-color: var(--clr-red-bg);
	}

a.chip.red {
	border: 1px solid var(--clr-red-bg);
	}

a.chip.red:hover {
	color: var(--clr-bg);
	background-color: var(--clr-red);
	border-color: var(--clr-red);
	}


.set-purple {
  --clr-primary: var(--clr-purple);
}

.purple.purple, .clr-purple.clr-purple {
	color: var(--clr-purple);
	/* background-color: var(--clr-bg-purple); */
	/* border-color: var(--clr-purple); */
}

.background-purple, .bg-purple {
	background-color: var(--clr-purple);
}

.background-light-purple, .bg-purple-bg {
	background-color: var(--clr-purple-bg);
}

.border-purple {
	border-color: var(--clr-purple);
}

.badge.purple {
	color: var(--clr-purple);
	background-color: var(--clr-purple-bg);
	border-color: var(--clr-purple);
}


.chip.purple {
	color: var(--clr-purple);
	border-color: var(--clr-purple-bg);
	background-color: var(--clr-purple-bg);
	}

a.chip.purple {
	border: 1px solid var(--clr-purple-bg);
	}

a.chip.purple:hover {
	color: var(--clr-bg);
	background-color: var(--clr-purple);
	border-color: var(--clr-purple);
	}


.set-text {
  --clr-primary: var(--clr-text);
}

.text.text, .clr-text.clr-text {
	color: var(--clr-text);
	/* background-color: var(--clr-bg-text); */
	/* border-color: var(--clr-text); */
}

.background-text, .bg-text {
	background-color: var(--clr-text);
}

.background-light-text, .bg-text-bg {
	background-color: var(--clr-text-bg);
}

.border-text {
	border-color: var(--clr-text);
}

.badge.text {
	color: var(--clr-text);
	background-color: var(--clr-text-bg);
	border-color: var(--clr-text);
}


.chip.text {
	color: var(--clr-text);
	border-color: var(--clr-text-bg);
	background-color: var(--clr-text-bg);
	}

a.chip.text {
	border: 1px solid var(--clr-text-bg);
	}

a.chip.text:hover {
	color: var(--clr-bg);
	background-color: var(--clr-text);
	border-color: var(--clr-text);
	}


.set-bg {
  --clr-primary: var(--clr-bg);
}

.bg.bg, .clr-bg.clr-bg {
	color: var(--clr-bg);
	/* background-color: var(--clr-bg-bg); */
	/* border-color: var(--clr-bg); */
}

.background-bg, .bg-bg {
	background-color: var(--clr-bg);
}

.background-light-bg, .bg-bg-bg {
	background-color: var(--clr-bg-bg);
}

.border-bg {
	border-color: var(--clr-bg);
}

.badge.bg {
	color: var(--clr-bg);
	background-color: var(--clr-bg-bg);
	border-color: var(--clr-bg);
}


.chip.bg {
	color: var(--clr-bg);
	border-color: var(--clr-bg-bg);
	background-color: var(--clr-bg-bg);
	}

a.chip.bg {
	border: 1px solid var(--clr-bg-bg);
	}

a.chip.bg:hover {
	color: var(--clr-bg);
	background-color: var(--clr-bg);
	border-color: var(--clr-bg);
	}


.set-bg-2 {
  --clr-primary: var(--clr-bg-2);
}

.bg-2.bg-2, .clr-bg-2.clr-bg-2 {
	color: var(--clr-bg-2);
	/* background-color: var(--clr-bg-bg-2); */
	/* border-color: var(--clr-bg-2); */
}

.background-bg-2, .bg-bg-2 {
	background-color: var(--clr-bg-2);
}

.background-light-bg-2, .bg-bg-2-bg {
	background-color: var(--clr-bg-2-bg);
}

.border-bg-2 {
	border-color: var(--clr-bg-2);
}

.badge.bg-2 {
	color: var(--clr-bg-2);
	background-color: var(--clr-bg-2-bg);
	border-color: var(--clr-bg-2);
}


.chip.bg-2 {
	color: var(--clr-bg-2);
	border-color: var(--clr-bg-2-bg);
	background-color: var(--clr-bg-2-bg);
	}

a.chip.bg-2 {
	border: 1px solid var(--clr-bg-2-bg);
	}

a.chip.bg-2:hover {
	color: var(--clr-bg);
	background-color: var(--clr-bg-2);
	border-color: var(--clr-bg-2);
	}


.set-white {
  --clr-primary: var(--clr-white);
}

.white.white, .clr-white.clr-white {
	color: var(--clr-white);
	/* background-color: var(--clr-bg-white); */
	/* border-color: var(--clr-white); */
}

.background-white, .bg-white {
	background-color: var(--clr-white);
}

.background-light-white, .bg-white-bg {
	background-color: var(--clr-white-bg);
}

.border-white {
	border-color: var(--clr-white);
}

.badge.white {
	color: var(--clr-white);
	background-color: var(--clr-white-bg);
	border-color: var(--clr-white);
}


.chip.white {
	color: var(--clr-gray-60);
	border-color: var(--clr-gray-60);
	background-color: var(--clr-white);
	}

a.chip.white {
	border: 1px solid var(--clr-gray-60);
	}

a.chip.white:hover {
	color: var(--clr-text);
	background-color: var(--clr-white);
	border-color: var(--clr-stroke);
	}


.set-black {
  --clr-primary: var(--clr-black);
}

.black.black, .clr-black.clr-black {
	color: var(--clr-black);
	/* background-color: var(--clr-bg-black); */
	/* border-color: var(--clr-black); */
}

.background-black, .bg-black {
	background-color: var(--clr-black);
}

.background-light-black, .bg-black-bg {
	background-color: var(--clr-black-bg);
}

.border-black {
	border-color: var(--clr-black);
}

.badge.black {
	color: var(--clr-black);
	background-color: var(--clr-black-bg);
	border-color: var(--clr-black);
}


.chip.black {
	color: var(--clr-black);
	border-color: var(--clr-black-bg);
	background-color: var(--clr-black-bg);
	}

a.chip.black {
	border: 1px solid var(--clr-black-bg);
	}

a.chip.black:hover {
	color: var(--clr-bg);
	background-color: var(--clr-black);
	border-color: var(--clr-black);
	}


.set-primary-bg {
  --clr-primary: var(--clr-primary-bg);
}

.primary-bg.primary-bg, .clr-primary-bg.clr-primary-bg {
	color: var(--clr-primary-bg);
	/* background-color: var(--clr-bg-primary-bg); */
	/* border-color: var(--clr-primary-bg); */
}

.background-primary-bg, .bg-primary-bg {
	background-color: var(--clr-primary-bg);
}

.background-light-primary-bg, .bg-primary-bg-bg {
	background-color: var(--clr-primary-bg-bg);
}

.border-primary-bg {
	border-color: var(--clr-primary-bg);
}

.badge.primary-bg {
	color: var(--clr-primary-bg);
	background-color: var(--clr-primary-bg-bg);
	border-color: var(--clr-primary-bg);
}


.chip.primary-bg {
	color: var(--clr-primary-bg);
	border-color: var(--clr-primary-bg-bg);
	background-color: var(--clr-primary-bg-bg);
	}

a.chip.primary-bg {
	border: 1px solid var(--clr-primary-bg-bg);
	}

a.chip.primary-bg:hover {
	color: var(--clr-bg);
	background-color: var(--clr-primary-bg);
	border-color: var(--clr-primary-bg);
	}


.set-green-bg {
  --clr-primary: var(--clr-green-bg);
}

.green-bg.green-bg, .clr-green-bg.clr-green-bg {
	color: var(--clr-green-bg);
	/* background-color: var(--clr-bg-green-bg); */
	/* border-color: var(--clr-green-bg); */
}

.background-green-bg, .bg-green-bg {
	background-color: var(--clr-green-bg);
}

.background-light-green-bg, .bg-green-bg-bg {
	background-color: var(--clr-green-bg-bg);
}

.border-green-bg {
	border-color: var(--clr-green-bg);
}

.badge.green-bg {
	color: var(--clr-green-bg);
	background-color: var(--clr-green-bg-bg);
	border-color: var(--clr-green-bg);
}


.chip.green-bg {
	color: var(--clr-green-bg);
	border-color: var(--clr-green-bg-bg);
	background-color: var(--clr-green-bg-bg);
	}

a.chip.green-bg {
	border: 1px solid var(--clr-green-bg-bg);
	}

a.chip.green-bg:hover {
	color: var(--clr-bg);
	background-color: var(--clr-green-bg);
	border-color: var(--clr-green-bg);
	}


.set-blue-bg {
  --clr-primary: var(--clr-blue-bg);
}

.blue-bg.blue-bg, .clr-blue-bg.clr-blue-bg {
	color: var(--clr-blue-bg);
	/* background-color: var(--clr-bg-blue-bg); */
	/* border-color: var(--clr-blue-bg); */
}

.background-blue-bg, .bg-blue-bg {
	background-color: var(--clr-blue-bg);
}

.background-light-blue-bg, .bg-blue-bg-bg {
	background-color: var(--clr-blue-bg-bg);
}

.border-blue-bg {
	border-color: var(--clr-blue-bg);
}

.badge.blue-bg {
	color: var(--clr-blue-bg);
	background-color: var(--clr-blue-bg-bg);
	border-color: var(--clr-blue-bg);
}


.chip.blue-bg {
	color: var(--clr-blue-bg);
	border-color: var(--clr-blue-bg-bg);
	background-color: var(--clr-blue-bg-bg);
	}

a.chip.blue-bg {
	border: 1px solid var(--clr-blue-bg-bg);
	}

a.chip.blue-bg:hover {
	color: var(--clr-bg);
	background-color: var(--clr-blue-bg);
	border-color: var(--clr-blue-bg);
	}


.set-orange-bg {
  --clr-primary: var(--clr-orange-bg);
}

.orange-bg.orange-bg, .clr-orange-bg.clr-orange-bg {
	color: var(--clr-orange-bg);
	/* background-color: var(--clr-bg-orange-bg); */
	/* border-color: var(--clr-orange-bg); */
}

.background-orange-bg, .bg-orange-bg {
	background-color: var(--clr-orange-bg);
}

.background-light-orange-bg, .bg-orange-bg-bg {
	background-color: var(--clr-orange-bg-bg);
}

.border-orange-bg {
	border-color: var(--clr-orange-bg);
}

.badge.orange-bg {
	color: var(--clr-orange-bg);
	background-color: var(--clr-orange-bg-bg);
	border-color: var(--clr-orange-bg);
}


.chip.orange-bg {
	color: var(--clr-orange-bg);
	border-color: var(--clr-orange-bg-bg);
	background-color: var(--clr-orange-bg-bg);
	}

a.chip.orange-bg {
	border: 1px solid var(--clr-orange-bg-bg);
	}

a.chip.orange-bg:hover {
	color: var(--clr-bg);
	background-color: var(--clr-orange-bg);
	border-color: var(--clr-orange-bg);
	}


.set-red-bg {
  --clr-primary: var(--clr-red-bg);
}

.red-bg.red-bg, .clr-red-bg.clr-red-bg {
	color: var(--clr-red-bg);
	/* background-color: var(--clr-bg-red-bg); */
	/* border-color: var(--clr-red-bg); */
}

.background-red-bg, .bg-red-bg {
	background-color: var(--clr-red-bg);
}

.background-light-red-bg, .bg-red-bg-bg {
	background-color: var(--clr-red-bg-bg);
}

.border-red-bg {
	border-color: var(--clr-red-bg);
}

.badge.red-bg {
	color: var(--clr-red-bg);
	background-color: var(--clr-red-bg-bg);
	border-color: var(--clr-red-bg);
}


.chip.red-bg {
	color: var(--clr-red-bg);
	border-color: var(--clr-red-bg-bg);
	background-color: var(--clr-red-bg-bg);
	}

a.chip.red-bg {
	border: 1px solid var(--clr-red-bg-bg);
	}

a.chip.red-bg:hover {
	color: var(--clr-bg);
	background-color: var(--clr-red-bg);
	border-color: var(--clr-red-bg);
	}


.set-purple-bg {
  --clr-primary: var(--clr-purple-bg);
}

.purple-bg.purple-bg, .clr-purple-bg.clr-purple-bg {
	color: var(--clr-purple-bg);
	/* background-color: var(--clr-bg-purple-bg); */
	/* border-color: var(--clr-purple-bg); */
}

.background-purple-bg, .bg-purple-bg {
	background-color: var(--clr-purple-bg);
}

.background-light-purple-bg, .bg-purple-bg-bg {
	background-color: var(--clr-purple-bg-bg);
}

.border-purple-bg {
	border-color: var(--clr-purple-bg);
}

.badge.purple-bg {
	color: var(--clr-purple-bg);
	background-color: var(--clr-purple-bg-bg);
	border-color: var(--clr-purple-bg);
}


.chip.purple-bg {
	color: var(--clr-purple-bg);
	border-color: var(--clr-purple-bg-bg);
	background-color: var(--clr-purple-bg-bg);
	}

a.chip.purple-bg {
	border: 1px solid var(--clr-purple-bg-bg);
	}

a.chip.purple-bg:hover {
	color: var(--clr-bg);
	background-color: var(--clr-purple-bg);
	border-color: var(--clr-purple-bg);
	}


.set-accent-1 {
  --clr-primary: var(--clr-accent-1);
}

.accent-1.accent-1, .clr-accent-1.clr-accent-1 {
	color: var(--clr-accent-1);
	/* background-color: var(--clr-bg-accent-1); */
	/* border-color: var(--clr-accent-1); */
}

.background-accent-1, .bg-accent-1 {
	background-color: var(--clr-accent-1);
}

.background-light-accent-1, .bg-accent-1-bg {
	background-color: var(--clr-accent-1-bg);
}

.border-accent-1 {
	border-color: var(--clr-accent-1);
}

.badge.accent-1 {
	color: var(--clr-accent-1);
	background-color: var(--clr-accent-1-bg);
	border-color: var(--clr-accent-1);
}


.chip.accent-1 {
	color: var(--clr-accent-1);
	border-color: var(--clr-accent-1-bg);
	background-color: var(--clr-accent-1-bg);
	}

a.chip.accent-1 {
	border: 1px solid var(--clr-accent-1-bg);
	}

a.chip.accent-1:hover {
	color: var(--clr-bg);
	background-color: var(--clr-accent-1);
	border-color: var(--clr-accent-1);
	}


.set-accent-2 {
  --clr-primary: var(--clr-accent-2);
}

.accent-2.accent-2, .clr-accent-2.clr-accent-2 {
	color: var(--clr-accent-2);
	/* background-color: var(--clr-bg-accent-2); */
	/* border-color: var(--clr-accent-2); */
}

.background-accent-2, .bg-accent-2 {
	background-color: var(--clr-accent-2);
}

.background-light-accent-2, .bg-accent-2-bg {
	background-color: var(--clr-accent-2-bg);
}

.border-accent-2 {
	border-color: var(--clr-accent-2);
}

.badge.accent-2 {
	color: var(--clr-accent-2);
	background-color: var(--clr-accent-2-bg);
	border-color: var(--clr-accent-2);
}


.chip.accent-2 {
	color: var(--clr-accent-2);
	border-color: var(--clr-accent-2-bg);
	background-color: var(--clr-accent-2-bg);
	}

a.chip.accent-2 {
	border: 1px solid var(--clr-accent-2-bg);
	}

a.chip.accent-2:hover {
	color: var(--clr-bg);
	background-color: var(--clr-accent-2);
	border-color: var(--clr-accent-2);
	}


.set-accent-3 {
  --clr-primary: var(--clr-accent-3);
}

.accent-3.accent-3, .clr-accent-3.clr-accent-3 {
	color: var(--clr-accent-3);
	/* background-color: var(--clr-bg-accent-3); */
	/* border-color: var(--clr-accent-3); */
}

.background-accent-3, .bg-accent-3 {
	background-color: var(--clr-accent-3);
}

.background-light-accent-3, .bg-accent-3-bg {
	background-color: var(--clr-accent-3-bg);
}

.border-accent-3 {
	border-color: var(--clr-accent-3);
}

.badge.accent-3 {
	color: var(--clr-accent-3);
	background-color: var(--clr-accent-3-bg);
	border-color: var(--clr-accent-3);
}


.chip.accent-3 {
	color: var(--clr-accent-3);
	border-color: var(--clr-accent-3-bg);
	background-color: var(--clr-accent-3-bg);
	}

a.chip.accent-3 {
	border: 1px solid var(--clr-accent-3-bg);
	}

a.chip.accent-3:hover {
	color: var(--clr-bg);
	background-color: var(--clr-accent-3);
	border-color: var(--clr-accent-3);
	}


.set-accent-4 {
  --clr-primary: var(--clr-accent-4);
}

.accent-4.accent-4, .clr-accent-4.clr-accent-4 {
	color: var(--clr-accent-4);
	/* background-color: var(--clr-bg-accent-4); */
	/* border-color: var(--clr-accent-4); */
}

.background-accent-4, .bg-accent-4 {
	background-color: var(--clr-accent-4);
}

.background-light-accent-4, .bg-accent-4-bg {
	background-color: var(--clr-accent-4-bg);
}

.border-accent-4 {
	border-color: var(--clr-accent-4);
}

.badge.accent-4 {
	color: var(--clr-accent-4);
	background-color: var(--clr-accent-4-bg);
	border-color: var(--clr-accent-4);
}


.chip.accent-4 {
	color: var(--clr-accent-4);
	border-color: var(--clr-accent-4-bg);
	background-color: var(--clr-accent-4-bg);
	}

a.chip.accent-4 {
	border: 1px solid var(--clr-accent-4-bg);
	}

a.chip.accent-4:hover {
	color: var(--clr-bg);
	background-color: var(--clr-accent-4);
	border-color: var(--clr-accent-4);
	}


.set-accent-5 {
  --clr-primary: var(--clr-accent-5);
}

.accent-5.accent-5, .clr-accent-5.clr-accent-5 {
	color: var(--clr-accent-5);
	/* background-color: var(--clr-bg-accent-5); */
	/* border-color: var(--clr-accent-5); */
}

.background-accent-5, .bg-accent-5 {
	background-color: var(--clr-accent-5);
}

.background-light-accent-5, .bg-accent-5-bg {
	background-color: var(--clr-accent-5-bg);
}

.border-accent-5 {
	border-color: var(--clr-accent-5);
}

.badge.accent-5 {
	color: var(--clr-accent-5);
	background-color: var(--clr-accent-5-bg);
	border-color: var(--clr-accent-5);
}


.chip.accent-5 {
	color: var(--clr-accent-5);
	border-color: var(--clr-accent-5-bg);
	background-color: var(--clr-accent-5-bg);
	}

a.chip.accent-5 {
	border: 1px solid var(--clr-accent-5-bg);
	}

a.chip.accent-5:hover {
	color: var(--clr-bg);
	background-color: var(--clr-accent-5);
	border-color: var(--clr-accent-5);
	}



/* Transparent */

.bg-none.bg-none {
	background-color: transparent;
}


/* Color filters */

/* Turn text gray color to green  
* Based on this color calculator on codepen: https://codepen.io/sosuke/pen/Pjoqqp 
* Mainly used to turn icons in the footer to green on hover */
:root {

	/* Place into the "filter:" property 
	* 
	* Example:
	*    img {
	*         filter: var(--convert-gray-to-green);
	*    } 
	* 
	* */  
	--convert-gray-to-green: brightness(0) saturate(100%) invert(51%) sepia(73%) saturate(525%) hue-rotate(90deg) brightness(94%) contrast(90%);
}





/* Primary color 
*  
* The primary color is used in a lot of places. It's built for scale. 
* Let's say you want a group of that have a bunch of different elements
* like text, icons, background, buttons, and other stuff. 
* 
* And you want the color to adapt to the theme AND ALSO allow user 
* to pick a color on the elemnt to override. You could set the colors individually
* and assign the variables of each, but it gets messy. 
* 
* Instead, you can assign var(--clr-primary) to everything
* and use your custom color to override --clr-primary 
* 
* Example:  

.card .text {
color: var(--clr-primary);
}

.card .icon {
color: var(--clr-primary);  
}

* Now that you have these set up, you can control the color with both by 
* overriding the variable on the container.

.card {
--clr-primary: white;
}

* This will change both the text and icon to white at once.
* 
* It will also affect the background color if you assign one using --clr-bg-primary. 

.card .text {
color: var(--clr-primary);
background: var(--clr-bg-primary);
}

.card .icon {
color: var(--clr-primary);
background: var(--clr-bg-primary);
}

.card {
--clr-primary: white;
--clr-bg-primary: black;
}

* */

/******************************************/
/*******  _variables/effects.css  *********/
/******************************************/

:root {

  /* Borders */
	
	--outline: var(--border-width) dashed var(--clr-primary);
	--outline-s: var(--border-width-s) dashed var(--clr-primary);
	--border: var(--border-width) solid var(--clr-stroke);
	--stroke: var(--border-width) solid var(--clr-stroke);
	--stroke-2: var(--border-width) solid var(--clr-stroke-2);


	/* Shadows */
	--shadow-menu: 0px 2px 22px 0px rgba(0, 0, 0, 0.10);
	--shadow-light: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
	--shadow-lighter: 0px 2px 4px 0px rgba(0, 0, 0, 0.16); 
	--shadow: var(--shadow-light);
	--shadow-2: var(--shadow-lighter);
	--shadow-3: var(--shadow-menu);
	--shadow-clr-stroke: var(--shadow-light);
	--shadow-green:	0px 3px 6px 0px rgba(23, 180, 82, 0.10), 0px 11px 11px 0px rgba(23, 180, 82, 0.09), 0px 25px 15px 0px rgba(23, 180, 82, 0.05), 0px 44px 18px 0px rgba(23, 180, 82, 0.01), 0px 69px 19px 0px rgba(23, 180, 82, 0.00);								 
	--shadow-blue: 0px 69px 19px 0px rgba(50, 157, 255, 0.00), 0px 44px 18px 0px rgba(50, 157, 255, 0.01), 0px 25px 15px 0px rgba(50, 157, 255, 0.05), 0px 11px 11px 0px rgba(50, 157, 255, 0.09), 0px 3px 6px 0px rgba(50, 157, 255, 0.10);			 
	--shadow-orange: 0px 69px 19px 0px rgba(239, 129, 27, 0.00), 0px 44px 18px 0px rgba(239, 129, 27, 0.01), 0px 25px 15px 0px rgba(239, 129, 27, 0.05), 0px 11px 11px 0px rgba(239, 129, 27, 0.09), 0px 3px 6px 0px rgba(239, 129, 27, 0.10);
	--shadow-red: 0px 69px 19px 0px rgba(251, 49, 49, 0.00), 0px 44px 18px 0px rgba(251, 49, 49, 0.01), 0px 25px 15px 0px rgba(251, 49, 49, 0.05), 0px 11px 11px 0px rgba(251, 49, 49, 0.09), 0px 3px 6px 0px rgba(251, 49, 49, 0.10);
	--shadow-purple: 0px 69px 19px 0px rgba(140, 50, 255, 0.00), 0px 44px 18px 0px rgba(140, 50, 255, 0.01), 0px 25px 15px 0px rgba(140, 50, 255, 0.05), 0px 11px 11px 0px rgba(140, 50, 255, 0.09), 0px 3px 6px 0px rgba(140, 50, 255, 0.10);
	--shadow-card-primary: 0 2px 0 0 var(--clr-primary);
	--shadow-card-green: 0 2px 0 0 var(--clr-green);
	--shadow-card-blue: 0 2px 0 0 var(--clr-blue);
	--shadow-card-orange: 0 2px 0 0 var(--clr-orange);
	--shadow-card-red: 0 2px 0 0 var(--clr-red);
	--shadow-card-purple: 0 2px 0 0 var(--clr-purple);
	--shadow-card-text: 0 2px 0 0 var(--clr-text);
	--shadow-card-bg: 0 2px 0 0 var(--clr-bg);

}
/******************************************/
/*********  css/utilities/scroll.css  *********/
/******************************************/

/* Sets scroll properties for anchor tags */

html {
    scroll-behavior: smooth;
		scroll-padding: 0;
}

/* Disable smooth scroll in HubSpot editor to prevent scroll-to-top on iframe focus */
body[data-editor-page-count] html,
html[data-hs-editor] {
    scroll-behavior: auto !important;
}

a[data-hs-anchor="true"] { 
/*     margin-top: -100px;  */
/*     position: absolute; */
}
/******************************************/
/*****  css/tools/editor-helpers.css  *****/
/******************************************/

/*======================
Not currently working. Intention is to show hidden sections inside editor so that people are aware they exist.
======================*/




/*======================
Only show an element in the page editor or module previewer.
======================*/
.editor-only {
  display: none;
	position: relative;
}



.editor-only:hover::after {
	content: "This won't be visible on the live page.";
	font-size: 0.75rem;
	margin-inline: auto;
	display: block;
	width: fit-content;
	position: absolute;
	bottom: -1rem;
	right: -100%;
	left: -100%;
}
/******************************************/
/**********  css/tools/_debug.css  ********/
/******************************************/


/* Debug */

.debug * {
	padding: 2px;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 :before {
  position: absolute;
	top: 0;
	left: 0;
	font-family: var(--monospace);
	font-size: .5rem;
	border: 1px solid var(--clr-stroke);
	color: var(--clr-bg);
	background: var(--clr-text);
}

.debug-2 * {
	padding: .5rem;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 *:before {
	content: "Level 1";
}

.debug-2 * > * {
  position: relative;
	background-color: rgba(0,50,50,.08);
	outline: 1px dashed rgba(0,50,0,.15);
}
.debug-2 * > *:before {
  content: "Level 2";
}
.debug-2 * > * > * {
  position: relative;
	background-color: rgba(40,10,40,.1);
	outline: 1px dashed rgba(40,0,0,.25);
}
.debug-2 * > * > *:before {
  content: "Level 3";
}

.debug-3 * {
	position: relative;
}

.debug-3 *:before {
  content: '';
	position: absolute;
  inset: 0;
	outline: 1px dashed rgba(0,20,20,.15);
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
}

.gridlines {
  height: 200vh;
  background-image: 
    repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
    repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
		repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem),
    repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem);
  background-color: var(--clr-bg-bg-2); /* Background color of the grid */
}

.spacer-500 {
  width: 100%;
  height: 500px;
}
.spacer-1000 {
	width:100%;
	height:1000px;
}

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

/******************************************/
/*********** css/generic/_reset.css ***********/
/******************************************/

/* Reset */
*, *::before, *::after {
	box-sizing: border-box;
}

* {
	padding: 0;
	font-family: inherit;
}

html {
	margin: 0;
}


body {
	min-height: 100vh; /* Prevent window resizing on iOS Safari */
	font-size: 18px; /* Set rem size */
	background-color: var(--clr-bg); /* Prevents weird issue where embedding the website in ClickUp set's the page's featured image as the background */
}

input, textarea, button, select {
	font: inherit;
}

/* Makes graphics responsive  */
img, picture, svg, video {
	display:block;

}

/* Allows border on default image module 
Disabled for now because it get clipped when "exact width + height" is bigger than image wrapper
*/
.widget-type-linked_image {
	/* overflow: hidden; */
}

.widget-type-custom_widget .widget-type-linked_image {
	/* overflow: clip; */
}
/******************************************/
/********* css/generic/_normalize.css *********/
/******************************************/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    font-size: 18px;
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * Add the correct box sizing in Firefox.
   */
  
  hr {
    box-sizing: content-box;
    height: 0;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 0.75rem;
		line-height: 0.75rem;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* List items
     ========================================================================== */
  ul {
    list-style-position: outside;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    font-style: inherit;
  }
  
  li {
    margin-left: 2rem;
      margin-bottom: 1rem;
  }
  
  [role='menu'] li {
      margin-left: unset; 
      margin-bottom: unset;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Remove the inheritance of text transform in Edge and Firefox.
   * 1. Remove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }
  
  /**
   * Remove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Correct the padding in Firefox.
   */
  
  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }
  
  /**
   * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
   */
  
  legend {
    padding: 0;
  }
  
  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    vertical-align: baseline;
  }
  
  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in Edge and Firefox.
   */
  
  details {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  :target::before { 
    content: ''; display: block; height: 150px; margin: -150px 0 0 0; 
  }

/* Objects
Non-cosmetic design patterns including grid and layout classes
*/

/******************************************/
/*********** css/objects/_layout.css **********/
/******************************************/

/* HubL Variables */



/* 1a. Containers */






/* CSS variables */

:root {
	--column-gap: 2.13%;
	--column-width-multiplier: 8.333;
	--dnd-section-vertical-padding: var(--margin-block); /* DND sections */
	--max-width: 1400px;

}



/* Full width sections */
.dnd-section {
	padding-inline: var(--padding-inline);
	padding-block: var(--dnd-section-vertical-padding);
/* 	content-visibility: auto; /* Improves performance by bundling sections into chunks to tell the browser not to calculate them until they are about to enter the viewport */ 
/* 	contain-intrinsic-size: auto 700px; /* Reserve space to avoid layout jumps before first reveal */ 

}

.dnd-section > .row-fluid {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width);
	gap: var(--gap-m);
}

/* Collapse margins when container is at max width */
@media (min-width: 1400px) {
	:root {
		--margin-inline: 0;
	}
}

/**** 1b. Widget Columns ****/

/* Space between modules inside columns */
@media (min-width: 768px) {
	.dnd-column > *:not(:last-child) {
		margin-bottom: 1.5rem;
	}
}

/* Makes manually resized column widths more consistent */
.dnd-column .widget-span {
	min-width: 0;
}

/* Removes space below text modules */
.hs_cos_wrapper_type_inline_rich_text > :last-child,
.hs_cos_wrapper_type_rich_text > :last-child,
p:last-child{
	margin-bottom: 0;
}

/* 2. Hard coded templates */

/* For non-drag-and-drop templates */
.content-wrapper {
	max-width: 1400px;
	margin-inline: auto;
	padding: var(--block) var(--inline);
	width: 100%;
}
.dnd-section
.content-wrapper--vertical-spacing {
	padding: px 1rem;
}


/* 3a. Mobile layout */

.row-fluid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-l);
	width: 100%;
	border-radius: var(--corner-l);
}

/* Adds selector for every column like this ".row-fluid .spanX" where X is the column number */


.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12{
	min-height: 1px;
	width: 100%;
	flex-grow: 1;
	min-width: 0;
}

@media (max-width: 768px) {

	.dnd-section > .row-fluid > .dnd-column {
		gap: var(--gap-m);
	}

	.dnd-section > .row-fluid > .dnd-column.widget-type-cell {
		gap: var(--gap);
	}

	.dnd-section > .row-fluid > .dnd-column.span6 {
		/*   gap: var(--gap); */
	}

	.row-depth-1 > .row-fluid {
		gap: var(--gap-m);
	}

	.row-fluid {
		gap: var(--gap);
	}

	.dnd-section {
		padding-inline: var(--padding-inline);
		padding-block: var(--dnd-section-vertical-padding);

	}

	/* This is needed when columns get stacked on mobile */
	.row-fluid > .dnd-column {
		display: flex;
		flex-direction: column;
		gap: var(--gap-s);
	}
}
/* 3b. Desktop layout */

@media (min-width: 768px) {
	.row-fluid {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: var(--gap);
	}

	
	.row-fluid .span1 {
		width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span2 {
		width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span3 {
		width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span4 {
		width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span5 {
		width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span6 {
		width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span7 {
		width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span8 {
		width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span9 {
		width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span10 {
		width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
	}
	
	.row-fluid .span11 {
		width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
	}
	
}
/******************************************/
/****** css/objects/_containers-dnd.css *******/
/******************************************/


/* Darken backgrounds in sections  */
	[class*="-background-image"] {
		position: relative; /* Clips content in container */
	}

	[class*="-background-image"]::before {
		content: ''; /* Allows ::before to become an empty div */
		position: absolute; /* Lets you position it */
		inset: 0;   /* Shorthand for top:0; bottom:0; left:0; right:0; */
		background-color: rgba(0,0,0,.); /* Black color and opacity is in theme settings */
		backdrop-filter: multiply; /* Magic dust */
	}

	[class*="-background-image"] > * {
		position: relative; /* Prevents other elements in container from being darkened */
	}



/* Contain floating images */
.dnd-section:has(.floating-image) { 
	overflow: clip; 
}


/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/******************************************/
/******  css/elements/_typography.css *****/
/******************************************/


/* Variables located in css/utilities/_variables.css */

/* Imports in css/utilities/_imports.css */



/* Set variables */


:root {

	

	--font-primary: "Proxima Nova", "Montserrat", sans-serif;
	--font-secondary: "Proxima Nova", "Montserrat", sans-serif;
/* 	--font-secondary: 'Inter', 'Open Sans', sans-serif; */

	--font-monospace: 'Jetbrains Mono', monospace;
	--font-code: var(--font-monospace);

	--font-title: var(--font-primary);
	--font-body: var(--font-secondary);
	--font-button: var(--font-secondary);

	--font-icons: 'Material Symbols Outlined';

}
/* Begin font styles
========================================================================== */


:root {

	/* Smooth fonts */
	font-family: var(--font-body);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.small {
  font-size: 0.75rem;
}

.tiny {
  font-size: 0.5rem;
}

.huge {
  font-size: clamp(3.125rem, 5vw + 2rem, 8.125rem);
}

.massive {
  font-size: clamp(3.125rem, 6vw + 2rem, 8.125rem);
}

h1, .h1, .font-style-h1 {
  font-size: clamp(3.125rem, 5vw + 2rem, 8.125rem);
}

h2, .h2, .font-style-h2 {
  font-size: clamp(2.625rem, 3vw + 1.5rem, 3.75rem);
}

h3, .h3, .font-style-h3 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2rem);
}

h4, .h4, .font-style-h4 {
  font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem);
}

h5, .h5, .font-style-h5 {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
}

h6, .h6, .font-style-h6 {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
}

p, .p, li {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
}

/* Everything inherits font family */
* {
	font-family: inherit;
}


h1, .h1, .font-style-h1,
h2, .h2, .font-style-h2,
h3, .h3, .font-style-h3,
h4, .h4, .font-style-h4,
h5, .h5, .font-style-h5,
h6, .h6, .font-style-h6 {
	margin-top: 0;
	margin-bottom: var(--gap-s);
	text-wrap: balance;
}


h1, .h1, .font-style-h1 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: 0.98;
}

h2, .h2, .font-style-h2 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: normal;
}

h3, .h3, .font-style-h3 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: normal;
}

h4, .h4, .font-style-h4 {
	font-family: var(--font-title); 
	font-weight: bold;
	line-height: normal;
}

h5, .h5, .font-style-h5 {
	font-family: var(--font-title);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5rem;
	line-height: normal;
	margin-bottom: .5em;
}

h6, .h6, .font-style-h6 {
	font-family: var(--font-title); 
	font-weight: 500;
	line-height: normal;
}

/* Links */
.hs_cos_wrapper_type_inline_rich_text a, 
.hs_cos_wrapper_type_rich_text a {
	color: var(--clr-primary);
	text-decoration: none;
}

/* .body-container-wrapper a {
	color: inherit;
} */

a {
 text-decoration: none;
 color: var(--clr-primary);
}


/* Text */

body {
	font-family: var(--font-body); 
	font-weight: 400;
	font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
	line-height: 1.25;
	color: var(--clr-text);
	text-wrap: pretty;
}

p {
	margin-top: 0;
	margin-bottom: var(--gap-s);
	line-height: 1.25;
}

li {
	margin-bottom: .5em;
	margin-left: 1.5em;
	line-height: 1.25;
}


p:first-child {
	margin-top: 0;
}

.hs_cos_wrapper_type_inline_rich_text p, 
.hs_cos_wrapper_type_rich_text p {
/*   max-width: 70ch; */
}

code {
	font-family: var(--font-code);
}


.inline-code {
  border: 1px solid var(--clr-stroke);
	border-radius: 2px;
	padding-inline: 2px;
}


strong {
	font-weight: 700;
}

small {
	font-size: .75rem;
}

em {
  font-style: italic;
}
/******************************************/
/**********  css/elements/_buttons.css  *******/
/******************************************/




    /**** Buttons ****/
    button, .button, .hs-button, a.button {
        --clr-primary: var(--clr-accent-1);
        --clr-accent: var(--clr-accent-2);
        --clr-text: var(--clr-white);
        --clr-icon: var(--clr-primary);
        --clr-circle: var(--clr-accent); 
        --clr-border: var(--clr-primary);
		/* &:hover {
			--clr-primary: var(--clr-accent) !important;
			--clr-text: var(--clr-border) !important;
			--clr-icon: var(--clr-text) !important;
		} */
        display: flex;
        align-items: center;
        gap: .5em;
        transition: all .15s ease;
    /* 	background-color: var(--clr-primary);
        border: var(--border_width, 2px) solid var(--clr-primary);
        color: var(--clr-bg); */
        background-color: var(--clr-primary);
        padding: 0.25rem;
        padding-left: 1.5rem;
        border-radius: var(--corner-xxl);
			color: var(--clr-text);
			border: 2px solid var(--clr-border);
        font-family: var(--font-buton);
        font-weight: bold;
        font-size: clamp(16px, 2vw, 1rem);
        --font-size-ratio: 1;
        font-size: var(--font-size-dynamic);
        max-width: fit-content;
        text-align: center;
        position: relative;
				
				
    }
		
		
    
    
    /* Circle arrow */
    :is(.button, a.button) {
        position: relative;

        /* Circle Background */
        &::after {
            content: "";
            background-color: var(--clr-accent);
            border-radius: 99px;
            width: 2.125rem;
            height: 2.125rem;
            transition: all 125ms ease;
            
            /* Center content for font icons */
            display: grid;
            place-items: center;
            line-height: 1;
        }

        /* Icon (Masked) - For default buttons or explicit north_east */
        &:not([data-icon-name])::before,
        &[data-icon-name="north_east"]::before {
            content: "";
            position: absolute;
            top: 50%;
            right: 0.25rem;
            width: 2.125rem;
            height: 2.125rem;
            background-color: var(--clr-icon);
            
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px'%3E%3Cpath d='M214.87-141.91 140.78-216l456.65-456.65H351.52v-106h426v426h-106v-245.91L214.87-141.91Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px'%3E%3Cpath d='M214.87-141.91 140.78-216l456.65-456.65H351.52v-106h426v426h-106v-245.91L214.87-141.91Z'/%3E%3C/svg%3E");
            
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: 1.25rem;
            mask-size: 1.25rem;
            
            transform: translateY(-50%);
            transition: all 125ms ease;
            pointer-events: none;
            z-index: 2;
        }

        /* Font Icon Support */
        &[data-icon-name]:not([data-icon-name="north_east"])::after {
            font-family: var(--font-icons);
            color: var(--clr-icon);
        }

        &:hover {
            &::after {
                transform: rotate(45deg);
            }
            &::before {
                transform: translateY(-50%) rotate(45deg);
            }
        }
    }
    
    
    
    button.unset {
        /* Resets button to its default browser state */
        display: initial;
        align-items: initial;
        gap: initial;
        padding: initial;
        border-radius: initial;
        font-family: initial;
        font-weight: initial;
        font-size: initial;
        font-size: initial;
        max-width: initial;
        text-align: initial;
    }
    
    
    button:active, .button:active, .hs-button:active, a.button:active {
      opacity: .8;
        scale: 0.98;
    }
.hs-form-field > label {
	font-weight: 500;
}

.form-columns-2,
.form-columns-3 {
	display: flex;
	gap: 1rem;
	align-items: flex-end;
}

@media (max-width: 400px) {
	.form-columns-2,
	.form-columns-3 {
		flex-direction: column;
		gap: 0;
	}
}


/* This part goes in the css */
/******************************************/
/********  css/elements/_forms.css  *******/
/******************************************/


/* Container */
.hs-form {
	--clr-primary: var(--clr-accent-1);
	--clr-text: var(--clr-white);
	--clr-border: var(--clr-primary);
	--clr-field-background: rgba(255,255,255, 0.20);
	position: relative;
	z-index: 2;
	/* max-width: 700px; */
	padding: var(--block) var(--inline);
	border: 1px solid var(--clr-primary);
	border-radius: var(--corner);
	background-color: var(--clr-primary);
	box-shadow: var(--shadow-light);
}

.hs-form fieldset {
	max-width: unset !important;
}

/* Labels */
.hs-form label {

	margin-bottom: 8px;
	display: block;
	color: var(--clr-text);
}

label span {
	line-height: 1.3;
}

/* Text Inputs and Textarea */
.hs-form input.hs-input,
.hs-input,
.hs-form input[type="text"], 
.hs-form input[type="email"], 
.hs-form textarea,
.hs-form select {
	width: 100% !important;
	padding: 10px;
	margin-bottom: var(--gap);
	border: 1px solid var(--clr-field-border);
	color: var(--clr-text);
	background-color: var(--clr-field-background);
	border-radius: var(--corner, 1.5rem);
}

.inputs-list {
	list-style: none;
}

.inputs-list li {
	margin-left: 0px;
}



/* Dropdown select */
.hs-form .input select {
	margin-bottom: .5rem;
}


/* Checkboxes, Radios, and Boolean Checkboxes */
/* --------------------------------------------------------- */
/* Unified styling for all choice inputs to look like circles */

/* List Item Container */
.hs-form-checkbox,
.hs-form-booleancheckbox,
.hs-form-radio {
	margin-bottom: 0.5rem;
}

/* Labels: The Flex Container */
.hs-form-checkbox label,
.hs-form-booleancheckbox label,
.hs-form-radio label {
	display: flex !important;
	align-items: flex-start !important; /* Aligns dot with top of multi-line text */
	cursor: pointer;
	position: relative;
	width: 100%;
	margin-bottom: 0;
}

/* The "Fake" Circle Input */
.hs-form-checkbox label::before,
.hs-form-booleancheckbox label::before,
.hs-form-radio label::before {
	content: "";
	display: block;
	/* Fixed sizing (Critical for preventing squish) */
	width: 1.2rem;
	height: 1.2rem;
	min-width: 1.2rem;
	min-height: 1.2rem;
	flex-shrink: 0;

	/* Circle Styling */
	border-radius: 50%;
	background-color: var(--clr-accent-2);
	margin-right: 12px; /* Consistent gap between dot and text */
	margin-top: 2px;    /* Visual alignment with text line-height */
	z-index: 1;
	transition: background-color 0.1s ease;
}

/* Checked State Styling */
.hs-form-checkbox label:has(:checked)::before,
.hs-form-booleancheckbox label:has(:checked)::before,
.hs-form-radio label:has(:checked)::before {
	background-color: black;
	outline: 4px solid var(--clr-accent-2);
	outline-offset: -4px;
}

/* Hide the Native Input (but keep it clickable) */
.hs-form-checkbox input,
.hs-form-booleancheckbox input,
.hs-form-radio input {
	position: absolute;
	opacity: 0; /* Visually hidden */
	width: 1.2rem !important;
	height: 1.2rem !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	cursor: pointer;
	z-index: 2; /* Sits on top of the fake circle */
	left: 0;
	top: 2px;
}

/* Text Label Content */
.hs-form-checkbox span,
.hs-form-booleancheckbox span,
.hs-form-radio span {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4;
	flex: 1; /* Takes up remaining space */
	padding-top: 1px !important; /* Slight adjustment for visual center */
}

/* Reset conflicting HubSpot defaults */
input[type='radio'] ~ span,
input[type='checkbox'] ~ span {
	margin: 0;
}

/* Fix for specific HubSpot radio wrapping */
.hs-form-radio {
	align-items: flex-start;
}


.inputs-list.multi-container {
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0.5rem; /* Add gap for spacing */
}

@media (max-width: 768px) {
	.inputs-list.multi-container {
		grid-template-columns: 1fr;
	}
}


/* Rich text */
.hs-richtext {
	margin-bottom: 1rem;
}


/* Submit Button */
.hs-form .hs-submit {
	--clr-primary: var(--clr-white);
}

.hs-form .hs-submit input {
	all: unset;
	--clr-primary: var(--clr-white);
	color: var(--clr-primary);
	font-weight: bold;
}
.hs-submit .actions::after {
	font-family: var(--font-icons);
	color: var(--clr-primary);
	font-size: 1em;
	content: 'arrow_forward';
	vertical-align: middle;
	padding-left: 1.5ch;
}



.hs-submit {
	width: fit-content;
	margin-left: auto;
}

/* Arrow */
.hs-submit::after {
	display: block;
	content: '';
	background-color: var(--clr-primary);
	width: 100%;
	height: 2px;
	margin-top: 2px; 
	margin-right: auto;
	transition: width .2s ease;
}


/* END BUTTON */

/* Legal consent text */
.legal-consent-container .hs-richtext {
	font-size: 0.7rem;
	color: var(--clr-text);
}

/* Confirmation message */
.hs_cos_wrapper_type_form .submitted-message {
	color: var(--clr-text);
}

/* Error messages */
.hs-form .hs-error-msgs {
	margin: 0; 
	padding-left: 0;
	margin-bottom: 1rem;
}

.hs-form .hs-error-msgs li {
	/*   margin-left: 1rem; */
	margin-left: 0;
	padding-bottom: .5rem;
}
.hs-form .hs-error-msg {
	color: var(--clr-alert);
}

.hs-form .hs-error-msgs li::marker {
	color: var(--clr-alert);
	margin: 0;
}

/* Captcha */
.hs_recaptcha {
	margin-bottom: 1.5rem;
	position: absolute;
	left: -9000px;
	top: -100000px;
	
}


/*
==========================================
==========================================
New Forms Module
==========================================
==========================================
*/


/* Container */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-Step {
	background-color: var(--clr-primary);
	border: 2px solid var(--clr-border);
	border-radius: var(--corner);
	position: relative;
	z-index: 2;
	font-family: var(--font-body);
	font-size: 1rem;
}

[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-Step .hsfc-Step__Content {
	padding: var(--block) var(--inline);
}


/* Rich text */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-RichText {
	color: var(--clr-text);
}


/* Fields */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-FieldLabel>span {
	color: var(--clr-text);
	font-size: 1rem;
}

[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-TextInput {
	background-color: var(--clr-field-background);
	border: 1px solid var(--clr-field-border);
	border-radius: var(--corner-s);
	color: var(--clr-text);
	padding: 10px;
	width: 100% !important;
}


/* Dropdowns */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-DropdownOptions {
	background-color: var(--clr-field-background);
	border: 1px solid var(--clr-field-border);
	box-shadow: var(--shadow);
	border-radius: var(--corner-s);

}
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-DropdownOptions__List {
	padding: 1rem;
}
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-DropdownOptions__List__ListItem {
	color: var(--clr-primary);
	background-color: var(--clr-white);
	margin-left: 0;
	border-radius: var(--corner-s);
}

/* Button */
[data-hsfc-id=Renderer] .hsfc-FormWrapper .hsfc-Button {
	border-radius: 999px;
	background-color: var(--clr-white);
	color: var(--clr-primary);
	font-weight: bold;
	font-family: var(--font-body);
	padding: 15px 40px;
	border: none;
	cursor: pointer;
	margin-top: var(--gap-s)
}
/******************************************/
/********  css/elements/_tables.css  ******/
/******************************************/



	table {
	  border-collapse: separate;
		border-spacing: 0; /* Removes default gap between cells */
		border: 1px solid var(--clr-gray-70);
		border-radius: 0.5rem;
	}
	
	th, td {
	padding: 0.25rem;
	}
	
	/* Inner Borders */
	th:not(:last-child) {
		border-right: 1px dashed var(--clr-stroke-2);
	}

	td:not(:last-child) {
		border-right: 1px dashed var(--clr-stroke-2);
	}
	tr:not(:last-child) td, th {
		border-bottom: 1px dashed var(--clr-stroke-2);
	}
/******************************************/
/********  css/elements/elements.css ******/
/******************************************/

/* Social Follow Icons */

.hs-social-follow__link {
    border-bottom-left-radius: 0 !important;
}


/* Linked Image */

/* The outer wrapper that HubSpot applies radius to */
.widget-type-linked_image {
  overflow: visible !important; /* keep HubSpot flexible sizing alive */
}

/* The inner wrapper becomes the clipping mask */
.widget-type-linked_image .hs_cos_wrapper_type_linked_image {
  border-radius: inherit !important; 
  overflow: hidden !important;     /* the mask */
  display: block;
}

/* The actual image keeps whatever sizing HubSpot forced on it */
.widget-type-linked_image .hs_cos_wrapper_type_linked_image img {
  border-radius: 0 !important; /* no inheritance – avoid weird soft edges */
  display: block;
}
/******************************************/
/********  css/elements/elements.css ******/
/******************************************/



/* CONTENTS
* 
* Body background
* Skip to content link
* Box styles
* External links
* Fancy links
* Nav Arrow Buttons
* Dividers
* Accordions
* Tooltips
* Cookie consent banner
* JazzHR Embed */

/*======================
Body Background
======================*/

/* Enable Body background color for light and dark modes */
body {
/* intentionally blank */
}

.dark-mode body {
	background-color: var(--clr-bg);
}


/* Give rounded corners to dnd rows/columns with background color */
.widget-type-cell[class*="background"] {
	border-radius: var(--corner);
	/* 	box-shadow: var(--shadow-lighter); */
	/* 	border: 1px solid var(--clr-stroke); */
}

/*======================
Skip to content link
======================*/

.skip-to-content-link {
  background: var(--clr-bg);
	color: var(--clr-primary);
  height: 30px;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);
}


/*======================
Quick Box Style Presets
======================*/

.alert {
	display: flex; 
	align-items: center; 
	gap: var(--gap-xs); 
	width: fit-content;
	padding: var(--gap-xs); 
	margin-inline: auto;
	margin-bottom: var(--block);
	color: var(--clr-red);
	background-color: var(--clr-bg-red); 
	border: 1px dashed var(--clr-red); 
	border-radius: var(--corner);
}

.chip {
	background: var(--clr-primary-bg);
	color: var(--clr-text);
	padding: 0.25rem 0.5rem;
	border-radius: 7.5rem;
	width: fit-content;
	vertical-align: middle;
	line-height: 1;
	font-family: var(--font-body);
	--font-size-ratio: 0.5;
	font-size: clamp(
		calc(var(--font-size-clamp-min) * var(--font-size-ratio)),
		calc(var(--font-size-base) + (var(--font-size-clamp-val) * var(--font-size-ratio))),
		calc(var(--font-size-clamp-max) * var(--font-size-ratio))
	);
	font-weight: 700;
}

.badge {
	background: var(--clr-primary);
	color: var(--clr-white);
	padding: 0.25rem 0.5rem;
	border-radius: .25rem;
	vertical-align: middle;
	line-height: 1em;
	width: fit-content;
}

.card {
	padding: var(--block) var(--inline);
	border-radius: var(--corner);
	border: 1px solid var(--clr-stroke);
	background-color: var(--clr-bg-2);
	box-shadow: var(--shadow-lighter);
}

/*======================
External links
======================*/
a.external-link:not(:has(img))::after {
  content: " ↗";
	content: "open_in_new";
	margin-left: 0.2em;
	font-family: var(--font-icons);
}


/*======================
Fancy Links
======================*/

.fancy-link, .fancy-link-reverse {
	font-weight: bold;
		--font-size-ratio: .75;
		font-size: clamp(
		calc(var(--font-size-clamp-min) * var(--font-size-ratio)),
		calc(var(--font-size-base) + (var(--font-size-clamp-val) * var(--font-size-ratio))),
		calc(var(--font-size-clamp-max) * var(--font-size-ratio))
	);
}

.fancy-link::after {
	font-family: var(--font-icons);
	font-size: 1em;
	content: 'arrow_forward';
	line-height: .5em;
	vertical-align: middle;
	padding-left: .25em;
}

.fancy-link-reverse::before {
	font-family: var(--font-icons);
	font-size: 1em;
	content: 'arrow_back';
	line-height: .5em;
	vertical-align: middle;
	padding-left: .25em;
}

.fancy-link-wrapper {
	width: fit-content;
}

.fancy-link-wrapper::after {
	display: block;
	content: '';
	background-color: attr(data-line-color);
	width: 0;
	height: 2px;

	margin-top: 2px;
	margin-right: auto;
	transition: width .2s ease;
}

.fancy-link-wrapper:hover::after {
	width: 100%;
}

/*======================
Nav Arrow Buttons
======================*/

.nav-arrow {
	all: unset;
  font-size: 1.5rem;
  padding: 0;
  font-family: var(--font-icons);
  font-variation-settings: var(--filled-500);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background-color: transparent;
  color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
  border-radius: 99px;
  outline-offset: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-arrow:hover {
  background-color: var(--clr-accent-4);
}

.nav-arrow:active {
  scale: 0.94;
  background-color: var(--clr-accent-4);
}

.nav-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/*======================
Dividers
======================*/
hr {
	border: none;
	height: 1px;
	width: 100%;
	background-color: black;
	opacity: 0.5;
}



.hr, .hr-2 {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	border: none;
	width: 100%;
	margin-block: 0;
	height: var(--border-width);
	background-image: linear-gradient(
		to right, var(--clr-primary) 0%, 
		var(--clr-primary) 40%, 
		transparent 40%,
		transparent 100%);
		background-repeat: repeat;
		background-size: 8px;
	margin-block: 0;
	position:relative;
	&::after {
		content: '';
		position: absolute;
		right: 0;
		width: 8px; 
		height: 8px; 
		border-radius: 99rem; 
		background: var(--clr-primary);
	}
}
.hr-2 {
	margin-right: 23%;
}



.divider {
	border: none;
	height: 1px;
	width: 100%;
	background-image: linear-gradient(
		to right,
		var(--clr-primary) 0%, 
		var(--clr-primary) 40%, 
		transparent 40%, 
		transparent 100%);
	background-size: 16px;
	background-position: center;
	background-repeat: repeat;
}


/*======================
Accordions 
 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
======================*/

summary:not(.default) {
	display: flex;
	align-items: center;
	gap: .5em;
}
summary:not(.default)::before {
	color:var(--clr-text);
	font-family: var(--font-icons);
	font-variation-settings: var(--font-variation-settings-24);
	content: "add";
	content: "expand_more";
	transition: all .15s ease;
	transform-origin: center 48%;
	font-size: 32px;
}

details[open]:not(.default) summary::before {
	color: var(--clr-text);	
	content: "remove"; 
	transform: rotate(180deg);
}


summary:not(.default)::-webkit-details-marker {
	display: none;
}


/*======================
Tooltips

Usage:
		<span class="tooltip">
			<span class="label">Hover me</span>
			<div class="tooltip-content">
				I'm a cooltip. 😎
			</div>
		</span>
		
======================*/

.tooltip {
  position: relative;
	cursor: default;
}

.tooltip .tooltip-content {
	display: none;
	pointer-events: none;
	position: absolute;
	bottom: 100%;
	width: 100vw;
	max-width: 225px;
	padding: 0.5rem;
	border: 1px solid var(--clr-stroke-2);
	background: var(--clr-bg);
	border-radius: 4px;
	box-shadow: var(--shadow-lighter);
	opacity: 0;
	transition: all 150ms ease-out;
	z-index: 5;
}


.tooltip:hover .tooltip-content {
  display: block;
	opacity: 1;
	left: 0;
}




/*======================
Cookie consent banner
======================*/

#hs-banner-parent #hs-eu-cookie-confirmation {
  position: fixed;
  inset: unset;
  bottom: 0px;
  left: 0;
  max-width: 50%;
  margin: 0;
  width: unset;
  transform: unset;
  --webkit-transform: unset;
  margin: 1rem;
}


#hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner {
  padding: var(--block);
/*   flex-direction: row; */
/*   align-items: center; */
}

#hs-eu-confirmation-button {
  padding: .25rem 2rem;
  min-height: unset;
  height: unset;
  width: unset;
  min-width: unset;
}




/*======================
JazzHR Resumator Embed
======================*/
#resumator-widget {
	background-color: var(--clr-bg);
	padding: var(--block) var(--inline);
	border-radius: var(--corner-l);

}

.resumator-job .resumator-jobs-text.resumator-job-title {
	border-top: 1px dashed var(--clr-green);
	padding-top: 1rem;
	font-family: var(--font-primary);
	color: var(--clr-title);
}

.resumator-job:first-child .resumator-jobs-text {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.resumator-job-info, .resumator-job-info * {
	font-family: var(--font-body);
	font-size: .8rem;
	color: var(--clr-text) !important;
	padding-bottom: .5rem;

}

.resumator-job-link {
	font-family: var(--font-body);
	font-size: .8rem;
}
/******************************************/
/******  css/elements/effects.css ********/
/******************************************/


/* Filters */

.blur {
	-moz-backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.multiply {
	-moz-mix-blend-mode: multiply;
	-webkit-mix-blend-mode: multiply;
	mix-blend-mode: multiply;
}

/* Shadows */
.shadow { box-shadow: var(--shadow); }
.shadow-light, 
.shadow-2 {box-shadow: var(--shadow-light);}
.shadow-menu, 
.shadow-3 {box-shadow: var(--shadow-menu);}
.shadow-green {box-shadow: var(--shadow-green);}
.shadow-blue {box-shadow: var(--shadow-blue);}
.shadow-orange {box-shadow: var(--shadow-orange);}
.shadow-red {box-shadow: var(--shadow-red);}
.shadow-purple {box-shadow: var(--shadow-purple);}
/******************************************/
/*********** css/elements/svg.css *************/
/******************************************/


.svg-bg-2 {
  fill: var(--clr-bg-2);
}
/******************************************/
/********  css/elements/icons.css  ********/
/******************************************/



:root{

	--icon-filled: 
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	--icon-outlined: 
		'FILL' 0,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	--font-variation-settings: var(--icon-outlined);

	/* Icon variation settings variables for each weight (100-900) */
	
	--filled-100:
		'FILL' 1,
		'wght' 100,
		'GRAD' 0,
		'opsz' 24;
	--outlined-100:
		'FILL' 0,
		'wght' 100,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-200:
		'FILL' 1,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
	--outlined-200:
		'FILL' 0,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-300:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;
	--outlined-300:
		'FILL' 0,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-400:
		'FILL' 1,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
	--outlined-400:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-500:
		'FILL' 1,
		'wght' 500,
		'GRAD' 0,
		'opsz' 24;
	--outlined-500:
		'FILL' 0,
		'wght' 500,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-600:
		'FILL' 1,
		'wght' 600,
		'GRAD' 0,
		'opsz' 24;
	--outlined-600:
		'FILL' 0,
		'wght' 600,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-700:
		'FILL' 1,
		'wght' 700,
		'GRAD' 0,
		'opsz' 24;
	--outlined-700:
		'FILL' 0,
		'wght' 700,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-800:
		'FILL' 1,
		'wght' 800,
		'GRAD' 0,
		'opsz' 24;
	--outlined-800:
		'FILL' 0,
		'wght' 800,
		'GRAD' 0,
		'opsz' 24;
	
	--filled-900:
		'FILL' 1,
		'wght' 900,
		'GRAD' 0,
		'opsz' 24;
	--outlined-900:
		'FILL' 0,
		'wght' 900,
		'GRAD' 0,
		'opsz' 24;
	
}

.icon {
	font-family: var(--font-icons);
	font-size: 24px;
	position: relative;
	font-variation-settings: var(--font-variation-settings);
	line-height: 1;
}
.icon::before {
	font-family: var(--font-icons);
	content: attr(data-icon);
	position: absolute;
	top: 0;
	left: 0;
	opacity: .2;
}
.icon.outlined {
	font-variation-settings: var(--icon-outlined);
}

.icon.filled {
	font-variation-settings: var(--icon-filled);
}

/* Weight classes (100-900) - standalone (defaults to outlined) */

.icon.weight-100 {
	font-variation-settings:
		'FILL' 0,
		'wght' 100,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-200 {
	font-variation-settings:
		'FILL' 0,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-300 {
	font-variation-settings:
		'FILL' 0,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-400 {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-500 {
	font-variation-settings:
		'FILL' 0,
		'wght' 500,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-600 {
	font-variation-settings:
		'FILL' 0,
		'wght' 600,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-700 {
	font-variation-settings:
		'FILL' 0,
		'wght' 700,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-800 {
	font-variation-settings:
		'FILL' 0,
		'wght' 800,
		'GRAD' 0,
		'opsz' 24;
}

.icon.weight-900 {
	font-variation-settings:
		'FILL' 0,
		'wght' 900,
		'GRAD' 0,
		'opsz' 24;
}


/* Weight classes (100-900) with outlined and filled variants */


/* Outlined variant for weight 100 */
.icon.outlined.weight-100 {
	font-variation-settings:
		'FILL' 0,
		'wght' 100,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 100 */
.icon.filled.weight-100 {
	font-variation-settings:
		'FILL' 1,
		'wght' 100,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 200 */
.icon.outlined.weight-200 {
	font-variation-settings:
		'FILL' 0,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 200 */
.icon.filled.weight-200 {
	font-variation-settings:
		'FILL' 1,
		'wght' 200,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 300 */
.icon.outlined.weight-300 {
	font-variation-settings:
		'FILL' 0,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 300 */
.icon.filled.weight-300 {
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 400 */
.icon.outlined.weight-400 {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 400 */
.icon.filled.weight-400 {
	font-variation-settings:
		'FILL' 1,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 500 */
.icon.outlined.weight-500 {
	font-variation-settings:
		'FILL' 0,
		'wght' 500,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 500 */
.icon.filled.weight-500 {
	font-variation-settings:
		'FILL' 1,
		'wght' 500,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 600 */
.icon.outlined.weight-600 {
	font-variation-settings:
		'FILL' 0,
		'wght' 600,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 600 */
.icon.filled.weight-600 {
	font-variation-settings:
		'FILL' 1,
		'wght' 600,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 700 */
.icon.outlined.weight-700 {
	font-variation-settings:
		'FILL' 0,
		'wght' 700,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 700 */
.icon.filled.weight-700 {
	font-variation-settings:
		'FILL' 1,
		'wght' 700,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 800 */
.icon.outlined.weight-800 {
	font-variation-settings:
		'FILL' 0,
		'wght' 800,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 800 */
.icon.filled.weight-800 {
	font-variation-settings:
		'FILL' 1,
		'wght' 800,
		'GRAD' 0,
		'opsz' 24;
}


/* Outlined variant for weight 900 */
.icon.outlined.weight-900 {
	font-variation-settings:
		'FILL' 0,
		'wght' 900,
		'GRAD' 0,
		'opsz' 24;
}
/* Filled variant for weight 900 */
.icon.filled.weight-900 {
	font-variation-settings:
		'FILL' 1,
		'wght' 900,
		'GRAD' 0,
		'opsz' 24;
}




/* Specific sizes */

:root {

	--font-variation-settings-20:
	'FILL' 1,
	'wght' 300,
	'GRAD' 0,
	'opsz' 24;
}



.icon-20 {
	font-family: var(--font-icons);
	font-size: 20px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-20);
}
.icon-20::before {
	font-family: var(--font-icons);
	font-size: 20px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	
	display: none;
	
}


:root {

	--font-variation-settings-24:
	'FILL' 1,
	'wght' 300,
	'GRAD' 0,
	'opsz' 24;
}



.icon-24 {
	font-family: var(--font-icons);
	font-size: 24px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-24);
}
.icon-24::before {
	font-family: var(--font-icons);
	font-size: 24px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	
	display: none;
	
}


:root {

	--font-variation-settings-32:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 48;
}



.icon-32 {
	font-family: var(--font-icons);
	font-size: 32px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-32);
}
.icon-32::before {
	font-family: var(--font-icons);
	font-size: 32px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 24;

	
}


:root {

	--font-variation-settings-48:
	'FILL' 0,
	'wght' 300,
	'GRAD' 0,
	'opsz' 48;
}



.icon-48 {
	font-family: var(--font-icons);
	font-size: 48px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-48);
}
.icon-48::before {
	font-family: var(--font-icons);
	font-size: 48px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 300,
		'GRAD' 0,
		'opsz' 48;

	
}


:root {

	--font-variation-settings-60:
	'FILL' 0,
	'wght' 200,
	'GRAD' 0,
	'opsz' 48;
}



.icon-60 {
	font-family: var(--font-icons);
	font-size: 60px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-60);
}
.icon-60::before {
	font-family: var(--font-icons);
	font-size: 60px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 200,
		'GRAD' 0,
		'opsz' 48;

	
}


:root {

	--font-variation-settings-120:
	'FILL' 0,
	'wght' 100,
	'GRAD' 0,
	'opsz' 48;
}



.icon-120 {
	font-family: var(--font-icons);
	font-size: 120px;
	position: relative;
	font-variation-settings: var(--font-variation-settings-120);
}
.icon-120::before {
	font-family: var(--font-icons);
	font-size: 120px;
	content: attr(data-icon);
	position: absolute;
	
	top: 0px;
	
	left: 0;
	opacity: .2;
	font-variation-settings:
		'FILL' 1,
		'wght' 100,
		'GRAD' 0,
		'opsz' 48;

	
}


/******************************************/
/*********** css/elements/video.css ***********/
/******************************************/


.hs-video-wrapper iframe {
  border-radius: .5rem;
	border: 1px solid var(--clr-stroke);
	box-shadow: var(--shadow-lighter);
}

.oembed_container,
.oembed_custom-thumbnail, 
.oembed_custom-thumbnail:active, 
.oembed_custom-thumbnail:focus, 
.oembed_custom-thumbnail:hover {
  border-radius: .5rem !important;
	box-shadow: var(--shadow-lighter);
}


button.oembed_custom-thumbnail {
  gap: unset;
  max-width: unset;
}

.oembed_container .iframe_wrapper {
  border-radius: .5rem;
  overflow: hidden;
}

.w-vulcan--background.w-css-reset {
z-index: 0;
}


/* Prevents Wistia from causing page overflow */
.wistia_embed {
	max-width: 100%;
}

@media (max-width: 768px) {

	.wistia_embed {
		width: 100% !important;
	}
}
    

/* Utility classes 
Bootleg Tailwind. Shortcuts for quick styles like display modes, layouts, paddings, etc.
*/
/******************************************/
/*****  css/utilities/utility-classes.css  ****/
/******************************************/


/*======================
  Visibility
======================*/

.hidden { display: none !important;}
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}
.hide-scrollbar { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none;  /* Internet Explorer/Edge */}
.hide-scrollbar::-webkit-scrollbar {display: none;} /* Chrome, Safari, Edge */
.editor-only { display: none; } /* Hide in live */
.hs-inline-edit .editor-only { display: block; } /* Show in editor */
.relative { position: relative; }

/*======================
  Device breakpoints
======================*/

.mobile, .hidden-desktop {
	@media (min-width: 769px) { display: none !important; }
}
.desktop, .hidden-desktop {
	@media (max-width: 768px) {
		display: none !important; }
}

/*======================
  UI styling
======================*/

.dashed, [class$='-dashed'] { border-style: dashed !important; }
.corner, .corners { border-radius: .5rem; }
.corner-l, .corners-l { border-radius: 1rem; }
.circle {border-radius: 9999px;}
.border { border: 2px solid #333; }

/* Typography */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.underline { text-decoration: underline; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
.no-list { list-style: none; margin: 0; padding: 0; } .no-list > li { margin: 0; padding: 0; }



/*======================
  Layout modes
======================*/

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.margin-auto { margin-inline: auto; }
.margin-l-auto { margin-left: auto; }
.margin-r-auto { margin-right: auto; }
.fit-content { max-width: fit-content; }
.full { width: 100%; }

/* Block */
.block.center { text-align: center; }
.block.middle { align-content: center; }
.middle:not(.flex):not(.grid) {align-content: center;} /* Same as above but only requires .middle class */

/* Flexbox */
.flex { display: flex; }
.flex.row { flex-direction: row; }
.flex.column { flex-direction: column; }
.flex.row.reverse { flex-direction: row-reverse; }
.flex.column.reverse { flex-direction: column-reverse; }
.grow { flex-grow: 1; }
.shrink { flex-shrink: 1; }

/* Flex Stacking */
.flex.stack { flex-direction: row; }
@media (max-width: 678px) {
	.flex.stack { flex-direction: column; }
	.flex.stack.reverse { flex-direction: column-reverse; }
}

/* Flex alignment */
.flex.wrap { flex-wrap: wrap; }
.flex.nowrap { flex-wrap: nowrap; }
.flex.stretch { align-items: stretch; }
.flex.middle { align-items: center; }
.flex.align-start {align-items: flex-start;}
.flex.align-end {align-items: flex-end;}
.flex.center { justify-content: center; }
.flex.space-between { justify-content: space-between; }
.flex.space-around { justify-content: space-around; }
.flex.start {justify-content: flex-start;}
.flex.end {justify-content: flex-end;}

/* Grid */
.grid { display: grid; }
.grid.center { place-items: center; }
.grid.middle { align-items: center; }
.grid.end { align-items: end; }
.grid.cols-auto {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));}
.grid.rows-auto {grid-auto-rows: 1fr;}
.grid.cols-1 { grid-template-columns: 1fr; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid.cols-7 { grid-template-columns: repeat(7, 1fr); }
.grid.cols-8 { grid-template-columns: repeat(8, 1fr); }
.grid.cols-9 { grid-template-columns: repeat(9, 1fr); }
.grid.cols-10 { grid-template-columns: repeat(10, 1fr); }
.grid.cols-11 { grid-template-columns: repeat(11, 1fr); }
.grid.cols-12 { grid-template-columns: repeat(12, 1fr); }
.grid.space-between { align-content: space-between; }
.grid.stack { @media (max-width: 768px) { grid-template-columns: 1fr !important; }}
.grid.space-between { align-content: space-between; }
.grid.align-start { align-items: start; }
.grid.align-end { align-items: end; }
.grid.align-center { align-items: center; }
.grid.align-stretch { align-items: stretch; }
.grid.justify-start { justify-content: start; }
.grid.justify-end { justify-content: end; }
.grid.justify-center { justify-content: center; }
.grid.justify-stretch { justify-content: stretch; }

/*======================
  Spacing
======================*/

.pad-block { padding-block: var(--gap); }
.pad-inline { padding-inline: var(--inline); }

/* Gaps */
.gap-xxs { gap: var(--gap-xxs);}
.gap-xs { gap: var(--gap-xs);}
.gap-s { gap: var(--gap-s);}
.gap { gap: var(--gap);}
.gap-m { gap: var(--gap-m);}
.gap-l { gap: var(--gap-l);}
.gap-xl { gap: var(--gap-xl);}
.gap-xxl { gap: var(--gap-xxl);}
gap {all: unset; display: block; height: var(--gap);} /* For this one you can just use <gap></gap> and it will give you a quick lil vertical gap. */

/* Padding - Expand to see classes*/
@media (min-width: 1px) {
	.pad-0 {padding: 0;}
	.pad-xs {padding: var(--gap-xs);}
	.pad-s {padding: var(--gap-s);}
	.pad {padding: var(--gap);}
	.pad-m {padding: var(--gap-m);}
	.pad-l {padding: var(--gap-l);}
	.pad-xl {padding: var(--gap-xl);}
	.pad-y-xs {padding-block: var(--gap-xs);}
	.pad-y-s {padding-block: var(--gap-s);}
	.pad-y {padding-block: var(--gap);}
	.pad-y-m {padding-block: var(--gap-m);}
	.pad-y-l {padding-block: var(--gap-l);}
	.pad-y-xl {padding-block: var(--gap-xl);}
	.pad-x-xs {padding-inline: var(--gap-xs);}
	.pad-x-s {padding-inline: var(--gap-s);}
	.pad-x {padding-inline: var(--gap);}
	.pad-x-m {padding-inline: var(--gap-m);}
	.pad-x-l {padding-inline: var(--gap-l);}
	.pad-x-xl {padding-inline: var(--gap-xl);}
}

/* Margin - Expand to see classes*/
@media (min-width: 1px) {
	.margin-0 {margin: 0;}
	.margin-xs {margin: var(--gap-xs);}
	.margin-s {margin: var(--gap-s);}
	.margin {margin: var(--gap);}
	.margin-m {margin: var(--gap-m);}
	.margin-l {margin: var(--gap-l);}
	.margin-xl {margin: var(--gap-xl);}
	.margin-y-xs {margin-block: var(--gap-xs);}
	.margin-y-s {margin-block: var(--gap-s);}
	.margin-y {margin-block: var(--gap);}
	.margin-y-m {margin-block: var(--gap-m);}
	.margin-y-l {margin-block: var(--gap-l);}
	.margin-y-xl {margin-block: var(--gap-xl);}
	.margin-x-xs {margin-inline: var(--gap-xs);}
	.margin-x-s {margin-inline: var(--gap-s);}
	.margin-x {margin-inline: var(--gap);}
	.margin-x-m {margin-inline: var(--gap-m);}
	.margin-x-l {margin-inline: var(--gap-l);}
	.margin-x-xl {margin-inline: var(--gap-xl);}
}



/*======================
  Accessibility
======================*/



/* Screen Reader
*	Improved screen reader only CSS class
@author Gaël Poupard
@note Based on Yahoo!'s technique
@author Thierry Koblentz
@see https://www.cssmojo.com/hide-content-from-sighted-users/
* 1.
@note `clip` is deprecated but works everywhere
@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip
* 2.
@note `clip-path` is the future-proof version, but not very well supported yet
@see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
@see http://caniuse.com/#search=clip-path
@author Yvain Liechti
@see https://twitter.com/ryuran78/status/778943389819604992
* 3.
@note preventing text to be condensed
author J. Renée Beach
@see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
@note Drupal 8 goes with word-wrap: normal instead
@see https://www.drupal.org/node/2045151
@see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea
* 4.
@note !important is important
@note Obviously you wanna hide something
@author Harry Roberts
@see https://csswizardry.com/2016/05/the-importance-of-important/
*/

.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
	clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

/*
Use in conjunction with .sr-only to only display content when it's focused.
@note Useful for skip links 
@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
@note Based on a HTML5 Boilerplate technique, included in Bootstrap
@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
@author Sylvain Pigeard
@see https://github.com/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
	clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}


/*======================
  Debugging
======================*/


.debug * {
	padding: 2px;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 :before {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--monospace, monospace);
	font-size: .5rem;
	border: 1px solid #ccc;
	color: white;
	background: var(--clr-text,rgb(33, 33, 33));
}

.debug-2 * {
	padding: .5rem;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.debug-2 *:before {
	content: "Level 1";
}

.debug-2 * > * {
	position: relative;
	background-color: rgba(0,50,50,.08);
	outline: 1px dashed rgba(0,50,0,.15);
}
.debug-2 * > *:before {
	content: "Level 2";
}
.debug-2 * > * > * {
	position: relative;
	background-color: rgba(40,10,40,.1);
	outline: 1px dashed rgba(40,0,0,.25);
}
.debug-2 * > * > *:before {
	content: "Level 3";
}

.debug-3 * {
	position: relative;
}

.debug-3 *:before {
	content: '';
	position: absolute;
	inset: 0;
	outline: 1px dashed rgba(0,20,20,.15);
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
}

.debug-4 * {
	padding: 0.5rem;
	background-color: rgba(0,70,70,.05);
	mix-blend-mode: multiply;
	outline: 1px dashed rgba(0,20,20,.15);
}

.spacer {
	width: 100%;
	height: 16rem;
}

.spacer-2 {
	width: 100%;
	height: 32rem;
}

.spacer-3 {
	width: 100%;
	height: 64rem;
}

.gridlines {
	height: 200vh;
	background-image: 
		repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
		repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 1rem),
		repeating-linear-gradient(to right, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem),
		repeating-linear-gradient(to bottom, var(--clr-stroke), var(--clr-stroke) 1px, transparent 1px, transparent 4rem);
	background-color: var(--clr-bg-bg-2); /* Background color of the grid */
}