/* Reset */
*, *::before, *::after{
  box-sizing: border-box; 
}
*{
  margin: 0; 
  padding: 0; 
}
html,
body {
  overflow-x: hidden;
  width: 100vw;
}
ul[role='list'], ol[role='list']{
  list-style: none; 
}
html:focus-within{
  scroll-behavior: smooth; 
}
a:not([class]){
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto; 
}
img, picture, svg, video, canvas{
  max-width: 100%;
  height: auto; 
  vertical-align: middle; 
  font-style: italic; 
  background-repeat: no-repeat; 
  background-size: cover;
}
input, button, textarea, select{
  font: inherit; 
}
@media (prefers-reduced-motion: reduce){
  html:focus-within {
      scroll-behavior: auto;
  }
  *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
      transition: none;
  }
}
body, html{
  height: 100%; 
  scroll-behavior: smooth; 
}
/* Variables */
:root {
	--font-body: "neue-haas-unica", sans-serif;
	--font-heading: "sole-serif-small-variable", sans-serif;
	--font-body-large: 2rem;
	--font-body-regular: 1.375rem;
	--font-body-small: 1.25rem;
	--font-body-xtra-small: 1rem;

	--color-dark: #07272D;
	--color-red: #BA0C2F;
	--color-tan: #A89968;
  --color-tan-50: rgba(168,153,104,0.5);
  --color-light-tan: rgb(243,241,237);
	--color-white: #FFFFFF;
	--color-gray-60: rgba(0 0 0 / 60%);
	--color-gray-50: rgba(214 210 196 / 50%);
	--color-gray-20: rgba(214 210 196 / 20%);
  --color-form-border: rgb(190,190,190);
}
/* Typography */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
	font-family: var(--font-heading);
	font-variation-settings: "opsz" 0, "wght" 700;
}
.regular:is(h1,h2,h3,h4,.h1,.h2,.h3,.h4) {
    font-variation-settings: "opsz" 0, "wght" 400;
  }
h1,
.h1 {
	font-size: 4rem;
	font-weight: 500;
	color: var(--color-white);
}
h2,
.h2 {
	position: relative;
	font-size: 2.5rem;
	font-weight: 500;
	color: var(--color-dark);
	padding-bottom: 20px;
	margin-bottom: 50px;
}
.h2::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	width: 104px;
	height: 4px;
	background-color: var(--color-dark);
}
body,
.body {
	font-family: var(--font-body);
	font-size: var(--font-body-regular);
	color: var(--color-dark);
}
p {
	font-weight: 300;
}
.red-header {
	background-color: var(--color-red);
	color: var(--color-white);
	padding: 15px 30px;
  position: relative;
  font-weight: 300;
  font-size: 1.375rem;
}
.red-header::after {
    content: "";
    width: 100%;
    height: 5px;
    background-color: var(--color-red);
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
  }
@media screen and (min-width: 768px) {
	h1,
	.h1 {
		font-size: 7rem;
	}

	h2,
	.h2 {
		font-size: 3.125rem;
		padding-bottom: 40px;
		margin-bottom: 60px;
	}

	.h2::after {
		height: 6px;
	}
}
@media screen and (min-width: 1200px) {
	h1,
	.h1 {
		font-size: 11.875rem;
	}
}
/* Buttons */
/* Placeholder, can delete */
button,
.button,
a.button {
  display: inline-block;	
  -webkit-appearance: none;	
     -moz-appearance: none;	
          appearance: none;
  outline: none;
  border: none;
  min-width: 159px;
  height: 43px;
  text-align: center;
  text-wrap: nowrap;
  background-color: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-heading) !important;
  font-size: 0.9375rem;
  text-decoration: none;
  font-weight: bold;
}
:is(button,.button,a.button):hover,:is(button,.button,a.button):active {
    background-color: var(--color-white);
    color: var(--color-red);
  }
.button--light-bg:is(button,.button,a.button):hover,.button--light-bg:is(button,.button,a.button):active {
      background-color: var(--color-tan);
      color: var(--color-dark);
    }
a.button {
  line-height: 43px;
}
/* Containers */
.container--heading,
.container {
	max-width: 1100px;
	margin: 50px auto;
  width: 90%;
}
.container--banner {
	margin: 50px auto;
	max-width: 1400px;
  width: 90%;
}
@media screen and (min-width: 768px) {
	.container--banner {
		margin: 100px auto;
	}
}
@media screen and (min-width: 1200px) {
	.container--heading {
		margin: 100px auto;
	}
}
@media screen and (min-width: 1400px) {
	.container--banner {
		margin: 100px auto;
	}
}
/* Utilities */
.hidden {
  display: none;
}
/* Navigation */
.top-nav {
	background-color: var(--color-dark);
	padding: 25px 0;
}
.nav__container {
  width: 90%;
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.nav__container a {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--font-body-small);
  font-weight: bold;
  text-decoration: none;
}
.profile-icon {
	margin-left: 10px;
}
@media screen and (max-width: 500px) {
	.top-nav__logo {
		width: 150px;
	}
}
/* Footer */
footer {
	background-color: var(--color-dark);
	padding: 70px 40px;
}
.footer-container {
	max-width: 1400px;
	margin: 0 auto;
	color: var(--color-white);
}
.footer-container a {
    color: var(--color-white);
  }
.footer__content {
	margin-bottom: 75px;
}
.footer__logo {
	margin-bottom: 50px;
}
.footer__flex-container {
	display: flex;
	justify-content: space-between;
	flex-direction: column-reverse;
}
.footer__column address {
	font-style: normal;
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.3;
}
.telephone {
	display: inline-block;
	margin-top: 20px;
}
.footer__links {
  margin-left: 0;
	font-size: 1.125rem;
	text-transform: uppercase;
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-bottom: 60px;
}
.footer__links-column {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
footer a {
	color: var(--color-white);
	text-decoration: none;
}
.footer__copyright {
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: 500;
}
.footer__socials {
	display: flex;
  margin-left: 0;
	gap: 40px;
	margin-bottom: 40px;
}
@media screen and (min-width: 1000px) {
	footer {
		padding: 70px;
	}
}
@media screen and (min-width: 875px) {
	.footer__flex-container {
		flex-direction: row;
	}

	.footer__column {
		width: 49%;
	}

	.footer__links {
		justify-content: flex-end;
		margin-bottom: 0;
	}

	.footer__socials {
		justify-content: flex-end;
		margin-bottom: 0;
	}
}
@media screen and (min-width: 475px) {
	.footer__copyright {
		text-wrap: nowrap;
	}

	.footer__column address {
		text-wrap: nowrap;
	}

	.footer__links {
		flex-direction: row;
		gap: 60px;
	}
}