*, *:before, *:after {
	box-sizing: border-box;
}
html, body {
	margin: 0; padding: 0;
}
html {
	--bg-color: var(--root-bg-color);
	background-color: var(--bg-color);
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body {
	--bg-color: var(--color-white);
	color: var(--color-text);
	background-color: var(--bg-color);
	font-family: var(--font-base);
	line-height: 1.3;
	padding: 0;
	margin-block: 0;
	margin-inline: auto;
	width: 100%;
	margin-inline: auto;
}
img {
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
}
figure {
	margin: 0; padding: 0;
}
a:hover,
a:focus,
a:active {
	color: var(--color-active);
}
h1,h2,h3,h4,h5,h6 {
	--text-color: var(--color-heading);
	color: var(--text-color);
	font-family: var(--font-heading);
	line-height: 1.2;
}
h4,h5,h6 {
	font-family: var(--font-base);
}
h5,h6 {
	font-size: 1em;
}
.heading-h1,
.heading-h2,
.heading-h3 {
	color: var(--color-heading);
	font-family: var(--font-heading);
	line-height: 1.2;
}
h1, h2, h3, h4,
.heading-h1,
.heading-h2,
.heading-h3,
.heading-h4 {
	font-weight: normal;
	text-transform:uppercase;
	letter-spacing: 0.04em;
}

.heading-h2 {
	font-size: var(--font-size-xlarge);
}
.heading-h3 {
	font-size: var(--font-size-large);
}

.btn {
	--text-color: var(--color-black);
	--bg-color: var(--color-secondary);
	border: none;
	padding: 1rem;
	appearance: none;
	color: var(--text-color);
	background-color: var(--bg-color);
	font-family: var(--font-variant);
	font-size: var(--font-size-large);
	line-height: 1.2;
	text-transform:uppercase;
	letter-spacing: 0.04em;
}
.btn:hover,
.btn:focus,
.btn:active {
	text-decoration: underline;
}

.container {
	padding: 2rem;
	margin-inline: auto;
	width: var(--page-w);
	max-width: var(--page-max-w);
}

.link--cta {
	margin: 0; padding: 0;
	font-family: var(--font-variant);
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.link--cta a {
	display: inline-block;
	color: var(--text-color);
	background-color: var(--bg-color);
	padding: 0.5rem 0.7rem;
	text-decoration: none;
}
.link--cta a:hover,
.link--cta a:focus,
.link--cta a:active {
	color: var(--color-active);
	text-decoration: underline;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}