/* Global base, reset, loader, and page behavior. */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: #f8f8f8;
}

body {
  margin: 0;
  color: var(--vl-ink);
  font-family: var(--vl-body);
  background: #f8f8f8;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

html.vl-loader-pending,
html.vl-loader-pending body,
body.vl-loader-lock {
  background: #000;
}

body.vl-loader-lock {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.vl-skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 14px;
  background: #ff0000;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.vl-skip-link:focus,
.vl-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.vl-section-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  min-height: 100vh;
  min-height: 100dvh;
  background: #000;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 520ms ease, visibility 520ms ease;
}

.has-js .vl-section-loader {
  display: flex;
}

.vl-loader-pending .vl-section-loader,
.vl-section-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vl-section-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.vl-section-loader__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  top: 50dvh;
  left: 50dvw;
  display: grid;
  justify-items: center;
  width: min(180px, calc(100vw - 64px));
  text-align: center;
  transform: translate3d(-50%, -50%, 0);
}

.vl-section-loader__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(78px, 12vw, 124px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.22));
}

.vl-section-loader__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.vl-section-loader__svg-base path {
  fill: #fff;
}

.vl-section-loader__svg-sweep path {
  animation: vlLoaderIconColorBloom 1.65s ease-in-out infinite;
  fill: url("#vl-loader-icon-gradient");
  opacity: 0;
}

.vl-section-loader__svg-sweep g:nth-child(2) path {
  animation-delay: 0.18s;
}

.vl-section-loader__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  min-height: 1.4em;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2.8px;
  line-height: 1.4;
  text-transform: uppercase;
}

@keyframes vlLoaderIconColorBloom {
  0% {
    opacity: 0;
  }

  28% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.page-anchor {
  display: block;
  height: 0;
  overflow: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

@keyframes contactSignalDrift {
  from {
    transform: translate3d(-10px, -3px, 0);
  }

  to {
    transform: translate3d(14px, 5px, 0);
  }
}

@keyframes contactPulse {
  0%,
  100% {
    opacity: 0.88;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vl-section-loader {
      transition-duration: 0.01ms !important;
    }

  .vl-section-loader__svg-sweep path {
      animation: none !important;
      opacity: 1;
    }

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