/* V23 — correct visual direction: cinematic city/person hero + distinct city/person About */
#hb-badge{display:none!important}

/* HERO: full cinematic city/person background from approved direction */
.hero{
  position:relative!important;
  min-height:760px!important;
  overflow:hidden!important;
  background:#020403!important;
}
.hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    linear-gradient(90deg,rgba(1,3,2,.98) 0%,rgba(1,3,2,.91) 27%,rgba(1,3,2,.52) 43%,rgba(1,3,2,.13) 65%,rgba(1,3,2,.08) 100%),
    linear-gradient(180deg,rgba(1,3,2,.10),rgba(1,3,2,.28)),
    url('/hero-city.jpg?v=23') center 48% / cover no-repeat!important;
  filter:saturate(.88) contrast(1.08) brightness(.78);
  pointer-events:none!important;
}
.hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 69% 46%,rgba(54,255,78,.09),transparent 23%),
    linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.16))!important;
  pointer-events:none!important;
}
.hero-grid{position:relative!important;z-index:3!important}

/* keep the orbit/logo at right like the approved comp */
.hero-art{
  min-height:560px!important;
  z-index:4!important;
}
.hero-art::before{
  width:112%!important;
  opacity:.95!important;
  filter:drop-shadow(0 0 28px rgba(69,255,87,.22))!important;
}
.hero-logo-stage{
  width:min(66%,470px)!important;
  aspect-ratio:1.58/1!important;
  padding:12px 16px 14px!important;
  background:
    linear-gradient(140deg,rgba(34,54,40,.46),rgba(5,10,7,.24) 52%,rgba(22,43,28,.34))!important;
  border:1px solid rgba(245,255,246,.74)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 20px 52px rgba(0,0,0,.34),
    0 0 22px rgba(116,255,124,.24)!important;
}
.hero-logo.master-lockup{width:87%!important}
.hero h1{
  font-size:clamp(60px,5.15vw,88px)!important;
  line-height:.93!important;
  text-shadow:0 4px 28px rgba(0,0,0,.38);
}
.hero-copy>p{max-width:560px!important;text-shadow:0 2px 18px rgba(0,0,0,.58)}

/* ABOUT: a DIFFERENT city/person image, per the chosen comp */
#about{
  position:relative!important;
  min-height:560px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#030604!important;
}
#about::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    linear-gradient(90deg,rgba(3,6,4,.99) 0%,rgba(3,6,4,.96) 31%,rgba(3,6,4,.61) 49%,rgba(3,6,4,.14) 72%,rgba(3,6,4,.10) 100%),
    linear-gradient(180deg,rgba(3,6,4,.08),rgba(3,6,4,.28)),
    url('/about-city.jpg?v=23') center 47% / cover no-repeat!important;
  filter:saturate(.78) contrast(1.09) brightness(.72);
  pointer-events:none!important;
}
#about::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 66% 58%,rgba(62,255,84,.06),transparent 29%),
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.14))!important;
  pointer-events:none!important;
}
#about>*{position:relative!important;z-index:2!important}
#about .display{text-shadow:0 4px 28px rgba(0,0,0,.62)}
#about .about-copy p{text-shadow:0 2px 18px rgba(0,0,0,.72)}

/* Do not repeat city imagery elsewhere */
.principles,.scanner-section,.services,.process-section,.cta-section{
  background-image:none!important;
}

@media(max-width:1100px){
  .hero{min-height:auto!important}
  .hero::after{background-position:58% 48%!important}
  .hero-art{min-height:500px!important}
  .hero-logo-stage{width:min(62%,440px)!important}
}
@media(max-width:620px){
  .hero{padding-top:92px!important}
  .hero::after{
    background:
      linear-gradient(180deg,rgba(1,3,2,.98) 0%,rgba(1,3,2,.91) 42%,rgba(1,3,2,.42) 68%,rgba(1,3,2,.14) 100%),
      url('/hero-city.jpg?v=23') 57% center / cover no-repeat!important;
    filter:saturate(.84) contrast(1.07) brightness(.67);
  }
  .hero::before{background:radial-gradient(circle at 54% 73%,rgba(54,255,78,.08),transparent 26%)!important}
  .hero-art{min-height:390px!important;margin-top:10px}
  .hero-logo-stage{width:61%!important;max-width:280px!important}
  #about{min-height:700px!important;padding-bottom:250px!important}
  #about::before{
    background:
      linear-gradient(180deg,#030604 0%,#030604 43%,rgba(3,6,4,.66) 63%,rgba(3,6,4,.16) 100%),
      url('/about-city.jpg?v=23') 54% bottom / cover no-repeat!important;
    filter:saturate(.76) contrast(1.08) brightness(.66);
  }
}