
:root {
	/* color variables */
	--white: #fff;
	--white-80: #fff;
	--gray-nurse: #f0f4f1;
	--log-cabin: #111813;
	--viridian-green: #61896b;
	--mirage: #1f2937;
	--athens-gray: #f3f4f6;
	--gray-chateau: #9ca3af;
	--feta-30: #f0fdf4;
	--scandal: #dcfce7;
	--malachite: #195340;
	--green-banner: #547061;
	--button-green: #628a7d;
	--feta: #f6f8f6;
	--p-text-green: #61896b;
	--mischka: #d1d5db;
	--orange-text: #f2ab43;
	--river-bed: #4b5563;
	--banner-green: #426051;
	--ebony-clay: #1f2937;
	--oxford-blue: #374151;
	--color-azure-17: #1f2937;
	--color-spring-green-8: #111813;
	--color-green-50: #13ec49;
	--color-red-51: #dc2626;
	--color-red-71: #f87171;
	--color-spring-green-29: #15803d;
	--color-white-solid: #fff;
	--color-azure-27: #374151;
	--color-green-38: #0eb536;
	--color-grey-91: #e5e7eb;
	--color-grey-97: #f6f8f6;
	--color-azure-11: #111827;
	--color-black-90: rgba(0, 0, 0, 0.9);
	--color-black-0: rgba(0, 0, 0, 0);
	--color-azure-84: #d1d5db;
	--color-spring-green-46: #61896b;
	--color-white-0: rgba(255, 255, 255, 0);
	--color-grey-98: #f9fafb;
	--color-azure-27-50: rgba(55, 65, 81, 0.5);
	--color-grey-95: #f0f4f1;
	--color-grey-95-0: rgba(240, 244, 241, 0);
	--color-spring-green-85-50: rgba(187, 247, 208, 0.5);
	--color-grey-96: #f3f4f6;
	--color-grey-94: #fee2e2;
	--color-grey-97-30: rgba(240, 253, 244, 0.3);
	--color-grey-93: #dcfce7;
	--color-spring-green-24: #166534;
	--color-green-50-20: rgba(19, 236, 73, 0.2);
	--color-spring-green-85-30: rgba(187, 247, 208, 0.3);
	--color-azure-65: #9ca3af;
	--color-azure-34: #4b5563;
	--color-azure-17-50: rgba(31, 41, 55, 0.5);
	--color-black-solid: #000;
	--color-white-80: rgba(255, 255, 255, 0.8);

	/* string variables */
	--font-family-font-1: var(--font-sans);
	--font-style-medium-italic: "Medium Italic";

	/* number variables */
	--stroke-weight-0-02: 0.02430555410683155px;
	--opacity-100: 100px;
	--stroke-weight-0-13: 0.13335415720939636px;
	--stroke-weight-0-01: 0.0138888880610466px;
	--width-160: 160px;
	--font-size-16: 16px;
	--font-weight-700: 700px;
	--line-height-24: 24px;
	--stroke-weight-2: 2px;
	--line-height-29-4: 29.399999618530273px;
	--font-size-18: 18px;
	--line-height-28: 28px;
	--font-size-14: 14px;
	--line-height-20: 20px;
	--opacity-60: 60px;
	--item-spacing-xs: 8px;
	--letter-spacing-0-7: 0.699999988079071px;
	--line-height-32: 32px;
	--font-weight-400: 400px;
	--font-weight-500: 500px;
	--stroke-weight-0-83: 0.8333333134651184px;
	--item-spacing-115-6: 115.5999984741211px;
	--item-spacing-7-99: 7.989999771118164px;
	--stroke-weight-1: 1px;
	--item-spacing-280-53: 280.5299987792969px;
	--font-weight-600: 600px;
	--width-1280: 1280px;
	--font-size-12: 12px;
	--item-spacing-0-01: -0.009999999776482582px;
	--width-896: 896px;
	--font-size-72: 72px;
	--font-weight-900: 900px;
	--letter-spacing-3-6: -3.5999999046325684px;
	--width-672: 672px;
	--item-spacing-xl: 64px;
	--font-size-36: 36px;
	--letter-spacing-0-9: -0.8999999761581421px;
	--line-height-40: 40px;
	--opacity-10: 10px;
	--item-spacing-l: 48px;
	--item-spacing-332-23: 332.2300109863281px;
	--width-576: 576px;
	--item-spacing-4: 4px;
	--letter-spacing-0-6: 0.6000000238418579px;
	--width-384: 384px;
	--font-size-30: 30px;
	--letter-spacing-0-75: -0.75px;
	--letter-spacing-0-45: -0.44999998807907104px;
	--width-320: 320px;
	--item-spacing-891-81: 891.8099975585938px;
	--letter-spacing-1-2: -1.2000000476837158px;
	--opacity-90: 90px;
	--opacity-70: 70px;
	--item-spacing-180-1: 180.10000610351562px;
	--item-spacing-12-01: 12.010000228881836px;

	/* responsive margins / paddings (legacy; prefer container tokens) */
	--margin-sm: 16px;
	--margin-md: 32px;

	/* container: shared across all pages (use these going forward) */
	--container-max: 1280px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--container-padding-sm: var(--space-4);
	--container-padding-md: var(--space-6);
	--container-padding-lg: var(--space-8);

	/* contact page hero photo (contact-page.css); matches src/styles/tokens.css */
	--hero-contact-bg-opacity: 0.62;
}

* {
	--min-screen-size: 430;
	--max-screen-size: 2110;
	--interpolate-diff: calc(var(--max-font-size) - var(--min-font-size));
	--interpolate: clamp(calc(var(--min-font-size) * 1px), calc((var(--min-font-size) * 1px) + var(--interpolate-diff) * ((100vw - calc(var(--min-screen-size) * 1px)) / (var(--max-screen-size) - var(--min-screen-size)))), calc(var(--max-font-size) * 1px));
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.inter-medium-italic {
	color: var(--color-black-solid);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: italic;
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0px;
}

.inter-medium2 {
	color: var(--gray-nurse);
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0px;
}

.inter-bold1 {
	color: var(--log-cabin);
	font-size: 18px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.556;
	letter-spacing: -0.45px;
}

.inter-regular5 {
	color: var(--viridian-green);
	font-size: 12px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: 0px;
}

.semantic-heading1 {
	font-size: 72px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -3.6px;
}

.inter-bold7 {
	color: var(--oxford-blue);
	font-size: 12px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0px;
}

.inter-bold2 {
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.429;
	letter-spacing: 0px;
}

.inter-bold-upper-a1 {
	font-size: 12px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0.6px;
}

.semantic-heading2 {
	color: var(--log-cabin);
	font-size: 36px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 900;
	line-height: 1.111;
	letter-spacing: 0px;
}

.inter-regular3 {
	color: var(--viridian-green);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0px;
}

.inter-bold6 {
	color: var(--gray-nurse);
	font-size: 18px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.556;
	letter-spacing: 0px;
}

.semantic-heading4 {
	color: var(--gray-nurse);
	--min-font-size: 21; --max-font-size: 48; font-size: var(--interpolate);
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -1.2px;
}

.inter-regular1 {
	color: #414141;
	--min-font-size: 16; --max-font-size: 20; font-size: var(--interpolate);
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0px;
}

.semantic-item-a {
	color: #000;
	--min-font-size: 15; --max-font-size: 16; font-size: var(--interpolate);
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0px;
}

.inter-bold3 {
	color: var(--log-cabin);
	font-size: 16px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
}

.semantic-heading3 {
	color: var(--banner-green);
	font-size: 30px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.75px;
}

.inter-bold4 {
	color: var(--mirage);
	font-size: 20px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0px;
}

.inter-bold-upper-a2 {
	color: #77a898;
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.429;
	letter-spacing: 0.7px;
}

.inter-bold5 {
	font-size: 24px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: 0px;
}

.inter-medium1 {
	color: var(--log-cabin);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0px;
}

.inter-regular2 {
	color: var(--mischka);
	font-size: 16px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.inter-regular4 {
	font-size: 18px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 400;
	line-height: 1.556;
	letter-spacing: 0px;
}

.inter-semi-bold-upper {
	color: var(--viridian-green);
	font-size: 14px;
	font-family: var(--font-family-font-1);
	font-style: normal;
	font-weight: 600;
	line-height: 1.429;
	letter-spacing: 0.7px;
}

.inter-regular {
	color: var(--color-spring-green-46);
	font-size: 16px;
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: 0px;
}

.inter-bold-upper {
	color: var(--log-cabin);
	font-size: 14px;
	font-family: var(--font-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
}

.semantic-item {
	color: #6b7280;
	font-size: 16px;
	font-family: var(--font-sans);
	font-weight: 500;
	letter-spacing: 0px;
}

.sub-text-river-bed {
	color: var(--river-bed);
}

.semantic-item {
	color: var(--log-cabin);
	font-size: 16px;
	font-family: var(--font-sans);
	font-weight: 500;
	letter-spacing: 0px;
}

.inter-bold-upper {
	color: var(--color-spring-green-46);
	font-size: 14px;
	font-family: var(--font-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
}



/* ui objects utility classes */

.card {
	width: 100%;
	display: flex;
	flex-direction: column;
	background-position: top left, top left, top left;
	background-size: auto auto, cover, auto auto;
	background-repeat: no-repeat, no-repeat, no-repeat;
	padding: 0 32px;
	border-radius: 16px;
}

.btn1 {
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	width: 48px; height: 48px;
	display: flex;
	background-color: var(--viridian-green);
	padding: 6px 3px;
	border: 4px solid var(--white);
	border-radius: 50%;
}

.circle {
	width: 40px; height: 40px;
	padding: 6px 8px;
	border-radius: 50%;
}

.btn-gray {
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	display: flex;
	background-color: #628a7d;
	padding: 8px 17px;
	border-radius: 8px;
}

.btn2 {
	width: 48px; height: 48px;
	display: flex;
	background-color: var(--white);
	padding: 6px 3px;
	border: 4px solid var(--button-green);
	border-radius: 50%;
}

.btn-green {
	display: flex;
	background-color: rgba(97, 137, 107, 0.32);
	padding: 4px 12px;
	border-radius: 6px;
}

.btn-light {
	display: flex;
	background-color: #f6f8f6;
	padding: 8px 16px;
	border-radius: 8px;
}



/* button hover utility classes */

.hover-bright:hover {
	filter: brightness(1.2);
}

.hover-dark:hover {
	filter: brightness(0.85);
}

.hover-zoom:hover {
	scale: 1.05;
}
