@font-face {
  font-family: "Prometo";
  src: url("assets/font/Prometo_W_Md.woff2") format("woff2"), url("assets/font/Prometo_W_Md.woff") format("woff");
}
:root {
  --color-brandBlue:#0F112C;
  --color-brandDarkGreen:#244945;
  --color-brandLightGreen:#68BC56;
  --color-brandOrange:#EF5822;
  --color-canvasBG: #111111;
  --color-pageBG: white;
  --widthLimit: 80rem;
  --siteHeader-hPadding: clamp(0.5rem, 6.25vw, 5rem);
  --siteHeader-vPadding: 1.6666666667rem;
  --siteHeader-zIndex: 999999;
  --siteFooter-hPadding: clamp(0.5rem, 6.25vw, 5rem);
  --siteFooter-vPadding: 1.6666666667rem;
  --block-hPadding: clamp(0.5rem, 10.41666667vw, 8.3333333333rem);
  --block-vPadding: clamp(2rem, 5.6vw, 5rem);
  --siteNavigation-identityMinWidth: 6.25rem;
  --siteNavigation-minHorizontalGap: 4rem;
  --fontFamily-figtree: "Figtree", sans-serif;
  --fontFamily-prometo: "Prometo", sans-serif;
  --fontFamily-body: var(--fontFamily-figtree);
  --fontSize-body: clamp(14px, 1.25vw, 24px);
  --fontWeight-body: 300;
  --lineHeigh-body: 1.5;
  --fontFamily-heading: "Prometo", sans-serif;
  --fontFamily: var(--fontFamily-body);
  --fontSize: var(--fontSize-body);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  font-weight: var(--fontWeight-body);
  line-height: var(--lineHeight);
  text-rendering: optimizeLegibility;
  color: black;
  background-color: var(--color-canvasBG);
}

*, *:before, *:after {
  box-sizing: inherit;
}

.skip-to-main {
  width: 100%;
  padding: 1em;
  position: absolute;
  z-index: calc(var(--siteHeader-zIndex) + 1);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: black;
  background: white;
  transform: translateY(-100%);
  transition: transform 0.3s;
  border: 4px solid yellow;
}

.skip-to-main:focus {
  transform: translateY(0%);
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

html, body {
  display: grid;
  justify-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--fontFamily);
  font-stretch: var(--fontStretch);
  font-size: var(--fontSize);
  font-weight: var(--fontWeight-body);
  line-height: var(--lineHeight);
  background-color: var(--color-canvasBG);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fontFamily-heading);
  font-weight: normal;
}

h1 {
  margin: 0;
  padding: 0;
  font-size: 3.6666666667rem;
  line-height: 1;
}

h2 {
  font-size: 0.8333333333rem;
  line-height: 1;
}

h2.heading-cap {
  margin: 0.25em 0;
  line-height: 1.5;
  text-transform: uppercase;
}

ul {
  margin: 0 0 1.5rem 1rem;
  padding: 0;
}

li {
  margin-bottom: 0.75em;
}

em, strong, b {
  font-style: normal;
  font-weight: 600;
}

a, a:any-link, a:visited {
  color: white;
  text-decoration: none;
}

a:hover, a:focus-visible {
  color: white;
  text-decoration: underline;
}

a[href^=mailto]::before {
  display: inline-block;
  margin-right: 0.5em;
  width: 1.3333333333em;
  height: 1.0833333333em;
  content: url("data:image/svg+xml,%3Csvg id='grid' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26'%3E%3Cpath fill='%23000000' d='m0,0v21.21h12.02v-.97H.97V1.47l15.03,11.57L31.03,1.47v19.25h.97V0H0Zm1.91.97h28.18l-14.09,10.84L1.91.97Z'/%3E%3Cpath fill='%23000000' d='m25.11,25.17c-1.08.58-2.29.85-3.51.81-3.26.06-5.95-2.53-6.01-5.79,0-.14,0-.28,0-.42,0-4.11,2.83-7.62,7.22-7.62,3.03-.14,5.6,2.21,5.73,5.23,0,.17,0,.33,0,.5,0,2.97-1.69,4.72-3.51,4.72-.81.02-1.49-.62-1.51-1.43,0-.11,0-.22.03-.32h-.07c-.52,1.06-1.59,1.73-2.77,1.75-1.25-.05-2.22-1.11-2.17-2.37,0-.04,0-.09,0-.13,0-2.61,2.12-4.72,4.72-4.72.72,0,1.43.13,2.09.4l-.68,3.58c-.27,1.49-.07,2.23.61,2.23,1.01,0,2.16-1.35,2.16-3.64,0-2.9-1.75-4.92-4.79-4.92-3.24,0-5.94,2.56-5.94,6.61,0,3.31,2.16,5.33,5.06,5.33,1.03,0,2.04-.23,2.97-.68l.34.87Zm-1.15-8.57c-.33-.1-.67-.14-1.01-.13-1.86.12-3.27,1.72-3.17,3.58,0,.87.4,1.48,1.28,1.48,1.15,0,2.23-1.48,2.42-2.7l.48-2.23Z'/%3E%3C/svg%3E");
  vertical-align: middle;
}

a[href^=mailto].white::before {
  content: url("data:image/svg+xml,%3Csvg id='grid' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 26'%3E%3Cpath fill='%23ffffff' d='m0,0v21.21h12.02v-.97H.97V1.47l15.03,11.57L31.03,1.47v19.25h.97V0H0Zm1.91.97h28.18l-14.09,10.84L1.91.97Z'/%3E%3Cpath fill='%23ffffff' d='m25.11,25.17c-1.08.58-2.29.85-3.51.81-3.26.06-5.95-2.53-6.01-5.79,0-.14,0-.28,0-.42,0-4.11,2.83-7.62,7.22-7.62,3.03-.14,5.6,2.21,5.73,5.23,0,.17,0,.33,0,.5,0,2.97-1.69,4.72-3.51,4.72-.81.02-1.49-.62-1.51-1.43,0-.11,0-.22.03-.32h-.07c-.52,1.06-1.59,1.73-2.77,1.75-1.25-.05-2.22-1.11-2.17-2.37,0-.04,0-.09,0-.13,0-2.61,2.12-4.72,4.72-4.72.72,0,1.43.13,2.09.4l-.68,3.58c-.27,1.49-.07,2.23.61,2.23,1.01,0,2.16-1.35,2.16-3.64,0-2.9-1.75-4.92-4.79-4.92-3.24,0-5.94,2.56-5.94,6.61,0,3.31,2.16,5.33,5.06,5.33,1.03,0,2.04-.23,2.97-.68l.34.87Zm-1.15-8.57c-.33-.1-.67-.14-1.01-.13-1.86.12-3.27,1.72-3.17,3.58,0,.87.4,1.48,1.28,1.48,1.15,0,2.23-1.48,2.42-2.7l.48-2.23Z'/%3E%3C/svg%3E");
}

/* site header */
.site-header {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: var(--widthLimit);
  position: sticky;
  top: 0;
  z-index: var(--siteHeader-zIndex);
  padding-left: var(--siteHeader-hPadding);
  padding-right: var(--siteHeader-hPadding);
  padding-top: var(--siteHeader-vPadding);
  padding-bottom: var(--siteHeader-vPadding);
  font-family: var(--fontFamily-prometo);
  font-weight: normal;
  font-size: 1rem;
  line-height: 1;
  color: white;
  background-image: url(assets/grid.svg);
  background-size: clamp(240px, 25vw, 480px) auto;
  background-repeat: repeat;
  background-position: top center;
  background-color: var(--color-brandBlue);
}

#site-navigation {
  position: relative;
  display: flex;
  gap: 1.25em var(--siteNavigation-minHorizontalGap);
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--widthLimit);
}

#site-identity {
  color: white;
  width: 25%;
  min-width: var(--siteNavigation-identityMinWidth);
}

#site-identity a:any-link {
  position: relative;
  display: block;
  max-width: 230px;
  max-height: 34px;
  color: white;
}

#site-identity a:hover::after {
  position: absolute;
  bottom: -3px;
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: white;
}

#site-identity svg {
  display: block;
  fill: currentColor;
  width: 100%;
  height: auto;
}

#mobile-menu-toggle {
  padding: 0;
  border: none;
  font-family: var(--fontFamily);
  text-transform: uppercase;
  color: white;
  background-color: black;
  cursor: pointer;
}

#mobile-menu-toggle:hover {
  background-color: #222;
}

#mobile-menu-toggle:active {
  background-color: #555;
}

#site-main-menu {
  display: none;
  width: 100%;
  height: 0;
}

#site-main-menu[aria-expanded=true] {
  display: block;
  transition: all ease-in;
  animation-duration: 0.5s;
  animation-name: main-menu-toggle-on;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

@keyframes main-menu-toggle-on {
  0% {
    height: 0;
  }
  100% {
    height: auto;
  }
}
#site-main-menu a:any-link {
  display: block;
  line-height: 2;
  text-decoration: none;
  color: white;
  opacity: 0;
}

#site-main-menu a:hover {
  text-decoration: underline;
}

#site-main-menu[aria-expanded=true] a:any-link {
  transition: all ease-in;
  animation-delay: 0.1s;
  animation-duration: 0.5s;
  animation-name: main-menu-items-on;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

#site-main-menu[aria-expanded=true] a:any-link:nth-child(n+2) {
  animation-delay: 0.2s;
}

#site-main-menu[aria-expanded=true] a:any-link:nth-child(n+3) {
  animation-delay: 0.3s;
}

#site-main-menu[aria-expanded=true] a:any-link:nth-child(n+4) {
  animation-delay: 0.4s;
}

#site-main-menu[aria-expanded=true] a:any-link:nth-child(n+5) {
  animation-delay: 0.5s;
}

#site-main-menu[aria-expanded=true] a:any-link:nth-child(n+6) {
  animation-delay: 0.6s;
}

#site-main-menu[aria-expanded=true] a:any-link:nth-child(n+7) {
  animation-delay: 0.7s;
}

#site-main-menu[aria-expanded=true] a:any-link:nth-child(n+8) {
  animation-delay: 0.8s;
}

@keyframes main-menu-items-on {
  0% {
    transform: translateX(1rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@media screen and (min-width: 480px) {
  #site-navigation {
    flex-wrap: nowrap;
  }
  #mobile-menu-toggle {
    display: none;
    visibility: hidden;
  }
  #site-main-menu,
  #site-main-menu[aria-expanded=true] {
    display: flex;
    gap: clamp(1em, 4vw, var(--siteNavigation-minHorizontalGap));
    justify-content: flex-end;
    align-items: baseline;
    flex-grow: 1;
    font-size: 0.825rem;
    line-height: 1.5rem;
    height: auto;
    animation: none;
  }
  #site-main-menu[aria-expanded=true] a:any-link {
    animation: none;
    opacity: 1;
  }
}
/* end of .site-header */
/* main general */
.site-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "hero" "about" "approach" "contact";
  grid-template-rows: auto;
  width: 100%;
  max-width: var(--widthLimit);
  scroll-margin-top: 10rem;
  hyphens: manual;
  background-image: url(assets/grid.svg);
  background-size: clamp(240px, 25vw, 480px) auto;
  background-repeat: repeat;
  background-position: top center;
  background-attachment: fixed;
  background-color: var(--color-pageBG);
}

.site-main::after {
  z-index: 10;
  content: "";
  pointer-events: none;
  display: block;
  grid-area: approach/approach/contact/contact;
  background-image: url(assets/bottom-bg.svg);
  background-size: min(80%, 1080px) auto;
  background-repeat: no-repeat;
  background-position: bottom right;
}

@media screen and (min-width: 60rem) {
  .site-main {
    grid-template-columns: 60% 40%;
    grid-template-areas: "hero hero" "about about" "approach contact";
  }
}
.section {
  position: relative;
  display: grid;
  width: 100%;
}

.block {
  width: 100%;
  padding: var(--block-vPadding) var(--siteHeader-hPadding);
}

@media screen and (min-width: 480px) {
  .block {
    padding: var(--block-vPadding) var(--block-hPadding);
  }
}
/* end of main general */
/* hero */
.section-hero {
  grid-area: hero;
  color: white;
  font-size: 1.5rem;
  font-weight: var(--fontWeight-body);
  line-height: 1.25;
  background-image: url(assets/grid.svg), url(assets/hero-bottom-bg.svg);
  background-size: clamp(240px, 25vw, 480px) auto, 100% auto;
  background-repeat: repeat, no-repeat;
  background-position: center top, center bottom;
  background-attachment: fixed, scroll;
  background-color: var(--color-brandBlue);
}

.block-hero-content {
  display: grid;
  padding-top: clamp(2rem, 3.75vw, 3rem);
  padding-bottom: clamp(4rem, 11.25vw, 9rem);
  grid-template-columns: 1fr;
  gap: 4rem;
}

.hero-content-intro {
  align-self: center;
}

.hero-content-image {
  justify-self: end;
}

.hero-content-image img {
  width: 100%;
  height: auto;
}

/* CTA button */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}

.cta-link-button,
.cta-link-button:link,
.cta-link-button:visited {
  padding: 0.4em 1em;
  font-size: clamp(12px, 1.04166667vw, 0.83333333rem);
  font-family: var(--fontFamily-prometo);
  line-height: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--color-brandOrange);
  border-radius: 1rem;
  background-color: transparent;
}

.cta-link-button:hover {
  text-decoration: underline;
}

@media screen and (min-width: 60rem) {
  .block-hero-content {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
/* end of hero */
/* about */
.section-about {
  grid-area: about;
}

.section-about > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 64rem;
}

.section-about .heading-cap {
  color: var(--color-brandLightGreen);
}

.section-about .intro {
  margin-top: 0;
  font-family: var(--fontFamily-heading);
  font-size: 1.9166666667rem;
  color: var(--color-brandBlue);
  line-height: 0.9;
}

@media screen and (min-width: 60rem) {
  .section-about {
    text-align: center;
  }
}
/* end of about */
/* approach */
.section-approach {
  z-index: 1;
  grid-area: approach;
  color: white;
  background-color: var(--color-brandDarkGreen);
}

.section-approach .heading-cap {
  color: white;
}

.section-approach .intro {
  margin-top: 0;
  font-family: var(--fontFamily-heading);
  font-size: 1.1666666667rem;
  line-height: 1.333333333rem;
}

/* end of approach */
/* contact */
.section-contact {
  z-index: 2;
  grid-area: contact;
  color: white;
  background-color: var(--color-brandOrange);
}

.section-contact .heading-cap {
  color: white;
}

.section-contact .intro {
  margin-top: 0;
  font-family: var(--fontFamily-heading);
  font-size: 1.1666666667rem;
  line-height: 1.333333333rem;
}

/* end of contact */
/* site footer */
.site-footer {
  width: 100%;
  max-width: var(--widthLimit);
  padding: var(--siteFooter-vPadding) var(--siteFooter-hPadding);
  color: white;
  background-color: #333333;
  font-size: clamp(12px, 0.8333333333vw, 0.6666666667rem);
  text-align: center;
}