/* Full-bleed hero background; the two columns retain the site's 85% content frame. */
@layer portfolio-section-width {
  body.frame-page.home-page #home.hero {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 7.5vw !important;
    padding-right: 7.5vw !important;
    background: #050510 url('../images/hero-dark-background.webp?v=2') center / cover no-repeat !important;
  }
  body.frame-page.home-page #home.hero,
  body.frame-page.home-page #home.hero * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  body.frame-page.home-page #home.hero > .hero-copy :is(p, p *) {
    color: #a6c4c5 !important;
    -webkit-text-fill-color: #a6c4c5 !important;
  }
  body.frame-page.home-page #home.hero > .hero-copy :is(.hero-kicker, .hero-kicker *) {
    color: #2bb3b8 !important;
    -webkit-text-fill-color: #2bb3b8 !important;
    font-weight: 400 !important;
  }
  body.frame-page.home-page #home.hero > .hero-copy .hero-kicker .hero-name {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 700 !important;
  }
  body.frame-page.home-page #home.hero > .hero-copy .hero-about-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    min-width: 136px !important;
    box-sizing: border-box !important;
    padding: 12px 26px !important;
    border: 1px solid #2bb3b8 !important;
    border-radius: 999px !important;
    background: #2bb3b8 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
  body.frame-page.home-page #home.hero > .hero-copy .hero-about-cta:hover {
    background: #239da2 !important;
    border-color: #239da2 !important;
  }
  body.frame-page.home-page #home.hero > .hero-copy .hero-about-cta:focus-visible {
    outline: 3px solid #d7c7ff;
    outline-offset: 4px;
  }
}
body.frame-page.home-page #home.hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
  align-items: center !important;
  justify-content: stretch !important;
  column-gap: clamp(24px, 4vw, 64px);
}
body.frame-page.home-page #home.hero > .hero-copy,
body.frame-page.home-page #home.hero > .hero-copy.glass {
  width: 100% !important;
  max-width: 620px !important;
  text-align: left !important;
  justify-self: start;
}
body.frame-page.home-page #home.hero > .hero-copy p { margin-left: 0 !important; margin-right: 0 !important; }
body.frame-page.home-page #home.hero > .hero-copy h1 {
  font-size: clamp(62px, 6.2vw, 92px) !important;
  overflow-wrap: anywhere;
}
body.frame-page.home-page #home.hero > .hero-copy .hero-title-line { white-space: normal !important; }
body.frame-page.home-page #home.hero > .hero-copy .hero-title-line.hero-title-development {
  white-space: nowrap !important;
  font-size: inherit !important;
}

body.frame-page.home-page #home.hero > .hero-word-background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.02 !important;
  background-image: url('../images/hero-word-cloud.webp?v=2') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: blur(2.5px) !important;
  transform: translate3d(
    var(--hero-pointer-x, 0px),
    calc(var(--hero-pointer-y, 0px) + var(--hero-scroll-y, 0px)),
    0
  ) scale(1.04) !important;
  transform-origin: center !important;
  will-change: transform !important;
}

.hero-cube {
  position: relative; z-index: 2;
  width: 100%; max-width: 560px; justify-self: end;
  aspect-ratio: 1 / 1; max-height: 560px;
  border-radius: 0; overflow: visible;
  background: transparent;
  isolation: isolate;
}
.hero-cube canvas {
  position: absolute; left: -39.856%; top: -39.856%;
  display: block; width: 179.712%; height: 179.712%;
  max-width: none !important; max-height: none !important;
  opacity: 0; transition: opacity 600ms ease;
}
.hero-cube[data-state="ready"] canvas { opacity: 1; }
.hero-cube[data-state="loading"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  background-size: 200% 100%; animation: hero-cube-load 1.4s linear infinite;
}
@keyframes hero-cube-load { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.hero-cube__status { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; text-align: center; font-size: 15px; line-height: 1.5; }
body.frame-page.home-page .hero-cube .hero-cube__status { color: #e9e9ee !important; -webkit-text-fill-color: #e9e9ee !important; }
.hero-cube[data-state="error"] .hero-cube__status { display: flex; }
.hero-cube[data-state="error"] canvas { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-cube canvas { transition: none; }
  .hero-cube[data-state="loading"]::after { animation: none; }
  body.frame-page.home-page #home.hero > .hero-word-background {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

@media (min-width: 861px) {
  body.frame-page.home-page #home.hero > .hero-copy {
    width: calc(100% + 160px) !important;
    max-width: 760px !important;
    order: 0 !important;
  }
  .hero-cube { transform: translateX(-64px); order: 1 !important; }
}

@media (max-width: 860px) {
  body.frame-page.home-page #home.hero {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 32px;
  }
  body.frame-page.home-page #home.hero > .hero-copy { max-width: 100% !important; }
  .hero-cube { justify-self: center; max-width: min(100%, 440px); }
}

@media (max-width: 700px) {
  body.frame-page.home-page #home.hero > .hero-copy {
    width: calc(100% + 15vw - 16px) !important;
    max-width: none !important;
    margin-left: calc(8px - 7.5vw) !important;
  }
  body.frame-page.home-page #home.hero > .hero-copy h1 {
    font-size: clamp(44px, 12.2vw, 54px) !important;
  }
}

@media (max-width: 360px) {
  body.frame-page.home-page #home.hero > .hero-copy h1 {
    font-size: clamp(36px, 11.5vw, 44px) !important;
  }
}