.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* Nav — floating pill, always dark, solidifies slightly on scroll */

.site-nav {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(min(calc(100% - 48px), 600px), 75%, 1600px);
  z-index: 100;
  background: #0F1116;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px rgba(12, 14, 20, 0.28);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}

.site-nav--solid {
  background: var(--color-nav-solid);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 30px rgba(12, 14, 20, 0.38);
}

.site-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Bottom padding is 6px deeper than top — the nav-link underline sits
     right against its own border-box, so equal CSS padding read as an
     optically shallower gap below than above the text. Measured via
     getBoundingClientRect to bring the two gaps to visual parity. */
  padding: var(--space-3) var(--space-6) 18px;
  margin: 0;
}

/* That same top/bottom padding asymmetry leaves flex's own vertical
   centring 3px shy of the pill's true centre (half the 6px difference).
   Logo has no underline to compensate for, so nudge it down to sit on
   the pill's actual vertical centre while staying left-aligned in flow. */
.site-nav__inner .nav-logo {
  position: relative;
  top: 3px;
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: 0.14em;
  color: #F4F5F7;
  transition: color 160ms var(--ease-out);
}

.wordmark:hover {
  text-decoration: none;
  color: var(--color-orange);
}

/* Nav logo — the wordmark image, recoloured via mask so it reads clean
   against the dark nav pill (the source PNG's text is near-black and
   would otherwise disappear). Same light -> orange hover as .wordmark. */

.nav-logo {
  display: inline-block;
  height: 24.5px;
  aspect-ratio: 798 / 178;
  background-color: #F4F5F7;
  -webkit-mask-image: url("../assets/Opinomix_Logo.png?v=2");
  mask-image: url("../assets/Opinomix_Logo.png?v=2");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 160ms var(--ease-out);
}

.nav-logo:hover {
  background-color: var(--color-orange);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #9CA0A8;
  font-family: var(--font-cta);
  font-size: var(--text-sm);
  font-weight: 600;
  padding-bottom: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}

.nav-links a:hover {
  text-decoration: none;
  color: #F4F5F7;
  border-bottom-color: var(--color-orange);
}

.nav-links a[aria-current="page"] {
  border-bottom-color: var(--color-orange);
  color: #F4F5F7;
}

/* While hovering elsewhere in the nav, the current-page underline steps
   back to cobalt so the orange hover cue stays unambiguous. Hovering the
   current-page link itself keeps it orange. */
.nav-links:hover a[aria-current="page"]:not(:hover) {
  border-bottom-color: var(--color-cobalt);
}

.nav-toggle {
  display: none;
  background: none;
  color: #F4F5F7;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

/* Dropdown — triggered by hover on .nav-has-dropdown */

.nav-has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: #13151a;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-width: 148px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(12, 14, 20, 0.30);
  transition: opacity 160ms var(--ease-out);
  overflow: hidden;
}

/* Invisible bridge so the mouse can travel from the trigger link down
   into the dropdown without losing hover. Lives on the <li>, not on
   .nav-dropdown — .nav-dropdown has overflow:hidden (to clip its hover
   highlights to the rounded corners), which would clip a bridge
   positioned outside its own box before it could ever be hit-tested. */
.nav-has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 148px;
  height: 10px;
}

.nav-has-dropdown:hover .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
}

.nav-dropdown a {
  display: block;
  padding: 9px 16px;
  color: #9CA0A8;
  font-family: var(--font-cta);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: none;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] {
  color: #F4F5F7;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  border-bottom-color: transparent;
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    background: #0F1116;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 30px rgba(12, 14, 20, 0.30);
    padding: var(--space-5);
    display: none;
  }

  .site-nav {
    position: fixed;
  }

  .site-nav .nav-links[data-open="true"] {
    display: flex;
  }

  .site-footer .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* On mobile the dropdown is always visible inline, not a popup */
  .nav-dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    padding: var(--space-1) 0 0 var(--space-4);
    min-width: auto;
    transition: none;
  }

  .nav-has-dropdown::after {
    display: none;
  }

  .nav-dropdown a {
    padding: 4px 0;
    background: transparent;
  }

  .nav-dropdown a:hover {
    background: transparent;
  }
}

/* Footer — always dark regardless of page light/dark mode */

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #0A0B0D;
  padding: var(--space-7) 0;
  color: #9CA0A8;
  font-size: var(--text-sm);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
}

.footer-links {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.footer-links a {
  color: #9CA0A8;
}

.footer-links a:hover {
  color: var(--color-orange);
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__meta a {
  color: #9CA0A8;
  font-family: var(--font-cta);
  font-weight: 600;
}

.site-footer__meta a:hover {
  color: var(--color-orange);
}

/* Sections — separation via tonal background shifts, not hairlines */

section {
  padding: var(--space-9) 0;
}

@media (max-width: 720px) {
  section {
    padding: var(--space-8) 0;
  }
}

/* Scroll progress indicator — slim pill track + circle marker + section dots.
   Right edge, every page. Pill tracks overall scroll; dots mark active section. */

.scroll-index {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

/* Pill capsule — outline only, stadium shape. Doubles as a scrollbar thumb
   track: grabbable and draggable (see js/animations.js), with an enlarged
   invisible hit area (::before) since the visible pill is only 11px wide. */
.si-pill {
  position: relative;
  width: 11px;
  height: 90px;
  border: 1px solid rgba(0, 74, 173, 0.22);
  border-radius: 99px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.si-pill::before {
  content: "";
  position: absolute;
  inset: -10px -14px;
}

.si-pill.is-dragging {
  cursor: grabbing;
}

/* Circle marker — sits inside the pill, position driven by GSAP */
.si-pill__marker {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #004AAD;
  transform: translateX(-50%);
  box-shadow: 0 0 5px rgba(0, 74, 173, 0.5);
  transition: background 300ms ease, box-shadow 300ms ease;
  pointer-events: none;
}

/* Bottom-of-page proximity — marker accent shifts to orange. Only the
   actual bottom of the scrollable page, not just "inside the CTA section"
   (that section can be tall enough that the old per-section check lit this
   up well before the page had actually reached its end). */
.scroll-index.is-bottom .si-pill__marker {
  background: #FF914D;
  box-shadow: 0 0 6px rgba(255, 145, 77, 0.5);
}


@media (max-width: 880px) {
  .scroll-index {
    display: none;
  }
}