#omniaCityGate,
#omniaCityGate *{
 box-sizing:border-box;
}

#omniaCityGate{
 position:relative;
 width:100%;
 height:calc(100svh - 74px);
 min-height:640px;
 overflow:hidden;
 background:#02060a;
 color:#f5f8fa;
 font-family:Inter,system-ui,-apple-system,sans-serif;
}

#omniaCityGateCanvas{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 display:block;
 touch-action:none;
}

.city-gate-gradient{
 pointer-events:none;
 position:absolute;
 inset:0;
 z-index:3;
 background:
  linear-gradient(
   180deg,
   rgba(1,4,8,.12),
   transparent 42%,
   rgba(1,4,8,.55) 100%
  ),
  linear-gradient(
   90deg,
   rgba(0,3,7,.35),
   transparent 25% 75%,
   rgba(0,3,7,.35)
  );
}

.city-gate-ui{
 position:absolute;
 inset:0;
 z-index:5;
 pointer-events:none;
}

.city-gate-brand{
 position:absolute;
 top:5%;
 left:50%;
 transform:translateX(-50%);
 text-align:center;
}

.city-gate-eyebrow{
 color:#78a0b4;
 font-size:9px;
 font-weight:850;
 letter-spacing:.28em;
}

.city-gate-wordmark{
 margin-top:7px;
 color:#f7fbfd;
 font-size:clamp(18px,3vw,28px);
 font-weight:900;
 letter-spacing:.46em;
 padding-left:.46em;
}

.city-gate-entry{
 pointer-events:auto;
 position:absolute;
 left:50%;
 bottom:8%;
 transform:translateX(-50%);
 width:min(580px,calc(100% - 32px));
 text-align:center;
 transition:
  opacity .35s ease,
  transform .35s ease;
}

.city-gate-entry.hidden{
 opacity:0;
 transform:
  translateX(-50%)
  translateY(12px);
 pointer-events:none;
}

.city-gate-title{
 font-size:clamp(38px,7vw,76px);
 line-height:.94;
 font-weight:900;
 letter-spacing:-.045em;
 text-shadow:0 16px 50px rgba(0,0,0,.4);
}

.city-gate-copy{
 max-width:500px;
 margin:13px auto 0;
 color:#8ca0ad;
 font-size:11px;
 line-height:1.65;
}

.city-gate-enter{
 min-width:220px;
 min-height:50px;
 margin-top:19px;
 border:1px solid rgba(144,218,248,.4);
 border-radius:999px;
 background:rgba(5,16,23,.82);
 backdrop-filter:blur(15px);
 color:#eefaff;
 font-weight:850;
 font-size:11px;
 letter-spacing:.04em;
 cursor:pointer;
 box-shadow:
  0 20px 60px rgba(0,0,0,.3),
  inset 0 0 30px rgba(108,207,234,.04);
}

.city-gate-enter:hover{
 border-color:rgba(144,218,248,.7);
}

.city-gate-enter:disabled{
 opacity:.55;
 cursor:default;
}

.city-gate-enter-status{
 margin-top:9px;
 min-height:15px;
 color:#66808f;
 font-size:9px;
}

#omniaCityDistrictArrival{
 pointer-events:none;
 position:absolute;
 inset:0;
 z-index:6;
 display:flex;
 align-items:flex-end;
 justify-content:center;
 padding:0 18px 7%;
 opacity:0;
 transform:translateY(18px);
 transition:
  opacity .55s ease,
  transform .55s ease;
}

#omniaCityDistrictArrival.active{
 opacity:1;
 transform:none;
 pointer-events:auto;
}

.city-arrival-panel{
 width:min(1060px,100%);
 padding:16px;
 border:1px solid rgba(145,207,238,.2);
 border-radius:16px;
 background:rgba(4,11,17,.78);
 backdrop-filter:blur(22px);
 box-shadow:0 28px 90px rgba(0,0,0,.4);
}

.city-arrival-head{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:18px;
 margin-bottom:11px;
}

.city-arrival-kicker{
 color:#74ddd1;
 font-size:8px;
 font-weight:850;
 letter-spacing:.2em;
}

.city-arrival-title{
 margin-top:5px;
 font-size:20px;
 font-weight:900;
}

.city-arrival-copy{
 max-width:420px;
 text-align:right;
 color:#788e9a;
 font-size:9px;
 line-height:1.5;
}

.city-district-grid{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:7px;
}

.city-district{
 min-height:78px;
 padding:11px;
 border:1px solid rgba(145,207,238,.15);
 border-radius:10px;
 background:rgba(8,18,25,.75);
 color:#dbe8ee!important;
 text-decoration:none!important;
 transition:.18s ease;
}

.city-district:hover{
 transform:translateY(-2px);
 border-color:rgba(116,221,209,.38);
}

.city-district-name{
 font-size:10px;
 font-weight:850;
}

.city-district-role{
 margin-top:4px;
 color:#6f8592;
 font-size:8px;
 line-height:1.4;
}

.city-district-enter{
 margin-top:8px;
 color:#74ddd1;
 font-size:8px;
 font-weight:800;
}

.city-gate-skip{
 pointer-events:auto;
 position:absolute;
 right:16px;
 top:16px;
 padding:7px 10px;
 border:1px solid rgba(160,202,224,.14);
 border-radius:999px;
 background:rgba(4,10,15,.5);
 color:#758a96;
 text-decoration:none!important;
 font-size:8px;
 font-weight:800;
}

.city-gate-performance{
 pointer-events:none;
 position:absolute;
 left:14px;
 bottom:12px;
 color:#49606d;
 font-size:7px;
 letter-spacing:.08em;
}

body.omnia-city-gate-active{
 overflow:hidden;
}

body.omnia-city-gate-active #omniaDestinationNavigator{
 display:none!important;
}


/* hide legacy globe hero after runtime identifies it */
.omnia-v48-legacy-globe{
 display:none!important;
}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media(max-width:760px){

 #omniaCityGate{
  height:calc(100svh - 68px);
  min-height:600px;
 }

 .city-gate-brand{
  top:4%;
 }

 .city-gate-entry{
  bottom:7%;
 }

 .city-gate-title{
  font-size:clamp(40px,12vw,62px);
 }

 .city-district-grid{
  grid-template-columns:1fr 1fr;
 }

 .city-arrival-panel{
  max-height:48vh;
  overflow:auto;
 }

 .city-arrival-head{
  align-items:flex-start;
  flex-direction:column;
 }

 .city-arrival-copy{
  text-align:left;
 }
}


@media(max-width:500px){

 .city-district-grid{
  grid-template-columns:1fr;
 }

 .city-arrival-panel{
  max-height:55vh;
 }

 .city-gate-wordmark{
  font-size:15px;
 }
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

 #omniaCityGateCanvas{
  opacity:.75;
 }

 .city-gate-entry,
 #omniaCityDistrictArrival{
  transition:none!important;
 }
}