@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Figtree", Arial, sans-serif;
  background: #014eaa;
  color: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-width: 320px; }

.splash {
  position: relative;
  isolation: isolate;
  min-height: 540px;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #014eaa;
}

.background {
  position: absolute;
  inset: auto 0 0;
  height: 102.681993%;
  background: url("assets/background-ar.jpg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.brand {
  position: absolute;
  top: 12.222222%;
  left: 50%;
  width: 257.4813px;
  height: auto;
  /* Figma centers the 230px wordmark; the registered mark extends to its right. */
  transform: translateX(-115px);
}

h1 {
  position: absolute;
  top: 46.37517%;
  left: 50%;
  width: 600px;
  max-width: calc(100% - 48px);
  margin: 0;
  transform: translateX(-50%);
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  text-align: center;
  white-space: nowrap;
}

.mobile-break { display: none; }

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 184px;
  background: linear-gradient(to bottom, rgba(1,24,64,0) 0%, rgba(1,24,64,.05) 20%, rgba(1,24,64,.18) 40%, rgba(1,24,64,.4) 60%, rgba(1,24,64,.66) 80%, rgba(1,24,64,.85) 100%);
}

.footer p {
  position: absolute;
  bottom: 32px;
  width: 100%;
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

@media (min-width: 600px) and (max-width: 1023px) {
  .splash { min-height: 640px; }
  .background {
    left: -21.552239%;
    right: auto;
    width: 207.761192%;
    height: 100%;
  }
  .brand {
    top: 11.71875%;
    width: 201.5071px;
    transform: translateX(-90px);
  }
  h1 { top: 38.734621%; width: 461px; font-size: 20px; line-height: 28px; }
  .footer {
    height: 182px;
    background: linear-gradient(to bottom, rgba(1,24,64,0) 0%, rgba(1,24,64,.05) 14.893679%, rgba(1,24,64,.18) 30.209231%, rgba(1,24,64,.4) 50.237262%, rgba(1,24,64,.66) 72.746015%, rgba(1,24,64,.85) 100%);
  }
  .footer p { font-size: 18px; line-height: 22px; }
}

@media (max-width: 599px) {
  .splash { min-height: 600px; }
  .background {
    left: 0;
    right: auto;
    width: 170%;
    height: auto;
    aspect-ratio: 1566 / 1005;
  }
  .brand {
    top: 11.848341%;
    width: 167.9226px;
    transform: translateX(-75px);
  }
  h1 { top: 41.730105%; width: 250px; font-size: 18px; line-height: 25px; }
  .mobile-break { display: initial; }
  .footer {
    height: 179px;
    background: linear-gradient(to bottom, rgba(1,24,64,0) 0%, rgba(1,24,64,.05) 16.399474%, rgba(1,24,64,.18) 28.131059%, rgba(1,24,64,.4) 45.448282%, rgba(1,24,64,.66) 67.408878%, rgba(1,24,64,.85) 100%);
  }
  .footer p { font-size: 16px; line-height: 19px; }
}