@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'Grand Cru Light S';
    src:url('../fonts/GrandCru-LightS.eot');
    src:url('../fonts/GrandCru-LightS.eot?#iefix') format('embedded-opentype'),
        url('../fonts/GrandCru-LightS.woff2') format('woff2'),
        url('../fonts/GrandCru-LightS.woff') format('woff'),
        url('../fonts/GrandCru-LightS.ttf') format('truetype'),
        url('../fonts/GrandCru-LightS.svg#GrandCru-LightS') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

	/*
		*******************************
		Minimum					Mobile
		Base font size (px):	18px
		Screen width (px):		360px
		Type scale ratio:		1.25
		*******************************
		Maximum					Desktop
		Base font size (px):	20px
		Screen width (px):		1600px
		Type scale ratio:		1.333
		*******************************
	*/

:root {
	--heading-text: 'Grand Cru Light S', sans-serif;
	--body-text: "Montserrat", sans-serif;

	--fs-sm: clamp(1.28rem, 0.12vi + 1.24rem, 1.43rem);
	--fs-base: clamp(1.6rem, 0.24vi + 1.51rem, 1.9rem);
	--fs-md: clamp(2rem, 0.43vi + 1.85rem, 2.53rem);
	--fs-lg: clamp(2.5rem, 0.71vi + 2.25rem, 3.38rem);
	--fs-xl: clamp(3.13rem, 1.11vi + 2.73rem, 4.5rem);
	--fs-xxl: clamp(3.91rem, 1.69vi + 3.3rem, 6rem);
	--fs-xxxl: clamp(4.88rem, 2.51vi + 3.98rem, 8rem);

}



body {
	font-family: var(--body-text);
	font-size: var(--fs-base);
	color: var(--c-neutral-600);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}



/* Heading and Text Reset */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-family: var(--heading-text);
	color: var(--c-primary-800);
	font-weight: 400 !important;
	line-height: 1.6;
	letter-spacing: -2px !important;
}
h3, h4, h5, h6 {
	letter-spacing: 0 !important;
}
p {
	margin: 0;
	padding: 0;
	font-family: var(--body-text);
	color: var(--c-neutral-600);
}



/* Links */
a {
	color: var(--c-primary-500);
	text-decoration: none;
	transition: all ease 0.2s;
}
a:hover {
	color: var(--c-secondary-700);
}
a:hover,
a:focus {
	text-decoration: none;
	border: none;
	outline: none;
}
/* Font Sizes */
.fs-h1, .fs-h2, .fs-h3, .fs-h4, .fs-h5, .fs-h6 {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}
.fs-sm {font-size: var(--fs-sm);}
.fs-md {font-size: var(--fs-base);}
.fs-lg {font-size: var(--fs-base);}

.fs-h4 {font-size: var(--fs-lg);}
.fs-h3 {font-size: var(--fs-lg);}
.fs-h2 {font-size: var(--fs-xl);}
.fs-h1 {font-size: var(--fs-xxl);}


@media (min-width: 768px) {
	.fs-lg {font-size: var(--fs-md);}

	.fs-h4 {font-size: var(--fs-lg);}
	.fs-h3 {font-size: var(--fs-xl);}
	.fs-h2 {font-size: var(--fs-xxl);}
	.fs-h1 {font-size: var(--fs-xxxl);}
}


.form-label {font-size: var(--fs-base);}
.form-field {font-size: var(--fs-base);}

.form-validation {font-size: var(--fs-sm);}
.form-note {font-size: var(--fs-sm);}



/* Line Height */
.fs-h1, .fs-h2, .fs-h3 { line-height: 100%; }

.fs-h4, .fs-h5, .fs-h6 { line-height: 120%; }

.fs-lg, .fs-md, .fs-sm { line-height: 140%; }

.form-label, .form-field, .form-validation, .form-note { line-height: 130%; }

/* Font Weight */
.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

/* Text Transform */
.fs-lowercase { text-transform: lowercase !important; }
.fs-uppercase { text-transform: uppercase !important; }
.fs-titlecase { text-transform: capitalize !important; }

/* Text Align */
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-underline { border-bottom: 2px solid !important; }

/* Unordered List */
ul.list-unstyled, ol.list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.list-unstyled li, ol.list-unstyled li {
	margin: 0;
	padding: 0;
	display: block;
}
/* Inline Unordered List */
ul.list-inline {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.list-inline li {
	margin: 0;
	padding: 0;
	display: inline-block;
}