/*
  Base stylesheet for default HTML element styles.
  Use this file for typography, links, body styles, and global accessibility defaults.
  Do not store customer data, CRM data, emails, secrets, or private company records here.
*/

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
}

body,
body * {
  min-width: 0;
}

p,
li,
span,
a,
button,
summary,
h1,
h2,
h3,
strong {
  overflow-wrap: anywhere;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 78% 12%, rgba(216, 114, 36, 0.18), transparent 28rem),
    radial-gradient(circle at 14% 22%, rgba(22, 108, 120, 0.1), transparent 22rem),
    radial-gradient(circle at 62% 72%, rgba(216, 114, 36, 0.08), transparent 26rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(251, 247, 239, 0.96));
  background-size: 120% 120%, 130% 130%, 140% 140%, 100% 100%;
  animation: ambient-shift 28s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: -16%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.34), transparent 24rem),
    radial-gradient(circle at 90% 32%, rgba(216, 114, 36, 0.07), transparent 22rem);
  animation: ambient-drift 36s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
}

@keyframes ambient-shift {
  0% {
    background-position: 0% 0%, 100% 0%, 45% 100%, 0 0;
  }

  50% {
    background-position: 100% 32%, 18% 76%, 72% 28%, 0 0;
  }

  100% {
    background-position: 18% 100%, 82% 18%, 12% 46%, 0 0;
  }
}

@keyframes ambient-drift {
  0% {
    transform: translate3d(-1.5%, -1%, 0) rotate(0deg);
  }

  100% {
    transform: translate3d(2%, 1.4%, 0) rotate(2deg);
  }
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 0;
}

h1 {
  max-width: 11ch;
  font-size: clamp(3.1rem, 6vw, 6rem);
  line-height: 0.96;
}

h2 {
  font-size: clamp(2rem, 4.8vw, 4.6rem);
  line-height: 1;
  max-width: 14ch;
}

h3 {
  font-size: 1.18rem;
  line-height: 1.2;
}

p {
  max-width: 68ch;
  color: var(--muted);
}

a {
  color: inherit;
}

a:hover {
  color: var(--orange-dark);
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[id] {
  scroll-margin-top: 126px;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

html.js .reveal:target {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  html.js .reveal {
    opacity: 1;
    transform: none;
  }

  body::before,
  body::after {
    animation: none;
  }
}