html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

:root {
  --skot-nav-height: 80px;
}

body > nav.fixed.top-0,
body > header.fixed.top-0 {
  min-height: var(--skot-nav-height) !important;
  height: var(--skot-nav-height) !important;
  display: flex !important;
  align-items: center !important;
  background-color: rgba(255, 250, 243, 0.94) !important;
  border-bottom: 1px solid rgba(0, 87, 158, 0.12) !important;
  box-shadow: 0 10px 30px rgba(0, 87, 158, 0.06) !important;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

body > nav.fixed.top-0 > div,
body > header.fixed.top-0 > nav {
  width: 100% !important;
  min-height: var(--skot-nav-height) !important;
  height: var(--skot-nav-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: clamp(28px, 3vw, 44px) !important;
}

body > header.fixed.top-0 {
  gap: clamp(28px, 3vw, 44px) !important;
}

body > nav.fixed.top-0 a,
body > header.fixed.top-0 a,
body > nav.fixed.top-0 button,
body > header.fixed.top-0 button {
  transform: none !important;
  transition-property: color, background-color, border-color, opacity, box-shadow !important;
  transition-duration: 180ms !important;
  transition-timing-function: ease !important;
}

body > nav.fixed.top-0 > div > a[href="index.html"]:first-child,
body > header.fixed.top-0 > nav > a[href="index.html"]:first-child,
body > header.fixed.top-0 > a[href="index.html"]:first-child {
  min-width: 164px;
  height: 24px;
  display: inline-flex;
  align-items: center;
}

.skotmark-wordmark {
  display: block;
  width: clamp(132px, 14vw, 178px);
  height: auto;
  max-width: 46vw;
  object-fit: contain;
}

body > nav.fixed.top-0 .skotmark-wordmark,
body > header.fixed.top-0 .skotmark-wordmark {
  width: 164px;
  height: 22px;
}

footer .skotmark-wordmark {
  width: clamp(150px, 18vw, 190px);
  max-width: 100%;
  margin-bottom: 1rem;
}

aside .skotmark-wordmark,
.skotmark-wordmark-compact {
  width: 136px;
  max-width: 100%;
}

.skotmark-brand-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.skot-mobile-panel {
  top: calc(var(--skot-nav-height) + 10px) !important;
}

#products .bento-card > div.absolute.inset-0 {
  background: linear-gradient(
    to top,
    rgba(1, 8, 18, 0.96) 0%,
    rgba(0, 31, 58, 0.78) 42%,
    rgba(0, 25, 48, 0.32) 72%,
    rgba(0, 0, 0, 0.08) 100%
  ) !important;
}

#products .bento-card:hover > div.absolute.inset-0 {
  opacity: 0.96 !important;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

@media (max-width: 640px) {
  :root {
    --skot-nav-height: 64px;
  }

  body > nav.fixed.top-0 > div > a[href="index.html"]:first-child,
  body > header.fixed.top-0 > nav > a[href="index.html"]:first-child,
  body > header.fixed.top-0 > a[href="index.html"]:first-child {
    min-width: 142px;
    height: 20px;
  }

  body > nav.fixed.top-0 .skotmark-wordmark,
  body > header.fixed.top-0 .skotmark-wordmark {
    width: 142px;
    height: 19px;
  }

  .text-display-lg {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  .text-headline-lg-mobile {
    font-size: clamp(2rem, 9vw, 2.45rem) !important;
    line-height: 1.12 !important;
  }

  main > section:first-of-type h1,
  main > section:first-of-type p {
    max-width: calc(100vw - 32px) !important;
    overflow-wrap: normal;
  }

  section#home .reveal {
    width: min(100%, 358px) !important;
    max-width: calc(100vw - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  section#home h1 {
    font-size: clamp(1.8rem, 7.4vw, 2.05rem) !important;
    line-height: 1.12 !important;
  }

  section#home p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  nav button[aria-label="Menu"],
  header button.md\:hidden {
    position: absolute;
    right: 16px;
  }

  body > nav.fixed.top-0 a[href="contact.html"].bg-primary,
  body > nav.fixed.top-0 button.bg-primary,
  body > header.fixed.top-0 a[href="contact.html"].bg-primary,
  body > header.fixed.top-0 button.bg-primary {
    display: none !important;
  }

  .max-w-container-max {
    max-width: 100%;
  }

  .blur-3xl,
  .-skew-x-12 {
    pointer-events: none;
  }
}