/* Mudrika Sikka — mobile pass v1 (non-destructive enhancements) */
*{ -webkit-tap-highlight-color: rgba(154,114,8,.15); }
html,body{ max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; }
img,svg,video,iframe{ max-width:100%; height:auto; }
#ms-intro,#ms-intro-frame{ width:100% !important; height:100% !important; }
@media (max-width:760px){
  #ms-intro-frame{ position:fixed; inset:0; }
  .container,.wrap,main,section{ padding-left:16px !important; padding-right:16px !important; }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
@media (max-width:480px){
  button,.btn,a.btn,nav a{ min-height:44px; }
}
@media (hover:none){ [class*="hover"]:hover{ } }


/* ===== mobile navigation (hamburger) — v103.2 bulletproof ===== */
/* hidden on desktop */
#nav-toggle{ display:none; }

@media (max-width:768px){
  /* bar: wrap, items start from the LEFT */
  nav#main-nav{
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px 12px !important;
    padding:12px 16px !important;
  }
  /* 1) hamburger to the TOP-LEFT (flex order, no auto-margin) */
  nav#main-nav #nav-toggle{
    display:inline-flex !important; order:-2 !important; margin:0 !important;
    flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:9px; background:none; border:0; cursor:pointer;
  }
  nav#main-nav #nav-toggle span{ display:block; width:24px; height:2px; background:#1B2A4A;
    border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
  nav#main-nav.nav-open #nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  nav#main-nav.nav-open #nav-toggle span:nth-child(2){ opacity:0; }
  nav#main-nav.nav-open #nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* logo sits just right of the hamburger; pushes the rest away */
  nav#main-nav .nav-logo{ order:-1 !important; margin-right:auto !important; }
  nav#main-nav .nav-cta{ order:0 !important; }

  /* 2) the menu: full width, STACKED, fits the screen, only when open */
  nav#main-nav ul.nav-links{
    order:9 !important; display:none !important;
    flex:0 0 100% !important; width:100% !important; max-width:100% !important;
    flex-direction:column !important; align-items:stretch !important;
    gap:0 !important; margin:8px 0 2px !important; padding:0 !important;
    justify-content:flex-start !important;
  }
  nav#main-nav.nav-open ul.nav-links{ display:flex !important; }
  nav#main-nav ul.nav-links li{ width:100% !important; display:block !important; position:static !important; }
  nav#main-nav ul.nav-links li:not(:last-child)::after{ display:none !important; } /* drop vertical dividers */
  nav#main-nav ul.nav-links a{
    display:block !important; width:100% !important; box-sizing:border-box !important;
    padding:14px 4px !important; font-size:15px !important; text-align:left !important;
    border-radius:0 !important; border-bottom:1px solid rgba(201,168,76,0.18) !important;
    white-space:normal !important;
  }
  /* Atlas submenu flows inline inside the stacked menu (JS still toggles #ms-dd) */
  nav#main-nav .nav-atlas-wrap{ width:100% !important; position:static !important; }
  nav#main-nav #ms-dd, nav#main-nav .atlas-dd{
    position:static !important; box-shadow:none !important; border:0 !important;
    min-width:0 !important; width:100% !important; background:transparent !important;
    padding:0 0 0 14px !important; margin:0 !important;
  }
}
/* very narrow phones: trim the logo so the top row never overflows */
@media (max-width:430px){
  nav#main-nav .nav-logo{ font-size:19px !important; letter-spacing:2px !important; }
  nav#main-nav .nav-logo span{ font-size:9px !important; letter-spacing:1.5px !important; }
}
