@import url(color.css);
@import url(font.css);
@import url(input.css);
@import url(navigation.css);

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Museo Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh;
  color: var(--text-color);
  background-color: var(--bg-color);
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  --content-width: 768px;
  --icon-size: 96px;
  --icon-small-size: calc(var(--icon-size) / 3);
  --icon-large-size: calc(var(--icon-size) * 2);
}

hr {
  background-color: var(--bg-grey);
  height: 1px;
  border: none;
  margin: 1.618em 0;
  padding: 0;
}

.text-center {
  text-align: center;
}

#hero svg {
  --animation-time: 1s;
  overflow: visible;
}

#hero svg #b {
  animation: calc(var(--animation-time) * 0.83) fmsintro cubic-bezier(0.445, 0.050, 0.550, 0.950);
  transform-origin: 25px 30px;
}

#hero svg #g {
  animation: calc(var(--animation-time) * 0.62) fmsintro cubic-bezier(0.445, 0.050, 0.550, 0.950);
  transform-origin: 70px 85px;
}

#hero svg #r {
  animation: calc(var(--animation-time) * 1) fmsintro cubic-bezier(0.445, 0.050, 0.550, 0.950);
  transform-origin: 60px 6px;
}

#hero svg #b-out path {
  animation: calc(var(--animation-time) * 0.76) fmsoutro cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

#hero svg #g-out path {

  animation: calc(var(--animation-time) * 0.38) fmsoutro cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

#hero svg #r-out path {
  animation: calc(var(--animation-time) * 1) fmsoutro cubic-bezier(0.445, 0.050, 0.550, 0.950);
}

@keyframes fmsintro {
  from {
    stroke-dasharray: 0, 253;
    stroke-width: 0;
    stroke: transparent;
  }

  to {

  }
}

@keyframes fmsoutro {
  from {
    stroke: var(--bg-color);
  }

  to {

  }
}

.noscroll {
  overflow: hidden;
}

h1 {
  font-size: 1.62em;
}

h2 {
  font-weight: 400;
  font-size: 2.618em;
  margin-top: 0;
}

h3 {
  font-size: 1.618em;
  font-weight: 500;
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 1.618em 2.618em 1.618em;
  box-sizing: border-box;
  background-color: var(--bg-color);
  position: relative;
  min-height: calc(100vh);


  padding-top: 101px;
  margin-top: -101px;
}

section > * {
  width: 100%;
  max-width: var(--content-width);
}

section#hero h2 {
  font-weight: 300;
  line-height: 1em;
}

section#hero p {
  font-size: 1.38em;
  margin-top: 0;
  box-sizing: border-box;
  padding-right: 15vw;
}

section#hero {
  height: calc(100vh - 101px);
  box-sizing: border-box;
  overflow: visible;
}

section#hero svg {
  max-height: calc(38vh - 101px);
  max-width: calc(38vh - 101px);
  margin-bottom: 2.62em;
  -webkit-user-select: none;
  user-select: none;
}

.section-odd {
  background-color: var(--bg-grey);
}

.face-grid-container {
  display: flex;
  align-items: flex-start;
}

.face-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  padding: .618em;
  border-radius: .618em;
}

.face-grid li {
  list-style: none;
  align-items: flex-start;
  display: flex;
  margin: 0;
  padding: 0;
}

.face-grid li img {
  background: white;
  height: 32px;
  width: 32px;
  transition: transform .15s ease-out;
  transition-property: transform, box-shadow;
  box-shadow: 0 0 0 hsla(0,0%,0%,0.618);
}

.face-grid:hover li img {
  transition: none;
}

.face-grid li:hover img {
  transform: scale(1.618);
  box-shadow: 0 10px 10px hsla(0,0%,0%,0.618);
}

.strategy-board {
  margin: 1.618em 0 0 0;
  padding: 0;
  display: flex;
  grid-gap: 1.618em;
}

.strategy-board > li {
  flex: 1;
  list-style: none;
  padding: 10px;
  background: var(--bg-grey);
  font-weight: 500;
  text-align: center;
  border-radius: .618em;
}

.strategy-board ul {
  /*flex: 1;*/
  /*margin-top: 10px;*/
  margin: 10px -10px 0 -10px;
  border-top: 1px solid var(--bg-color);
  font-weight: 400;
  text-align: left;
  padding: 1em 0 .618em 1.618em;
  background: var(--bg-color);
  /*display: flex;*/
  min-height: 100%;
  list-style-type: initial;
  /*border-radius: .38em;*/
  /*margin: 0;*/
  /*padding: 0;*/
  /*list-style: none;*/
}

.strategy-board ul li {
  margin-bottom: .618em;
}

.services-list {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.services-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.services-list li:not(:last-child) {
  margin-right: 4.618em;
}

.services-list li {
  display: flex;
}

.services-list li:not(:last-child) {
  margin-bottom: 1.618em;
}

.services-list h3 {
  margin-top: 0;
  margin-bottom: 0.618em;
}

.services-list li .description {
  flex: 1;
  max-width: 568px;
}

.services-list li svg {
  background: var(--bg-color);
  border-radius: calc(((var(--icon-small-size) + 2em) / 2) * 0.38);
  padding: 1em;
  height: var(--icon-small-size);
  width: var(--icon-small-size);
  margin-right: 1.618em;
}

.project-list {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 1em;
  grid-gap: calc(var(--icon-size) / 2) 2.618em;
}

.project-list li {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.project-list h3 {
  margin-top: 0.618em;
}

.project-list li svg,
.project-list li img {
  background: var(--bg-grey);
  border-radius: calc((var(--icon-size) / 2) * 0.38);
  height: var(--icon-size);
  width: var(--icon-size);
  transition: background-color .24s ease-out;
}

section#contact .icon-btn {
  flex-direction: column;
}

section#contact .icon-btn:hover svg path,
section#contact .icon-btn:active svg path {
  fill: white;
}


.logo-grid {
  display: grid;
  margin: 0;
  padding: 0;
  /*grid-template-columns: repeat( auto-fit, minmax(207px, 1fr) );*/
  grid-template-columns: repeat(2, 1fr);
}

.logo-grid li {
  list-style: none;
  margin: 1em;
  padding: 1.38em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--bg-grey);
  border-radius: .618em;
  overflow: hidden;
}

.section-odd .logo-grid li {
  background: var(--bg-color);
}

.logo-grid img {
  display: block;
  align-self: center;
  object-fit: contain;
  width: 100%;
  margin-bottom: 1em;
  height: var(--icon-size);
  width: var(--icon-size);
}

.logo-grid small {
  color: var(--fms-blue);
  font-weight: 500;
}


.contact-buttons {
  width: 100%;
  display: flex;
}

.contact-buttons .btn {
  margin: 0;
  border-radius: calc(((var(--icon-small-size) + 2em) / 2) * 0.38);
}

.contact-buttons:hover .btn {
  transition: none;
}

.contact-buttons svg {
  height: var(--icon-large-size);
  width: var(--icon-large-size);
}

.contact-buttons > *:not(:last-child) {
  margin-right: 2.62em;
}

@media (max-width: 640px) {
  h1 {
    font-size: 1.38em;
  }

  h2 {
    font-weight: 300;
    font-size: 2.38em;
  }

  h3 {
    font-size: 1.38em;
    font-weight: 500;
  }

  .project-list {
    grid-gap: calc(var(--icon-size) / 2) 1em;
  }

  .project-list h3 {
    font-size: .83em;
    font-weight: 600;
  }

  section#hero p {
    font-size: 1.24em;
  }
}

.contact-buttons a {
  max-width: none;
  height: 38vh;
  padding-bottom: 2.618em;
}

.contact-buttons a svg {
  flex: 1;
}

@media (orientation: portrait) {
  .face-grid-container {
    flex-direction: column-reverse;
  }

  .face-grid {
    align-self: flex-start;
    grid-template-columns: repeat(8, 1fr);
  }

  .contact-buttons {
    flex-direction: column;
  }

  .contact-buttons a {
    height: 24vh;
    padding-bottom: 1em;
  }

  .contact-buttons > *:not(:last-child) {
    margin-right: 0;
    margin-bottom: 2.62em;
  }

  .services-list {
    grid-template-columns: repeat(1, 1fr);
  }

  .services-list li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 1.618em;
  }
}

@media (max-width: 768px) {
  body {
    --icon-size: 96px;
    --content-width: 640px;
  }

  section#hero svg {
    max-height: calc(38vh - 101px);
    max-width: calc(38vh - 101px);
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 1em;
  }

  section#hero p {
    font-size: 1em;
  }

  h2 {
    font-size: 2.15em;
    font-weight: 500;
  }

  body {
    --icon-size: 64px;
    --icon-large-size: 128px;
  }

  nav ul {
    font-size: 1.618em;
  }

  .contact-buttons > *:not(:last-child) {
    margin-right: 0;
    margin-bottom: 1.618em;
  }

  .contact-buttons a {
    height: 24vh;
    padding-bottom: 1em;
  }
}

@media (max-height: 480px) {
  body {
    --icon-size: 64px;
    --icon-large-size: 128px;
  }

  nav label {
    height: 70px;
  }

  nav ul {
    max-height: calc(100vh - 70px);
    padding-top: 70px;
  }

  nav h1 {
    height: 70px;
  }

  nav ul {
    font-size: 1.618em;
  }

  section {
    padding-top: 70px;
    margin-top: -70px;
  }

  h2 {
    font-size: 1.618em;
    font-weight: 500;
  }

  h3 {
    font-size: 1.15em;
    font-weight: 600;
  }

  section#hero {
    height: calc(100vh - 70px);
  }

  nav label {
    background-size: 24px;
  }

  nav a svg {
    height: 24px;
    width: auto;
  }

  .menu-prep {
    height: 70px;
  }

  section#hero svg {
    max-height: calc(38vh - 70px);
    max-width: calc(38vh - 70px);
    margin-bottom: 1em;
  }

  section#hero p {
    font-size: 1em;
  }

  .project-list {
    grid-gap: calc(var(--icon-size) / 2) 1em;
  }

  .project-list h3 {
    font-size: .83em;
    font-weight: 600;
  }

  .services-list {
    grid-template-columns: repeat(1, 1fr);
  }

  .contact-buttons > *:not(:last-child) {
    margin-right: 1em;
  }

  .contact-buttons a {
    height: 38vh;
    padding-bottom: 1em;
  }
}

@media (min-width: 640px) {
  body {
    --content-width: 560px;
  }
}

@media (min-width: 768px) {
  body {
    --content-width: 640px;
  }

  .flexy-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .flexy-row > * {
    flex: 1;
  }

  .flexy-row h3 {
    max-width: calc(var(--content-width) / 3);
  }

  .flexy-row > .logo-grid {
    overflow: hidden;
  }
}


@media (min-width: 800px) {
  body {
    --content-width: 640px;
  }
}


@media (min-width: 960px) {
  body {
    --content-width: 800px;
  }

  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .strategy-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .strategy-board li {
    flex: 2;
  }
}


@media (min-width: 1136px) {
  body {
    --content-width: 960px;
  }

  .services-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  body {
    --content-width: 1024px;
  }
}

@media (min-width: 1440px) {
  body {
    --content-width: 1136px;
    --icon-size: 128px;
  }
}

@media (min-width: 1680px) {
  body {
    --content-width: 1440px;
    --icon-size: 128px;
  }

  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1920px) {
  body {
    --content-width: 1680px;
    --icon-size: 128px;
    font-size: 24px;
  }

  #menu-toggle:checked + nav label,
  nav label {
    background-size: 32px;
  }

  nav a svg {
    height: 32px;
    width: auto;
  }

  nav h1 {
    padding-left: calc(64px + 1.38em);
  }
}

@media (min-width: 2560px) {
  body {
    --content-width: 1920px;
    --icon-size: 256px;
    --icon-large-size: 256px;
    font-size: 24px;
  }

  nav h1 {
    padding-left: calc(64px + 2.38em);
  }

  nav label svg {
    height: 48px;
    width: 48px;
  }

  #menu-toggle:checked + nav label,
  nav label {
    background-size: 48px;
  }

  nav a svg {
    height: 48px;
    width: auto;
  }
}