:root {
  --line: rgba(0, 0, 0, 0.08);
  --muted: #5c5c5c;
  --brand: #ce6528;
}

html { scroll-behavior: smooth; }

body {
  font-family: Switzer, ui-sans-serif, system-ui, sans-serif;
  color: #0a0a0a;
  background: #fff;
}

.frame-lines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 30;
}

.frame-lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}

.frame-lines span:nth-child(1) { left: max(16px, calc(50% - 590px)); }
.frame-lines span:nth-child(2) { right: max(16px, calc(50% - 590px)); }

.dots {
  background-image: radial-gradient(rgba(15, 23, 42, 0.16) 1px, transparent 1.2px);
  background-size: 12px 12px;
}

.hero-wash {
  background:
    radial-gradient(520px 460px at 12% 28%, rgba(206, 101, 40, 0.28), transparent 70%),
    radial-gradient(680px 560px at 50% 8%, rgba(244, 176, 122, 0.72), transparent 68%),
    radial-gradient(480px 420px at 90% 22%, rgba(232, 154, 92, 0.38), transparent 72%),
    linear-gradient(#fff, #fff);
}

.cta-wash {
  background:
    radial-gradient(70% 90% at 50% 115%, rgba(206, 101, 40, 0.55), transparent 60%),
    radial-gradient(50% 80% at 8% 0%, rgba(255, 214, 186, 0.9), transparent 70%),
    radial-gradient(46% 80% at 96% 10%, rgba(232, 160, 96, 0.55), transparent 70%),
    linear-gradient(180deg, #fff4ec 0%, #fff 100%);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-x 32s linear infinite;
}

.marquee-y {
  animation: marquee-y 46s linear infinite;
}

.marquee-y.slow { animation-duration: 58s; }
.marquee-y.reverse { animation-direction: reverse; }

.fade-x {
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.fade-y {
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}

@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-y {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.orb {
  animation: floaty 8s ease-in-out infinite;
  mask-image: radial-gradient(circle at 50% 42%, #000 28%, transparent 72%);
  opacity: 0.42;
  filter: sepia(1) saturate(1.8) hue-rotate(345deg);
}

#site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
}

main {
  padding-top: var(--header-h, 98px);
}

.hero-wash {
  margin-top: calc(-1 * var(--header-h, 98px));
}

.hero-wash .hero-copy {
  padding-top: calc(var(--header-h, 98px) + 4rem);
}

@media (min-width: 768px) {
  .hero-wash .hero-copy {
    padding-top: calc(var(--header-h, 98px) + 6rem);
  }
}

#site-header.nav-scrolled {
  background: rgba(255, 255, 255, 0.806);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .marquee-y,
  .orb { animation: none; }
  html { scroll-behavior: auto; }
}