:root{
  --ngs-navy:#07172e;
  --ngs-navy-2:#0b2a50;
  --ngs-gold:#f4b719;
  --ngs-gold-2:#ffd45e;
  --ngs-purple:#6b3fe0;
  --ngs-ink:#192941;
  --ngs-muted:#68778c;
  --ngs-line:#e4e9f0;
  --ngs-shadow:0 10px 28px rgba(22,42,76,.08);
}

/* ---------- Global frontend header ---------- */
body.public-site{
  padding-top:0;
}
body.public-site>.public-utility{
  height:34px;
  background:var(--ngs-navy);
  color:#d9e3ef;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(28px,calc((100vw - 1840px)/2));
  font-size:12px;
  line-height:1;
  position:relative;
  z-index:120;
}
.public-utility .util-left,
.public-utility .util-right{
  display:flex;
  align-items:center;
  gap:18px;
}
.public-utility a{color:#e7eef7;text-decoration:none}
.public-utility a:hover{color:#ffd45e}

body.public-site>.topbar.public-nav{
  min-height:98px;
  height:auto;
  padding:0 max(42px,calc((100vw - 1840px)/2));
  background:rgba(255,255,255,.98)!important;
  color:var(--ngs-ink)!important;
  border-bottom:1px solid #e7ebf0;
  box-shadow:0 6px 20px rgba(20,39,70,.045);
  position:sticky;
  top:0;
  z-index:110;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
body.public-site>.topbar.public-nav .brand{
  gap:13px;
  min-width:330px;
  color:var(--ngs-ink);
}
body.public-site>.topbar.public-nav .brand-logo{
  width:66px;
  height:66px;
  border-radius:18px;
  background:linear-gradient(145deg,#0b2241,#071326);
  border:1px solid rgba(244,183,25,.42);
  box-shadow:0 7px 17px rgba(8,25,48,.09);
}
body.public-site>.topbar.public-nav .brand-logo img{
  width:100%;
  height:100%;
  padding:6px;
  object-fit:contain;
}
body.public-site>.topbar.public-nav .brand strong{
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.02em;
  color:#15243a;
}
body.public-site>.topbar.public-nav .brand small{
  margin-top:5px;
  font-size:12px;
  line-height:1.35;
  color:#758297;
  letter-spacing:.11em;
  text-transform:uppercase;
}
body.public-site>.topbar.public-nav nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  flex-wrap:nowrap;
}
body.public-site>.topbar.public-nav nav>a,
body.public-site>.topbar.public-nav .portal-trigger{
  position:relative;
  color:#26364e!important;
  font-size:12px;
  line-height:1.3;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
  transition:.2s ease;
}
body.public-site>.topbar.public-nav nav>a:not(.apply-now):hover,
body.public-site>.topbar.public-nav nav>a.active{
  color:#643dd4!important;
}
body.public-site>.topbar.public-nav nav>a:not(.apply-now)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-11px;
  height:2px;
  border-radius:9px;
  background:linear-gradient(90deg,#6b3fe0,#f4b719);
  transition:right .22s ease;
}
body.public-site>.topbar.public-nav nav>a:not(.apply-now):hover::after,
body.public-site>.topbar.public-nav nav>a.active::after{right:0}

.public-portals{
  position:relative;
}
.public-portals summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 14px;
  border-radius:12px;
  border:1px solid #e1e6ed;
  background:#f7f9fc;
  color:#293950;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.public-portals summary::-webkit-details-marker{display:none}
.public-portals[open] summary{background:#f2edff;color:#5e3bd2;border-color:#ddd3fd}
.public-portals-menu{
  position:absolute;
  right:0;
  top:calc(100% + 9px);
  min-width:205px;
  background:#fff;
  border:1px solid var(--ngs-line);
  border-radius:14px;
  padding:7px;
  box-shadow:0 18px 40px rgba(24,45,80,.15);
}
.public-portals-menu a{
  display:flex;
  justify-content:space-between;
  padding:10px 11px;
  border-radius:9px;
  color:#35455d!important;
  font-size:12px;
  font-weight:800;
}
.public-portals-menu a:hover{background:#f5f2ff;color:#5e3bd2!important}

body.public-site>.topbar.public-nav nav .apply-now{
  padding:14px 18px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--ngs-gold),var(--ngs-gold-2));
  color:#152239!important;
  box-shadow:0 9px 22px rgba(244,183,25,.23);
  font-weight:950;
}
body.public-site>.topbar.public-nav nav .apply-now:hover{transform:translateY(-2px)}

.public-mobile-toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:13px;
  border:1px solid #dfe5ec;
  background:#fff;
  color:#15263e;
  font-size:21px;
  cursor:pointer;
  place-items:center;
}

/* ---------- Right-side mobile drawer ---------- */
.public-mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(4,15,32,.52);
  z-index:210;
  opacity:0;
  visibility:hidden;
  transition:.25s ease;
}
.public-mobile-drawer{
  position:fixed;
  z-index:220;
  top:0;
  right:0;
  bottom:0;
  width:min(88vw,370px);
  background:#fff;
  box-shadow:-20px 0 46px rgba(5,20,42,.19);
  transform:translateX(102%);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
body.public-menu-open{overflow:hidden}
body.public-menu-open .public-mobile-overlay{opacity:1;visibility:visible}
body.public-menu-open .public-mobile-drawer{transform:translateX(0)}
.public-mobile-head{
  padding:19px 18px;
  background:linear-gradient(125deg,#07182f,#0c385d);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.public-mobile-head strong{font-size:17px}
.public-mobile-head small{display:block;color:#b9c9da;font-size:12px;margin-top:3px}
.public-mobile-close{
  width:40px;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.16);
  color:#fff;background:rgba(255,255,255,.08);font-size:22px;cursor:pointer
}
.public-mobile-links{padding:13px;display:grid;gap:5px}
.public-mobile-links a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 13px;
  border-radius:11px;
  color:#25364e;
  background:#f8fafc;
  border:1px solid #edf1f5;
  font-size:12px;
  font-weight:850;
}
.public-mobile-links a:hover,
.public-mobile-links a.active{background:#f2edff;color:#5e3bd2;border-color:#e5dcff}
.public-mobile-links .mobile-apply{
  background:linear-gradient(135deg,var(--ngs-gold),var(--ngs-gold-2));
  border:0;color:#17243a;font-weight:950
}
.public-mobile-section{
  padding:7px 13px 3px;
  color:#7a8798;
  font-size:12px;
  font-weight:950;
  letter-spacing:.11em;
  text-transform:uppercase
}
.public-mobile-foot{
  margin-top:auto;
  padding:14px 16px 20px;
  border-top:1px solid #edf1f5;
  font-size:12px;
  color:#748196
}

/* ---------- Global floating chat hub ---------- */
.public-support{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:180;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px
}
.public-support-menu{
  display:none;
  flex-direction:column;
  align-items:flex-end;
  gap:8px
}
.public-support-menu.open{display:flex}
.public-support-link{
  border:0;
  padding:11px 13px;
  border-radius:12px;
  color:#fff!important;
  font-size:12px;
  line-height:1.3;
  font-weight:900;
  box-shadow:0 12px 26px rgba(20,40,74,.17);
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
  animation:publicSupportPop .2s ease
}
.public-support-link.wa{background:#13a66c}
.public-support-link.enquiry{background:#6b3fe0}
.public-support-link.call{background:#1777e8}
.public-support-link.live{background:#0b2b52}
@keyframes publicSupportPop{from{opacity:0;transform:translateY(5px) scale(.94)}to{opacity:1;transform:none}}
.public-support-fab{
  width:61px;height:61px;border:0;border-radius:18px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0d9564,#20c57f);
  color:#fff;box-shadow:0 15px 31px rgba(17,166,108,.35);cursor:pointer;transition:.22s ease
}
.public-support-fab:hover{transform:translateY(-3px) rotate(-2deg)}
.public-support-fab svg{width:28px;height:28px}
.public-support-label{
  position:absolute;
  right:72px;
  bottom:8px;
  white-space:nowrap;
  padding:8px 10px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--ngs-line);
  box-shadow:0 9px 22px rgba(22,42,76,.12);
  color:#263850;
  font-size:12px;
  font-weight:900
}

/* ---------- Global public footer ---------- */
body.public-site>footer.public-footer{
  min-height:54px;
  padding:15px max(28px,calc((100vw - 1840px)/2));
  background:#071326;
  color:#aebbd0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  line-height:1.5
}
body.public-site>footer.public-footer a{
  color:#f2bd30;
  font-weight:900;
  text-decoration:none
}
body.public-site>footer.public-footer a:hover{color:#ffd85f}

@media(max-width:1320px){
  body.public-site>.topbar.public-nav nav{gap:13px}
  body.public-site>.topbar.public-nav nav>a,
  body.public-site>.topbar.public-nav .portal-trigger{font-size:12px}
  body.public-site>.topbar.public-nav .brand{min-width:280px}
}
@media(max-width:1080px){
  .public-utility{display:none!important}
  body.public-site>.topbar.public-nav{
    min-height:76px;
    padding:9px 16px;
  }
  body.public-site>.topbar.public-nav .brand{min-width:0}
  body.public-site>.topbar.public-nav .brand-logo{width:53px;height:53px;border-radius:15px}
  body.public-site>.topbar.public-nav .brand strong{font-size:16px}
  body.public-site>.topbar.public-nav .brand small{font-size:12px}
  body.public-site>.topbar.public-nav nav{display:none!important}
  .public-mobile-toggle{display:grid}
}
@media(max-width:620px){
  body.public-site>.topbar.public-nav .brand-logo{width:49px;height:49px}
  body.public-site>.topbar.public-nav .brand strong{font-size:15px}
  body.public-site>.topbar.public-nav .brand small{max-width:220px}
  .public-support{right:14px;bottom:14px}
  .public-support-label{display:none}
  body.public-site>footer.public-footer{flex-direction:column;align-items:flex-start;padding:16px 18px}
}
@media(max-width:430px){
  body.public-site>.topbar.public-nav .brand small{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}