@font-face {
  font-family:Lato;
  src:url("assets/lato.ttf") format("truetype");
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Geist;
  src:url("assets/geist.ttf") format("truetype");
  font-weight:400;
  font-display:swap
}

@font-face {
  font-family:Manrope;
  src:url("assets/manrope.ttf") format("truetype");
  font-weight:700;
  font-display:swap
}

@font-face {
  font-family:Barlow;
  src:url("assets/barlow.ttf") format("truetype");
  font-weight:700;
  font-display:swap
}

:root {
  color-scheme:dark;
  --purple:#502d7f;
  --white:#fff
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:#211b29;
  color:var(--white);
  font-family:Lato,sans-serif
}

button,a {
  -webkit-tap-highlight-color:transparent
}

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

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

a:focus-visible,button:focus-visible {
  outline:2px solid #d4b5ff;
  outline-offset:8px
}

.hero {
  position:relative;
  height:993px;
  isolation:isolate;
  overflow:hidden
}

.hero-scene {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none
}

.hero-scene--mobile {
  display:none
}

.scene-base {
  position:absolute;
  inset:0;
  overflow:hidden
}

.scene-base img {
  position:absolute;
  width:147.95%;
  height:120.24%;
  left:-23.98%;
  top:-20.24%;
  max-width:none
}

.scene-main {
  position:absolute;
  left:calc(50% + 1px);
  top:-10px;
  width:100.972222%;
  height:1003px;
  transform:translateX(-50%)
}

.scene-layer {
  position:absolute;
  inset:0;
  overflow:hidden
}

.scene-layer img {
  position:absolute;
  max-width:none
}

.scene-layer--one img {
  width:100.03%;
  height:124.47%;
  left:-.02%;
  top:-12.2%
}

.scene-layer--two img {
  width:122.54%;
  height:127.42%;
  left:-11.27%;
  top:-21.64%
}

.hue {
  position:absolute;
  inset:0;
  background:var(--purple);
  mix-blend-mode:hue
}

.shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 50%,rgba(0,0,0,.12))
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:32px 48px;
  height:96px
}

.brand {
  display:block;
  width:140px;
  height:30.265px
}

.logo {
  display:block;
  position:relative;
  width:140px;
  height:30.265px
}

.logo img {
  position:absolute;
  display:block;
  max-width:none
}

.logo--mobile {
  display:none
}

.menu-toggle {
  position:relative;
  border:0;
  padding:0;
  background:none;
  width:32px;
  height:32px
}

.menu-toggle span {
  position:absolute;
  left:0;
  right:0;
  height:8.33%;
  border-radius:4px;
  background:white
}

.menu-toggle span:first-child {
  top:25.79%
}

.menu-toggle span:last-child {
  top:65.83%
}

.hero-heading {
  position:absolute;
  top:158px;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:46px
}

.eyebrow {
  margin:0;
  border:.5px solid rgba(255,255,255,.4);
  background:rgba(80,45,127,.5);
  border-radius:8px;
  padding:10px 20px;
  font:400 20px/14px Lato,sans-serif
}

h1 {
  margin:0;
  height:60px;
  width:644px
}

.title-desktop {
  display:block;
  position:relative;
  width:644px;
  height:60px;
  overflow:hidden
}

.title-desktop img {
  position:absolute;
  left:19.5315px;
  top:1px;
  max-width:none
}

.title-mobile {
  display:none
}

.hero-bottom {
  position:absolute;
  top:640px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  flex-direction:column
}

.hero-description {
  margin:0;
  text-align:center;
  font:400 24px/32px Lato,sans-serif;
  letter-spacing:-1px;
  color:rgba(255,255,255,.8)
}

.description-mobile {
  display:none
}

.hero-actions {
  display:flex;
  gap:26px;
  justify-content:center;
  margin-top:40px
}

.action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 26px;
  border:.5px solid rgba(255,255,255,.4);
  border-radius:8px;
  font:700 16px/1.4 Manrope,sans-serif;
  letter-spacing:-.32px;
  transition:background .2s
}

.action img {
  display:block
}

.action--primary {
  background:var(--purple)
}

.action:hover {
  background:#684092
}

body:has(dialog[open]) {
  overflow:hidden
}

@media(min-width:768px) and (max-width:1100px) {

  .hero {
    height:clamp(760px,68.9583vw,993px)
  }

  .scene-main {
    height:calc(100% + 10px)
  }

  .hero-heading {
    top:16%
  }

  .hero-bottom {
    top:64.45%
  }

  .hero-description {
    font-size:20px;
    line-height:28px
  }

}

@media(max-width:767px) {

  .hero {
    height:845px
  }

  .hero-scene--desktop {
    display:none
  }

  .hero-scene--mobile {
    display:block
  }

  .mobile-base {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover
  }

  .mobile-crop {
    position:absolute;
    inset:0;
    overflow:hidden
  }

  .mobile-crop img {
    position:absolute;
    max-width:none;
    width:413.99%;
    height:130.25%;
    left:-157.1%;
    top:-19.5%
  }

  .mobile-crop--optimized img {
    left:0;
    width:100%;
  }

  .hero-scene--mobile .shade {
    background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 50%,transparent)
  }

  .site-header {
    padding:14px 16px;
    position:absolute;
    top:32px;
    height:54px;
    width:100%
  }

  .brand {
    width:120px;
    height:25.941px
  }

  .logo--desktop {
    display:none
  }

  .logo--mobile {
    display:block;
    width:120px;
    height:25.941px
  }

  .menu-toggle {
    width:24px;
    height:24px
  }

  .hero-heading {
    top:190px;
    gap:28px;
    padding:0 16px
  }

  .eyebrow {
    font:400 14px/10px Geist,sans-serif;
    padding:10px;
    border-radius:8px
  }

  h1 {
    width:auto;
    height:40px
  }

  .title-desktop {
    display:none
  }

  .title-mobile {
    display:block;
    font:700 36px/40px Barlow,sans-serif;
    white-space:nowrap
  }

  .hero-bottom {
    top:655px
  }

  .description-desktop,.hero-actions {
    display:none
  }

  .description-mobile {
    display:block;
    width:280px;
    font:400 16px/22px Geist,sans-serif;
    letter-spacing:0;
    color:#f7f9f2
  }

}

@media(max-width:360px) {
  .title-mobile {
    font-size:32px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .action {
    transition:none
  }

}

/* Original logo geometry from the supplied vector assets. */
.logo--desktop .logo-part--a {
  left:21.49px;
  top:6.9px;
}

.logo--desktop .logo-part--m {
  left:0px;
  top:7.01px;
}

.logo--desktop .logo-part--s {
  left:105.182px;
  top:6.99px;
}

.logo--desktop .logo-part--k {
  left:91.518px;
  top:3.014px;
}

.logo--desktop .logo-part--c {
  left:77.658px;
  top:6.9px;
}

.logo--desktop .logo-part--r {
  left:62.692px;
  top:6.99px;
}

.logo--desktop .logo-part--e {
  left:48.776px;
  top:6.776px;
}

.logo--desktop .logo-part--v {
  left:34.118px;
  top:6.813px;
}

.logo--desktop .logo-part--group {
  left:71.246px;
  top:0.418px;
}

.logo--desktop .logo-part--shape6copy2 {
  left:109.718px;
  top:0px;
}

.logo--desktop .logo-part--shape7 {
  left:118.986px;
  top:3.616px;
}

.logo--mobile .logo-part--a {
  left:18.42px;
  top:5.92px;
}

.logo--mobile .logo-part--m {
  left:0px;
  top:6.01px;
}

.logo--mobile .logo-part--s {
  left:90.15px;
  top:5.99px;
}

.logo--mobile .logo-part--k {
  left:78.44px;
  top:2.58px;
}

.logo--mobile .logo-part--c {
  left:66.56px;
  top:5.92px;
}

.logo--mobile .logo-part--r {
  left:53.74px;
  top:5.99px;
}

.logo--mobile .logo-part--e {
  left:41.81px;
  top:5.81px;
}

.logo--mobile .logo-part--v {
  left:29.24px;
  top:5.84px;
}

.logo--mobile .logo-part--group {
  left:61.06px;
  top:0.36px;
}

.logo--mobile .logo-part--shape6copy2 {
  left:94.04px;
  top:0px;
}

.logo--mobile .logo-part--shape7 {
  left:101.99px;
  top:3.1px;
}