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

@font-face {
  font-family: "SG Static";
  src: url("/assets/fonts/space-grotesk-regular-static.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-v6-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/nunito-sans-latin-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #031a29;
  --gold: #b28f6c;
  --gold-dark: #8f6c4a;
  --bronze: #a48668;
  --light: #ededed;
  --ink: #3d3d3d;
  --ink2: #1f1f1f;
  --white: #ffffff;
  --sora: "Sora", sans-serif;
  --sgs: "SG Static", "Space Grotesk", sans-serif;
  --sg: "Space Grotesk", sans-serif;
  --helv: "Arimo", Helvetica, Arial, sans-serif;
  --avenir: "Nunito Sans", sans-serif;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--light);
  color: var(--ink);
  font-family: var(--sgs);
  font-synthesis: weight style;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
  padding: 0;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

b,
strong {
  font-weight: 700;
}

button,
input {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--navy);
  padding: 8px 12px;
  font-family: var(--sgs);
}

.skip:focus {
  left: 8px;
  top: 8px;
}

:focus-visible {
  outline: 2px solid #5e97ff;
  outline-offset: 2px;
}

.frame {
  position: relative;
  margin: 0 auto;
}

.strip {
  display: block;
  height: 1rem;
  background: var(--bronze);
}

.rt p.sp {
  margin-top: var(--lh);
}

.c-gold {
  color: var(--gold);
}

.c-bronze {
  color: var(--bronze);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--gold);
  color: var(--white);
  border: 1px solid var(--ink);
  font-family: var(--sgs);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.4;
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--gold-dark);
  color: var(--white);
}

.btn--hero {
  border-color: #000;
}

.btn--learn {
  background: var(--bronze);
  border-color: var(--ink2);
  font-size: 1.4rem;
  letter-spacing: .1em;
  gap: .4rem;
}

.btn--learn img {
  width: 1.2rem;
  height: 1.2rem;
}

.btn--learn:hover,
.btn--learn:focus-visible {
  background: var(--ink2);
  color: var(--light);
}

.btn--learn:hover img,
.btn--learn:focus-visible img {
  filter: brightness(0) invert(93%);
}

.site-header {
  background: var(--navy);
  position: relative;
  z-index: 20;
}

.nav a {
  font-family: var(--sgs);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 3rem;
  color: #fffffe;
  padding: 0 1.5rem;
  display: block;
  white-space: nowrap;
  transition: color .4s ease;
}

.nav a[aria-current="page"] {
  color: var(--gold);
}

.nav-list {
  display: flex;
  justify-content: flex-end;
}

.nav-more {
  position: relative;
}

.nav-more>button {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sgs);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 3rem;
  color: #fffffe;
  padding: 0 .5rem;
}

.nav-more-list {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--white);
  min-width: 100%;
  padding: .4rem 0;
}

.nav-more.open .nav-more-list {
  display: block;
}

.nav-more-list a {
  color: var(--ink);
  padding: 0 1.2rem;
}

.nav-more-list a[aria-current="page"] {
  color: var(--gold);
}

.menu-toggle {
  display: none;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--light);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu ul {
  width: 18.8rem;
  margin: 5.8rem auto 0;
}

.mobile-menu li {
  border-bottom: 1px solid var(--ink);
}

.mobile-menu a {
  display: block;
  text-align: center;
  font-family: var(--sgs);
  font-size: 1.6rem;
  line-height: 5.6rem;
  color: var(--ink);
}

.mobile-menu a[aria-current="page"] {
  color: var(--ink2);
}

.mobile-menu .menu-close {
  position: absolute;
  top: 11.3rem;
  left: calc(50% + 11.4rem);
  width: 2.6rem;
  height: 2.6rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mobile-menu .menu-close::before,
.mobile-menu .menu-close::after {
  content: "";
  position: absolute;
  left: .2rem;
  top: 1.2rem;
  width: 2.2rem;
  height: .2rem;
  background: var(--ink);
  border-radius: .2rem;
  transform: rotate(45deg);
}

.mobile-menu .menu-close::after {
  transform: rotate(-45deg);
}

.to-top {
  display: none;
}

.site-footer {
  background: var(--navy);
  color: var(--white);
  font-family: var(--sgs);
}

.site-footer .f-text {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: -.01em;
}

.site-footer a:hover {
  text-decoration: underline;
}

.card {
  background: linear-gradient(rgba(0, 0, 0, .09) 0, rgba(0, 0, 0, .086) 1rem, rgba(0, 0, 0, .071) 2.5rem, rgba(0, 0, 0, .043) 5rem, rgba(0, 0, 0, .016) 7.5rem, rgba(0, 0, 0, .004) 9rem, rgba(0, 0, 0, 0) 10rem) 0 0 / 100% 10rem no-repeat, var(--white);
  border: 1px solid #324158;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------------------- form -- */
.demo-form label {
  display: block;
  font-family: var(--avenir);
  font-weight: 300;
  color: var(--white);
}

.demo-form .req::after {
  content: " *";
}

.demo-form input,
.demo-form select {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(61, 61, 61, .5);
  border-radius: 0;
  background: var(--white);
  color: var(--gold);
  font-family: var(--avenir);
  font-weight: 300;
  padding: .3rem .3rem .3rem .7rem;
  outline: none;
  transition: border .5s ease;
  -webkit-appearance: none;
  appearance: none;
}

.demo-form input:hover,
.demo-form input:focus,
.demo-form select:hover,
.demo-form select:focus {
  border-bottom-width: 2px;
}

.demo-form input::placeholder {
  color: var(--gold);
  opacity: 1;
}

.demo-form input[aria-invalid="true"],
.demo-form select[aria-invalid="true"] {
  border-bottom: 2px solid #ff4040;
}

.demo-form select {
  padding-right: 4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b28f6c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 1.2rem auto;
}

.demo-form button[type="submit"] {
  width: 100%;
  background: var(--gold);
  color: var(--white);
  border: 1px solid var(--ink2);
  font-family: var(--avenir);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}

.demo-form button[type="submit"]:hover {
  background: var(--light);
  color: var(--ink2);
}

.demo-form button[disabled] {
  opacity: .7;
  cursor: progress;
}

.demo-form .cf-box {
  position: absolute;
}

.form-status {
  font-family: var(--avenir);
  color: var(--white);
}

.form-status[data-kind="error"] {
  color: #ff8a8a;
}

.nf {
  background: var(--navy);
  color: var(--white);
  padding: 12rem 2rem;
  text-align: center;
}

.nf h1 {
  font: 700 4.4rem/1.2 var(--sora);
  color: var(--gold);
}

.nf p {
  margin: 2rem 0 3rem;
  font: 400 2rem/1.4 var(--sgs);
}

.nf .btn {
  width: 16rem;
  height: 5rem;
  margin: 0 auto;
}

@media (min-width: 1000px) {
  html {
    font-size: min(10px, calc(100vw / 144));
  }

  .frame {
    width: 144rem;
    max-width: 100%;
  }

  .site-header .frame {
    height: 7rem;
    display: flex;
    align-items: flex-start;
    padding: 0 12.8rem 0 9.2rem;
  }

  .logo {
    margin-top: .6rem;
    width: 5.8rem;
    height: 5.8rem;
  }

  .logo img {
    width: 5.8rem;
    height: 5.8rem;
  }

  .nav {
    margin-left: auto;
    margin-top: 2rem;
  }

  .btn--hdr {
    margin-top: 1rem;
    width: 16rem;
    height: 5rem;
  }

  .site-footer {
    height: 43.3rem;
  }

  .site-footer .frame {
    height: 100%;
  }

  .f-rule {
    position: absolute;
    left: 12rem;
    top: 3.3rem;
    width: 120rem;
    border-top: 1px solid var(--white);
  }

  .f-logo {
    position: absolute;
    left: 12rem;
    top: 2.9rem;
    width: 39.3rem;
    height: 36.4rem;
  }

  .f-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .f-text {
    position: absolute;
    left: 86.8rem;
    width: 25.5rem;
  }

  .f-site {
    top: 6.1rem;
  }

  .f-phone {
    top: 9.5rem;
  }

  .f-email {
    top: 12.8rem;
  }

  .f-addr {
    top: 16.1rem;
    width: 18.3rem;
  }

  .f-copy {
    top: 28.6rem;
  }

  .f-privacy {
    top: 7.2rem;
    left: 111.1rem;
    width: 18.3rem;
  }

  .f-access {
    top: 10.6rem;
    left: 111.1rem;
    width: 18.3rem;
  }

  .m-strip {
    display: none;
  }

  .h-hero {
    position: relative;
    height: 47rem;
    background: var(--navy);
    overflow: hidden;
  }

  .h-hero>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .h-hero .frame {
    height: 100%;
  }

  .h-kicker {
    position: absolute;
    left: 9.2rem;
    top: 3.2rem;
    width: 64.9rem;
    font: 700 2.6rem/1.2 var(--sora);
    letter-spacing: -.02em;
    color: var(--gold);
  }

  .h-title {
    position: absolute;
    left: 9.2rem;
    top: 10.7rem;
    width: 62.6rem;
    font: 700 4.5rem/1.25 var(--sora);
    color: var(--light);
  }

  .h-lead {
    position: absolute;
    left: 9.2rem;
    top: 28.9rem;
    width: 56.3rem;
    font: 400 2rem/3.34rem var(--sgs);
    color: var(--light);
  }

  .h-hero .btn {
    position: absolute;
    left: 9.2rem;
    top: 38.2rem;
    width: 16rem;
    height: 4rem;
  }

  .h-ops {
    background: var(--white);
    height: 85rem;
  }

  .h-ops .frame {
    padding: 2.6rem 0 0 11rem;
  }

  .h-ops h2 {
    width: 55.7rem;
    font: 700 6.4rem/1.2 var(--sora);
    letter-spacing: -.02em;
    color: var(--navy);
  }

  .h-ops .rt {
    --lh: 3.36rem;
    width: 96.6rem;
    font: 400 2.4rem/3.36rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--ink);
  }

  .h-platform {
    background: var(--white);
    height: 33.6rem;
  }

  .h-platform .frame {
    height: 33.6rem;
  }

  .h-platform .p-kicker {
    position: absolute;
    left: 33rem;
    top: 2.2rem;
    width: 78rem;
    text-align: center;
    font: 700 3.2rem/4rem var(--sora);
    color: var(--gold);
  }

  .h-platform h2 {
    position: absolute;
    left: 33rem;
    top: 6.2rem;
    width: 78rem;
    text-align: center;
    font: 700 4rem/5rem var(--sora);
    color: var(--navy);
  }

  .h-platform .p-lead {
    position: absolute;
    left: 23rem;
    top: 12.4rem;
    width: 98rem;
    text-align: center;
    font: 400 1.8rem/2.34rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--ink);
  }

  .cards {
    position: absolute;
    left: 32.2rem;
    top: 19.5rem;
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
  }

  .card {
    position: relative;
    width: 18rem;
    height: 8.3rem;
  }

  .card--tall {
    height: 10.1rem;
  }

  .card img {
    position: absolute;
  }

  .card .c-label {
    position: absolute;
    top: 5.4rem;
    left: 0;
    width: 100%;
    text-align: center;
    font: 700 1.5rem/1.8rem var(--sora);
    letter-spacing: -.02em;
    color: var(--ink);
  }

  .card--people img {
    left: 6.9rem;
    top: .8rem;
    width: 4.1rem;
    height: 4.1rem;
  }

  .card--projects img {
    left: -.6rem;
    top: -2.7rem;
    width: 19.3rem;
    height: 11.1rem;
  }

  .card--field img {
    left: -1.1rem;
    top: -2.7rem;
    width: 20.3rem;
    height: 11.1rem;
  }

  .card--field .c-label {
    left: 2.7rem;
    width: 10rem;
    text-align: left;
  }

  .card--business img {
    left: 6.8rem;
    top: .6rem;
    width: 4.6rem;
    height: 4.6rem;
  }

  .card--business .c-label {
    left: 1.1rem;
    width: 16.1rem;
    text-align: left;
  }

  .h-core {
    background: var(--bronze);
    height: 83rem;
  }

  .h-core .bg {
    position: relative;
    height: 81.3rem;
    overflow: hidden;
    background: #404656;
  }

  .h-core .bg>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
  }

  .h-core .frame {
    height: 100%;
  }

  .h-core h2 {
    position: absolute;
    left: 9.2rem;
    top: 4.2rem;
    width: 98.2rem;
    font: 700 4.4rem/5.28rem var(--sora);
    letter-spacing: -.02em;
    color: var(--white);
  }

  .h-core h2 .c-bronze {
    color: var(--bronze);
  }

  .h-core h3 {
    position: absolute;
    left: 9.2rem;
    top: 22.6rem;
    width: 36.8rem;
    font: 700 2.2rem/2.64rem var(--sora);
    letter-spacing: -.02em;
    color: var(--white);
  }

  .h-core .c-lead {
    position: absolute;
    left: 9.2rem;
    top: 30.5rem;
    width: 56.3rem;
    font: 400 2rem/3.34rem var(--sgs);
    color: var(--light);
  }

  .pillars {
    position: absolute;
    left: 13.1rem;
    top: 43.8rem;
    display: flex;
  }

  .pillar {
    width: 23.6rem;
    padding-top: 5.5rem;
    text-align: center;
  }

  .pillar img {
    width: 9.1rem;
    height: 8.4rem;
    margin: 0 auto 4rem;
  }

  .pillar p {
    font: 700 1.6rem/2.08rem var(--sora);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .pillar:first-child p {
    letter-spacing: 0;
    line-height: 2.1rem;
  }

  .h-core .rule-l,
  .h-core .rule-r {
    position: absolute;
    top: 71.2rem;
    width: 48rem;
    border-top: 1px solid var(--white);
  }

  .h-core .rule-l {
    left: 13.2rem;
  }

  .h-core .rule-r {
    left: 82.9rem;
  }

  .h-core .tag {
    position: absolute;
    top: 71.9rem;
    width: 48rem;
    text-align: center;
    font: 700 1.5rem/2.505rem var(--sgs);
    color: var(--bronze);
  }

  .h-core .tag-l {
    left: 13.2rem;
  }

  .h-core .tag-r {
    left: 82.9rem;
  }

  .h-core .btn--learn {
    position: absolute;
    left: 64rem;
    top: 71.2rem;
    width: 16rem;
    height: 4rem;
  }

  /* ---- why ---- */
  .w-main {
    background: var(--navy);
    height: 130.6rem;
  }

  .w-main .frame {
    height: 100%;
  }

  .w-main .w-kicker {
    position: absolute;
    left: 9.2rem;
    top: 2.2rem;
    width: 40.7rem;
    font: 700 2.8rem/3.5rem var(--sora);
    color: #fdfbfe;
  }

  .w-main h1 {
    position: absolute;
    left: 9.2rem;
    top: 5.7rem;
    width: 73.2rem;
    font: 700 5.8rem/8.12rem var(--sora);
    letter-spacing: -.02em;
    color: var(--bronze);
  }

  .w-story {
    --lh: 2.52rem;
    position: absolute;
    left: 9.2rem;
    top: 32.8rem;
    width: 69.2rem;
    font: 400 1.8rem/2.52rem var(--sg);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .w-story .sgs {
    font-family: var(--sgs);
  }

  .w-photo {
    position: absolute;
    left: 84.3rem;
    top: 5.7rem;
    width: 42.1rem;
    height: 25.9rem;
    object-fit: cover;
  }

  .w-quote {
    position: absolute;
    left: 84.3rem;
    top: 33.2rem;
    width: 42.1rem;
    height: 15.1rem;
    border: 2px solid var(--white);
    padding: 1.1rem 0 0 .6rem;
    font: 700 2.4rem/3.12rem var(--sora);
    letter-spacing: .01em;
    color: var(--light);
  }

  .w-questions {
    --lh: 2.24rem;
    position: absolute;
    left: 9.2rem;
    top: 56.5rem;
    width: 73.8rem;
    font: italic 700 1.6rem/2.24rem var(--sora);
    letter-spacing: -.01em;
    color: var(--gold);
  }

  .w-center {
    --lh: 2.52rem;
    position: absolute;
    left: 23rem;
    top: 76.2rem;
    width: 97.5rem;
    text-align: center;
    font: 400 1.8rem/2.52rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .w-more {
    position: absolute;
    left: 6.6rem;
    top: 104.5rem;
    width: 130.8rem;
    text-align: center;
    font: 700 2.8rem/3.6rem var(--sora);
    color: var(--bronze);
  }

  .w-created {
    position: absolute;
    left: 23.2rem;
    top: 111.5rem;
    width: 97.5rem;
    text-align: center;
    font: 400 1.8rem/2.52rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .w-built {
    position: absolute;
    left: 6.6rem;
    top: 118.9rem;
    width: 130.8rem;
    text-align: center;
    font: 700 2.8rem/3.6rem var(--sora);
    color: var(--gold);
  }

  .w-main .btn {
    position: absolute;
    left: 64rem;
    top: 123.3rem;
    width: 16rem;
    height: 5rem;
  }

  /* ---- principles ---- */
  .pr-page {
    background: var(--bronze);
  }

  .pr-main {
    background: var(--navy);
  }

  .pr-intro {
    height: 22.2rem;
  }

  .pr-intro .frame {
    height: 100%;
  }

  .pr-intro h1 {
    position: absolute;
    left: 7.9rem;
    top: 6.1rem;
    width: 49.4rem;
    font: 700 4.4rem/5.28rem var(--sora);
    color: var(--light);
  }

  .pr-intro h1 .c-bronze {
    color: var(--bronze);
  }

  .pr-intro p {
    position: absolute;
    left: 72rem;
    top: 3.9rem;
    width: 57rem;
    font: 400 1.6rem/2.88rem var(--sgs);
    color: var(--light);
  }

  .pr-list .frame {
    width: 92.2rem;
    padding-left: 0;
  }

  .pr-item {
    position: relative;
    padding: 3.6rem 0 2.6rem 14rem;
  }

  .pr-num {
    position: absolute;
    left: 3.9rem;
    top: 2.2rem;
    width: 7.4rem;
    text-align: center;
    font: 700 6.7rem/8.04rem var(--helv);
    color: var(--bronze);
  }

  .pr-icon {
    position: absolute;
    left: 3rem;
    top: 13.5rem;
    width: 9.1rem;
    height: 8.4rem;
  }

  .pr-body {
    --lh: 3.22rem;
    width: 70.9rem;
    font: 400 2.3rem/3.22rem var(--sgs);
    letter-spacing: -.01em;
  }

  .pr-body h2 {
    font: 700 2.3rem/2.53rem var(--sora);
    color: var(--white);
    margin-bottom: 2.63rem;
  }

  .pr-body .sg {
    font-family: var(--sg);
  }

  .pr-body .tight {
    line-height: 2.53rem;
    letter-spacing: -.02em;
  }

  .pr-rule {
    margin: 4.2rem 0 0 -11rem;
    width: 45rem;
    height: .5rem;
    border-top: 3px solid var(--bronze);
  }

  .pr-cta {
    padding: 0 0 2.5rem;
  }

  .pr-cta .btn {
    margin: 0 auto;
    width: 16rem;
    height: 5rem;
  }

  .c1 {
    color: var(--white);
  }

  .c2 {
    color: #fdfbfe;
  }

  .c3 {
    color: var(--light);
  }

  /* ---- demo ---- */
  .d-main {
    background: var(--bronze);
    height: 107.6rem;
  }

  .d-main .frame {
    height: 100%;
  }

  .d-left {
    position: absolute;
    left: 6rem;
    top: 6rem;
    width: 52.8rem;
    height: 95.6rem;
    background: var(--navy);
  }

  .d-left h1 {
    position: absolute;
    left: 4.6rem;
    top: 2.8rem;
    width: 43.6rem;
    font: 700 5.6rem/7rem var(--sora);
    color: #fffffe;
  }

  .d-left hr {
    position: absolute;
    left: 3.6rem;
    top: 45.4rem;
    width: 45.6rem;
    margin: 0;
    border: 0;
    border-top: 3px solid var(--light);
  }

  .d-left .rt {
    --lh: 2.6rem;
    position: absolute;
    left: 4.6rem;
    top: 47.6rem;
    width: 31.7rem;
    font: 400 2rem/2.6rem var(--sgs);
    color: var(--white);
  }

  .d-right {
    position: absolute;
    left: 61.8rem;
    top: 6rem;
    width: 76.2rem;
    height: 95.6rem;
    background: var(--navy);
  }

  .demo-form {
    position: absolute;
    left: 15.5rem;
    top: 4.1rem;
    width: 45.6rem;
    height: 45.6rem;
  }

  .demo-form .fld {
    position: absolute;
    width: 20rem;
  }

  .demo-form label {
    font-size: 1.4rem;
    line-height: 1.4rem;
    margin-bottom: .8rem;
  }

  .demo-form input,
  .demo-form select {
    height: 4rem;
    font-size: 1.4rem;
  }

  .fd-first {
    left: 1.3rem;
    top: 3.6rem;
  }

  .fd-last {
    left: 24.3rem;
    top: 3.6rem;
  }

  .demo-form .fd-email {
    left: 1.3rem;
    top: 10.7rem;
    width: 43rem;
  }

  .fd-phone {
    left: 1.3rem;
    top: 18.8rem;
  }

  .fd-company {
    left: 24.2rem;
    top: 18.8rem;
  }

  .fd-contact {
    left: 1.3rem;
    top: 28.2rem;
  }

  .demo-form .f-submit {
    position: absolute;
    left: 1.3rem;
    top: 35.7rem;
    width: 43rem;
  }

  .demo-form button[type="submit"] {
    height: 6rem;
    font-size: 2rem;
  }

  .form-status {
    position: absolute;
    left: 1.3rem;
    top: 43rem;
    width: 43rem;
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .demo-form .cf-box {
    left: 1.3rem;
    top: 48.5rem;
  }
}

/* ============================================================ MOBILE === */
@media (max-width: 999.98px) {
  html {
    font-size: min(calc(100vw / 32), 16px);
  }

  .frame {
    width: 32rem;
    max-width: 100%;
  }

  .nav,
  .to-top-hide {
    display: none;
  }

  /* Wix's spacers are empty paragraphs, so each is one line box tall, and
     Safari rounds a line box to whole pixels (23.8px becomes 23px). A margin
     is not rounded, so with margins every spacer came out up to a pixel taller
     than Wix's in Safari and the why page drifted 5px. An empty line here
     rounds the same way Wix's does. */
  .rt p.sp {
    margin-top: 0;
  }

  .rt p.sp::before {
    content: "\a0";
    display: block;
  }

  .site-header {
    height: 19rem;
  }

  .site-header .frame {
    height: 100%;
  }

  .logo {
    position: absolute;
    left: 13rem;
    top: 2rem;
    width: 6rem;
    height: 6rem;
  }

  .logo img {
    width: 6rem;
    height: 6rem;
  }

  .btn--hdr {
    position: absolute;
    left: 8rem;
    top: 11.9rem;
    width: 16rem;
    height: 4.2rem;
    font-size: 1.49333rem;
    line-height: 2.09067rem;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    left: 27.4rem;
    top: 11.3rem;
    width: 2.6rem;
    height: 2.6rem;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .menu-toggle span {
    position: absolute;
    left: .2rem;
    width: 2.2rem;
    height: .2rem;
    border-radius: .2rem;
    background: var(--white);
  }

  .menu-toggle span:nth-child(1) {
    top: .3rem;
  }

  .menu-toggle span:nth-child(2) {
    top: 1.2rem;
  }

  .menu-toggle span:nth-child(3) {
    top: 2.1rem;
  }

  .m-strip {
    width: 28rem;
    margin: 0 auto;
    height: 1rem;
    background: var(--bronze);
  }

  .strip {
    display: none;
  }

  /* Wix's own back-to-top vector (BACK_TO_TOP_BUTTON): a #ededed disc, a #1f1f1f ring, a #3d3d3d chevron. */
  .to-top {
    display: block;
    position: fixed;
    right: calc(50% - 14rem);
    bottom: 4rem;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 160 160'%3E%3Cpath fill='%23ededed' d='M180 100c0 44.183-35.817 80-80 80s-80-35.817-80-80 35.817-80 80-80 80 35.817 80 80z'/%3E%3Cpath fill='%233d3d3d' d='M63.412 114L60 109.649 100.034 78 140 109.652 136.584 114l-36.55-28.3L63.412 114z'/%3E%3Cpath fill='%231f1f1f' d='M100 24c-41.974 0-76 34.026-76 76s34.026 76 76 76 76-34.026 76-76-34.026-76-76-76zm0-4c44.183 0 80 35.817 80 80s-35.817 80-80 80-80-35.817-80-80 35.817-80 80-80z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    z-index: 30;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s .5s, opacity .5s;
  }

  .to-top.show {
    opacity: 1;
    visibility: visible;
    transition: visibility 0s, opacity .5s;
  }

  /* FLOW, NOT COORDINATES. Wix's mobile layout is a stack: each item has a
     fixed margin above and below and is as tall as its text, so a line that
     wraps differently in Safari than in Chrome pushes everything after it
     down, on Wix and here alike. The margins below are Wix's own (read from
     its mobile DOM); absolute positions are kept only where Wix's box is a
     fixed size (the header, the hero, the demo panels). */
  .site-footer {
    padding: 0 2rem;
  }

  .site-footer .frame {
    width: 28rem;
    display: flow-root;
  }

  .site-footer .m-strip {
    width: 28rem;
    margin: 2rem 0 1rem;
  }

  .f-rule {
    height: .2rem;
    margin-bottom: .8rem;
    border-top: 1px solid var(--white);
  }

  .f-logo {
    margin-left: 11.7rem;
    width: 4.5rem;
    height: 4.2rem;
  }

  .f-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .site-footer .f-text {
    width: 28rem;
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .site-footer .f-email {
    margin-bottom: 2.6rem;
  }

  .site-footer .f-privacy {
    width: 17rem;
    margin-bottom: 0;
  }

  .site-footer .f-access {
    width: 17rem;
    margin-bottom: 2.9rem;
  }

  .site-footer .f-addr {
    width: 17rem;
  }

  .site-footer .f-copy {
    margin-bottom: 2.8rem;
  }

  /* ---- home ---- */
  .h-hero-wrap {
    padding: 0 0 2rem;
  }

  .h-hero-wrap .m-strip {
    margin-bottom: 1rem;
  }

  .h-hero {
    position: relative;
    height: 41.8rem;
    background: var(--navy);
    overflow: hidden;
  }

  .h-hero>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  .h-hero .frame {
    height: 100%;
    padding: 2rem 2rem 0;
  }

  .h-kicker {
    position: relative;
    width: 28rem;
    font: 700 1.9rem/2.28rem var(--sora);
    letter-spacing: -.02em;
    color: var(--gold);
  }

  .h-title {
    position: relative;
    margin-top: 1rem;
    width: 28rem;
    font: 700 2.5rem/3.125rem var(--sora);
    color: var(--light);
  }

  .h-lead {
    position: relative;
    margin-top: 1rem;
    width: 28rem;
    font: 400 1.7rem/2.839rem var(--sgs);
    color: var(--light);
  }

  .h-hero .btn {
    position: relative;
    margin: 1rem auto 0;
    width: 16rem;
    height: 4.2rem;
  }

  .h-ops {
    background: var(--white);
    padding: 2rem 0 6rem;
  }

  .h-ops .frame {
    padding: 2rem 0 0 2rem;
  }

  .h-ops h2 {
    width: 29rem;
    font: 700 3.8rem/4.56rem var(--sora);
    letter-spacing: -.02em;
    color: var(--navy);
  }

  .h-ops .rt {
    --lh: 2.66rem;
    width: 28rem;
    font: 400 1.9rem/2.66rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--ink);
  }

  .h-platform {
    padding-top: 2rem;
  }

  .h-platform .inner {
    background: var(--white);
    padding: 2rem 0 2.1rem;
  }

  .h-platform .frame {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .h-platform .p-kicker {
    margin-top: 1rem;
    width: 28rem;
    text-align: center;
    font: 700 2.7rem/3.375rem var(--sora);
    color: var(--gold);
  }

  .h-platform h2 {
    width: 24.7rem;
    text-align: center;
    font: 700 2.9rem/3.625rem var(--sora);
    color: var(--navy);
    margin-top: -.1rem;
  }

  .h-platform .p-lead {
    order: 3;
    width: 28rem;
    margin-top: 2.6rem;
    text-align: center;
    font: 400 1.7rem/2.21rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--ink);
  }

  .cards {
    order: 2;
    width: 18rem;
    margin-top: .8rem;
  }

  .card {
    position: relative;
    width: 18rem;
  }

  .card img {
    position: absolute;
  }

  /* A card is as tall as its label (Wix: Business Operations is one line in
     Safari and two in Chrome, and the card follows); the art is absolute.
     Each label's bottom padding is Wix's margin less the card's 2px of border. */
  .card .c-label {
    position: relative;
    margin-left: 1rem;
    width: 16rem;
    text-align: center;
    font: 700 1.5rem/1.8rem var(--sora);
    letter-spacing: -.02em;
    color: var(--ink);
  }

  .card--people img {
    left: 7rem;
    top: 1rem;
    width: 4rem;
    height: 4rem;
  }

  .card--people .c-label {
    padding: 6rem 0 1.7rem;
  }

  .card--projects {
    margin-top: 2.1rem;
  }

  .card--projects img {
    left: -2.2rem;
    top: -1rem;
    width: 22.5rem;
    height: 12.9rem;
  }

  .card--projects .c-label {
    padding: 10.1rem 0 .8rem;
  }

  .card--field {
    margin-top: 2.6rem;
  }

  .card--field img {
    left: -3.5rem;
    top: -2rem;
    width: 25.1rem;
    height: 13.9rem;
  }

  .card--field .c-label {
    padding: 9rem 0 .7rem;
    margin-left: 1.6rem;
    width: 14.7rem;
    font-size: 1.7rem;
    line-height: 2.04rem;
  }

  .card--business {
    margin-top: 1.1rem;
  }

  .card--business img {
    left: 6.5rem;
    top: 1rem;
    width: 5rem;
    height: 5rem;
  }

  .card--business .c-label {
    padding: 7rem 0 .8rem;
    text-align: left;
  }

  .h-core {
    padding-top: 2rem;
  }

  .h-core .bg {
    position: relative;
    overflow: hidden;
    background: #404656;
  }

  .h-core .bg>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
  }

  .h-core .frame {
    padding: 2rem 2rem 0;
  }

  .h-core h2 {
    width: 28rem;
    font: 700 2.5rem/3rem var(--sora);
    letter-spacing: -.02em;
    color: var(--white);
  }

  .h-core h2 .c-bronze {
    color: var(--bronze);
  }

  .h-core h3 {
    margin-top: 1rem;
    width: 28rem;
    font: 700 1.8rem/2.16rem var(--sora);
    letter-spacing: -.02em;
    color: var(--white);
  }

  .h-core .c-lead {
    margin-top: 1rem;
    width: 28rem;
    font: 400 1.7rem/2.839rem var(--sgs);
    color: var(--light);
  }

  .pillars {
    margin: 2rem 0 0 -2rem;
    width: 32rem;
  }

  .pillar {
    padding: 2rem 0;
    text-align: center;
  }

  .pillar img {
    width: 6rem;
    height: 5.7rem;
    margin: 0 auto 1rem;
  }

  .pillar p {
    width: 28rem;
    margin: 0 auto;
    font: 700 1.6rem/2.08rem var(--sora);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .pillar:first-child p {
    letter-spacing: 0;
    line-height: 2.1rem;
  }

  .h-core .rule-l,
  .h-core .rule-r {
    margin-top: 1rem;
    width: 28rem;
    height: .4rem;
    border-top: 1px solid var(--white);
  }

  .h-core .tag {
    margin-top: 1rem;
    width: 28rem;
    text-align: center;
    font: 700 1.3rem/2.171rem var(--sgs);
    color: var(--bronze);
  }

  .h-core .btn--learn {
    margin: 2rem auto 0;
    width: 16rem;
    height: 4.2rem;
  }

  .h-core .tag-r {
    padding-bottom: 2rem;
  }

  /* ---- why ---- */
  .w-main {
    background: var(--navy);
    padding: 2rem 0 1rem;
  }

  .w-main .frame {
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
  }

  .w-main .w-kicker {
    order: 1;
    margin-top: 1rem;
    font: 700 2.2rem/2.7rem var(--sora);
    color: #fdfbfe;
  }

  .w-main h1 {
    order: 2;
    margin-top: 1rem;
    width: 28rem;
    font: 700 2.8rem/3.92rem var(--sora);
    letter-spacing: -.02em;
    color: var(--bronze);
  }

  .w-story {
    order: 3;
    --lh: 2.38rem;
    font: 400 1.7rem/2.38rem var(--sg);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .w-story .sgs {
    font-family: var(--sgs);
  }

  .w-questions {
    order: 4;
    --lh: 1.68rem;
    margin: 1.4rem 0 0 1.8rem;
    width: 24.4rem;
    font: italic 700 1.2rem/1.68rem var(--sora);
    letter-spacing: -.01em;
    color: var(--gold);
  }

  .w-photo {
    order: 5;
    margin-top: 1.3rem;
    width: 28rem;
    height: 17.2rem;
    object-fit: cover;
  }

  .w-quote {
    order: 6;
    margin-top: 1.4rem;
    width: 28rem;
    height: 14.4rem;
    border: 2px solid var(--white);
    padding: .8rem 0 0 .8rem;
    font: 700 1.9rem/2.47rem var(--sora);
    letter-spacing: .01em;
    color: var(--light);
  }

  .w-center {
    order: 7;
    --lh: 2.38rem;
    margin-top: .1rem;
    text-align: center;
    font: 400 1.7rem/2.38rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .w-more {
    order: 8;
    margin-top: 1.2rem;
    text-align: center;
    font: 700 2rem/2.6rem var(--sora);
    color: var(--bronze);
  }

  .w-created {
    order: 9;
    margin-top: 1.2rem;
    text-align: center;
    font: 400 1.7rem/2.38rem var(--sgs);
    letter-spacing: -.01em;
    color: var(--white);
  }

  .w-built {
    order: 10;
    margin-top: 1.3rem;
    text-align: center;
    font: 700 2rem/2.6rem var(--sora);
    color: var(--gold);
  }

  .w-main .btn {
    order: 11;
    margin: 2rem auto 0;
    width: 16rem;
    height: 4.2rem;
    font-size: 1.49333rem;
    line-height: 2.09067rem;
  }

  /* ---- principles ---- */
  .pr-page {
    background: var(--bronze);
  }

  .pr-main {
    background: var(--navy);
  }

  .pr-intro .frame {
    padding: 3.8rem 0 0;
  }

  .pr-intro h1 {
    margin-left: 2rem;
    width: 28rem;
    font: 700 2.7rem/3.24rem var(--sora);
    color: var(--light);
  }

  .pr-intro h1 .c-bronze {
    color: var(--bronze);
  }

  .pr-intro p {
    margin: 4rem 0 0 3rem;
    width: 26rem;
    font: 400 1.6rem/2.88rem var(--sgs);
    color: var(--light);
  }

  .pr-intro .m-strip {
    margin-top: 5.5rem;
  }

  .pr-intro .m-strip+.m-strip {
    margin-top: 1rem;
  }

  .pr-list {
    padding-top: 1rem;
  }

  .pr-item {
    position: relative;
    padding: 2rem 0 2rem;
  }

  .pr-num {
    margin-left: 2rem;
    font: 700 3.3rem/3.96rem var(--helv);
    color: var(--bronze);
  }

  .pr-icon {
    width: 6rem;
    height: 5.7rem;
    margin: 1.1rem auto 0;
  }

  .pr-body {
    --lh: 3.22rem;
    margin: 1rem 0 0 4.4rem;
    width: 23.3rem;
    font: 400 2.3rem/3.22rem var(--sgs);
    letter-spacing: -.01em;
  }

  .pr-body h2 {
    font: 700 2.3rem/2.53rem var(--sora);
    color: var(--white);
    margin-bottom: 2.63rem;
  }

  .pr-body .sg {
    font-family: var(--sg);
  }

  .pr-body .tight {
    line-height: 2.53rem;
    letter-spacing: -.02em;
  }

  .pr-rule {
    margin: 2rem 0 0 2rem;
    width: 28rem;
    border-top: 3px solid var(--bronze);
    height: .5rem;
  }

  .pr-cta {
    padding: 1rem 0 2rem;
  }

  .pr-cta .btn {
    margin: 0 auto;
    width: 16rem;
    height: 4.2rem;
    font-size: 1.49333rem;
    line-height: 2.09067rem;
  }

  .c1 {
    color: var(--white);
  }

  .c2 {
    color: #fdfbfe;
  }

  .c3 {
    color: var(--light);
  }

  /* ---- demo ---- */
  .d-main {
    background: var(--bronze);
    padding-top: 6rem;
    border-bottom: 1rem solid #fff;
  }

  .d-left {
    background: var(--navy);
    height: 37.5rem;
    position: relative;
  }

  .d-left h1 {
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 28rem;
    font: 700 2.8rem/3.5rem var(--sora);
    color: #fffffe;
  }

  .d-left hr {
    position: absolute;
    left: 14.1rem;
    top: 18rem;
    width: 3.8rem;
    margin: 0;
    border: 0;
    border-top: 3px solid var(--light);
  }

  .d-left .rt {
    --lh: 2.1rem;
    position: absolute;
    left: 2rem;
    top: 19.5rem;
    width: 28rem;
    font: 400 1.6rem/2.1rem var(--sgs);
    color: var(--white);
  }

  .d-right {
    background: var(--navy);
    height: 73.8rem;
    margin: 3rem 0 9rem;
    position: relative;
  }

  .demo-form {
    position: absolute;
    left: 2rem;
    top: 2.5rem;
    width: 28rem;
  }

  .demo-form .fld {
    position: absolute;
    left: 1rem;
    width: 26rem;
  }

  .demo-form label {
    font-size: 1.6rem;
    line-height: 1.6rem;
    margin-bottom: .8rem;
  }

  .demo-form input,
  .demo-form select {
    height: 3.6rem;
    font-size: 1.6rem;
  }

  .fd-first {
    top: 1rem;
  }

  .fd-last {
    top: 8rem;
  }

  .fd-email {
    top: 15rem;
  }

  .fd-phone {
    top: 22rem;
  }

  .fd-company {
    top: 29rem;
  }

  .fd-contact {
    top: 36rem;
  }

  .demo-form .f-submit {
    position: absolute;
    left: 1rem;
    top: 43rem;
    width: 26rem;
  }

  .demo-form button[type="submit"] {
    height: 4.2rem;
    font-size: 1.86667rem;
  }

  .form-status {
    position: absolute;
    left: 1rem;
    top: 49rem;
    width: 26rem;
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .demo-form .cf-box {
    left: 1rem;
    top: 57rem;
  }
}

/* Long-form text pages (privacy, accessibility): the Request a Demo page's
   bronze ground and navy panel, with one readable column of text. */
.lg-main {
  background: var(--bronze);
}

.lg-panel {
  background: var(--navy);
  color: var(--white);
}

.lg-kicker {
  font-family: var(--sora);
  font-weight: 700;
  color: var(--gold);
}

.lg-panel h1 {
  font-family: var(--sora);
  font-weight: 700;
  color: #fffffe;
}

.lg-rule {
  border: 0;
  border-top: 3px solid var(--light);
  margin: 0;
}

.lg-body {
  font-family: var(--sg);
  color: var(--white);
}

.lg-body h2 {
  font-family: var(--sora);
  font-weight: 700;
  color: var(--gold);
}

.lg-body p,
.lg-body ul {
  margin-top: 1em;
}

.lg-body ul {
  list-style: disc;
  padding-left: 1.4em;
}

.lg-body li+li {
  margin-top: .4em;
}

.lg-body a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.lg-body a:hover {
  color: var(--white);
}

.lg-body b {
  color: #fffffe;
}

.lg-date {
  color: var(--light);
}

@media (min-width: 1000px) {
  .lg-main {
    padding: 6rem 6rem 8rem;
  }

  .lg-panel {
    max-width: 132rem;
    margin: 0 auto;
    padding: 5rem 9rem 7rem;
  }

  .lg-kicker {
    font-size: 2.2rem;
    line-height: 2.8rem;
    letter-spacing: .02em;
  }

  .lg-panel h1 {
    margin-top: 1rem;
    font-size: 5.6rem;
    line-height: 7rem;
  }

  .lg-rule {
    width: 45.6rem;
    margin: 3rem 0 0;
  }

  .lg-body {
    max-width: 86rem;
    font-size: 1.8rem;
    line-height: 2.8rem;
    letter-spacing: -.005em;
  }

  .lg-body h2 {
    margin-top: 4.8rem;
    font-size: 2.6rem;
    line-height: 3.2rem;
  }

  .lg-date {
    margin-top: 2.4rem;
    font-size: 1.6rem;
  }
}

@media (max-width: 999.98px) {
  .lg-main {
    padding: 6rem 0 9rem;
  }

  .lg-panel {
    padding: 2.4rem 2rem 3.6rem;
  }

  .lg-kicker {
    font-size: 1.6rem;
    line-height: 2rem;
  }

  .lg-panel h1 {
    margin-top: .6rem;
    font-size: 2.8rem;
    line-height: 3.5rem;
  }

  .lg-rule {
    width: 3.8rem;
    margin: 1.8rem 0 0;
  }

  .lg-body {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }

  .lg-body h2 {
    margin-top: 3.2rem;
    font-size: 2rem;
    line-height: 2.6rem;
  }

  .lg-date {
    margin-top: 1.6rem;
    font-size: 1.4rem;
  }
}