@property --beam {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero h1 mark {
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 100%;
}

.hero .actions .btn:not(.btn-ghost) { position: relative; isolation: isolate; background: transparent; border-color: transparent; }
.hero .actions .btn:not(.btn-ghost)::before,
.hero .actions .btn:not(.btn-ghost)::after { content: ""; position: absolute; z-index: -1; border-radius: calc(var(--radius) + 3px); }
.hero .actions .btn:not(.btn-ghost)::before { inset: -3px; background: conic-gradient(from var(--beam), transparent 0 68%, var(--mark) 86%, transparent 100%); }
.hero .actions .btn:not(.btn-ghost)::after { inset: -1px; border-radius: calc(var(--radius) + 1px); background: var(--ink); }
.hero .actions .btn:not(.btn-ghost):hover::after { background: color-mix(in srgb, var(--ink) 86%, var(--mark)); }

.strip { border-block: 1px solid var(--rule); padding: 1.1rem 0 1.2rem; overflow: hidden; }
.strip .eyebrow { margin-bottom: 0.7rem; }
.marquee {
  display: flex;
  gap: 0.6rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; flex: none; gap: 0.6rem; min-width: 100%; justify-content: space-around; }
.marquee a {
  display: inline-block;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}
.marquee a:hover { border-color: var(--rule-strong); background: var(--mark-soft); }

.spot-count b { font-variant-numeric: tabular-nums; }

@keyframes mark-sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes beam { to { --beam: 360deg; } }
@keyframes cell-in { from { opacity: 0; transform: scaleY(0.25); } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(calc(-100% - 0.6rem)); } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1 mark { animation: mark-sweep 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero .actions .btn:not(.btn-ghost)::before { animation: beam 4s linear infinite; }
  .reach .cell { animation: cell-in 0.45s calc(0.15s + var(--i, 0) * 16ms) cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: bottom; }
  .marquee-track { animation: marquee 48s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }

  .js-motion [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); }
  .js-motion [data-reveal].is-in { opacity: 1; transform: none; }
  .js-motion .jobcard .bar i { transform-origin: left; transform: scaleX(0); transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s; }
  .js-motion .jobcard.is-in .bar i { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; justify-content: flex-start; }
  .marquee-track[aria-hidden="true"] { display: none; }
}