.hero-alive {
  --field-accent: #7fb5bd;
  --field-muted: rgba(154,154,166,.5);
}

/* Removed: the grid (css/lattice.css) is the site's one background layer.
   An active ArkBackgrounds style (js/main.js) still overrides it directly. */
.hero-atmosphere { display: none; }

.hero-alive .ark-layer-persistent > canvas[role="presentation"]:not(.zero-webgl) {
  opacity: .12;
  translate: var(--hero-x, 0px) var(--hero-y, 0px);
  transition: translate 1100ms cubic-bezier(.2,.65,.3,1);
  animation: zero-breathe 18s ease-in-out 1.4s infinite;
  will-change: transform, opacity;
}
.hero-alive:has(.ark-cta:hover, .ark-cta:focus-visible) { --zero-high: .68; }
@keyframes zero-breathe {
  0%, 100% { scale: 1; opacity: .10; }
  50% { scale: 1.018; opacity: var(--zero-high, .18); }
}


.ark-field-pill {
  animation: label-breathe 7s ease-in-out 2s infinite;
}
.ark-field-pill::before,
.ark-field-pill::after {
  content: "";
  width: clamp(24px, 3.6cqw, 58px);
  height: 1px;
  margin: 0 14px;
  background: hsl(var(--border-default));
}
.ark-field-pill::after { transform: rotate(180deg); }
@keyframes label-breathe { 0%, 100% { opacity: .58; } 50% { opacity: .92; } }

.hero-alive .ark-cta:hover,
.hero-alive .ark-cta:focus-visible {
  translate: 0 0;
  scale: 1;
  filter: none;
  color: var(--field-accent);
  border-color: var(--field-accent);
  letter-spacing: .28em !important;
}

.ark-hero-body { pointer-events: none; z-index: 3 !important; }
.ark-hero-title,.ark-hero-copy,.ark-hero-eyebrow { pointer-events: auto; user-select: text; }
.ark-hero-title {
  max-width: 8em;
  margin: 0 0 12px;
  color: #fff;
  font: 300 clamp(36px,4.2cqw,76px)/.91 var(--ark-font);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.ark-hero-copy {
  max-width: 41em;
  margin: 0;
  color: rgba(235,239,238,.64);
  font: 300 clamp(12px,1.02cqw,16px)/1.62 var(--ark-font);
  text-wrap: balance;
}
.ark-hero-eyebrow { color: var(--field-accent) !important; }

.hero-motion-toggle {
  position: absolute;
  right: max(20px,2.8cqmin);
  bottom: max(14px,2cqmin);
  z-index: 5;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: rgba(226,239,235,.68);
  font: 500 9px var(--ark-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 220ms ease, letter-spacing 420ms cubic-bezier(.2,.7,.2,1);
}
.hero-motion-toggle span { margin-right: 8px; color: rgba(255,255,255,.3); font-size: .78em; }
.hero-motion-toggle:hover { color: var(--field-accent); letter-spacing: .16em; }
.hero-motion-toggle[hidden] { display: none; }

/* ARK presence owns page transforms/opacity. The persistent scene is a sibling. */
.hero-experiment-state {
  position: absolute;
  left: max(28px, 5.2cqw);
  top: 25%;
  z-index: 4;
  width: min(520px, 41cqw);
  color: #eef7f4;
  opacity: 1;
}

.hero-experiment-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(28px,4cqh,52px);
  color: rgba(228,241,237,.5);
  font: 500 9px/1 var(--ark-font);
  letter-spacing: .18em;
}
.hero-experiment-kicker::after { content: ""; width: 64px; height: 1px; background: rgba(215,237,231,.24); }
.hero-experiment-kicker b { order: 3; color: var(--field-accent); font: inherit; }
.hero-experiment-index { margin: 0 0 12px; color: var(--field-accent); font: 500 9px/1 var(--ark-font); letter-spacing: .18em; }
.hero-experiment-copy h1 {
  margin: 0 0 20px;
  font: 250 clamp(56px,8.4cqw,132px)/.78 var(--ark-font);
  letter-spacing: -.075em;
}
.hero-experiment-question {
  max-width: 18em;
  margin: 0 0 12px;
  color: rgba(242,248,246,.9);
  font: 300 clamp(18px,1.65cqw,27px)/1.16 var(--ark-font);
  letter-spacing: -.025em;
}
.hero-experiment-note { max-width: 39em; margin: 0 0 28px; color: rgba(226,236,233,.54); font: 300 12px/1.6 var(--ark-font); }
.hero-experiment-copy a {
  display: inline-flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(214,236,230,.42);
  color: #eaf4f1;
  font: 500 9px/1 var(--ark-font);
  letter-spacing: .16em;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, gap 260ms ease;
}
.hero-experiment-copy a:hover,
.hero-experiment-copy a:focus-visible { color: var(--field-accent); border-color: var(--field-accent); gap: 16px; }
.hero-experiment-meter {
  position: absolute;
  left: calc(100% + 7cqw);
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 12cqw;
  color: rgba(225,237,233,.35);
  font: 500 8px/1 var(--ark-font);
  letter-spacing: .14em;
  white-space: nowrap;
}
.hero-experiment-meter i { width: 100%; height: 1px; background: hsl(var(--border-default)); }
.hero-alive.hero-still .ark-layer-persistent > canvas[role="presentation"]:not(.zero-webgl),
.hero-alive.hero-still .hero-atmosphere,
.hero-alive.hero-still .ark-field-pill { animation-play-state: paused !important; }
.hero-alive.hero-still .ark-layer-persistent > canvas[role="presentation"]:not(.zero-webgl) { translate: 0 0; }

@media (max-width:760px) {
  .ark-field-pill::before,.ark-field-pill::after { width: 26px; margin: 0 10px; }
  .ark-hero-body { left: 20px !important; bottom: 66px !important; max-width: calc(100% - 40px) !important; }
  .ark-hero-title { font-size: clamp(34px,10cqw,54px); max-width: 7em; }
  .ark-hero-copy { max-width: 31em; font-size: 12px; }
  .hero-motion-toggle { bottom: 14px; }
  .hero-experiment-state { left: 20px; top: 24%; width: calc(100% - 40px); }
  .hero-experiment-copy h1 { font-size: clamp(48px,18cqw,84px); }
  .hero-experiment-note { max-width: 28em; }
  .hero-experiment-meter { display: none; }
}
@media (max-height:680px) and (min-width:761px) {
  .ark-hero-body { bottom: 24px !important; max-width: 38cqw !important; }
  .ark-hero-title { font-size: 32px; margin-bottom: 7px; }
  .ark-hero-eyebrow { margin-bottom: 7px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-alive .ark-layer-persistent > canvas[role="presentation"]:not(.zero-webgl) { animation: none; transition: none; translate: 0 0; opacity: .12; }
  .hero-atmosphere,.ark-field-pill { animation: none !important; }
  .ark-field-pill,.ark-cta,.ark-hero-body,.hero-experiment-state { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

.hero-pause { left: max(20px, 5.2cqw); right: auto; color: var(--field-muted); }
.ark-hero-body { bottom: max(66px, 7cqh) !important; }
@media (max-width:760px) { .hero-pause { left: 20px; } }

.ark-layer { position: absolute; inset: 0; }
.ark-layer-persistent { z-index: 0; pointer-events: none; }
.ark-layer-zero { z-index: 3; pointer-events: none; }
.ark-layer-zero .ark-cta { pointer-events: auto; }
.ark-page[hidden] { display: none !important; }
.ark-page { transition: none !important; }
.ark-page .ark-field-pill, .ark-page .ark-cta, .ark-page .ark-hero-body {
  animation: none !important;
  transition: none !important;
  opacity: 1;
}

/* Match the enlarged home zero when the GPU renderer is unavailable. */
.hero-alive:not(.has-particle-shapes) .ark-layer-persistent > canvas[role="presentation"]:not(.zero-webgl) { scale:1.2 !important; }