/* 
 * 
 * RTB-BASE.CSS
 *
 * TOC1. VARIABLES
 * TOC2. FONTS
 * TOC3. RESET
 * TOC4. BASE STYLES
 *
 */

/* -------------------------------------------------------------------------- */
/* TOC1. Variables */
/* -------------------------------------------------------------------------- */

:root {

    /* PRIMARY --> SEA BLUE */
    --primary-50: #f2f8fd;
    --primary-100: #e5eef9;
    --primary-200: #c5ddf2;
    --primary-300: #92c1e7;
    --primary-400: #58a1d8;
    --primary-500: #3386c7; /* brand colour */
    --primary-600: #2369a6;
    --primary-700: #1d5387;
    --primary-800: #1c4870;
    --primary-900: #1c3e5e;
    --primary-950: #13273e;
    
    /* SECONDARY --> FOREST GREEN */
    --secondary-50: #f3faf7;
    --secondary-100: #d8efe7;
    --secondary-200: #b0dfcf;
    --secondary-300: #80c8b1;
    --secondary-400: #56ab93;
    --secondary-500: #3c907b;
    --secondary-600: #337f6d; /* brand colour */
    --secondary-700: #285d51;
    --secondary-800: #244b43;
    --secondary-900: #214038;
    --secondary-950: #0f2421;
    
    /* TERTIARY --> SUN YELLOW */
    --tertiary-50: #fffbeb;
    --tertiary-100: #fff3c7;
    --tertiary-200: #ffe68a;
    --tertiary-300: #ffd24d;
    --tertiary-400: #ffc233; /* brand colour */
    --tertiary-500: #eb991e;
    --tertiary-600: #db790f;
    --tertiary-700: #b65611;
    --tertiary-800: #924116;
    --tertiary-900: #793715;
    --tertiary-950: #4b1e07;
    
    /* COOL --> SLATE */
    --cool-50: #f1f9f9;
    --cool-100: #ddecee;
    --cool-200: #c2dbe0;
    --cool-300: #96c1ca;
    --cool-400: #629fac;
    --cool-500: #488493;
    --cool-600: #3e6b7a;
    --cool-700: #375967;
    --cool-800: #344c56;
    --cool-900: #2d3f48; /* brand colour */
    --cool-950: #162227;
    
    /* WARM --> STONE */
    --warm-50:  #fafaf9;
    --warm-100: #f5f5f4;
    --warm-200: #e7e5e4;
    --warm-300: #d6d3d1;
    --warm-400: #a8a29e;
    --warm-500: #78716c;
    --warm-600: #57534e;
    --warm-700: #44403c;
    --warm-800: #292524;
    --warm-900: #1c1917;
    --warm-950: #0c0a09;

    /* NEUTRAL --> GRAYSCALE */
    --neutral-50:  #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;

    /* STATUS */
    --success:     #b3eb3a;
    --warning:     #ebb104;
    --danger:      #eb541e;
    --info:        #55b5db;

    /* B&W */
    --black: #000000;
    --white: #ffffff;

    /* FONT SIZES - 400px -> 1500px */
    --text-950:	clamp(3rem, 1.6363636363636365rem + 5.454545454545454vw, 6.75rem);                  /* 48px --> 108px */
    --text-900:	clamp(2.625rem, 1.6704545454545454rem + 3.8181818181818183vw, 5.25rem);             /* 42px --> 84px  */
    --text-800:	clamp(2.1875rem, 1.5511363636363638rem + 2.5454545454545454vw, 3.9375rem);          /* 35px --> 63px  */
    --text-700:	clamp(1.8125rem, 1.4715909090909092rem + 1.3636363636363635vw, 2.75rem);            /* 29px --> 44px  */
    --text-600:	clamp(1.5rem, 1.3181818181818181rem + 0.7272727272727273vw, 2rem);                  /* 24px --> 32px  */
    --text-500:	clamp(1.25rem, 1.0909090909090908rem + 0.6363636363636364vw, 1.6875rem);            /* 20px --> 27px  */
    --text-400:	clamp(1.0625rem, 0.9943181818181818rem + 0.27272727272727276vw, 1.25rem);           /* 17px --> 20px  */
    --text-300:	clamp(0.9375rem, 0.8920454545454546rem + 0.18181818181818182vw, 1.0625rem);         /* 15px --> 17px  */
    --text-200:	clamp(0.75rem, 0.6818181818181818rem + 0.27272727272727276vw, 0.9375rem);           /* 12px --> 15px  */
    --text-100:	clamp(0.625rem, 0.5795454545454546rem + 0.18181818181818182vw, 0.75rem);            /* 10px --> 12px  */

    /* SPACING -------------------------------------------------------------- */
    /* @link https://utopia.fyi/space/calculator?c=400,17,1.2,1500,20,1.333,6,3,&s=0.75|0.5,1.5|2.25|3|4.5|6|9,&g=xs,xl,xl,12 */

    /* Space 100: 9px → 10px */     --space-100: clamp(0.5625rem, 0.5398rem + 0.0909vw, 0.625rem);
    /* Space 200: 13px → 15px */    --space-200: clamp(0.8125rem, 0.767rem + 0.1818vw, 0.9375rem);
    /* Space 300: 17px → 20px */    --space-300: clamp(1.0625rem, 0.9943rem + 0.2727vw, 1.25rem);
    /* Space 400: 26px → 30px */    --space-400: clamp(1.625rem, 1.5341rem + 0.3636vw, 1.875rem);
    /* Space 500: 38px → 45px */    --space-500: clamp(2.375rem, 2.2159rem + 0.6364vw, 2.8125rem);
    /* Space 600: 51px → 60px */    --space-600: clamp(3.1875rem, 2.983rem + 0.8182vw, 3.75rem);
    /* Space 700: 77px → 90px */    --space-700: clamp(4.8125rem, 4.517rem + 1.1818vw, 5.625rem);
    /* Space 800: 102px → 120px */  --space-800: clamp(6.375rem, 5.9659rem + 1.6364vw, 7.5rem);
    /* Space 900: 153px → 180px */  --space-900: clamp(9.5625rem, 8.9489rem + 2.4545vw, 11.25rem);

    /* SPACING -------------------------------------------------------------- */
    /* One-up pairs */
    /* Space 100-200: 9px → 15px */    --space-100-200: clamp(0.5625rem, 0.4261rem + 0.5455vw, 0.9375rem);
    /* Space 200-300: 13px → 20px */   --space-200-300: clamp(0.8125rem, 0.6534rem + 0.6364vw, 1.25rem);
    /* Space 300-400: 17px → 30px */   --space-300-400: clamp(1.0625rem, 0.767rem + 1.1818vw, 1.875rem);
    /* Space 400-500: 26px → 45px */   --space-400-500: clamp(1.625rem, 1.1932rem + 1.7273vw, 2.8125rem);
    /* Space 500-600: 38px → 60px */   --space-500-600: clamp(2.375rem, 1.875rem + 2vw, 3.75rem);
    /* Space 600-700: 51px → 90px */   --space-600-700: clamp(3.1875rem, 2.3011rem + 3.5455vw, 5.625rem);
    /* Space 700-800: 77px → 120px */  --space-700-800: clamp(4.8125rem, 3.8352rem + 3.9091vw, 7.5rem);
    /* Space 800-900: 102px → 180px */ --space-800-900: clamp(6.375rem, 4.6023rem + 7.0909vw, 11.25rem);

    /* BORDER RADIUS -------------------------------------------------------- */
    --rad-xs:  4px;
    --rad-s:   var(--space-100);
    --rad-m:   var(--space-200);
    --rad-l:   var(--space-300);
    --rad-xl:  var(--space-400);

    /* ICON SIZE ------------------------------------------------------------ */
    --icon-xs:  var(--space-200-300);
    --icon-s:   var(--space-300-400);
    --icon-m:   var(--space-400-500);
    --icon-l:   var(--space-500-600);
    --icon-xl:  var(--space-600-700);

    /* GUTTER --------------------------------------------------------------- */
    /* 400->1500px 16px to 80px */
    --gutter: clamp(1rem, -0.4545rem + 5.8182vw, 5rem);

    /* MAX WIDTHS ----------------------------------------------------------- */
	--max-site: 125rem;       /* 2000px */
	--max-xl:   93.75rem;     /* 1500px */
	--max-l:    62.5rem;      /* 1000px */ 
	--max-m:    46.875rem;    /* 750px */
	--max-s:    31.25rem;     /* 500px */
	--max-xs:   18.75rem;     /* 300px */
}

/* -------------------------------------------------------------------------- */
/* TOC2. Fonts */
/* -------------------------------------------------------------------------- */

/* Plex Sans Var */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/plex-sans-var/plex-sans-var.woff2') format('woff2-variations'),
            url('/assets/fonts/plex-sans-var/plex-sans-var.ttf') format('truetype-variations');
    font-weight: 100 700;
    font-display: swap;
    font-stretch: 85% 100%;
}
.font-primary { font-family: 'font-primary', sans-serif; font-style: normal; }
.font-primary-100 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 100; }
.font-primary-200 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 200; }
.font-primary-300 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 300; }
.font-primary-400 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 400; }
.font-primary-500 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 500; }
.font-primary-600 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 600; }
.font-primary-700 { font-family: 'font-primary', sans-serif; font-style: normal; font-weight: 700; }

.font-condensed   { font-stretch: 85%; }

/* Plex Sans Var Italic */
@font-face {
    font-family: 'font-primary';
    src:    url('/assets/fonts/plex-sans-var/plex-sans-var-italic.woff2') format('woff2-variations'),
            url('/assets/fonts/plex-sans-var/plex-sans-var-italic.ttf') format('truetype-variations');
    font-weight: 100 700;
    font-display: swap;
    font-stretch: 85% 100%;
    font-style: italic;
}
.font-primary-i { font-family: 'font-primary', sans-serif; font-style: italic; }
.font-primary-100i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 100; font-style: italic; }
.font-primary-200i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 200; font-style: italic; }
.font-primary-300i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 300; font-style: italic; }
.font-primary-400i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 400; font-style: italic; }
.font-primary-500i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 500; font-style: italic; }
.font-primary-600i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 600; font-style: italic; }
.font-primary-700i { font-family: 'font-primary', sans-serif; font-style: italic; font-weight: 700; font-style: italic; }

/* Plex Serif 300 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/plex-serif/plex-serif-300.woff2') format('woff2'), url('/assets/fonts/plex-serif/plex-serif-300.woff') format('woff'), url('/assets/fonts/plex-serif/plex-serif-300.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
.font-secondary-300 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 300; }
/* Plex Serif 300-italic */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/plex-serif/plex-serif-300-italic.woff2') format('woff2'), url('/assets/fonts/plex-serif/plex-serif-300-italic.woff') format('woff'), url('/assets/fonts/plex-serif/plex-serif-300-italic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
.font-secondary-300i { font-family: 'font-secondary', sans-serif; font-style: italic; font-weight: 300; }
/* Plex Serif 400 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/plex-serif/plex-serif-400.woff2') format('woff2'), url('/assets/fonts/plex-serif/plex-serif-400.woff') format('woff'), url('/assets/fonts/plex-serif/plex-serif-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
.font-secondary-400 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 400; }
/* Plex Serif 400-italic */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/plex-serif/plex-serif-400-italic.woff2') format('woff2'), url('/assets/fonts/plex-serif/plex-serif-400-italic.woff') format('woff'), url('/assets/fonts/plex-serif/plex-serif-400-italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
.font-secondary-400i { font-family: 'font-secondary', sans-serif; font-style: italic; font-weight: 400; }
/* Plex Serif 500 */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/plex-serif/plex-serif-500.woff2') format('woff2'), url('/assets/fonts/plex-serif/plex-serif-500.woff') format('woff'), url('/assets/fonts/plex-serif/plex-serif-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
.font-secondary-500 { font-family: 'font-secondary', sans-serif; font-style: normal; font-weight: 500; }
/* Plex Serif 500-italic */
@font-face { font-family: 'font-secondary'; src: url('/assets/fonts/plex-serif/plex-serif-500-italic.woff2') format('woff2'), url('/assets/fonts/plex-serif/plex-serif-500-italic.woff') format('woff'), url('/assets/fonts/plex-serif/plex-serif-500-italic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
.font-secondary-500i { font-family: 'font-secondary', sans-serif; font-style: italic; font-weight: 500; }

/*
* https://remixicon.com
* https://github.com/Remix-Design/RemixIcon
* Copyright RemixIcon.com
* Released under the Apache License Version 2.0
*/

@font-face {
    font-family: "remixicon";
    src: url('/assets/fonts/remixicon.eot?t=1705993890109'); /* IE9*/
    src: url('/assets/fonts/remixicon.eot?t=1705993890109#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url("/assets/fonts/remixicon.woff2?t=1705993890109") format("woff2"),
    url("/assets/fonts/remixicon.woff?t=1705993890109") format("woff"),
    url('/assets/fonts/remixicon.ttf?t=1705993890109') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('/assets/fonts/remixicon.svg?t=1705993890109#remixicon') format('svg'); /* iOS 4.1- */
    font-display: swap;
}

[class^="ri-"], [class*="ri-"] {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
.ri-xxs { font-size: .5em; }
.ri-xs { font-size: .75em; }
.ri-sm { font-size: .875em }
.ri-1x { font-size: 1em; }
.ri-2x { font-size: 2em; }
.ri-3x { font-size: 3em; }
.ri-4x { font-size: 4em; }
.ri-5x { font-size: 5em; }
.ri-6x { font-size: 6em; }
.ri-7x { font-size: 7em; }
.ri-8x { font-size: 8em; }
.ri-9x { font-size: 9em; }
.ri-10x { font-size: 10em; }
.ri-fw { text-align: center; width: 1.25em; }

.ri-facebook-box-fill:before { content: "\ecb8"; }
.ri-instagram-line:before { content: "\ee66"; }
.ri-google-fill:before { content: "\edd4"; }
.ri-twitter-x-fill:before { content: "\f3e6"; }
.ri-map-pin-line:before { content: "\ef14"; }
.ri-at-line:before { content: "\ea83"; }
.ri-phone-fill:before { content: "\efe9"; }
.ri-skip-up-line:before { content: "\f367"; }
.ri-arrow-down-s-line:before { content: "\ea4e"; }

/* -------------------------------------------------------------------------- */
/* TOC3. Reset */
/* -------------------------------------------------------------------------- */

*, *::before, *::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
body {
	background-color: var(--primary-50);
	color: var(--neutral-800);
	font-family: 'font-primary', system-ui, sans-serif;
    font-size: var(--text-400);
    font-stretch: 100%;
    font-style: normal;
    font-weight: 350;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
img {
    height: auto;
}
input, button, textarea, select {
	font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
hr {
	background-color: var(--neutral-300);
	border: 0;
	box-sizing: content-box;
	height: 1px;
	margin: var(--space-200-300) 0;
	overflow: visible;
}
#root, #__next {
	isolation: isolate;
}

strong  { font-weight: 500; }
em      { font-style: italic; }

/* -------------------------------------------------------------------------- */
/* TOC4. Base Styles */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* LAYOUT STYLES
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* layout -> containers */

.max-none   { max-width: none; }
.max-site   { max-width: var(--max-site); margin-left: auto; margin-right: auto; }
.max-xl     { max-width: var(--max-xl); }
.max-l      { max-width: var(--max-l); }
.max-m      { max-width: var(--max-m); }
.max-s      { max-width: var(--max-s); }
.max-xs     { max-width: var(--max-xs); }

.mauto      { margin-left: auto; margin-right: auto; }

.gutter {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}
.divider-gap {
    min-height: 1px;
}

/* -------------------------------------------------------------------------- */
/* layout -> positioning */

.pos-abs { position: absolute; }
.pos-rel { position: relative; }

.abs0	 { top: 0; left: 0; right: 0; bottom: 0; }
.abs0-l	 { left: 0; }
.abs0-r	 { right: 0; }
.abs0-t	 { top: 0; }
.abs0-b	 { bottom: 0; }

.z1 	{ z-index: 1; }
.z2 	{ z-index: 2; }
.z3 	{ z-index: 3; }
.z4 	{ z-index: 4; }
.z5 	{ z-index: 5; }
.z10 	{ z-index: 10; }

.fit-contain 	{ max-width: none; object-fit: contain; object-position: center center; }
.fit-cover 		{ max-width: none; object-fit: cover; object-position: center center; }

/* -------------------------------------------------------------------------- */
/* layout -> overflow */

.overflow-hide { overflow: hidden; }

/* -------------------------------------------------------------------------- */
/* layout -> widths & heights */

.w-100	{ width: 100%; }
.w-90	{ width: 90%; }
.w-85	{ width: 85%; }
.w-80	{ width: 80%; }
.w-75	{ width: 75%; }
.w-67	{ width: calc(100% / 3 * 2); }
.w-60	{ width: 60%; }
.w-50	{ width: calc(100% / 2); }
.w-40	{ width: 40%; }
.w-33	{ width: calc(100% / 3); }
.w-25	{ width: calc(100% / 4); }
.w-20	{ width: calc(100% / 5); }
.w-17	{ width: calc(100% / 6); }
.w-15	{ width: 15%; }
.w-10	{ width: 10%; }


.h-100 { height: 100%; }
.h-auto { height: auto; }

/* -------------------------------------------------------------------------- */
/* layout -> display, grid, flex */

.block 			{ display: block; }
.none 			{ display: none; }
.inline-block 	{ display: inline-block; }
.grid           { display: grid; }
.flex 		    { display: flex; }
.no-br, .nobr	{ white-space: nowrap; }

.grid-12	{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}
.grid-8	{ display: grid; grid-template-columns: repeat(8, 1fr); }
.grid-7	{ display: grid; grid-template-columns: repeat(7, 1fr); }
.grid-6	{ display: grid; grid-template-columns: repeat(6, 1fr); }
.grid-5	{ display: grid; grid-template-columns: repeat(5, 1fr); }
.grid-4	{ display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-2	{ display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-1	{ display: grid; grid-template-columns: repeat(1, 1fr); }

.no-gap, .gap-none  { gap: 0; }
.gap-xs  			{ gap: var(--space-100); }
.gap-s  			{ gap: var(--space-100-200); }
.gap-m  			{ gap: var(--space-200-300); }
.gap-l  			{ gap: var(--space-300-400); }
.gap-xl  			{ gap: var(--space-400-500); }

.row-gap-s  			{ row-gap: var(--space-100-200); }
.row-gap-m  			{ row-gap: var(--space-200-300); }
.row-gap-l  			{ row-gap: var(--space-300-400); }
.row-gap-xl  			{ row-gap: var(--space-400-500); }

.align-self-center	{ align-self: center; }
.align-center		{ align-items: center; }
.align-start		{ align-items: start; }
.align-end			{ align-items: end; }
.align-space        { align-content: space-between; }

.justify-center		{ justify-content: center; }
.justify-start		{ justify-content: start; }
.justify-end		{ justify-content: end; }
.justify-space		{ justify-content: space-between; }
.justify-even		{ justify-content: space-evenly; }
.justify-around		{ justify-content: space-around; }

.flex-wrap	{ flex-wrap: wrap; }

.span-1		{ grid-column: span 1; }
.span-2		{ grid-column: span 2; }
.span-3		{ grid-column: span 3; }
.span-4		{ grid-column: span 4; }
.span-5		{ grid-column: span 5; }
.span-6		{ grid-column: span 6; }
.span-7		{ grid-column: span 7; }
.span-8		{ grid-column: span 8; }
.span-9		{ grid-column: span 9; }
.span-10	{ grid-column: span 10; }
.span-11	{ grid-column: span 11; }
.span-12	{ grid-column: span 12; }

.start-2-span-3   { grid-column: 2 / span 3; }


/* LAYOUT ROW GRIDS ===================================================== */

.layout__row-grid	{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

/* default column */
.layout__col {
    grid-column: span 2; /* Default to full width */
}

/* narrower columns */
.layout__col.colspan-3 { grid-column: span 1; } /* 1/4 */
.layout__col.colspan-2 { grid-column: span 1; } /* 1/6 */

/* row-specific columns */
.layout__row--offset-qtrs .layout__col { grid-column: span 2; }
.layout__row--qtr-half-qtr .layout__col { grid-column: span 2; }


/* -------------------------------------------------------------------------- */
/* layout -> border radius */

.rad-xs     { border-radius: var(--rad-xs); }
.rad-s      { border-radius: var(--rad-s); }
.rad-m      { border-radius: var(--rad-m); }
.rad-l      { border-radius: var(--rad-l); }
.rad-xl     { border-radius: var(--rad-xl); }
.rad-50     { border-radius: 50%; }


/* -------------------------------------------------------------------------- */
/* MARGINS & PADDING
/* -------------------------------------------------------------------------- */

.m0-first > :first-child { margin-top: 0; }
.m0-last > :last-child 	 { margin-bottom: 0; }

.mauto                   { margin-left: auto; margin-right: auto; }

.m0		{ margin: 0; }
.m0-t	{ margin-top: 0; }
.m0-b	{ margin-bottom: 0; }
.m0-l	{ margin-left: 0; }
.m0-r	{ margin-right: 0; }

.m1	{ margin: var(--space-100) }   .m1-l { margin-left: var(--space-100) }   .m1-r { margin-right: var(--space-100) }   .m1-t { margin-top: var(--space-100) }   .m1-b { margin-bottom: var(--space-100) }
.m2	{ margin: var(--space-200) }   .m2-l { margin-left: var(--space-200) }   .m2-r { margin-right: var(--space-200) }   .m2-t { margin-top: var(--space-200) }   .m2-b { margin-bottom: var(--space-200) }
.m3	{ margin: var(--space-300) }   .m3-l { margin-left: var(--space-300) }   .m3-r { margin-right: var(--space-300) }   .m3-t { margin-top: var(--space-300) }   .m3-b { margin-bottom: var(--space-300) }
.m4	{ margin: var(--space-400) }   .m4-l { margin-left: var(--space-400) }   .m4-r { margin-right: var(--space-400) }   .m4-t { margin-top: var(--space-400) }   .m4-b { margin-bottom: var(--space-400) }
.m5	{ margin: var(--space-500) }   .m5-l { margin-left: var(--space-500) }   .m5-r { margin-right: var(--space-500) }   .m5-t { margin-top: var(--space-500) }   .m5-b { margin-bottom: var(--space-500) }
.m6	{ margin: var(--space-600) }   .m6-l { margin-left: var(--space-600) }   .m6-r { margin-right: var(--space-600) }   .m6-t { margin-top: var(--space-600) }   .m6-b { margin-bottom: var(--space-600) }
.m7	{ margin: var(--space-700) }   .m7-l { margin-left: var(--space-700) }   .m7-r { margin-right: var(--space-700) }   .m7-t { margin-top: var(--space-700) }   .m7-b { margin-bottom: var(--space-700) }
.m8	{ margin: var(--space-800) }   .m8-l { margin-left: var(--space-800) }   .m8-r { margin-right: var(--space-800) }   .m8-t { margin-top: var(--space-800) }   .m8-b { margin-bottom: var(--space-800) }
.m9	{ margin: var(--space-900) }   .m9-l { margin-left: var(--space-900) }   .m9-r { margin-right: var(--space-900) }   .m9-t { margin-top: var(--space-900) }   .m9-b { margin-bottom: var(--space-900) }

.m1v	{ margin: var(--space-100-200) }   .m1v-l { margin-left: var(--space-100-200) }   .m1v-r { margin-right: var(--space-100-200) }   .m1v-t { margin-top: var(--space-100-200) }   .m1v-b { margin-bottom: var(--space-100-200) }
.m2v	{ margin: var(--space-200-300) }   .m2v-l { margin-left: var(--space-200-300) }   .m2v-r { margin-right: var(--space-200-300) }   .m2v-t { margin-top: var(--space-200-300) }   .m2v-b { margin-bottom: var(--space-200-300) }
.m3v	{ margin: var(--space-300-400) }   .m3v-l { margin-left: var(--space-300-400) }   .m3v-r { margin-right: var(--space-300-400) }   .m3v-t { margin-top: var(--space-300-400) }   .m3v-b { margin-bottom: var(--space-300-400) }
.m4v	{ margin: var(--space-400-500) }   .m4v-l { margin-left: var(--space-400-500) }   .m4v-r { margin-right: var(--space-400-500) }   .m4v-t { margin-top: var(--space-400-500) }   .m4v-b { margin-bottom: var(--space-400-500) }
.m5v	{ margin: var(--space-500-600) }   .m5v-l { margin-left: var(--space-500-600) }   .m5v-r { margin-right: var(--space-500-600) }   .m5v-t { margin-top: var(--space-500-600) }   .m5v-b { margin-bottom: var(--space-500-600) }
.m6v	{ margin: var(--space-600-700) }   .m6v-l { margin-left: var(--space-600-700) }   .m6v-r { margin-right: var(--space-600-700) }   .m6v-t { margin-top: var(--space-600-700) }   .m6v-b { margin-bottom: var(--space-600-700) }
.m7v	{ margin: var(--space-700-800) }   .m7v-l { margin-left: var(--space-700-800) }   .m7v-r { margin-right: var(--space-700-800) }   .m7v-t { margin-top: var(--space-700-800) }   .m7v-b { margin-bottom: var(--space-700-800) }
.m8v	{ margin: var(--space-800-900) }   .m8v-l { margin-left: var(--space-800-900) }   .m8v-r { margin-right: var(--space-800-900) }   .m8v-t { margin-top: var(--space-800-900) }   .m8v-b { margin-bottom: var(--space-800-900) }
/* .m9v	{ margin: var(--s900v) }   .m9v-l { margin-left: var(--s900v) }   .m9v-r { margin-right: var(--s900v) }   .m9v-t { margin-top: var(--s900v) }   .m9v-b { margin-bottom: var(--s900v) } */

.p0		{ padding: 0; }
.p0-t	{ padding-top: 0; }
.p0-b	{ padding-bottom: 0; }
.p0-l	{ padding-left: 0; }
.p0-r	{ padding-right: 0; }

.p1	{ padding: var(--space-100) }   .p1-l { padding-left: var(--space-100) }   .p1-r { padding-right: var(--space-100) }   .p1-t { padding-top: var(--space-100) }   .p1-b { padding-bottom: var(--space-100) }   .p1-tb { padding-bottom: var(--space-100); padding-top: var(--space-100) }   .p1-lr { padding-left: var(--space-100); padding-right: var(--space-100) }
.p2	{ padding: var(--space-200) }   .p2-l { padding-left: var(--space-200) }   .p2-r { padding-right: var(--space-200) }   .p2-t { padding-top: var(--space-200) }   .p2-b { padding-bottom: var(--space-200) }   .p2-tb { padding-bottom: var(--space-200); padding-top: var(--space-200) }   .p2-lr { padding-left: var(--space-200); padding-right: var(--space-200) }
.p3	{ padding: var(--space-300) }   .p3-l { padding-left: var(--space-300) }   .p3-r { padding-right: var(--space-300) }   .p3-t { padding-top: var(--space-300) }   .p3-b { padding-bottom: var(--space-300) }   .p3-tb { padding-bottom: var(--space-300); padding-top: var(--space-300) }   .p3-lr { padding-left: var(--space-300); padding-right: var(--space-300) }
.p4	{ padding: var(--space-400) }   .p4-l { padding-left: var(--space-400) }   .p4-r { padding-right: var(--space-400) }   .p4-t { padding-top: var(--space-400) }   .p4-b { padding-bottom: var(--space-400) }   .p4-tb { padding-bottom: var(--space-400); padding-top: var(--space-400) }   .p4-lr { padding-left: var(--space-400); padding-right: var(--space-400) }
.p5	{ padding: var(--space-500) }   .p5-l { padding-left: var(--space-500) }   .p5-r { padding-right: var(--space-500) }   .p5-t { padding-top: var(--space-500) }   .p5-b { padding-bottom: var(--space-500) }   .p5-tb { padding-bottom: var(--space-500); padding-top: var(--space-500) }   .p5-lr { padding-left: var(--space-500); padding-right: var(--space-500) }
.p6	{ padding: var(--space-600) }   .p6-l { padding-left: var(--space-600) }   .p6-r { padding-right: var(--space-600) }   .p6-t { padding-top: var(--space-600) }   .p6-b { padding-bottom: var(--space-600) }   .p6-tb { padding-bottom: var(--space-600); padding-top: var(--space-600) }   .p6-lr { padding-left: var(--space-600); padding-right: var(--space-600) }
.p7	{ padding: var(--space-700) }   .p7-l { padding-left: var(--space-700) }   .p7-r { padding-right: var(--space-700) }   .p7-t { padding-top: var(--space-700) }   .p7-b { padding-bottom: var(--space-700) }   .p7-tb { padding-bottom: var(--space-700); padding-top: var(--space-700) }   .p7-lr { padding-left: var(--space-700); padding-right: var(--space-700) }
.p8	{ padding: var(--space-800) }   .p8-l { padding-left: var(--space-800) }   .p8-r { padding-right: var(--space-800) }   .p8-t { padding-top: var(--space-800) }   .p8-b { padding-bottom: var(--space-800) }   .p8-tb { padding-bottom: var(--space-800); padding-top: var(--space-800) }   .p8-lr { padding-left: var(--space-800); padding-right: var(--space-800) }
.p9	{ padding: var(--space-900) }   .p9-l { padding-left: var(--space-900) }   .p9-r { padding-right: var(--space-900) }   .p9-t { padding-top: var(--space-900) }   .p9-b { padding-bottom: var(--space-900) }   .p9-tb { padding-bottom: var(--space-900); padding-top: var(--space-900) }   .p9-lr { padding-left: var(--space-900); padding-right: var(--space-900) }

.p1v	{ padding: var(--space-100-200) }   .p1v-l { padding-left: var(--space-100-200) }   .p1v-r { padding-right: var(--space-100-200) }   .p1v-t { padding-top: var(--space-100-200) }   .p1v-b { padding-bottom: var(--space-100-200) }   .p1v-tb { padding-bottom: var(--space-100-200); padding-top: var(--space-100-200) }   .p1v-lr { padding-left: var(--space-100-200); padding-right: var(--space-100-200) }
.p2v	{ padding: var(--space-200-300) }   .p2v-l { padding-left: var(--space-200-300) }   .p2v-r { padding-right: var(--space-200-300) }   .p2v-t { padding-top: var(--space-200-300) }   .p2v-b { padding-bottom: var(--space-200-300) }   .p2v-tb { padding-bottom: var(--space-200-300); padding-top: var(--space-200-300) }   .p2v-lr { padding-left: var(--space-200-300); padding-right: var(--space-200-300) }
.p3v	{ padding: var(--space-300-400) }   .p3v-l { padding-left: var(--space-300-400) }   .p3v-r { padding-right: var(--space-300-400) }   .p3v-t { padding-top: var(--space-300-400) }   .p3v-b { padding-bottom: var(--space-300-400) }   .p3v-tb { padding-bottom: var(--space-300-400); padding-top: var(--space-300-400) }   .p3v-lr { padding-left: var(--space-300-400); padding-right: var(--space-300-400) }
.p4v	{ padding: var(--space-400-500) }   .p4v-l { padding-left: var(--space-400-500) }   .p4v-r { padding-right: var(--space-400-500) }   .p4v-t { padding-top: var(--space-400-500) }   .p4v-b { padding-bottom: var(--space-400-500) }   .p4v-tb { padding-bottom: var(--space-400-500); padding-top: var(--space-400-500) }   .p4v-lr { padding-left: var(--space-400-500); padding-right: var(--space-400-500) }
.p5v	{ padding: var(--space-500-600) }   .p5v-l { padding-left: var(--space-500-600) }   .p5v-r { padding-right: var(--space-500-600) }   .p5v-t { padding-top: var(--space-500-600) }   .p5v-b { padding-bottom: var(--space-500-600) }   .p5v-tb { padding-bottom: var(--space-500-600); padding-top: var(--space-500-600) }   .p5v-lr { padding-left: var(--space-500-600); padding-right: var(--space-500-600) }
.p6v	{ padding: var(--space-600-700) }   .p6v-l { padding-left: var(--space-600-700) }   .p6v-r { padding-right: var(--space-600-700) }   .p6v-t { padding-top: var(--space-600-700) }   .p6v-b { padding-bottom: var(--space-600-700) }   .p6v-tb { padding-bottom: var(--space-600-700); padding-top: var(--space-600-700) }   .p6v-lr { padding-left: var(--space-600-700); padding-right: var(--space-600-700) }
.p7v	{ padding: var(--space-700-800) }   .p7v-l { padding-left: var(--space-700-800) }   .p7v-r { padding-right: var(--space-700-800) }   .p7v-t { padding-top: var(--space-700-800) }   .p7v-b { padding-bottom: var(--space-700-800) }   .p7v-tb { padding-bottom: var(--space-700-800); padding-top: var(--space-700-800) }   .p7v-lr { padding-left: var(--space-700-800); padding-right: var(--space-700-800) }
.p8v	{ padding: var(--space-800-900) }   .p8v-l { padding-left: var(--space-800-900) }   .p8v-r { padding-right: var(--space-800-900) }   .p8v-t { padding-top: var(--space-800-900) }   .p8v-b { padding-bottom: var(--space-800-900) }   .p8v-tb { padding-bottom: var(--space-800-900); padding-top: var(--space-800-900) }   .p8v-lr { padding-left: var(--space-800-900); padding-right: var(--space-800-900) }
/* .p9v	{ padding: var(--s900v) }   .p9v-l { padding-left: var(--s900v) }   .p9v-r { padding-right: var(--s900v) }   .p9v-t { padding-top: var(--s900v) }   .p9v-b { padding-bottom: var(--s900v) }   .p9v-tb { padding-bottom: var(--s900v); padding-top: var(--s900v) }   .p9v-lr { padding-left: var(--s900v); padding-right: var(--s900v) } */

/* -------------------------------------------------------------------------- */
/* COLOURS
/* -------------------------------------------------------------------------- */

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

.primary    { color: var(--primary-500); } .bg-primary { background-color: var(--primary-500); } .primary-950 { color: var(--primary-950); } .bg-primary-950 { background-color: var(--primary-950); } .primary-900 { color: var(--primary-900); } .bg-primary-900 { background-color: var(--primary-900); } .primary-800 { color: var(--primary-800); } .bg-primary-800 { background-color: var(--primary-800); } .primary-700 { color: var(--primary-700); } .bg-primary-700 { background-color: var(--primary-700); } .primary-600 { color: var(--primary-600); } .bg-primary-600 { background-color: var(--primary-600); } .primary-500 { color: var(--primary-500); } .bg-primary-500 { background-color: var(--primary-500); } .primary-400 { color: var(--primary-400); } .bg-primary-400 { background-color: var(--primary-400); } .primary-300 { color: var(--primary-300); } .bg-primary-300 { background-color: var(--primary-300); } .primary-200 { color: var(--primary-200); } .bg-primary-200 { background-color: var(--primary-200); } .primary-100 { color: var(--primary-100); } .bg-primary-100 { background-color: var(--primary-100); } .primary-50 { color: var(--primary-50); } .bg-primary-50 { background-color: var(--primary-50); }
.secondary  { color: var(--secondary-600); } .bg-secondary { background-color: var(--secondary-600); } .secondary-950 { color: var(--secondary-950); } .bg-secondary-950 { background-color: var(--secondary-950); } .secondary-900 { color: var(--secondary-900); } .bg-secondary-900 { background-color: var(--secondary-900); } .secondary-800 { color: var(--secondary-800); } .bg-secondary-800 { background-color: var(--secondary-800); } .secondary-700 { color: var(--secondary-700); } .bg-secondary-700 { background-color: var(--secondary-700); } .secondary-600 { color: var(--secondary-600); } .bg-secondary-600 { background-color: var(--secondary-600); } .secondary-500 { color: var(--secondary-500); } .bg-secondary-500 { background-color: var(--secondary-500); } .secondary-400 { color: var(--secondary-400); } .bg-secondary-400 { background-color: var(--secondary-400); } .secondary-300 { color: var(--secondary-300); } .bg-secondary-300 { background-color: var(--secondary-300); } .secondary-200 { color: var(--secondary-200); } .bg-secondary-200 { background-color: var(--secondary-200); } .secondary-100 { color: var(--secondary-100); } .bg-secondary-100 { background-color: var(--secondary-100); } .secondary-50 { color: var(--secondary-50); } .bg-secondary-50 { background-color: var(--secondary-50); }
.tertiary   { color: var(--tertiary-400); } .bg-tertiary { background-color: var(--tertiary-400); } .tertiary-950 { color: var(--tertiary-950); } .bg-tertiary-950 { background-color: var(--tertiary-950); } .tertiary-900 { color: var(--tertiary-900); } .bg-tertiary-900 { background-color: var(--tertiary-900); } .tertiary-800 { color: var(--tertiary-800); } .bg-tertiary-800 { background-color: var(--tertiary-800); } .tertiary-700 { color: var(--tertiary-700); } .bg-tertiary-700 { background-color: var(--tertiary-700); } .tertiary-600 { color: var(--tertiary-600); } .bg-tertiary-600 { background-color: var(--tertiary-600); } .tertiary-500 { color: var(--tertiary-500); } .bg-tertiary-500 { background-color: var(--tertiary-500); } .tertiary-400 { color: var(--tertiary-400); } .bg-tertiary-400 { background-color: var(--tertiary-400); } .tertiary-300 { color: var(--tertiary-300); } .bg-tertiary-300 { background-color: var(--tertiary-300); } .tertiary-200 { color: var(--tertiary-200); } .bg-tertiary-200 { background-color: var(--tertiary-200); } .tertiary-100 { color: var(--tertiary-100); } .bg-tertiary-100 { background-color: var(--tertiary-100); } .tertiary-50 { color: var(--tertiary-50); } .bg-tertiary-50 { background-color: var(--tertiary-50); }
.cool       { color: var(--cool-700); } .bg-cool { background-color: var(--cool-700); } .cool-950 { color: var(--cool-950); } .bg-cool-950 { background-color: var(--cool-950); } .cool-900 { color: var(--cool-900); } .bg-cool-900 { background-color: var(--cool-900); } .cool-800 { color: var(--cool-800); } .bg-cool-800 { background-color: var(--cool-800); } .cool-700 { color: var(--cool-700); } .bg-cool-700 { background-color: var(--cool-700); } .cool-600 { color: var(--cool-600); } .bg-cool-600 { background-color: var(--cool-600); } .cool-500 { color: var(--cool-500); } .bg-cool-500 { background-color: var(--cool-500); } .cool-400 { color: var(--cool-400); } .bg-cool-400 { background-color: var(--cool-400); } .cool-300 { color: var(--cool-300); } .bg-cool-300 { background-color: var(--cool-300); } .cool-200 { color: var(--cool-200); } .bg-cool-200 { background-color: var(--cool-200); } .cool-100 { color: var(--cool-100); } .bg-cool-100 { background-color: var(--cool-100); } .cool-50 { color: var(--cool-50); } .bg-cool-50 { background-color: var(--cool-50); }
.warm       { color: var(--warm-600); } .bg-warm { background-color: var(--warm-600); } .warm-950 { color: var(--warm-950); } .bg-warm-950 { background-color: var(--warm-950); } .warm-900 { color: var(--warm-900); } .bg-warm-900 { background-color: var(--warm-900); } .warm-800 { color: var(--warm-800); } .bg-warm-800 { background-color: var(--warm-800); } .warm-700 { color: var(--warm-700); } .bg-warm-700 { background-color: var(--warm-700); } .warm-600 { color: var(--warm-600); } .bg-warm-600 { background-color: var(--warm-600); } .warm-500 { color: var(--warm-500); } .bg-warm-500 { background-color: var(--warm-500); } .warm-400 { color: var(--warm-400); } .bg-warm-400 { background-color: var(--warm-400); } .warm-300 { color: var(--warm-300); } .bg-warm-300 { background-color: var(--warm-300); } .warm-200 { color: var(--warm-200); } .bg-warm-200 { background-color: var(--warm-200); } .warm-100 { color: var(--warm-100); } .bg-warm-100 { background-color: var(--warm-100); } .warm-50 { color: var(--warm-50); } .bg-warm-50 { background-color: var(--warm-50); }
.neutral    { color: var(--neutral); } .bg-neutral { background-color: var(--neutral); } .neutral-950 { color: var(--neutral-950); } .bg-neutral-950 { background-color: var(--neutral-950); } .neutral-900 { color: var(--neutral-900); } .bg-neutral-900 { background-color: var(--neutral-900); } .neutral-800 { color: var(--neutral-800); } .bg-neutral-800 { background-color: var(--neutral-800); } .neutral-700 { color: var(--neutral-700); } .bg-neutral-700 { background-color: var(--neutral-700); } .neutral-600 { color: var(--neutral-600); } .bg-neutral-600 { background-color: var(--neutral-600); } .neutral-500 { color: var(--neutral-500); } .bg-neutral-500 { background-color: var(--neutral-500); } .neutral-400 { color: var(--neutral-400); } .bg-neutral-400 { background-color: var(--neutral-400); } .neutral-300 { color: var(--neutral-300); } .bg-neutral-300 { background-color: var(--neutral-300); } .neutral-200 { color: var(--neutral-200); } .bg-neutral-200 { background-color: var(--neutral-200); } .neutral-100 { color: var(--neutral-100); } .bg-neutral-100 { background-color: var(--neutral-100); } .neutral-50 { color: var(--neutral-50); } .bg-neutral-50 { background-color: var(--neutral-50); }

.fill-white { fill: var(--white); }
.fill-primary { fill: var(--primary-500); }
.fill-secondary { fill: var(--secondary-600); }
.fill-tertiary { fill: var(--tertiary-400); }
.fill-cool { fill: var(--cool-700); }
.fill-warm { fill: var(--warm); }
.fill-neutral { fill: var(--neutral); }

/* -------------------------------------------------------------------------- */
/* colours -> status */

.success { color: var(--success); }
.bg-success { background-color: var(--success); }
.warning { color: var(--warning); }
.bg-warning { background-color: var(--warning); }
.danger { color: var(--danger); }
.bg-danger { background-color: var(--danger); }
.info { color: var(--info); }
.bg-info { background-color: var(--info); }

/* -------------------------------------------------------------------------- */
/* colours -> shadow */

.shadow-s     { box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05); }
.shadow-m     { box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.05); }
.shadow-l     { box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.05); }
.shadow-xl    { box-shadow: 0 1.5rem 6rem rgba(0, 0, 0, 0.05); }

/* -------------------------------------------------------------------------- */
/* colours -> patterns */

.bg-topographic {
    background-image: url('/assets/img/topographic.svg');
    background-size: 80rem auto;
    background-repeat: repeat;
    background-position: center;
}

/* -------------------------------------------------------------------------- */
/* TYPOGRAPHY
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* typography -> headings */

h1, h2, h3, h4, h5, h6 {
    color: inherit;
	font-family: 'font-primary', system-ui, sans-serif;
    font-stretch: 85%;
    font-weight: 700;
    line-height: 1.2;
	margin: var(--space-500) 0 var(--space-200) 0;
}

/* -------------------------------------------------------------------------- */
/* typography -> lists & paragraphs */

p, ul, ol, blockquote	{
	margin: 0 0 var(--space-200) 0;
    text-wrap: pretty;
}

ul, ol {
	padding-left: var(--space-500);
}

ul ul, ol ol, ul ol, ol ul {
	margin-bottom: 0;
}

blockquote {
}

nav > ul, nav > ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.balance				{ text-wrap: balance; overflow-wrap: normal; }

/* -------------------------------------------------------------------------- */
/* typography -> font sizes */

.text-950               { font-size: 3rem;      font-size: var(--text-950); } /* 48px --> 108px */
.text-900               { font-size: 2.625rem;  font-size: var(--text-900); } /* 42px --> 84px  */
.text-800, h1           { font-size: 2.1875rem; font-size: var(--text-800); } /* 35px --> 63px  */
.text-700               { font-size: 1.8125rem; font-size: var(--text-700); } /* 29px --> 47px  */
.text-600, h2           { font-size: 1.5rem;    font-size: var(--text-600); } /* 24px --> 36px  */
.text-500, h3           { font-size: 1.25rem;   font-size: var(--text-500); } /* 20px --> 27px  */
.text-400, h4           { font-size: 1.0625rem; font-size: var(--text-400); } /* 17px --> 20px  */
.text-300, h5           { font-size: 0.9375rem; font-size: var(--text-300); } /* 15px --> 17px  */
.text-200, h6           { font-size: 0.75rem;   font-size: var(--text-200); } /* 12px --> 15px  */
.text-100               { font-size: 0.625rem;  font-size: var(--text-100); } /* 10px --> 12px  */

/* -------------------------------------------------------------------------- */
/* typography -> styling */

.lh-1					{ line-height: 1; }
.lh-11					{ line-height: 1.1; }
.lh-12					{ line-height: 1.2; }
.lh-13					{ line-height: 1.3; }
.lh-14					{ line-height: 1.4; }
.lh-15					{ line-height: 1.5; }
.lh-16					{ line-height: 1.6; }
.lh-18					{ line-height: 1.8; }

.ls--1                  { letter-spacing: -1px; }
.ls-0                   { letter-spacing: 0px; }
.ls-1                   { letter-spacing: 1px; }
.ls-2                   { letter-spacing: 2px; }
.ls-3                   { letter-spacing: 3px; }
.ls-4                   { letter-spacing: 4px; }

.text-upper             { text-transform: uppercase; }
.text-lower             { text-transform: lowercase; }
.text-capitalize        { text-transform: capitalize; }
.text-none				{ text-transform: none; }

.text-left				{ text-align: left; }
.text-right				{ text-align: right; }
.text-center			{ text-align: center; }

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

.monospace, .mono       { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; }

/* -------------------------------------------------------------------------- */
/* typography -> links */

a			{ color: var(--primary-500); }
a:hover		{ color: var(--primary-700); }
a:active	{ color: var(--primary-300); }

a.white			{ color: var(--white); }
a.white:hover		{ color: var(--white); opacity: 0.8; }
a.white:active	{ color: var(--white); opacity: 0.6; }

.no-bdr, .nobdr { border: 0; text-decoration: none; }

.cursor-pointer {
    cursor: pointer;
}

.page-title__deck a { color: var(--tertiary-400); }
.page-title__deck a:hover { color: var(--tertiary-200); }

/* -------------------------------------------------------------------------- */
/* typography -> buttons */

.btn	{
	appearance: none;
	background-color: transparent;
	border: 1px solid var(--primary-700);
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
    color: var(--primary-700);
	cursor: pointer;
	display: inline-block;
	font-size: inherit;
    font-stretch: 85%;
    line-height: 1.1;
	padding: var(--space-100-200) var(--space-300-400);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
	white-space: nowrap;

}
.btn:hover  {
	background-color: var(--primary-100);
	border-color: var(--primary-500);
	color: var(--primary-500);
}

.btn--secondary          { border-color: var(--secondary-500); color: var(--secondary-500); }
.btn--secondary:hover    { background-color: var(--secondary-100); border-color: var(--secondary-700); color: var(--secondary-700); }

.btn--tertiary           { border-color: var(--tertiary-500); color: var(--tertiary-500); }
.btn--tertiary:hover     { background-color: var(--tertiary-100); border-color: var(--tertiary-700); color: var(--tertiary-700); }

.btn--warm               { border-color: var(--warm-500); color: var(--warm-500); }
.btn--warm:hover         { background-color: var(--warm-100); border-color: var(--warm-700); color: var(--warm-700); }

.btn--neutral            { border-color: var(--neutral-500); color: var(--neutral-500); }
.btn--neutral:hover      { background-color: var(--neutral-100); border-color: var(--neutral-700); color: var(--neutral-700); }

.btn--cool               { border-color: var(--cool-500); color: var(--cool-500); }
.btn--cool:hover         { background-color: var(--cool-100); border-color: var(--cool-700); color: var(--cool-700); }

.btn--solid              { background-color: var(--primary-700); border-color: var(--primary-700); color: var(--white); }
.btn--solid:hover        { background-color: var(--tertiary-400); border-color: var(--tertiary-400); color: var(--white); }

.btn--solid.btn--secondary          { border-color: var(--secondary-500); background-color: var(--secondary-500); }
.btn--solid.btn--secondary:hover    { border-color: var(--secondary-700); background-color: var(--secondary-700); }

.btn--solid.btn--tertiary           { border-color: var(--tertiary-400); background-color: var(--tertiary-400); color: var(--cool) }
.btn--solid.btn--tertiary:hover     { border-color: var(--tertiary-300); background-color: var(--tertiary-300); }

.btn--solid.btn--warm               { border-color: var(--warm-500); background-color: var(--warm-500); }
.btn--solid.btn--warm:hover         { border-color: var(--warm-700); background-color: var(--warm-700); }

.btn--solid.btn--neutral            { border-color: var(--neutral-500); background-color: var(--neutral-500); }
.btn--solid.btn--neutral:hover      { border-color: var(--neutral-700); background-color: var(--neutral-700); }

.btn--solid.btn--cool               { border-color: var(--cool-500); background-color: var(--cool-500); }
.btn--solid.btn--cool:hover         { border-color: var(--cool-700); background-color: var(--cool-700); }

.btn--solid.btn--white               { border-color: var(--white); background-color: var(--white); color: var(--cool) }
.btn--solid.btn--white:hover         { border-color: var(--white); background-color: var(--white); color: var(--cool); opacity: 0.8; }

/* -------------------------------------------------------------------------- */
/* VISUALS
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* visuals -> opacity */

.op5 { opacity: 0.05; }
.op10 { opacity: 0.10; }
.op20 { opacity: 0.20; }
.op25 { opacity: 0.25; }
.op30 { opacity: 0.30; }
.op40 { opacity: 0.40; }
.op50 { opacity: 0.50; }
.op60 { opacity: 0.60; }
.op70 { opacity: 0.70; }
.op75 { opacity: 0.75; }
.op80 { opacity: 0.80; }
.op90 { opacity: 0.90; }
.op95 { opacity: 0.95; }
.op100 { opacity: 1.00; }

/* -------------------------------------------------------------------------- */
/* IMAGES
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* images -> hexagon clip path */

.hexagon {
    /* clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); */
    clip-path: polygon( 70.068% 0.007%,29.928% 0.007%,29.928% 0.007%,28.945% 0.079%,27.944% 0.287%,26.942% 0.621%,25.955% 1.07%,24.999% 1.624%,24.093% 2.272%,23.251% 3.002%,22.49% 3.805%,21.828% 4.67%,21.281% 5.586%,1.211% 44.424%,1.211% 44.424%,0.775% 45.411%,0.435% 46.484%,0.193% 47.622%,0.048% 48.801%,-0.001% 50.002%,0.048% 51.203%,0.193% 52.383%,0.435% 53.52%,0.775% 54.593%,1.211% 55.581%,21.281% 94.421%,21.281% 94.421%,21.828% 95.337%,22.49% 96.202%,23.249% 97.005%,24.091% 97.736%,24.997% 98.383%,25.952% 98.937%,26.939% 99.386%,27.942% 99.72%,28.943% 99.928%,29.928% 100%,70.068% 100%,70.068% 100%,71.051% 99.928%,72.052% 99.72%,73.055% 99.386%,74.043% 98.937%,74.999% 98.383%,75.907% 97.736%,76.75% 97.005%,77.511% 96.202%,78.174% 95.337%,78.721% 94.421%,98.791% 55.581%,98.791% 55.581%,99.228% 54.593%,99.567% 53.52%,99.809% 52.383%,99.954% 51.203%,100.003% 50.002%,99.954% 48.801%,99.809% 47.622%,99.567% 46.484%,99.228% 45.411%,98.791% 44.424%,78.719% 5.579%,78.719% 5.579%,78.172% 4.663%,77.51% 3.798%,76.749% 2.995%,75.907% 2.264%,75% 1.617%,74.044% 1.063%,73.056% 0.614%,72.053% 0.28%,71.051% 0.072%,70.066% 0%,70.066% 0.007% );
}

/* -------------------------------------------------------------------------- */
/* images -> icons */

.svg-wrap {
    display: inline-block; width: var(--icon-m); height: var(--icon-m); max-width: 100%;
}

.svg-wrap.icon-xs   { width: var(--icon-xs); height: var(--icon-xs); }
.svg-wrap.icon-s    { width: var(--icon-s); height: var(--icon-s); }
.svg-wrap.icon-m    { width: var(--icon-m); height: var(--icon-m); }
.svg-wrap.icon-l    { width: var(--icon-l); height: var(--icon-l); }
.svg-wrap.icon-xl   { width: var(--icon-xl); height: var(--icon-xl); }

.svg-wrap svg {
    fill: inherit;
    height: 100%;
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* BLOCKS & LAYOUTS
/* -------------------------------------------------------------------------- */

.site-logo,
.thanks-logo {
    height: 70px;
    width: 255px;
}

.site-header,
.thanks-header {
    /* fixed padding so we have a whole number to margin-top the hexagon in the page title by */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.site-nav__link {
    position: relative;
}
.site-nav__link.is-active::after {
    background-color: var(--tertiary-400);
    content: '';
    height: 2px;
    position: absolute;
    left: 0; right: 0; bottom: 0.25rem;
}




/* -------------------------------------------------------------------------- */
/* layout -> page title */

.hero__img {
    aspect-ratio: 4/3;
}

.page__thanks .page-title {
    background: var(--secondary-800);
    border-bottom: 0.5rem solid white;
}

.page__error .page-title {
    background: var(--cool-900);
    border-bottom: 0.5rem solid white;
}

/* -------------------------------------------------------------------------- */
/* layout -> feature */

.feature__img   {
    aspect-ratio: 4/5;
}

/* -------------------------------------------------------------------------- */
/* layout -> filmstrip */

.filmstrip[data-filmstrip-count="5"] .filmstrip__img {
    aspect-ratio: 5/3;
}

/* -------------------------------------------------------------------------- */
/* layout -> publications */

.pub-meta li {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1.2;
    margin-top: 0.5rem;
}

.pub-meta svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--cool-700)
}

.pub-meta li span {
    width: calc(100% - 2rem);
}

/* -------------------------------------------------------------------------- */
/* layout -> publications and projects cta */

.cta-anchor__arrow svg {
    display: block;
    margin: 0 auto;
    width: 3rem;
    height: 3rem;
}

/* -------------------------------------------------------------------------- */
/* layout -> accordion FAQs */

.accordion-faq__question {
	position: relative;
	padding-right: 100px;
}

.accordion-faq__question::after {
	align-items: center;
	color: var(--cool-900);
	content: '\ea4e';
	display: flex;
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 2rem;
	justify-content: center;
	position: absolute;
	right: var(--space-200-300);
	text-align: center;
	top: var(--space-200-300);
	transition: transform 0.5s ease;
	width: 2rem;

}

.collapsible.active .accordion-faq__question::after {
	transform: rotate(-180deg);
}

.collapsible.active {
}

/* -------------------------------------------------------------------------- */
/* layout -> collapsible groups (like for FAQs) */

.collapsible__group {
	border-bottom: 1px solid var(--neutral-300);
}
.collapsible {
	border-top: 1px solid var(--neutral-300);
}
.collapsible__header {
	cursor: pointer;
}
.collapsible__content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-in-out;
}
.collapsible.active .collapsible__content {
	max-height: 1000px; /* Adjust this value based on your content */
}

/* -------------------------------------------------------------------------- */
/* kirby blocks -> image */

.block__image-img,
.block__gallery-img {
    background-color: var(--neutral-200);
    display: block;
    width: 100%;
    aspect-ratio: var(--ratio);
    object-fit: contain;
}

.block__image-img[data-crop=""],
.block__gallery-img[data-crop=""] {
    object-fit: cover;
}

/* -------------------------------------------------------------------------- */
/* kirby blocks -> video */

.block__video .block__video-wrap {
    aspect-ratio: 16/9;
    border-radius: var(--rad-l);
    overflow: hidden;
    position: relative;
}

.block__video iframe {
    border: 0;
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

/* -------------------------------------------------------------------------- */
/* kirby blocks -> code */

.block__code {
    background-color: var(--tertiary-900);
    border-radius: var(--rad-l);
    color: var(--white);
    font-size: var(--text-300);
    padding: var(--space-200);
}

/* -------------------------------------------------------------------------- */
/* kirby blocks -> quote */

.block__quote blockquote {
    border-left: 2px solid var(--tertiary-900);
    font-size: var(--text-500);
    padding-left: var(--space-100-200);
}
.block__quote footer {
    font-size: var(--text-400);
    font-style: italic;
    color: var(--primary-500);
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------- */
/* FOOTER
/* -------------------------------------------------------------------------- */

.site-footer {
    background-position: center top;
}
.footer-nav__link.is-active {
    text-decoration: underline;
}

.footer-cta__bg {
    height: 50%;
    background-position: center bottom;
}

.footer-cta__hex {
    right: -33%;
    top: -50%;
    width: auto;
    height: 200%;
}

/* -------------------------------------------------------------------------- */
/* Lightbox
/* -------------------------------------------------------------------------- */

.basicLightbox{position:fixed;display:flex;justify-content:center;align-items:center;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,.8);opacity:.01;transition:opacity .4s ease;z-index:1000;will-change:opacity}.basicLightbox--visible{opacity:1}.basicLightbox__placeholder{max-width:100%;-webkit-transform:scale(.9);transform:scale(.9);transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;z-index:1;will-change:transform}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{display:block;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;max-width:95%;max-height:95%}.basicLightbox__placeholder>iframe:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{pointer-events:auto}.basicLightbox__placeholder>img:first-child:last-child,.basicLightbox__placeholder>video:first-child:last-child{width:auto;height:auto}.basicLightbox--iframe .basicLightbox__placeholder,.basicLightbox--img .basicLightbox__placeholder,.basicLightbox--video .basicLightbox__placeholder{width:100%;height:100%;pointer-events:none}.basicLightbox--visible .basicLightbox__placeholder{-webkit-transform:scale(1);transform:scale(1)}

/* -------------------------------------------------------------------------- */
/* FORMS
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* forms -> contact form */


.contact-form-row {
    position: relative;
}

.contact-form-arrow {
    left: calc(-1 * var(--space-400-500));
    top: var(--space-400-500)
}

.contact-form-star {
    right: 30%;
    bottom: var(--space-700-800);
    transform: rotate(30deg);
}

.contact-form-row::after {
    background-color: var(--tertiary-400);
    content: '';
    height: 50%;
    position: absolute;
    left: 0; right: 0; bottom: 0;
}


/* -------------------------------------------------------------------------- */
/* forms -> uniform */

.uniform__potty {
    position: absolute;
    left: -9999px;
}

.uniform label, .uniform .label {
    color: var(--neutral-500);
    cursor: pointer;
	display: block;
    font-size: var(--text-300);
    letter-spacing: 2px;
	line-height: 1;
	margin-bottom: var(--space-100);
    text-transform: uppercase;
    font-weight: 500;
}
.uniform label.error::before, .uniform .label.error::before {
    color: var(--danger);
    content: '*';
}
.uniform .row {
	margin: 0 0 var(--space-200-300) 0;
}
.uniform .row.omega {
	margin: var(--space-400-500) 0 0 0;
}
.uniform input[type="text"],
.uniform input[type="email"],
.uniform input[type="number"],
.uniform textarea {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--neutral-300);
	border-radius: var(--rad-xs);
	box-shadow: none;
	display: block;
    font-family: 'font-primary', system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.2;
	padding: var(--space-100-200);
	width: 100%;
}
.uniform textarea {
	min-height: 8rem;
}

.uniform input:focus,
.uniform textarea:focus {
	outline: 2px solid var(--primary-200);
}

.uniform ::-webkit-input-placeholder { color: var(--neutral-400); font-style: italic; font-weight: 400; }
.uniform ::-moz-placeholder          { color: var(--neutral-400); font-style: italic; font-weight: 400; opacity: 1; }
.uniform :-ms-input-placeholder      { color: var(--neutral-400); font-style: italic; font-weight: 400; }
.uniform :-moz-placeholder           { color: var(--neutral-400); font-style: italic; font-weight: 400; }
.uniform ::placeholder               { color: var(--neutral-400); font-style: italic; font-weight: 400; }