:root {
  color-scheme: dark;
  font-family: 'Funnel Sans', Arial, sans-serif;
  font-weight: 400;
  color: #fff;
  background: #140d0a;
  --logo-x: 60px;
  --logo-y: 50px;
  --logo-width: 160px;
  --intro-width: 50vw;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Funnel Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
html,
body {
  margin: 0;
  min-height: 100%;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(
    ellipse at 80% 70%,
    #ffbd2f,
    #a02e10 45%,
    #140d0a 80%
  );
}

#gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.brand {
  position: absolute;
  z-index: 2;
  left: var(--logo-x);
  top: var(--logo-y);
  width: var(--logo-width);
  height: auto;
  display: block;
  transform-origin: top left;
}

.is-intro .brand {
  left: calc((100% - var(--intro-width)) / 2);
  top: calc(50svh - var(--intro-width) * 309 / 1207 / 2);
  width: var(--intro-width);
}

.intro-caption {
  position: absolute;
  z-index: 2;
  left: calc((100% - var(--intro-width)) / 2);
  top: calc(50svh + var(--intro-width) * 309 / 1207 / 2 + 24px);
  width: var(--intro-width);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  line-height: 1.3;
}

.hero-content {
  position: relative;
  /* Let the pills blend directly with the WebGL canvas behind this wrapper. */
  z-index: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 150px 60px 80px;
  pointer-events: none;
}

.hero-title {
  width: min(100%, 1280px);
  margin: 0;
  font-size: 108px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.94;
  text-align: center;
  text-wrap: balance;
}

.is-intro .hero-title,
.is-transitioning .hero-title {
  opacity: 0;
}
.headline-word {
  white-space: nowrap;
}
.headline-letter {
  opacity: 0.5;
}
.is-ready .headline-letter {
  opacity: 1;
}
.is-intro .hero-actions {
  visibility: hidden;
}
.is-intro .service-pills li,
.is-intro .project-button,
.is-transitioning .service-pills li,
.is-transitioning .project-button {
  opacity: 0;
}
.is-ready .intro-caption {
  visibility: hidden;
}
.is-logo-settled .brand {
  mix-blend-mode: difference;
}
.is-transitioning .brand,
.is-transitioning .hero-title {
  will-change: transform;
}

#error {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 24px;
  max-width: calc(100% - 48px);
  padding: 12px 16px;
  background: #140d0a;
  color: #ffbd2f;
  font-size: 14px;
}

@media (max-width: 1100px) {
  .hero-title {
    font-size: clamp(48px, 8.4vw, 108px);
  }
}

@media (max-width: 600px) {
  :root {
    --logo-x: 24px;
    --logo-y: 28px;
    --logo-width: 120px;
  }
  .hero-content {
    padding: 120px 24px;
  }
  .hero-title {
    font-size: clamp(38px, 10vw, 60px);
  }
  .intro-caption {
    font-size: 11px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-intro .brand {
    left: var(--logo-x);
    top: var(--logo-y);
    width: var(--logo-width);
  }
  .hero.is-intro .hero-title {
    opacity: 1;
  }
  .hero.is-intro .hero-actions {
    visibility: visible;
  }
  .hero.is-intro .service-pills li,
  .hero.is-intro .project-button,
  .headline-letter {
    opacity: 1;
  }
  .intro-caption {
    visibility: hidden;
  }
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-top: 44px;
}

.service-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
}

.service-pills li {
  padding: 8px 16px 10px 16px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 999px;
  background: rgb(20 13 10 / 10%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.project-button {
  --light-x: 50%;
  --light-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 100%;
  margin-top: 72px;
  padding: 16px 30px 18px 30px;
  border: 1.5px solid rgb(255 255 255 / 50%);
  border-radius: 999px;
  color: #fff;
  font: inherit;
  font-size: 18px;
  line-height: 1.3;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  background: rgb(20 13 10 / 10%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: background 450ms ease;
}

.project-button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(
    180px circle at var(--light-x) var(--light-y),
    rgb(255 244 223 / 30%),
    rgb(255 244 223 / 15%) 45%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 450ms ease;
  pointer-events: none;
}

.project-button.is-lit::before,
.project-button:focus-visible::before {
  opacity: 1;
}

.project-button.is-lit {
  background: rgb(20 13 10 / 18%);
}

.project-button:focus-visible {
  outline: 2px solid #ffbd2f;
  outline-offset: 6px;
}
.project-button svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .hero-content {
    padding-bottom: 60px;
  }
  .hero-actions {
    margin-top: 28px;
  }
  .service-pills {
    gap: 10px;
  }
  .project-button {
    margin-top: 36px;
    gap: 12px;
  }
  .project-button svg {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-button::before {
    transition: none;
  }
}