/* PR #5 scoped correction: header separation and premium stat badges only. */
.site-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

@media (min-width: 821px) {
  .site-header { top: 18px !important; }

  .glass-nav {
    width: min(100% - 56px, 1260px) !important;
    min-height: 58px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) max-content minmax(170px, 1fr) !important;
    align-items: center !important;
    gap: clamp(18px, 3vw, 42px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  .site-header.scrolled .glass-nav {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .glass-nav > .brand-logo-link,
  .glass-nav > .desktop-nav,
  .glass-nav > .nav-cta {
    pointer-events: auto !important;
  }

  .brand-logo-link {
    justify-self: start !important;
    height: 54px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .brand-logo-image {
    width: clamp(138px, 11vw, 160px) !important;
    max-height: 42px !important;
  }

  .desktop-nav {
    width: auto !important;
    min-height: 48px !important;
    justify-self: center !important;
    padding: 5px !important;
    gap: 4px !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 999px !important;
    background: rgba(8,8,8,.5) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.075), 0 0 34px rgba(255,255,255,.03) !important;
    backdrop-filter: blur(24px) saturate(128%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(128%) !important;
  }

  .site-header.scrolled .desktop-nav {
    background: rgba(8,8,8,.62) !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  .nav-cta {
    min-height: 48px !important;
    justify-self: end !important;
    padding: 0 20px !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 999px !important;
    background: rgba(9,9,9,.48) !important;
    color: rgba(244,245,240,.94) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.075), 0 0 28px rgba(255,255,255,.035) !important;
    backdrop-filter: blur(22px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(130%) !important;
  }

  .nav-cta:hover {
    border-color: rgba(255,255,255,.3) !important;
    background: rgba(255,255,255,.075) !important;
    color: var(--white) !important;
  }
}

@media (max-width: 820px) {
  .glass-nav {
    width: min(100% - 24px, 720px) !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  .brand-logo-link,
  .menu-toggle,
  .mobile-menu {
    pointer-events: auto !important;
  }

  .brand-logo-link {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

.stats-glass {
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.044), rgba(255,255,255,.016)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -24px 60px rgba(255,255,255,.012), 0 20px 62px rgba(0,0,0,.24) !important;
  overflow: hidden !important;
}

.stat {
  position: relative !important;
  border-right: 1px solid rgba(255,255,255,.075) !important;
}

.stat:last-child { border-right: 0 !important; }

.stat::before {
  content: "" !important;
  position: absolute !important;
  left: 24px !important;
  top: 50% !important;
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 32% 22%, rgba(255,255,255,.15), transparent 38%), rgba(255,255,255,.035) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), inset 0 -12px 20px rgba(0,0,0,.22), 0 0 22px rgba(255,255,255,.04) !important;
  transform: translateY(-50%) !important;
}

.stat::after {
  content: "" !important;
  position: absolute !important;
  left: 35px !important;
  top: 50% !important;
  box-sizing: border-box !important;
  opacity: .82 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 0 7px rgba(255,255,255,.12));
}

.stat:nth-child(1)::after {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid rgba(244,245,240,.54) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(244,245,240,.66) 0 2px, transparent 2.6px) center / 100% 100% no-repeat !important;
  box-shadow: -6px 4px 0 -3px rgba(244,245,240,.46), 6px 4px 0 -3px rgba(244,245,240,.36) !important;
  transform: translateY(-50%) !important;
}

.stat:nth-child(2)::after {
  width: 15px !important;
  height: 15px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background:
    linear-gradient(rgba(244,245,240,.64), rgba(244,245,240,.64)) 0 0 / 6px 6px no-repeat,
    linear-gradient(rgba(244,245,240,.4), rgba(244,245,240,.4)) 9px 0 / 6px 6px no-repeat,
    linear-gradient(rgba(244,245,240,.4), rgba(244,245,240,.4)) 0 9px / 6px 6px no-repeat,
    linear-gradient(rgba(244,245,240,.64), rgba(244,245,240,.64)) 9px 9px / 6px 6px no-repeat !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) !important;
  transform: translateY(-50%) !important;
}

.stat:nth-child(3)::after {
  width: 15px !important;
  height: 15px !important;
  border: 1px solid rgba(244,245,240,.58) !important;
  border-radius: 50% 50% 50% 0 !important;
  background: radial-gradient(circle, rgba(244,245,240,.68) 0 2px, transparent 2.5px) center / 100% 100% no-repeat !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.025) !important;
  transform: translateY(-58%) rotate(-45deg) !important;
}

.stat:nth-child(4)::after {
  width: 17px !important;
  height: 17px !important;
  border: 1px solid rgba(244,245,240,.56) !important;
  border-radius: 50% !important;
  background:
    linear-gradient(90deg, transparent 45%, rgba(244,245,240,.42) 46% 54%, transparent 55%),
    linear-gradient(transparent 45%, rgba(244,245,240,.42) 46% 54%, transparent 55%) !important;
  box-shadow: inset 5px 0 0 -4px rgba(244,245,240,.44), inset -5px 0 0 -4px rgba(244,245,240,.44), 0 0 0 1px rgba(255,255,255,.025) !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 820px) {
  .stat::before {
    left: 16px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .stat::after { left: 24px !important; }
}

@media (max-width: 390px) {
  .stat::before { left: 14px !important; }
  .stat::after { left: 22px !important; }
}

/* Small visual polish: hero eyebrow/spacing and mobile selected-work readability. */
.eyebrow {
  gap: 10px !important;
  margin-bottom: 22px !important;
  letter-spacing: .16em !important;
}

.eyebrow > span {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 50% !important;
  background: rgba(244,245,240,.88) !important;
  box-shadow: 0 0 14px rgba(255,255,255,.28), 0 0 34px rgba(255,255,255,.08) !important;
}

.hero h1 {
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}

@media (max-width: 820px) {
  .brand-logo-image {
    width: clamp(138px, 38vw, 168px) !important;
    max-height: 42px !important;
  }

  .hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding-top: 118px !important;
  }

  .hero-copy { display: contents !important; }
  .hero .eyebrow { order: 1; margin-bottom: 0 !important; }
  .hero h1 { order: 2; margin-bottom: 0 !important; line-height: .97 !important; }
  .hero-lede { order: 3; margin-bottom: 0 !important; }
  .hero-actions { order: 4; margin-bottom: 0 !important; }
  .hero-system { order: 5; margin-top: 2px !important; }
  .hero-note { order: 6; margin-top: 2px !important; }

  .globe-stage.system-panel {
    min-height: 330px !important;
    padding: 14px !important;
  }

  .globe-sphere {
    width: min(66vw, 280px) !important;
    margin: 10px auto 4px !important;
  }

  .result-card {
    width: min(188px, calc(100% - 34px)) !important;
    margin: -34px 12px 0 auto !important;
    padding: 11px 12px !important;
    border-radius: 15px !important;
  }

  .result-card > span,
  .result-card > small { font-size: 7px !important; }
  .result-card > strong { font-size: 21px !important; }
  .result-card > p { font-size: 8.5px !important; line-height: 1.45 !important; }

  .selected-work .work-card,
  .selected-work .work-card-large,
  .selected-work .work-card-wide {
    min-height: 0 !important;
    border-radius: 22px !important;
  }

  .selected-work .work-visual {
    height: 170px !important;
    min-height: 0 !important;
    align-items: center !important;
  }

  .selected-work .work-visual > strong {
    max-width: 88% !important;
    font-size: clamp(34px, 10vw, 56px) !important;
    line-height: 1 !important;
    letter-spacing: -.08em !important;
    color: rgba(244,245,240,.14) !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  .selected-work .work-proof {
    display: none !important;
  }

  .selected-work .work-visual i:nth-of-type(1) {
    width: 118px !important;
    height: 118px !important;
    right: -38px !important;
    top: -36px !important;
    opacity: .55 !important;
  }

  .selected-work .work-visual i:nth-of-type(2) {
    width: 68px !important;
    height: 68px !important;
    left: 10% !important;
    bottom: -34px !important;
    opacity: .45 !important;
  }

  .selected-work .work-visual i:nth-of-type(3) {
    display: none !important;
  }

  .selected-work .work-copy {
    min-height: 0 !important;
    padding: 18px !important;
  }

  .selected-work .work-copy > div {
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    color: rgba(177,179,172,.82) !important;
    font-size: 8.5px !important;
    line-height: 1.45 !important;
    letter-spacing: .11em !important;
  }

  .selected-work .work-copy h3 {
    max-width: calc(100% - 46px) !important;
    margin-top: 20px !important;
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.02 !important;
  }

  .selected-work .work-arrow {
    right: 18px !important;
    bottom: 18px !important;
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 430px) {
  .brand-logo-image { width: 136px !important; }
  .hero { padding-top: 112px !important; gap: 21px !important; }
  .hero h1 { font-size: clamp(42px, 12vw, 54px) !important; line-height: .98 !important; }
  .globe-stage.system-panel { min-height: 304px !important; }
  .globe-sphere { width: min(68vw, 246px) !important; }
  .result-card { width: min(176px, calc(100% - 30px)) !important; margin-top: -26px !important; }
  .result-card > strong { font-size: 19px !important; }

  .selected-work .work-visual { height: 148px !important; }
  .selected-work .work-visual > strong { font-size: clamp(30px, 10vw, 42px) !important; }
  .selected-work .work-copy { padding: 17px !important; }
  .selected-work .work-copy h3 { margin-top: 18px !important; font-size: clamp(26px, 7.8vw, 32px) !important; }
}

@media (max-width: 390px) {
  .brand-logo-image { width: 132px !important; }
  .hero h1 { font-size: 42px !important; }
  .selected-work .work-copy > div { font-size: 8px !important; }
  .selected-work .work-copy h3 { font-size: 26px !important; }
}