@font-face {
   font-family: Museo;
   font-style: normal;
   font-weight: 300;
   font-display: fallback;
   src: url("/assets/Museo300-Regular.otf") format("opentype");
}

:root {
   --color-text: #1b1b1b;
   --color-dark: #232322;
   --color-primary: #8cb551;
   --color-button-hover: #f0f0f0d9;
   --font-size-small: 0.875rem;
   --font-size-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.196), 1.125rem);
   --font-size-large: clamp(
      1.125rem,
      1.125rem + ((1vw - 0.2rem) * 0.392),
      1.375rem
   );
   --font-size-x-large: clamp(
      1.75rem,
      1.75rem + ((1vw - 0.2rem) * 0.392),
      2rem
   );
   --font-size-xx-large: clamp(
      2.15rem,
      2.15rem + ((1vw - 0.2rem) * 1.333),
      3rem
   );
   --content-width: 645px;
   --wide-width: 1340px;
   --page-padding: 50px;
}

* {
   box-sizing: border-box;
}

body {
   margin: 0;
   color: var(--color-dark);
   background: #ffffff;
   font-family: Museo, sans-serif;
   font-weight: 300;
   font-size: var(--font-size-medium);
   letter-spacing: -0.1px;
   line-height: 1.4;
}

h1,
h2,
h3,
h5 {
   color: var(--color-text);
   font-weight: 300;
   line-height: 1.125;
}

h1 {
   font-size: var(--font-size-xx-large);
}

h2 {
   font-size: var(--font-size-x-large);
}

h3 {
   font-size: var(--font-size-large);
}

h5 {
   font-size: var(--font-size-small);
   letter-spacing: 0.5px;
}

strong {
   font-weight: 300;
}

main > * {
   margin: 0;
}

main > * + * {
   margin-top: 2rem;
}

li + li {
   margin-top: 0.45em;
}

.small {
   font-size: var(--font-size-small);
}

.medium {
   font-size: var(--font-size-medium);
}

.large {
   font-size: var(--font-size-large);
}

.x-large {
   font-size: var(--font-size-x-large);
}

.spacer {
   height: 100px;
}

a {
   color: var(--color-text);
   text-decoration: underline;
}

a:hover {
   text-decoration: none;
}

.site-header,
.site-footer {
   background: var(--color-dark);
   padding: 20px var(--page-padding);
}

.site-header__inner,
.site-footer__inner {
   max-width: var(--wide-width);
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.site-header a,
.site-footer a {
   color: var(--color-primary);
}

.site-logo {
   line-height: 0;
}

.site-logo img {
   width: 120px;
   height: auto;
}

.site-nav {
   font-size: var(--font-size-large);
}

.button {
   display: inline-block;
   background: var(--color-primary);
   color: var(--color-text) !important;
   font-size: var(--font-size-medium);
   padding: 0.6rem 1.6rem;
   border-radius: 9999px;
   text-decoration: none;
}

.button:hover {
   background: var(--color-button-hover);
}

main {
   width: 100%;
   max-width: calc(var(--content-width) + 2 * var(--page-padding));
   margin: 0 auto;
   padding: clamp(30px, 7vw, 70px) var(--page-padding) 196px;
}

.phone-table {
   border-collapse: collapse;
   margin-bottom: 1.2em;
}

.phone-table td {
   padding: 0.5em;
   white-space: nowrap;
}

.phone-table td:first-child {
   padding-left: 60px;
}

.phone-table td:last-child {
   padding-left: 100px;
}

.site-footer {
   padding-bottom: 50px;
   font-size: var(--font-size-small);
}

.site-footer__inner {
   align-items: flex-start;
}

.site-footer__links {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 22px;
   margin: 0;
}

.site-footer__company {
   color: var(--color-primary);
   font-size: var(--font-size-small);
   margin: 0 30px 0 0;
}

@media (max-width: 781px) {
   :root {
      --page-padding: 30px;
   }

   .site-header__inner {
      flex-wrap: wrap;
   }

   .site-footer__inner {
      flex-direction: column;
      gap: 50px;
   }

   .phone-table td:first-child {
      padding-left: 0;
   }

   .phone-table td:last-child {
      padding-left: 1.5em;
   }
}