/* A single copper signal field, behind the existing type-led introduction. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero > .container { position: relative; z-index: 1; }

.hero-art {
  position: absolute;
  z-index: 0;
  inset: 0 -8% 0 auto;
  width: 72%;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 24%, #000 78%);
  opacity: 0.85;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-board), transparent 24%, transparent 78%, var(--color-board));
}

.hero-art-poster, .hero-art-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-art-poster { object-fit: cover; }
.hero-art-scene { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.hero[data-motion-ready] .hero-art-scene { opacity: 1; }
.hero[data-motion-ready] .hero-art-poster { visibility: hidden; }

.motion-toggle {
  position: absolute;
  z-index: 2;
  right: max(var(--page-gutter-end), calc((100vw - var(--page-max)) / 2 + var(--page-gutter-end)));
  bottom: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--target-min);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-board-rule);
  border-radius: var(--radius-sm);
  background: var(--color-board);
  color: var(--color-board-ink-2);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color var(--dur-micro), border-color var(--dur-micro);
}

.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--color-board-ink); border-color: var(--color-copper-on-board); }
.motion-toggle:focus-visible { outline: var(--focus-width) solid var(--color-focus-inverse); outline-offset: var(--space-3xs); }
.motion-toggle-play, .motion-toggle[data-paused] .motion-toggle-pause { display: none; }
.motion-toggle[data-paused] .motion-toggle-play { display: block; }

/* A directional cue on the action itself; content is never hidden on load. */
.button > span[aria-hidden], .text-link > span[aria-hidden] {
  display: inline-block;
  transition: transform var(--dur-short) var(--ease-out);
}
.button:is(:hover, :focus-visible) > span[aria-hidden],
.text-link:is(:hover, :focus-visible) > span[aria-hidden] { transform: translate(2px, -2px); }

.service-row { transition: border-color var(--dur-short); }
.service-row:focus-within { border-bottom-color: var(--color-signal); }
@media (hover: hover) {
  .service-row:hover { border-bottom-color: var(--color-signal); }
}

@media (max-width: 64rem) {
  .hero-art { width: 92%; right: -24%; opacity: 0.55; }
}

@media (max-width: 48rem) {
  .hero-art { inset: auto -16% 0 auto; width: 116%; height: 65%; opacity: 0.42; }
  .hero-art::after { background: linear-gradient(180deg, var(--color-board), transparent 45%, transparent 75%, var(--color-board)); }
  .hero-art { mask-image: linear-gradient(90deg, transparent 15%, #000 100%); }
  .motion-toggle { bottom: var(--space-xs); }
  .hero-footnote { padding-bottom: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art-scene { transition: none; }
  .button > span[aria-hidden], .text-link > span[aria-hidden] { transition: none; transform: none !important; }
}