/* Cinematic homepage: the Open Loop story system. */
.home {
  --home-blue: #075cff;
  --home-gold: #c99022;
  --home-ink: #10131a;
  --home-line: rgb(16 19 26 / 13%);
  --hero-progress: 0;
  --pointer-x: 0;
  --pointer-y: 0;
}

.home main {
  overflow: clip;
}

.home-experience {
  position: relative;
  isolation: isolate;
  background: var(--paper);
}

.home-experience::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgb(16 19 26 / 4%) 1px) 0 0 / 12.5% 100%,
    linear-gradient(0deg, transparent calc(100% - 1px), rgb(16 19 26 / 2.8%) 1px) 0 0 / 100% 8rem;
  content: "";
  pointer-events: none;
}

.home .site-header {
  border-bottom-color: rgb(16 19 26 / 7%);
  background: rgb(255 255 255 / 92%);
  box-shadow: none;
}

.home-scene {
  --scene-progress: 0;
  position: relative;
  isolation: isolate;
}

.home-scene__number {
  display: block;
  margin-bottom: clamp(1.5rem, 5vw, 4.5rem);
  color: currentColor;
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.18em;
}

.home-scene__heading {
  display: grid;
  grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: start;
  margin-bottom: clamp(3rem, 7vw, 7rem);
}

.home-scene__meta {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.home-scene__meta > span {
  padding-top: 0.1rem;
  color: var(--silver-600);
  font-size: 0.7rem;
  font-weight: 720;
  letter-spacing: 0.16em;
}

.home-scene__meta .eyebrow {
  margin: 0;
}

.home-scene__title {
  max-width: 12ch;
  font-size: clamp(3.2rem, 7.2vw, 8rem);
  line-height: 0.94;
}

.home-scene__lede {
  max-width: 44rem;
  margin-bottom: 0;
}

.home-scene__cta {
  margin: clamp(2rem, 5vw, 4.5rem) 0 0;
}

.home-scene__geometry {
  position: absolute;
  z-index: -1;
  top: clamp(3rem, 8vw, 8rem);
  right: var(--site-pad);
  width: clamp(8rem, 19vw, 19rem);
  aspect-ratio: 1;
  transform: translate3d(0, calc(var(--scene-progress) * -5rem + 2.5rem), 0) rotate(calc(var(--scene-progress) * 22deg - 11deg));
  border: 1px solid var(--home-line);
  border-radius: 50%;
  pointer-events: none;
}

.home-scene__geometry span,
.home-scene__geometry i {
  position: absolute;
  display: block;
}

.home-scene__geometry span:first-child {
  inset: 28%;
  transform: rotate(45deg);
  background: var(--blue);
}

.home-scene__geometry span:nth-child(2) {
  top: 50%;
  left: -30%;
  width: 160%;
  height: 1px;
  background: var(--home-line);
}

.home-scene__geometry i {
  top: -0.3rem;
  left: 50%;
  width: 0.6rem;
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
}

.home-hero {
  min-height: 165svh;
  overflow: visible;
  border-bottom: 0;
  background: var(--paper);
}

.home-hero__pin {
  position: sticky;
  top: 5.15rem;
  display: grid;
  min-height: calc(100svh - 5.15rem);
  overflow: clip;
  align-items: stretch;
  border-bottom: 1px solid var(--home-line);
  background: var(--paper);
}

.home-hero__pin::after {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.22rem;
  transform: scaleX(var(--hero-progress));
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue) 0 64%, var(--gold) 64%);
  content: "";
}

.home-hero__blueprint {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.home-hero__blueprint::before,
.home-hero__blueprint::after {
  position: absolute;
  content: "";
}

.home-hero__blueprint::before {
  inset: 0;
  transform: translate3d(calc(var(--hero-progress) * -2.5rem), 0, 0);
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgb(16 19 26 / 6%) 1px) 0 0 / 12.5% 100%,
    linear-gradient(0deg, transparent calc(100% - 1px), rgb(16 19 26 / 4%) 1px) 0 0 / 100% 25%;
}

.home-hero__blueprint::after {
  top: 50%;
  left: 69%;
  width: min(54vw, 50rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(calc(0.86 + var(--hero-progress) * 0.18));
  border: 1px solid rgb(16 19 26 / 8%);
  border-radius: 50%;
}

.home-hero__axis {
  position: absolute;
  display: block;
  background: var(--home-line);
  transform-origin: center;
}

.home-hero__axis--x {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scaleX(1);
}

.home-hero__axis--y {
  top: 0;
  left: 69%;
  width: 1px;
  height: 100%;
  transform: scaleY(1);
}

.home-hero__axis--orbit {
  top: 50%;
  left: 69%;
  width: clamp(17rem, 35vw, 36rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(calc(var(--hero-progress) * 35deg));
  border: 1px dashed rgb(7 92 255 / 22%);
  border-radius: 50%;
  background: transparent;
}

.home-hero__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(0.52 - var(--hero-progress) * 0.24);
}

.home-hero__frame {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - 5.15rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  padding-block: clamp(2.5rem, 6vh, 5rem);
}

.home-hero__copy {
  position: relative;
  z-index: 4;
  grid-column: 1 / 10;
  grid-row: 1;
  align-self: center;
}

.home-hero__eyebrow {
  margin-bottom: clamp(1.25rem, 3vh, 2.3rem);
}

.home-hero__title {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 8.65vw, 9.8rem);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  letter-spacing: -0.078em;
  line-height: 0.88;
  text-wrap: balance;
}

.home-hero__title-mask {
  display: block;
  overflow: hidden;
  padding: 0 0.1em 0.1em 0;
  margin-bottom: -0.025em;
}

.home-hero__title-line {
  display: block;
  transform: translate3d(0, 0, 0);
  transform-origin: left bottom;
  text-shadow:
    0.022em 0.025em 0 rgb(7 92 255 / 14%),
    -0.012em 0.055em 0 rgb(201 144 34 / 9%);
  transition: transform 1000ms var(--ease), text-shadow 700ms ease;
  transition-delay: calc(220ms + var(--line-index) * 130ms);
}

.home-hero__support {
  display: grid;
  max-width: 64rem;
  grid-template-columns: minmax(18rem, 1fr) minmax(17rem, 0.9fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-top: clamp(2rem, 5vh, 4.2rem);
  transition: clip-path 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: 760ms;
}

.home-hero__lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1vw + 0.72rem, 1.36rem);
  line-height: 1.5;
}

.home-hero__actions {
  justify-content: flex-start;
}

.home-hero__note {
  grid-column: 2;
  margin: -0.6rem 0 0;
  color: var(--silver-600);
  font-size: 0.76rem;
  line-height: 1.45;
}

.home-hero__stage {
  position: relative;
  z-index: 3;
  grid-column: 7 / 13;
  grid-row: 1;
  width: min(46vw, 43rem);
  aspect-ratio: 1;
  justify-self: end;
  transform: translate3d(calc(var(--pointer-x) * 0.7rem), calc(var(--pointer-y) * 0.7rem + var(--hero-progress) * -2rem), 0);
  pointer-events: none;
}

.home-hero__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(calc(var(--hero-progress) * 42deg));
  fill: none;
  stroke: rgb(16 19 26 / 16%);
  stroke-width: 1;
}

.home-hero__orbit circle:nth-child(2) {
  stroke: rgb(201 144 34 / 34%);
  stroke-dasharray: 4 12;
}

.home-hero__orbit path:not(.home-hero__orbit-progress) {
  stroke: rgb(16 19 26 / 9%);
}

.home-hero__orbit-progress {
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 1180;
  stroke-dashoffset: calc(1180 - var(--hero-progress) * 1180);
}

.home-symbol {
  position: absolute;
  z-index: 2;
  inset: 22%;
  transform: translate3d(calc(var(--pointer-x) * -0.9rem), calc(var(--pointer-y) * -0.9rem), 0) scale(calc(0.92 + var(--hero-progress) * 0.1));
}

.home-symbol__piece {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 1200ms var(--ease), opacity 500ms ease;
}

.home-symbol__piece--blue {
  transform: translate3d(calc(var(--hero-progress) * -3.5rem), calc(var(--hero-progress) * -1.5rem), 0) rotate(calc(var(--hero-progress) * -8deg));
  fill: var(--blue);
}

.home-symbol__piece--gold {
  transform: translate3d(calc(var(--hero-progress) * 3.5rem), calc(var(--hero-progress) * 1.5rem), 0) rotate(calc(var(--hero-progress) * 8deg));
  fill: var(--gold);
}

.home-symbol__piece--core {
  transform: rotate(calc(var(--hero-progress) * 135deg)) scale(calc(1 - var(--hero-progress) * 0.2));
  transform-origin: 50% 56%;
  fill: var(--ink);
}

.home-hero__node {
  position: absolute;
  display: block;
  width: 0.66rem;
  aspect-ratio: 1;
  transform: rotate(45deg);
  border: 1px solid var(--blue);
  background: var(--paper);
}

.home-hero__node--a {
  top: 11%;
  left: 48%;
  transform: translate3d(calc(var(--pointer-x) * 0.4rem), calc(var(--pointer-y) * 0.4rem), 0) rotate(45deg);
}

.home-hero__node--b {
  right: 4%;
  bottom: 24%;
  transform: translate3d(calc(var(--pointer-x) * -0.6rem), calc(var(--pointer-y) * -0.6rem), 0) rotate(45deg);
  border-color: var(--gold);
  background: var(--gold);
}

.home-hero__node--c {
  bottom: 7%;
  left: 30%;
  width: 0.4rem;
  background: var(--ink);
  border-color: var(--ink);
}

.home-hero__coordinate {
  position: absolute;
  color: var(--silver-600);
  font-size: 0.58rem;
  font-weight: 650;
  letter-spacing: 0.17em;
}

.home-hero__coordinate--a {
  top: 3%;
  right: 3%;
}

.home-hero__coordinate--b {
  right: -1rem;
  bottom: 5%;
  writing-mode: vertical-rl;
}

.home-hero__scroll {
  position: absolute;
  z-index: 5;
  right: var(--site-pad);
  bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--silver-600);
  font-size: 0.59rem;
  font-weight: 690;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-hero__scroll i {
  position: relative;
  width: 4rem;
  height: 1px;
  overflow: hidden;
  background: var(--silver-200);
}

.home-hero__scroll i::after {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: var(--blue);
  animation: homeScrollTrace 1800ms var(--ease) 1700ms infinite;
  content: "";
}

.motion-ready .home-experience:not(.is-intro-ready) .home-hero__title-line {
  transform: translate3d(0, 112%, 0) rotate(2deg);
}

.motion-ready .home-experience:not(.is-intro-ready) .home-hero__support {
  transform: translate3d(0, 2rem, 0);
  clip-path: inset(0 100% 0 0);
}

.motion-ready .home-experience:not(.is-intro-ready) .home-hero__axis--x {
  transform: scaleX(0);
}

.motion-ready .home-experience:not(.is-intro-ready) .home-hero__axis--y {
  transform: scaleY(0);
}

.motion-ready .home-experience:not(.is-intro-ready) .home-hero__axis--orbit {
  transform: translate(-50%, -50%) rotate(-42deg) scale(0.35);
}

.motion-ready .home-experience:not(.is-intro-ready) .home-symbol__piece--blue {
  transform: translate3d(62%, -54%, 0) rotate(42deg);
}

.motion-ready .home-experience:not(.is-intro-ready) .home-symbol__piece--gold {
  transform: translate3d(-58%, 52%, 0) rotate(-38deg);
}

.motion-ready .home-experience:not(.is-intro-ready) .home-symbol__piece--core {
  transform: rotate(-135deg) scale(0.15);
  opacity: 0;
}

.motion-ready .home-hero__axis {
  transition: transform 1200ms var(--ease);
}

.motion-ready .home-hero__axis--y {
  transition-delay: 120ms;
}

.motion-ready .home-hero__axis--orbit {
  transition-delay: 240ms;
}

@keyframes homeScrollTrace {
  0% { transform: translateX(-100%); }
  48%, 100% { transform: translateX(100%); }
}

.button--kinetic {
  --magnet-x: 0px;
  --magnet-y: 0px;
  overflow: hidden;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform 260ms var(--ease), color 300ms ease, border-color 300ms ease, background-color 300ms ease;
}

.button--kinetic::before {
  position: absolute;
  inset: 0;
  transform: translateX(-104%) skewX(-12deg);
  background: var(--blue);
  content: "";
  transition: transform 480ms var(--ease);
}

.button--kinetic > span {
  position: relative;
  z-index: 1;
}

.button--kinetic:hover::before,
.button--kinetic:focus-visible::before {
  transform: translateX(0) skewX(0);
}

.button--kinetic:hover,
.button--kinetic:focus-visible {
  border-color: var(--blue);
  color: var(--paper);
}

[data-magnetic] {
  --magnet-x: 0px;
  --magnet-y: 0px;
}

.home-branch {
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
}

.home-branch__signal {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: var(--home-line);
  pointer-events: none;
}

.home-branch__signal span,
.home-branch__signal b,
.home-branch__signal i {
  position: absolute;
  left: 50%;
  display: block;
}

.home-branch__signal span,
.home-branch__signal b {
  width: 0.2rem;
  height: 50%;
  transform: translateX(-50%) scaleY(var(--scene-progress));
}

.home-branch__signal span {
  top: 0;
  transform-origin: top;
  background: var(--blue);
}

.home-branch__signal b {
  bottom: 0;
  transform-origin: bottom;
  background: var(--gold);
}

.home-branch__signal i {
  top: 8%;
  width: 0.72rem;
  height: 78%;
  transform: translateX(-50%) translateY(calc(var(--scene-progress) * 100%));
}

.home-branch__signal i::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  transform: rotate(45deg);
  background: var(--ink);
  content: "";
}

.home-branch__paths {
  min-height: 100svh;
  border-top: 0;
}

.home-branch .path-panel {
  display: grid;
  min-height: 100svh;
  align-items: end;
  padding: clamp(3rem, 7vw, 7rem);
  background: var(--paper);
  clip-path: inset(calc((1 - var(--scene-progress)) * 5%) 0 0);
}

.home-branch .path-panel::before {
  transform: scaleY(0.018);
  transform-origin: bottom;
  transition: transform 700ms var(--ease);
}

.home-branch .path-panel:hover::before,
.home-branch .path-panel:focus-visible::before,
.home-branch .path-panel:focus-within::before {
  transform: scaleY(1);
}

.path-panel__grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  transform: translate3d(calc(var(--scene-progress) * 2rem - 1rem), 0, 0);
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgb(16 19 26 / 7%) 1px) 0 0 / 25% 100%,
    linear-gradient(0deg, transparent calc(100% - 1px), rgb(16 19 26 / 4%) 1px) 0 0 / 100% 25%;
  opacity: 0.68;
}

.home-branch .path-panel__content {
  display: grid;
  min-height: 75svh;
  grid-template-rows: auto 1fr auto;
  align-items: end;
}

.home-branch .path-panel__title {
  display: block;
  max-width: 9ch;
  font-size: clamp(4rem, 7vw, 8.5rem);
  line-height: 0.88;
}

.home-branch .path-panel__text {
  display: block;
  max-width: 31rem;
}

.path-panel__arrow {
  display: grid;
  width: 4rem;
  aspect-ratio: 1;
  place-items: center;
  justify-self: end;
  transform: rotate(calc(var(--scene-progress) * 45deg));
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 1.2rem;
}

.home-products {
  min-height: 120svh;
  overflow: hidden;
  padding-block: clamp(7rem, 13vw, 13rem);
  background: var(--paper-warm);
}

.home-products::before {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform: scaleX(calc(0.75 + var(--scene-progress) * 0.25));
  transform-origin: right;
  background: var(--blue-pale);
  content: "";
}

.home-products__grid {
  align-items: stretch;
  border-top-color: var(--ink);
  perspective: 1000px;
}

.home-product {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  min-height: clamp(39rem, 60vw, 50rem);
  background: rgb(255 255 255 / 82%);
  transform: translate3d(0, calc(var(--scene-progress) * 4rem - 2rem), 0) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transform-style: preserve-3d;
  transition: background-color 400ms ease, color 400ms ease, transform 180ms ease-out;
}

.home-product:nth-child(2) {
  transform: translate3d(0, calc(var(--scene-progress) * -6rem + 3rem), 0) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
}

.home-product:nth-child(3) {
  transform: translate3d(0, calc(var(--scene-progress) * 7rem - 3.5rem), 0) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
}

.home-product__scan {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  transform: translateX(-1px);
  background: var(--blue);
  box-shadow: 0 0 0.9rem rgb(7 92 255 / 35%);
  transition: transform 700ms var(--ease);
}

.home-product:hover .home-product__scan,
.home-product:focus-visible .home-product__scan {
  transform: translateX(calc(100% + 30vw));
}

.home-product__index {
  display: block;
  margin-bottom: 1rem;
  color: var(--silver-600);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.home-product:hover .home-product__index,
.home-product:focus-visible .home-product__index {
  color: rgb(255 255 255 / 72%);
}

.home-product__device {
  width: min(78%, 14rem);
  margin: clamp(1.8rem, 4vw, 3.4rem) auto 0;
  transform: translate3d(0, 0.8rem, 2.8rem) rotate(-2deg);
  transition: transform 650ms var(--ease), filter 450ms ease;
}

.home-product:nth-child(2) .home-product__device {
  transform: translate3d(0, -0.25rem, 2.8rem) rotate(2.5deg);
}

.home-product:nth-child(3) .home-product__device {
  transform: translate3d(0, 0.45rem, 2.8rem) rotate(-1deg);
}

.home-product:hover .home-product__device,
.home-product:focus-visible .home-product__device {
  transform: translate3d(0, -0.75rem, 4rem) rotate(0deg) scale(1.025);
  filter: saturate(1.08);
}

.home-product__platforms {
  display: block;
  margin: -0.35rem 0 0.8rem;
  color: var(--blue);
  font-size: 0.64rem;
  font-weight: 720;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 300ms ease;
}

.home-product:hover .home-product__platforms,
.home-product:focus-visible .home-product__platforms {
  color: var(--gold-light);
}

.home-device {
  --device-line: rgb(16 19 26 / 68%);
  --device-surface: #f8f8f6;
  position: relative;
  display: block;
  isolation: isolate;
}

.home-device__shadow {
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -5%;
  left: 8%;
  height: 12%;
  transform: perspective(18rem) rotateX(66deg);
  border-radius: 50%;
  background: rgb(16 19 26 / 30%);
  filter: blur(0.85rem);
  content: "";
  opacity: 0.55;
  transition: transform 650ms var(--ease), opacity 450ms ease;
}

.home-device__hardware,
.home-device__screen,
.home-device__fallback,
.home-device__chrome,
.home-device__sensor,
.home-device__base {
  position: absolute;
  display: block;
}

.home-device__hardware {
  inset: 0;
}

.home-device__screen {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(7 92 255 / 10%), transparent 48%),
    var(--paper);
}

.home-device__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-device__media--icon {
  padding: 12%;
  object-fit: contain;
}

.home-device__media--contained {
  padding: 9%;
  background:
    linear-gradient(135deg, rgb(7 92 255 / 7%), transparent 52%),
    var(--paper);
  object-fit: contain;
}

.home-device__fallback {
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgb(16 19 26 / 8%) 1px) 0 0 / 25% 100%,
    linear-gradient(0deg, transparent calc(100% - 1px), rgb(16 19 26 / 6%) 1px) 0 0 / 100% 25%,
    linear-gradient(145deg, rgb(7 92 255 / 13%), rgb(201 144 34 / 8%));
}

.home-device__fallback b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-weight: 430;
  letter-spacing: -0.08em;
}

.home-device__fallback i {
  position: absolute;
  display: block;
  background: var(--blue);
}

.home-device__fallback i:first-of-type {
  top: 13%;
  left: 8%;
  width: 26%;
  height: 1px;
}

.home-device__fallback i:nth-of-type(2) {
  right: 9%;
  bottom: 14%;
  width: 18%;
  aspect-ratio: 1;
  transform: rotate(45deg);
  background: var(--gold);
}

.home-device__fallback i:nth-of-type(3) {
  top: 9%;
  right: 11%;
  width: 0.45rem;
  aspect-ratio: 1;
  transform: rotate(45deg);
}

.home-device--phone {
  aspect-ratio: 9 / 18.5;
}

.home-device--phone .home-device__hardware {
  border: 2px solid var(--ink);
  border-radius: 2.1rem;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
}

.home-device--phone .home-device__screen {
  inset: 0.52rem;
  border-radius: 1.62rem;
}

.home-device--phone .home-device__sensor {
  z-index: 3;
  top: 0.83rem;
  left: 50%;
  width: 34%;
  height: 0.42rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--ink);
}

.home-device--phone .home-device__chrome,
.home-device--phone .home-device__base {
  display: none;
}

.home-device--desktop {
  aspect-ratio: 16 / 10.4;
}

.home-device--desktop .home-device__hardware {
  bottom: 7%;
  border: 2px solid var(--ink);
  border-radius: 0.8rem;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
}

.home-device--desktop .home-device__screen {
  inset: 1.18rem 0.48rem 0.48rem;
  border-radius: 0.22rem 0.22rem 0.48rem 0.48rem;
}

.home-device--desktop .home-device__chrome {
  z-index: 2;
  top: 0.42rem;
  left: 0.62rem;
  display: flex;
  gap: 0.25rem;
}

.home-device--desktop .home-device__chrome i {
  display: block;
  width: 0.3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0.62;
}

.home-device--desktop .home-device__chrome i:nth-child(2) { background: var(--blue); }
.home-device--desktop .home-device__chrome i:nth-child(3) { background: var(--gold); }

.home-device--desktop .home-device__base {
  right: -4%;
  bottom: -8%;
  left: -4%;
  height: 8%;
  border-radius: 0 0 60% 60%;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
}

.home-device--desktop .home-device__sensor {
  display: none;
}

.home-device--neutral {
  aspect-ratio: 1;
}

.home-device--neutral .home-device__shadow {
  right: 16%;
  bottom: 0;
  left: 16%;
  height: 10%;
}

.home-device--neutral .home-device__hardware {
  inset: 10%;
  transform: rotate(45deg);
  border: 1px solid rgb(7 92 255 / 48%);
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(7 92 255 / 16%) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(0deg, transparent calc(50% - 0.5px), rgb(201 144 34 / 20%) 50%, transparent calc(50% + 0.5px)),
    rgb(255 255 255 / 76%);
  box-shadow:
    0 0 0 0.55rem rgb(7 92 255 / 5%),
    0 0 0 0.6rem rgb(7 92 255 / 14%);
}

.home-device--neutral .home-device__hardware::before,
.home-device--neutral .home-device__hardware::after {
  position: absolute;
  inset: 12%;
  border: 1px solid rgb(16 19 26 / 14%);
  content: "";
}

.home-device--neutral .home-device__hardware::after {
  inset: 27%;
  border-color: rgb(201 144 34 / 42%);
}

.home-device--neutral .home-device__screen {
  z-index: 2;
  inset: 22%;
  transform: rotate(-45deg);
  border: 1px solid rgb(16 19 26 / 20%);
  background: var(--paper);
  box-shadow: 0 0.7rem 2rem rgb(16 19 26 / 12%);
}

.home-device--neutral .home-device__chrome {
  z-index: 3;
  inset: 0;
}

.home-device--neutral .home-device__chrome i {
  position: absolute;
  display: block;
  width: 0.48rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--blue);
  background: var(--paper);
}

.home-device--neutral .home-device__chrome i:first-child { top: 0; left: 50%; }
.home-device--neutral .home-device__chrome i:nth-child(2) { top: 50%; left: 100%; border-color: var(--gold); }
.home-device--neutral .home-device__chrome i:nth-child(3) { top: 100%; left: 50%; }

.home-device--neutral .home-device__sensor {
  z-index: 4;
  top: 50%;
  left: 50%;
  width: 0.42rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--blue);
}

.home-device--neutral .home-device__base {
  display: none;
}

.home-process {
  min-height: 130svh;
  overflow: hidden;
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

.home-process::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  transform: translate3d(calc(var(--scene-progress) * -3rem), 0, 0);
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgb(255 255 255 / 7%) 1px) 0 0 / 12.5% 100%,
    linear-gradient(0deg, transparent calc(100% - 1px), rgb(255 255 255 / 4%) 1px) 0 0 / 100% 12rem;
  content: "";
}

.home-process__constellation {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: 4%;
  width: clamp(16rem, 33vw, 34rem);
  aspect-ratio: 1;
  transform: rotate(calc(var(--scene-progress) * 90deg));
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
}

.home-process__constellation span,
.home-process__constellation i {
  position: absolute;
  display: block;
  width: 0.7rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--blue);
}

.home-process__constellation span:first-child { top: 4%; left: 50%; }
.home-process__constellation span:nth-child(2) { top: 66%; left: 4%; background: var(--gold); }
.home-process__constellation span:nth-child(3) { top: 82%; left: 86%; background: var(--paper); }
.home-process__constellation i { top: 50%; left: 50%; width: 22%; border: 1px solid rgb(255 255 255 / 18%); background: transparent; }

.home-process__layout {
  position: relative;
  z-index: 2;
}

.home-process__aside {
  top: 8rem;
}

.home-process__signal {
  margin-top: clamp(3rem, 9vh, 8rem);
  color: rgb(255 255 255 / 35%);
  font-size: 0.62rem;
  font-weight: 680;
  letter-spacing: 0.18em;
  line-height: 2;
  text-transform: uppercase;
}

.home-process__title {
  max-width: 10ch;
  color: var(--paper);
}

.home-process__lede {
  color: rgb(255 255 255 / 72%);
}

.home-process__steps {
  position: relative;
  border-top-color: rgb(255 255 255 / 20%);
}

.home-process__steps::before {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 2.35rem;
  width: 1px;
  transform: scaleY(var(--scene-progress));
  transform-origin: top;
  background: var(--blue);
  content: "";
}

.home-process__step {
  position: relative;
  min-height: 12rem;
  align-items: center;
  border-bottom-color: rgb(255 255 255 / 20%);
  color: rgb(255 255 255 / 72%);
  clip-path: inset(0 0 0 5%);
  transition: color 480ms ease, clip-path 700ms var(--ease), transform 700ms var(--ease);
}

.home-process__step::before {
  color: rgb(255 255 255 / 72%);
}

.home-process__step h3 {
  color: inherit;
  font-size: clamp(2.4rem, 4.8vw, 5.4rem);
}

.home-process__step p {
  color: inherit;
}

.home-process__step.is-current,
.home-process__step.is-scene-visible {
  transform: translate3d(-1rem, 0, 0);
  color: var(--paper);
  clip-path: inset(0);
}

.home-process__pulse {
  position: absolute;
  top: 50%;
  left: 2.35rem;
  width: 0.68rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.55);
  border: 1px solid var(--blue);
  background: var(--ink);
  transition: transform 420ms var(--ease), background-color 420ms ease;
}

.home-process__step.is-current .home-process__pulse,
.home-process__step.is-scene-visible .home-process__pulse {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  background: var(--blue);
}

.home-capabilities {
  overflow: hidden;
}

.home-capabilities__grid .capability {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  transition: transform 180ms ease-out, background-color 320ms ease;
}

.home-statement {
  min-height: 112svh;
  overflow: hidden;
  padding-block: 0;
}

.home-statement__content {
  position: relative;
  z-index: 2;
  min-height: 112svh;
}

.home-statement .statement blockquote,
.home-statement blockquote {
  max-width: 15ch;
  font-size: clamp(3.4rem, 7.4vw, 8.8rem);
}

.home-statement__mark {
  position: absolute;
  z-index: 0;
  right: -7vw;
  bottom: -17vw;
  width: min(58vw, 54rem);
  aspect-ratio: 1;
  transform: rotate(calc(var(--scene-progress) * 45deg - 18deg));
  opacity: 0.2;
}

.home-statement__mark i,
.home-statement__mark b {
  position: absolute;
  display: block;
}

.home-statement__mark i:first-child {
  top: 3%;
  left: 3%;
  width: 66%;
  height: 20%;
  border-top: 5rem solid var(--blue);
  border-left: 5rem solid var(--blue);
}

.home-statement__mark i:nth-child(2) {
  right: 3%;
  bottom: 3%;
  width: 66%;
  height: 20%;
  border-right: 5rem solid var(--gold);
  border-bottom: 5rem solid var(--gold);
}

.home-statement__mark b {
  top: 50%;
  left: 50%;
  width: 16%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--paper);
}

.home-projects {
  --projects-progress: 0;
  --projects-shift: 0px;
  min-height: var(--project-scroll-height, 112svh);
  overflow: clip;
  padding-block: 0;
  background: var(--paper);
}

.home-projects__beam {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  transform: translate3d(calc(var(--scene-progress) * 100vw - 1px), 0, 0);
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  box-shadow: 0 0 1.5rem rgb(201 144 34 / 22%);
  pointer-events: none;
}

.home-projects__pin {
  position: sticky;
  top: 5.15rem;
  height: calc(100svh - 5.15rem);
  overflow: hidden;
  border-bottom: 1px solid var(--home-line);
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), rgb(16 19 26 / 4%) 1px) 0 0 / 12.5% 100%,
    var(--paper);
}

.home-projects__shell {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-block: clamp(1rem, 2vh, 1.45rem) clamp(0.8rem, 1.5vh, 1.1rem);
}

.home-projects .home-scene__heading {
  grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr);
  margin-bottom: clamp(0.8rem, 1.8vh, 1.3rem);
}

.home-projects .home-scene__title {
  max-width: 14ch;
  font-size: clamp(2.8rem, 4.4vw, 5rem);
}

.home-projects .home-scene__lede {
  max-width: 40rem;
  font-size: clamp(0.98rem, 1.35vw, 1.18rem);
  line-height: 1.45;
}

.home-projects__viewport {
  min-height: 0;
  overflow: hidden;
}

.home-projects__track {
  display: flex;
  width: max-content;
  height: 100%;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate3d(var(--projects-shift), 0, 0);
}

.home-projects.is-project-near .home-projects__track {
  will-change: transform;
}

.home-project {
  --project-presence: 1;
  position: relative;
  width: min(69vw, 62rem);
  min-width: 42rem;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--home-line);
  background: rgb(255 255 255 / 88%);
  opacity: calc(0.34 + var(--project-presence) * 0.66);
  transform: translate3d(0, calc((1 - var(--project-presence)) * 2.6rem), 0) scale(calc(0.965 + var(--project-presence) * 0.035));
  transform-origin: center;
  transition: border-color 320ms ease, background-color 320ms ease;
}

.home-project::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  transform: scaleX(var(--project-presence));
  transform-origin: left;
  background:
    linear-gradient(130deg, rgb(7 92 255 / 8%), transparent 42%),
    linear-gradient(310deg, rgb(201 144 34 / 8%), transparent 37%);
  content: "";
  pointer-events: none;
}

.home-project.is-project-active,
.home-project:hover,
.home-project:focus-within {
  border-color: rgb(7 92 255 / 38%);
  background: var(--paper);
}

.home-project__link {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  grid-template-columns: minmax(18rem, 1.15fr) minmax(18rem, 0.85fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: clamp(1.05rem, 1.8vw, 1.7rem);
  color: var(--ink);
  text-decoration: none;
}

.home-project__link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -0.35rem;
}

.home-project__meta {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-project__index,
.home-project__eyebrow {
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-project__index {
  color: var(--silver-600);
}

.home-project__device {
  width: min(100%, 32rem);
  align-self: center;
  justify-self: center;
  transform: translate3d(calc((1 - var(--project-presence)) * -2.2rem), calc((1 - var(--project-presence)) * 1.4rem), 0) rotate(calc((1 - var(--project-presence)) * -2deg));
}

.home-project__device.home-device--phone {
  width: min(52%, 12rem);
}

.home-projects.is-project-story-ready .home-project__device.home-device--phone {
  width: min(48%, 9rem);
}

.home-project__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: center;
}

.home-project__eyebrow {
  margin-bottom: 0.75rem;
  color: var(--blue);
}

.home-project__title-wrap {
  position: relative;
  display: block;
}

.home-project__title,
.home-project__title-echo {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.2vw, 4.4rem);
  font-variation-settings: "wght" 650;
  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.home-project__title {
  position: relative;
  z-index: 2;
  margin: 0;
}

.home-project__title-echo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  transform: translate3d(calc((1 - var(--project-presence)) * 1rem + 0.08em), calc((1 - var(--project-presence)) * 0.45rem + 0.1em), 0);
  color: transparent;
  -webkit-text-stroke: 1px rgb(7 92 255 / 28%);
  opacity: calc(0.22 + var(--project-presence) * 0.45);
  pointer-events: none;
}

.home-project__summary {
  display: block;
  max-width: 32rem;
  margin-top: clamp(0.75rem, 1.4vw, 1.15rem);
  color: var(--silver-600);
  font-size: 0.9rem;
  line-height: 1.5;
}

.home-project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.home-project__tags span {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--silver-200);
  color: var(--silver-600);
  font-size: 0.58rem;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-project__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: clamp(0.7rem, 1.4vw, 1.1rem);
  border-top: 1px solid var(--home-line);
  font-size: 0.62rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-project__cta i {
  display: grid;
  width: 2.25rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-style: normal;
  transition: transform 480ms var(--ease), background-color 300ms ease, color 300ms ease;
}

.home-project:hover .home-project__cta i,
.home-project:focus-within .home-project__cta i {
  transform: rotate(45deg);
  background: var(--blue);
  color: var(--paper);
}

.home-projects__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: clamp(0.9rem, 2vh, 1.5rem);
}

.home-projects__progress {
  position: relative;
  display: block;
  width: min(24rem, 48vw);
  height: 1px;
  overflow: hidden;
  background: var(--silver-200);
}

.home-projects__progress i {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--projects-progress));
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}

/* Progressive baseline: every project remains reachable if the motion script is unavailable. */
.home-projects:not(.is-project-story-ready) {
  min-height: auto;
  overflow: visible;
  padding-block: clamp(6rem, 10vw, 9rem);
}

.home-projects:not(.is-project-story-ready) .home-projects__beam {
  display: none;
}

.home-projects:not(.is-project-story-ready) .home-projects__pin {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  border-bottom: 0;
  background: transparent;
}

.home-projects:not(.is-project-story-ready) .home-projects__shell {
  display: block;
  height: auto;
  padding-block: 0;
}

.home-projects:not(.is-project-story-ready) .home-projects__viewport {
  overflow: visible;
}

.home-projects:not(.is-project-story-ready) .home-projects__track {
  display: grid;
  width: 100%;
  height: auto;
  transform: none;
  will-change: auto;
}

.home-projects:not(.is-project-story-ready) .home-project {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 34rem;
  opacity: 1;
  transform: none;
}

.home-projects:not(.is-project-story-ready) .home-project__link {
  height: auto;
  min-height: 34rem;
}

.home-projects:not(.is-project-story-ready) .home-project__device {
  transform: none;
  will-change: auto;
}

.home-projects:not(.is-project-story-ready) .home-project__title-echo {
  transform: translate3d(0.08em, 0.1em, 0);
}

.home-projects:not(.is-project-story-ready) .home-projects__progress i {
  transform: scaleX(1);
}

.home-finale {
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.home-finale__content {
  position: relative;
  z-index: 2;
}

.home-finale .cta-band__text {
  color: rgb(255 255 255 / 72%);
}

.home-finale__aperture {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 4vw;
  width: min(48vw, 46rem);
  aspect-ratio: 1;
  transform: translateY(-50%) rotate(calc(var(--scene-progress) * 35deg - 14deg));
  opacity: 0.72;
}

.home-finale__aperture span,
.home-finale__aperture i {
  position: absolute;
  display: block;
}

.home-finale__aperture span:first-child {
  top: 4%;
  left: 4%;
  width: 66%;
  height: 18%;
  border-top: clamp(2rem, 5vw, 5rem) solid var(--blue);
  border-left: clamp(2rem, 5vw, 5rem) solid var(--blue);
}

.home-finale__aperture span:nth-child(2) {
  right: 4%;
  bottom: 4%;
  width: 66%;
  height: 18%;
  border-right: clamp(2rem, 5vw, 5rem) solid var(--gold);
  border-bottom: clamp(2rem, 5vw, 5rem) solid var(--gold);
}

.home-finale__aperture i {
  top: 50%;
  left: 50%;
  width: 13%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(calc(0.6 + var(--scene-progress) * 0.4));
  background: var(--paper);
}

.home-story-rail {
  position: fixed;
  z-index: 90;
  top: 50%;
  right: 0.7rem;
  display: grid;
  width: 2.2rem;
  justify-items: center;
  gap: 0.65rem;
  transform: translateY(-50%);
  color: var(--silver-600);
  font-size: 0.57rem;
  font-weight: 720;
  letter-spacing: 0.14em;
  pointer-events: none;
}

.home-story-rail__track {
  position: relative;
  display: block;
  width: 1px;
  height: 8rem;
  overflow: hidden;
  background: var(--silver-200);
}

.home-story-rail__track i {
  position: absolute;
  inset: 0;
  transform: scaleY(var(--scroll-progress));
  transform-origin: top;
  background: var(--blue);
}

.home-story-rail__label {
  position: absolute;
  top: 50%;
  right: 1.85rem;
  width: max-content;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-transform: uppercase;
}

.home-cursor {
  position: fixed;
  z-index: 600;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.home-cursor__ring,
.home-cursor__dot {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform: translate(-50%, -50%) rotate(45deg);
}

.home-cursor__ring {
  width: 2.3rem;
  aspect-ratio: 1;
  border: 1px solid var(--blue);
  transition: width 260ms var(--ease), background-color 260ms ease, border-color 260ms ease;
}

.home-cursor__dot {
  width: 0.3rem;
  aspect-ratio: 1;
  background: var(--ink);
}

.home-cursor__label {
  position: absolute;
  top: 1.9rem;
  left: 1rem;
  width: max-content;
  color: var(--ink);
  font-size: 0.56rem;
  font-weight: 720;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 180ms ease;
}

.home-cursor.is-visible {
  opacity: 1;
}

.home-cursor.is-interactive .home-cursor__ring {
  width: 3.5rem;
  border-color: var(--gold);
  background: rgb(201 144 34 / 8%);
}

.home-cursor.is-interactive .home-cursor__label {
  opacity: 1;
}

.motion-ready [data-split-reveal] {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 2rem, 0);
  transition: clip-path 950ms var(--ease), transform 950ms var(--ease);
}

.motion-ready .is-scene-active [data-split-reveal],
.motion-ready [data-split-reveal].is-scene-visible {
  clip-path: inset(0);
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
  .home.pointer-ready .home-cursor {
    display: block;
  }

  .home-product,
  .home-capabilities__grid .capability {
    will-change: transform;
  }
}

@media (max-width: 68rem) {
  .home-story-rail {
    display: none;
  }

  .home-hero {
    min-height: auto;
  }

  .home-hero__pin {
    position: relative;
    top: auto;
    min-height: calc(100svh - 5.15rem);
  }

  .home-hero__frame {
    min-height: calc(100svh - 5.15rem);
  }

  .home-hero__copy {
    grid-column: 1 / 12;
  }

  .home-hero__title {
    max-width: 10.6ch;
    font-size: clamp(3.9rem, 10.8vw, 7.4rem);
  }

  .home-hero__stage {
    position: absolute;
    z-index: 1;
    top: 7%;
    right: -12%;
    width: min(57vw, 34rem);
    opacity: 0.68;
  }

  .home-hero__support {
    position: relative;
    z-index: 3;
  }

  .home-scene__heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-products,
  .home-process,
  .home-statement,
  .home-statement__content,
  .home-projects {
    min-height: auto;
  }

  .home-product,
  .home-product:nth-child(2),
  .home-product:nth-child(3) {
    transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
  }

  .home-projects {
    min-height: auto;
    padding-block: clamp(6rem, 10vw, 9rem);
  }

  .home-projects__pin {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    border-bottom: 0;
    background: transparent;
  }

  .home-projects__shell {
    display: block;
    height: auto;
    padding-block: 0;
  }

  .home-projects .home-scene__heading {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: clamp(2.5rem, 7vw, 4rem);
  }

  .home-projects__viewport {
    overflow: visible;
  }

  .home-projects__track {
    display: grid;
    width: 100%;
    height: auto;
    transform: none !important;
    will-change: auto;
  }

  .home-project {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 34rem;
    opacity: 1;
    transform: none;
  }

  .home-project__device {
    transform: none;
    will-change: auto;
  }

  .home-project__title-echo {
    transform: translate3d(0.08em, 0.1em, 0);
  }

  .home-projects__progress i {
    transform: scaleX(1);
  }

  .home-process__steps::before,
  .home-process__pulse {
    left: 1.15rem;
  }
}

@media (max-width: 46rem) {
  .home-experience::before {
    position: absolute;
    background: linear-gradient(90deg, transparent calc(100% - 1px), rgb(16 19 26 / 4%) 1px) 0 0 / 25% 100%;
  }

  .home-hero__pin,
  .home-hero__frame {
    min-height: calc(100svh - 4.6rem);
  }

  .home-hero__frame {
    display: block;
    padding-block: clamp(3rem, 8vh, 5rem) 2.6rem;
  }

  .home-hero__copy {
    display: flex;
    min-height: calc(100svh - 10rem);
    flex-direction: column;
  }

  .home-hero__title {
    position: relative;
    z-index: 3;
    max-width: 10.2ch;
    font-size: clamp(3.15rem, 15.8vw, 5.4rem);
    letter-spacing: -0.07em;
    line-height: 0.89;
  }

  .home-hero__support {
    display: block;
    margin-top: auto;
    padding-top: 2rem;
  }

  .home-hero__lede {
    max-width: 32rem;
    margin-bottom: 1.4rem;
    font-size: 1rem;
  }

  .home-hero__note {
    margin-top: 1rem;
  }

  .home-hero__stage {
    top: 30%;
    right: -24%;
    width: 82vw;
    opacity: 0.28;
  }

  .home-hero__blueprint::after,
  .home-hero__axis--y {
    left: 76%;
  }

  .home-hero__scroll,
  .home-hero__coordinate {
    display: none;
  }

  .home-branch,
  .home-branch__paths {
    min-height: auto;
  }

  .home-branch__signal {
    left: var(--site-pad);
  }

  .home-branch .path-panel {
    min-height: 72svh;
    padding: 3rem var(--site-pad) 3rem calc(var(--site-pad) + 1.4rem);
  }

  .home-branch .path-panel__content {
    min-height: 58svh;
  }

  .home-branch .path-panel__title {
    font-size: clamp(3.4rem, 15vw, 5.7rem);
  }

  .path-panel__arrow {
    width: 3.3rem;
  }

  .home-products,
  .home-process,
  .home-projects {
    padding-block: 6rem;
  }

  .home-scene__title {
    font-size: clamp(3.1rem, 14vw, 5.7rem);
  }

  .home-scene__meta {
    margin-bottom: 1rem;
  }

  .home-product,
  .home-product:nth-child(2),
  .home-product:nth-child(3) {
    min-height: 72svh;
    transform: none;
  }

  .home-product__device,
  .home-product:nth-child(2) .home-product__device,
  .home-product:nth-child(3) .home-product__device {
    width: min(58%, 12rem);
    transform: none;
  }

  .home-projects__track {
    gap: 1.25rem;
  }

  .home-project {
    min-height: 0;
  }

  .home-project__link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 1.7rem;
    padding: 1.25rem;
  }

  .home-project__meta {
    grid-column: 1;
  }

  .home-project__device {
    width: min(100%, 30rem);
    min-height: 0;
  }

  .home-project__device.home-device--phone {
    width: min(52%, 12rem);
  }

  .home-project__copy {
    min-height: 20rem;
  }

  .home-project__title,
  .home-project__title-echo {
    font-size: clamp(2.8rem, 12vw, 4.4rem);
  }

  .home-projects__footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-projects__progress {
    width: 100%;
  }

  .home-process::before {
    background: linear-gradient(90deg, transparent calc(100% - 1px), rgb(255 255 255 / 7%) 1px) 0 0 / 25% 100%;
  }

  .home-process__constellation {
    top: 2rem;
    right: -9rem;
    opacity: 0.55;
  }

  .home-process__signal {
    display: none;
  }

  .home-process__step,
  .home-process__step.is-current,
  .home-process__step.is-scene-visible {
    min-height: 14rem;
    transform: none;
  }

  .home-process__step h3 {
    font-size: clamp(2.4rem, 11vw, 4rem);
  }

  .home-statement__mark {
    right: -43vw;
    bottom: -8vw;
    width: 105vw;
  }

  .home-statement__mark i:first-child,
  .home-statement__mark i:nth-child(2) {
    border-width: 2.8rem;
  }

  .home-statement .statement blockquote,
  .home-statement blockquote {
    font-size: clamp(3rem, 13vw, 5.3rem);
  }

  .home-projects__beam {
    display: none;
  }

  .home-finale {
    min-height: 92svh;
  }

  .home-finale__aperture {
    top: 13%;
    right: -28%;
    width: 88vw;
    opacity: 0.35;
  }

  .home-finale__content {
    align-self: end;
    padding-bottom: 2rem;
  }

  .home-cursor {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce), (update: slow) {
  .home-hero {
    --hero-progress: 0 !important;
  }

  .home-scene {
    --scene-progress: 0 !important;
  }

  .home-hero,
  .home-branch,
  .home-products,
  .home-process,
  .home-statement,
  .home-statement__content,
  .home-projects,
  .home-finale {
    min-height: auto;
  }

  .home-hero__pin {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .home-projects__pin {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .home-projects__shell {
    display: block;
    height: auto;
  }

  .home-projects__viewport {
    overflow: visible;
  }

  .home-projects__track {
    display: grid;
    width: 100%;
    height: auto;
    transform: none !important;
    will-change: auto;
  }

  .home-project {
    width: 100%;
    min-width: 0;
    height: auto;
    opacity: 1 !important;
    transform: none !important;
  }

  .home-hero__frame {
    min-height: min(50rem, calc(100svh - 5.15rem));
  }

  .home-hero__title-line,
  .home-hero__support,
  .home-symbol__piece,
  .home-hero__stage,
  .home-scene__geometry,
  .home-product,
  .home-product:nth-child(2),
  .home-product:nth-child(3),
  .home-product__device,
  .home-project__device,
  .home-project__title-echo,
  .home-process__constellation,
  .home-process__step,
  .home-statement__mark,
  .home-finale__aperture,
  [data-split-reveal] {
    transform: none !important;
    clip-path: none !important;
  }

  .home-story-rail,
  .home-cursor,
  .home-hero__scroll,
  .home-hero__field {
    display: none !important;
  }
}