/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/**
	Global variables
*/
/* Site Max Width. Used in 03-base/_template.scss
   -------------------------------------------------------------------------- */
/* Location of compiled icons in theme.
   Used in project/build/common/sass/04-components/_icons.scss
   -------------------------------------------------------------------------- */
/* Breakpoints
	px is excluded so we can do math on the breakpoints
   -------------------------------------------------------------------------- */
/* Colors
   Suffix color variables with a 3 digit number.  Generally try to progress from
   lightest/dullest to darkest/most vibrant.
   -------------------------------------------------------------------------- */
/* Filter Colors
   -------------------------------------------------------------------------- */
/* Default transition.  Used in transition() mixin.
   ------------------------------------------------------------------------ */
/* Tools
   -------------------------------------------------------------------------- */
/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/**
	General mixins
*/
/* Variable Size
   Function can be used to make any property value variable
   -------------------------------------------------------------------------- */
/* Basic Transition
   -------------------------------------------------------------------------- */
/* Default Unordered List
   This mixin is used in place of defining base ul styles and then having to
   override them everywhere.  Ex: in a menu.
   This should be included when you output an acf wysiwyg field.
   -------------------------------------------------------------------------- */
/* Default Link Style
   This mixin is used in place of defining base a styles and then having to
   override them everywhere. Ex: text links vs buttons.
   This should be included when you output an acf wysiwyg field.
   -------------------------------------------------------------------------- */
/* Default Table
   -------------------------------------------------------------------------- */
/* Default Gradient
   -------------------------------------------------------------------------- */
/* Button Reset
   -------------------------------------------------------------------------- */
/* List Reset
   -------------------------------------------------------------------------- */
/* 100vh Mixin
   -------------------------------------------------------------------------- */
/* Accessibility Mixins to allow or prevent animations and transitions
   -------------------------------------------------------------------------- */
/* Tools
   -------------------------------------------------------------------------- */
/**
	Typography specific mixins
	These mixins are used in classes in build/common/sass/03-base/_typography.scss.
	They can also be used in a component/layout stylesheet, but that should be avoided.
*/
/* Fonts
   -------------------------------------------------------------------------- */
/* Typography
   -------------------------------------------------------------------------- */
/**
	This file does note generate code.  It is imported by other sass files to include
	variables, mixins, and functions.
	*/
/* Settings
   -------------------------------------------------------------------------- */
/* Tools
   -------------------------------------------------------------------------- */
/**
	Form specific mixins
	A set of default styles that can be applied to Gravity Forms and other forms
*/
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
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;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
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 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
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 and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-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.
*/
::-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 Chrome and Safari.
*/
summary {
  display: list-item;
}

/**
	Base styles
*/
:root {
  --color: #1f2221;
  --inline-spacing: 24px;
  --outline-color: #005FCC;
  --spacer-one: 4px;
  --spacer-two: 8px;
  --spacer-three: 16px;
  --spacer-four: 24px;
  --spacer-five: 32px;
  --spacer-six: calc(32px + (100vw - 320px) / ((768 - 320) / (36 - 32)));
  --spacer-seven: calc(32px + (100vw - 320px) / ((768 - 320) / (40 - 32)));
  --spacer-nine: 90px;
  --spacer-thirteen: 160px;
}
@media (min-width: 768px) {
  :root {
    --inline-spacing: 48px;
    --spacer-six: calc(36px + (100vw - 768px) / ((1280 - 768) / (40 - 36)));
    --spacer-seven: calc(40px + (100vw - 768px) / ((1280 - 768) / (48 - 40)));
  }
}
@media (min-width: 1024px) {
  :root {
    --inline-spacing: 64px;
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  :root {
    --spacer-six: calc(40px + (100vw - 1280px) / ((1440 - 1280) / (48 - 40)));
    --spacer-seven: calc(48px + (100vw - 1280px) / ((1440 - 1280) / (56 - 48)));
  }
}
@media (min-width: 1440px) {
  :root {
    --inline-spacing: 96px;
    --spacer-six: 48px;
    --spacer-seven: 56px;
  }
}

*:focus-visible {
  -webkit-box-shadow: 0 0 0 1px white;
          box-shadow: 0 0 0 1px white;
  outline: var(--outline-color) 2px solid;
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-height, 120px) * 1.5);
}

body {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body[data-scrollable=false] {
  overflow: hidden;
}

.site-wrap {
  max-width: 100%;
  margin: 0 auto;
  overflow: clip;
  background-color: white;
}
.site-wrap #wpadminbar {
  position: fixed;
}

/* Bootstrap helper functions
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Use on a container div to remove top/bottom spacing from first/last
   element.  This functionality still exists in .wysiwyg class.
   -------------------------------------------------------------------------- */
.clear-margins > :first-child {
  margin-top: 0;
}
.clear-margins > :last-child {
  margin-bottom: 0;
}

.side-spacing {
  padding-inline: var(--inline-spacing);
}

strong {
  font-family: "Hind-Bold", sans-serif !important;
}

/*
   Button and link component styles
*/
button {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  border: 0;
  background: none;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}

/* Link group class.  To provide even spacing between links when they switch
   from horizontal to vertical.
   -------------------------------------------------------------------------- */
.link-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px 36px;
}

button {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  border: 0;
  background: none;
  color: currentColor;
  cursor: pointer;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
}

/* Button Styles
   -------------------------------------------------------------------------- */
.btn {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  font-family: "Hind-Bold", sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-block;
  isolation: isolate;
  overflow: clip;
  position: relative;
  padding: var(--spacer-three) var(--spacer-five);
  text-decoration: none;
}
.btn::before {
  inset: 0;
  scale: 0 1;
  -webkit-transform-origin: left;
          transform-origin: left;
  content: "";
  display: block;
  position: absolute;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: -1;
}
.btn:hover, .btn:focus-visible {
  text-decoration: none;
}
.btn:hover::before, .btn:focus-visible::before {
  scale: 1;
}
.btn--white {
  background: white;
  color: #1f2221;
}
.btn--white::before {
  background-color: #404543;
}
.btn--white:hover, .btn--white:focus-visible {
  color: white;
}
.btn--black {
  background: black;
  color: white;
}
.btn--black::before {
  background-color: white;
}
.btn--black:hover, .btn--black:focus-visible {
  color: #404543;
}
.btn--primary {
  background-color: #c41e3a;
  color: white;
}
.btn--primary::before {
  background-color: #404543;
}

/* Link Styles
   -------------------------------------------------------------------------- */
.link {
  font-family: "Hind-Bold", sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-padding-after: 12px;
          padding-block-end: 12px;
  position: relative;
  text-decoration: none;
}
.link--primary, .link--black {
  color: var(--link-color, #c41e3a);
}
.link--primary::before, .link--black::before {
  background-color: var(--link-color, #c41e3a);
  height: 1px;
  inset: auto auto 0 50%;
  translate: -50% 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 100%;
  content: "";
  display: block;
  position: absolute;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.link--primary:hover, .link--primary:focus-visible, .link--black:hover, .link--black:focus-visible {
  color: var(--link-color-hover, #1f2221);
  text-decoration: none;
}
.link--primary:hover::before, .link--primary:focus-visible::before, .link--black:hover::before, .link--black:focus-visible::before {
  width: 24px;
}
.link--primary {
  --link-color: #c41e3a;
  --link-color-hover: #1f2221;
}
.link--black {
  --link-color: #1f2221;
  --link-color-hover: #1f2221;
}
.link--arrow {
  color: #1f2221;
  gap: 16px;
  -webkit-margin-end: 8px;
          margin-inline-end: 8px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.link--arrow:hover, .link--arrow:focus-visible {
  gap: 24px;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
}
.link--arrow .v-icon__svg {
  --icon-size: 20px;
}

/**
	Gravity Forms and other form styles
*/
/* Resets
   -------------------------------------------------------------------------- */
textarea, input[type=text], input[type=button], input[type=submit] {
  -webkit-appearance: none;
  border-radius: 0;
}

.background {
  padding-block: var(--layout-spacing);
}
.background--charcoal {
  background-color: #1f2221;
  color: white;
}
.background--charcoal .link {
  --link-color: white;
  --link-color-hover: white;
}

:root {
  --layout-spacing: 96px;
}
@media (min-width: 768px) {
  :root {
    --layout-spacing: 104px;
  }
}

#main-content > section {
  margin-top: var(--layout-spacing);
}
#main-content > section.collapse-spacing + .collapse-spacing, #main-content > section.collapse-spacing + .background, #main-content > section.background + .collapse-spacing, #main-content > section.background + .background {
  margin-top: 0;
}
#main-content > section:first-child.collapse-spacing, #main-content > section:first-child.background {
  margin-top: 0;
}
#main-content > section:last-child:not(.collapse-spacing, .background) {
  margin-bottom: var(--layout-spacing);
}

/**
	Base icon classes.  Examples and more info in README.md

	For icons added to :before or :after.  Svg's must be colored with the filter property.
 */
/**
	General icon classes
   -------------------------------------------------------------------------- */
.v-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.v-icon--before:before {
  height: var(--icon-size, 1em);
  width: var(--icon-size, 1em);
}
.v-icon--after:after {
  height: var(--icon-size, 1em);
  width: var(--icon-size, 1em);
}
.v-icon__svg {
  height: var(--icon-size, 1em);
  width: var(--icon-size, 1em);
  display: inline-block;
}
.v-icon__svg--red-roof {
  width: calc(var(--icon-size) * 3.1);
}
.v-icon__svg--red-roof-vertical, .v-icon__svg--red-roof-vertical-colored {
  width: calc(var(--icon-size, 1em) * 0.47);
}

/**
	Classes for icons that are added to :before or :after.  In the class name, prefix the icon name
	with a b- or a- for before or after.  Examples below.
   -------------------------------------------------------------------------- */
.v-icon--b-search:before {
  content: url(/content/themes/base/assets/img/icons/search.svg);
  -webkit-filter: invert(44%) sepia(0%) saturate(0%) hue-rotate(164deg) brightness(88%) contrast(90%);
          filter: invert(44%) sepia(0%) saturate(0%) hue-rotate(164deg) brightness(88%) contrast(90%);
}
.v-icon--a-search:after {
  content: url(/content/themes/base/assets/img/icons/search.svg);
  -webkit-filter: invert(44%) sepia(0%) saturate(0%) hue-rotate(164deg) brightness(88%) contrast(90%);
          filter: invert(44%) sepia(0%) saturate(0%) hue-rotate(164deg) brightness(88%) contrast(90%);
}

/*
   Include component styles here that are not complex enough to justify their
   own file.
*/
/* WYSIWYG
	Add wysiwyg class to include default styles for wysiwyg content.  This is so
	default styles on ul's and a's are not globally set.
	ex:
	<div class="wysiwyg">
		<?php echo $content; ?>
	</div>
   -------------------------------------------------------------------------- */
.wysiwyg > :first-child {
  margin-top: 0;
}
.wysiwyg > :last-child {
  margin-bottom: 0;
}
.wysiwyg ul {
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
  -webkit-margin-after: 32px;
          margin-block-end: 32px;
}
.wysiwyg ol {
  -webkit-padding-start: 1em;
          padding-inline-start: 1em;
  -webkit-margin-after: 32px;
          margin-block-end: 32px;
}
.wysiwyg a:not(.btn, .link) {
  color: currentColor;
  text-decoration: none;
}
.wysiwyg a:not(.btn, .link):hover {
  text-decoration: none;
}
.wysiwyg h1, .wysiwyg h2, .wysiwyg h3, .wysiwyg h4, .wysiwyg h5, .wysiwyg h6 {
  -webkit-margin-after: 0.25em;
          margin-block-end: 0.25em;
}
.wysiwyg p {
  -webkit-margin-after: 32px;
          margin-block-end: 32px;
}
@media (min-width: 768px) {
  .wysiwyg .alignleft {
    float: left;
    padding-right: 20px;
  }
}
.wysiwyg .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .wysiwyg .alignright {
    float: right;
    padding-left: 20px;
  }
}
.wysiwyg img[class*=wp-image-] {
  max-width: 100%;
  height: auto;
}

/*
	Typography base styles
*/
/* Fonts
   Only the woff format is required.
   There are mixins in build/common/sass/02-tools/_typography.scss for each font-face.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Hind-Light";
  src: url("/content/themes/base/assets/font/Hind-Light.woff") format("woff"), url("/content/themes/base/assets/font/Hind-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Hind-Regular";
  src: url("/content/themes/base/assets/font/Hind-Regular.woff") format("woff"), url("/content/themes/base/assets/font/Hind-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Hind-SemiBold";
  src: url("/content/themes/base/assets/font/Hind-SemiBold.woff") format("woff"), url("/content/themes/base/assets/font/Hind-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Hind-Bold";
  src: url("/content/themes/base/assets/font/Hind-Bold.woff") format("woff"), url("/content/themes/base/assets/font/Hind-Bold.woff2") format("woff2");
}
/* Remove default margins + paddings that aren't touched with normalize */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, pre, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

/* Headings and paragraphs
   -------------------------------------------------------------------------- */
h1, .h1 {
  font-weight: 600;
  font-family: "Hind-SemiBold", sans-serif;
  font-size: calc(34px + (100vw - 320px) / ((768 - 320) / (44 - 34)));
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  h1, .h1 {
    font-size: calc(44px + (100vw - 768px) / ((1280 - 768) / (48 - 44)));
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  h1, .h1 {
    font-size: calc(48px + (100vw - 1280px) / ((1920 - 1280) / (52 - 48)));
  }
}
@media (min-width: 1440px) {
  h1, .h1 {
    font-size: 52px;
  }
}

h2, .h2 {
  font-weight: 600;
  font-family: "Hind-SemiBold", sans-serif;
  font-size: calc(30px + (100vw - 320px) / ((768 - 320) / (36 - 30)));
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  h2, .h2 {
    font-size: calc(36px + (100vw - 768px) / ((1280 - 768) / (40 - 36)));
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  h2, .h2 {
    font-size: calc(40px + (100vw - 1280px) / ((1920 - 1280) / (42 - 40)));
  }
}
@media (min-width: 1440px) {
  h2, .h2 {
    font-size: 42px;
  }
}

h3, .h3 {
  font-weight: 600;
  font-family: "Hind-SemiBold", sans-serif;
  font-size: calc(26px + (100vw - 320px) / ((768 - 320) / (32 - 26)));
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  h3, .h3 {
    font-size: calc(32px + (100vw - 768px) / ((1280 - 768) / (34 - 32)));
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  h3, .h3 {
    font-size: calc(34px + (100vw - 1280px) / ((1920 - 1280) / (36 - 34)));
  }
}
@media (min-width: 1440px) {
  h3, .h3 {
    font-size: 36px;
  }
}

h4, .h4 {
  font-weight: 600;
  font-family: "Hind-SemiBold", sans-serif;
  font-size: calc(22px + (100vw - 320px) / ((768 - 320) / (26 - 22)));
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  h4, .h4 {
    font-size: calc(26px + (100vw - 768px) / ((1280 - 768) / (28 - 26)));
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  h4, .h4 {
    font-size: calc(28px + (100vw - 1280px) / ((1920 - 1280) / (30 - 28)));
  }
}
@media (min-width: 1440px) {
  h4, .h4 {
    font-size: 30px;
  }
}

h5, .h5 {
  font-weight: 600;
  font-family: "Hind-SemiBold", sans-serif;
  font-size: calc(20px + (100vw - 320px) / ((768 - 320) / (22 - 20)));
  line-height: 1.3;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  h5, .h5 {
    font-size: calc(22px + (100vw - 768px) / ((1280 - 768) / (24 - 22)));
  }
}
@media (min-width: 1280px) {
  h5, .h5 {
    font-size: 24px;
  }
}

h6, .h6 {
  font-weight: 600;
  font-family: "Hind-SemiBold", sans-serif;
  font-size: 18px;
  line-height: 1.6;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  h6, .h6 {
    font-size: calc(18px + (100vw - 768px) / ((1280 - 768) / (20 - 18)));
  }
}
@media (min-width: 1280px) {
  h6, .h6 {
    font-size: 20px;
  }
}

.h7 {
  font-weight: 600;
  font-family: "Hind-SemiBold", sans-serif;
  font-size: calc(16px + (100vw - 320px) / ((768 - 320) / (18 - 16)));
  line-height: 1.6;
}
@media (min-width: 768px) {
  .h7 {
    font-size: 18px;
  }
}

.font-body {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.font-tiny {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 10px;
  line-height: 1.15;
}

.font-extra-small {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.25;
}

.font-small {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.font-large {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.2;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .font-large {
    font-size: calc(17px + (100vw - 768px) / ((1280 - 768) / (18 - 17)));
  }
}
@media (min-width: 1280px) {
  .font-large {
    font-size: 18px;
  }
}

.font-extra-large {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.2;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .font-extra-large {
    font-size: calc(20px + (100vw - 768px) / ((1280 - 768) / (22 - 20)));
  }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  .font-extra-large {
    font-size: calc(22px + (100vw - 1280px) / ((1920 - 1280) / (24 - 22)));
  }
}
@media (min-width: 1440px) {
  .font-extra-large {
    font-size: 24px;
  }
}

.font-intro {
  font-family: "Hind-Light", sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .font-intro {
    font-size: calc(19px + (100vw - 768px) / ((1280 - 768) / (20 - 19)));
  }
}
@media (min-width: 1280px) {
  .font-intro {
    font-size: 20px;
  }
}

.font-eyebrow {
  font-family: "Hind-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.font-eyebrow-thick {
  font-family: "Hind-Bold", sans-serif;
  font-size: calc(14px + (100vw - 320px) / ((768 - 320) / (15 - 14)));
  line-height: 1.6;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .font-eyebrow-thick {
    font-size: calc(15px + (100vw - 768px) / ((1280 - 768) / (16 - 15)));
  }
}
@media (min-width: 1280px) {
  .font-eyebrow-thick {
    font-size: 16px;
  }
}

.font-label {
  font-family: "Hind-SemiBold", sans-serif;
  font-size: calc(13px + (100vw - 320px) / ((768 - 320) / (14 - 13)));
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .font-label {
    font-size: 14px;
  }
}

.font-label-thick {
  font-family: "Hind-Regular", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 0.9;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.font-button {
  font-family: "Hind-Bold", sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

em {
  font-style: italic;
}