body {
  --color-lb: #006195;
  --color-accent: #5486a1;
  --color-black: #151b1f;
  --color-black-border: #141414;
  --color-border: #dedede;
  --color-white: #f2f0f0;
  --shadow-lighter: 1px 1px 3px rgba(0,0,0,.1);
  --shadow-light: 3px 3px 5px rgba(0,0,0,.2);
  --shadow-medium: 3px 3px 5px rgba(0,0,0,.3);
  --shadow-dark: 3px 3px 5px rgba(0,0,0,.5);
  --page-padding: 20vw;

  padding: 0;
  margin: 0;
  text-align: center;
  background-color: var(--color-white);
  color: var(--color-black);
}

p {
  font-family: Jost, sans-serif;
  font-size: 1.4em;
  font-weight: 300;
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
}

li {
  font-family: Jost, sans-serif;
  font-size: 1.4em;
  font-weight: 300;
}

b, strong {
  font-weight: 500;
}

h3 {
  font-size: 1.6em;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 1em;

  .button {
    flex: 1 1 0;
    max-width: 10em;
  }
}

.button {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  cursor: pointer;

  font-family: Jost, sans-serif;
  padding: 1em 2em !important;
  border-radius: .5em;
  box-shadow: var(--shadow-light) !important;
  border: solid 1px var(--color-black-border) !important;
  text-transform: uppercase;

  transition: all 200ms;

  &:hover, &:active, &:focus-visible {
    color: var(--color-lb) !important;
    box-shadow: var(--shadow-medium) !important;
  }
}

.link {
  font-family: Jost, sans-serif;
  font-size: 1.4em;
  font-weight: 300;

  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 6px;
  transition: all 200ms;

  &:hover, &:active, &:focus-visible {
    filter: opacity(70%);
    text-underline-offset: 8px;
  }
}

.radio {
  position: relative;
  bottom: -4.5em;
  left: calc(85vw - var(--page-padding));
  z-index: 4;
  width: 0;
  height: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  filter: drop-shadow(2px 2px 1px rgba(0,0,0,.3));

  .radio-logo {
    height: 3em;
    width: 8em;
  }

  .radio-buttons {
    display: flex;
    justify-content: center;
    gap: .5em;

    .radio-button {
      height: 2em;
      cursor: pointer;
    }
  }
}

header {
  height: 4rem;
  background-color: var(--color-black);
  box-shadow: var(--shadow-light);
  z-index: 1;
  padding: 0 var(--page-padding);

  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2em;

  .header-logo {
    margin-right: auto;
    width: 8em;
  }

  & a:not(.header-logo) {
    font-family: Jost, sans-serif;
    font-weight: 500;
    color: var(--color-white);
    text-transform: uppercase;
    font-size: .9rem;
    cursor: pointer;
    padding-top: .3em;

    text-decoration: none;
    text-decoration-thickness: 0;
    text-underline-offset: 3px;
    transition: 200ms;

    &:hover {
      color: var(--color-white);
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 6px;
    }
  }
}


.hero {
  background:
      repeating-linear-gradient(135deg, var(--color-black) 0px, var(--color-black) 10px,transparent 10px, transparent 11px),
      repeating-linear-gradient(22.5deg, var(--color-black) 0px, var(--color-black) 10px,transparent 10px, transparent 11px),
      linear-gradient(90deg, var(--color-lb), var(--color-accent));
  padding-top: 4em !important;
  padding-bottom: 6em !important;
  margin-bottom: 2rem;

  .section-content {
    display: flex;
    flex-direction: column;
    gap: 2em;
  }

  .hero-heading {
    font-size: 4em;
    font-weight: 800 !important;
    color: var(--color-white);
    letter-spacing: -2px !important;
    margin: 0 !important;
  }

  .hero-text {
    color: var(--color-white);
    margin: 0 0 .5em !important;
  }
}

.section {
  padding: 0 var(--page-padding);
  font-family: Jost sans-serif !important;

  .section-content {
  }
}

.section-full {
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  font-family: Jost sans-serif !important;
}

.section-content {
  padding-top: 2em;
  padding-bottom: 2em;

  .section-heading {
    font-size: 2em;
    margin-bottom: 2em;
  }
}

.section-highlight {
  /*background: linear-gradient(30deg, var(--color-accent), var(--color-lb));*/
  /*background: radial-gradient(circle at 70%, var(--color-accent), var(--color-lb));*/
  background-image:
      repeating-linear-gradient(135deg, var(--color-black) 0px, var(--color-black) 10px,transparent 10px, transparent 11px),
      repeating-linear-gradient(22.5deg, var(--color-black) 0px, var(--color-black) 10px,transparent 10px, transparent 11px),
      linear-gradient(90deg, var(--color-lb), var(--color-accent));
  color: var(--color-white);

  .section-content {
    padding-top: 6em;
    padding-bottom: 6em;
  }
}

.box {
  width: 80%;
  margin: auto;
  color: var(--color-white);
  background-color: var(--color-black);
  border-radius: 2px;
  padding: 1em 2em;
  box-shadow: var(--shadow-medium);
}

.card-wrapper {
  display: flex;
  gap: 2em;

  .card {
    box-shadow: var(--shadow-medium);
    border: solid var(--color-border) 1px;
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: 1em;
    padding: 2em 1em;

    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    transition: 200ms;

    & h3, & p {
      margin: 0 !important;
    }

    .card-icon {
      width: 8em;
    }

    .card-text {
      font-size: 1.2em;
    }

    &:hover {
      box-shadow: var(--shadow-dark);
      scale: 1.01;
    }
  }
}

.bullet-points-wrapper {
  display: flex;
  max-width: 90%;
  margin: auto;

  .bullet-points {
    text-align: left;
    flex: 1 1 0;

    & li {
      list-style-type: disc;
      margin: .2em 0;

      &::marker {
        color: var(--color-lb);
      }
    }
  }
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 4rem;
  place-items: center;

  margin: 2rem auto 0;
  max-width: 800px;

  .portfolio-logo {
    margin: 0;
    max-width: 10em;
  }
}

.contact-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24em, 1fr));
  gap: 1em;

  & p {
    text-align: left;
  }
}

.u-form-vertical.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  align-items: inherit;

  background-color: var(--color-white);
  padding: 2em;
  font-family: Jost, sans-serif;
  border-radius: .5em;
  box-shadow: var(--shadow-light);

  .contact-form-group {
    display: flex;
    flex-direction: column;
    gap: .5em;
    text-align: left;
  }

  & input, & textarea {
    padding: .5em 0;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-white);

    &:focus {
      outline: solid 2px var(--color-lb);
      outline-offset: 4px;
    }
  }
}

.u-form-send-message-close {
  margin-left: 1em;
  color: inherit;

  &:hover, &:active, &:focus-visible {
    color: inherit;
  }
}

@media only screen and (max-width: 1399px) {
  body {
    --page-padding: 12vw;
  }
}

@media only screen and (max-width: 1199px) {
  body {
    --page-padding: 8vw;
  }

  .card-wrapper {
    gap: 1.5em;
  }
}

@media only screen and (max-width: 991px) {
  body {
    --page-padding: 4vw;
    font-size: 14px;
  }

  .card-wrapper {
    gap: 1em;
  }
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 12px;
  }

  .card-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 1.5em;

    .card {
      max-width: 80vw;
    }
  }

  .bullet-points-wrapper {
    flex-direction: column;

    .bullet-points {
      margin: 0;
      max-width: 100%;
    }
  }

  .box {
    padding: 1em;
    width: auto;
  }
}

@media only screen and (max-width: 575px) {
  .hero .hero-heading {
    font-size: 3em;
  }
}