/* =========================================================================
   OOH.ae UAE Portfolio, OTP access gate
   Brand system: Tenor Sans (display) + Nunito Sans (body), night + steel blue
   ========================================================================= */

html.og-locked, html.og-locked body { overflow: hidden !important; height: 100%; }
/* hide the page underneath without removing it from layout */
html.og-locked body > *:not(#oohGate) { visibility: hidden !important; }
html.og-locked body { cursor: auto !important; }

#oohGate{
  position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,60px);overflow:hidden;visibility:visible !important;
  font-family:"Nunito Sans",system-ui,sans-serif;color:#fff;
  opacity:0;transition:opacity .6s cubic-bezier(.19,1,.22,1);
}
#oohGate.og-in{opacity:1}
#oohGate.og-out{opacity:0;pointer-events:none}

.og-bg{position:absolute;inset:-3%;z-index:0}
.og-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(1.02)}
.og-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(72% 56% at 50% 46%,rgba(8,11,15,.78) 0%,rgba(8,11,15,.55) 52%,rgba(8,11,15,.4) 100%),
  linear-gradient(180deg,rgba(8,11,15,.75) 0%,rgba(8,11,15,.5) 40%,rgba(8,11,15,.9) 100%)}

.og-card{
  position:relative;z-index:2;width:100%;max-width:460px;
  background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.16);border-radius:4px;
  backdrop-filter:blur(26px) saturate(1.3);-webkit-backdrop-filter:blur(26px) saturate(1.3);
  padding:clamp(30px,4.2vw,46px);box-shadow:0 60px 130px -50px rgba(0,0,0,.95);
  transform:translateY(16px);transition:transform .7s cubic-bezier(.19,1,.22,1);
}
#oohGate.og-in .og-card{transform:none}

.og-logo{height:40px;width:auto;display:block;margin-bottom:clamp(24px,3.4vw,34px)}
.og-k{display:block;font-size:.68rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:#93aed3;margin-bottom:12px}
.og-h{font-family:"Tenor Sans",serif;font-weight:400;font-size:clamp(1.6rem,3.4vw,2.15rem);line-height:1.06;letter-spacing:.01em;margin-bottom:12px}
.og-p{font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.68);margin-bottom:26px}
.og-p b{color:#fff;font-weight:700}

.og-field{display:block;margin-bottom:16px}
.og-label{display:block;font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:9px}
.og-input{
  width:100%;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.2);border-radius:3px;
  color:#fff;font-family:inherit;font-size:1rem;padding:15px 16px;transition:border-color .3s,background .3s;
  -webkit-appearance:none;appearance:none;
}
.og-input::placeholder{color:rgba(255,255,255,.32)}
.og-input:focus{outline:none;border-color:#4f6583;background:rgba(0,0,0,.45)}
.og-input.og-code{text-align:center;font-size:1.7rem;letter-spacing:.62em;text-indent:.62em;font-weight:700;padding:17px 16px;font-variant-numeric:tabular-nums}

.og-btn{
  width:100%;background:#4f6583;color:#fff;border:1px solid #4f6583;border-radius:44px;
  font-family:"Tenor Sans",serif;font-size:1rem;letter-spacing:.02em;padding:16px 24px;cursor:pointer;
  transition:.4s cubic-bezier(.19,1,.22,1);margin-top:6px;
}
.og-btn:hover:not(:disabled){background:transparent;color:#fff}
.og-btn:disabled{opacity:.45;cursor:not-allowed}
.og-btn.og-busy{color:rgba(255,255,255,.6)}

.og-msg{font-size:.84rem;line-height:1.5;margin-top:16px;min-height:1.2em}
.og-msg.og-err{color:#f2a2a2}
.og-msg.og-ok{color:#93aed3}

.og-mock{
  background:rgba(147,174,211,.15);border:1px dashed rgba(147,174,211,.4);
  border-radius:3px;padding:12px 14px;font-size:.82rem;line-height:1.45;
  color:#fff;margin:-8px 0 18px;
}
.og-mock b{color:#93aed3}
.og-mock span{font-weight:800;letter-spacing:.2em;font-size:1.1rem}

.og-alt{margin-top:20px;font-size:.78rem;color:rgba(255,255,255,.45);display:flex;flex-wrap:wrap;gap:6px 16px}
.og-alt button,.og-alt a{background:none;border:0;color:#93aed3;font-family:inherit;font-size:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.og-alt button:hover,.og-alt a:hover{color:#fff}

.og-foot{position:absolute;left:0;right:0;bottom:clamp(14px,2.6vh,24px);z-index:2;text-align:center;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.34);padding:0 20px}
.og-foot a{color:rgba(255,255,255,.55)}
.og-foot a:hover{color:#fff}

.og-step[hidden]{display:none}
.og-field[hidden]{display:none}

@media(max-height:640px){.og-foot{display:none}.og-logo{height:32px;margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){
  #oohGate,.og-card{transition:none}
  #oohGate{opacity:1}.og-card{transform:none}
}