/* SX AGENCY — Mobile content visibility / navigation restoration, 2026-11-01.
   The persistent 76px fixed bar blocked introductory content during scrolling.
   Keep the full header in normal page flow. Once it scrolls away, a small
   separate mobile menu control keeps navigation reachable without covering
   the first lines of page sections. Desktop is completely unaffected. */
@media (max-width: 1180px) {
  html {
    scroll-padding-top: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
  html, body { overflow-x: clip !important; }
  body, body.multipage {
    position: relative !important;
    top: auto !important;
    min-height: 100% !important;
    padding-top: 0 !important;
    overflow-y: visible !important;
    touch-action: pan-y pinch-zoom !important;
  }
  .site-header,
  .sx-premium-enabled .site-header,
  body.page-home > .site-header,
  body.page-contact > .site-header,
  body.sx-reference-page > .site-header,
  body.sx-services-reimagined > .site-header,
  body.sxw-page > .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 !important;
    padding: 0 clamp(16px,4vw,26px) !important;
    z-index: 200 !important;
    transform: none !important;
    translate: none !important;
    -webkit-transform: none !important;
    visibility: visible !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background: #060709 !important;
  }
  .site-header .menu-toggle { display:flex !important; visibility:visible !important; opacity:1; pointer-events:auto; }
  body.nav-open .site-header .menu-toggle { opacity:0 !important;pointer-events:none !important; }
  body.page-home .hero { margin-top:0 !important; padding-top:0 !important; }

  /* The drawer is reparented directly to body in script.js so it is never
     constrained by a backdrop-filtered or transformed header. */
  body > .nav.sx-cosmic-menu {
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
  }
  body > .nav.sx-cosmic-menu.open {visibility:visible !important;pointer-events:auto !important;}
  /* Do not toggle html/body overflow when opening. This previously caused
     iPhone Chrome's page scroll offset to jump or become stuck. */
  html:has(body.nav-open),body.nav-open {
    overflow-y:visible !important;
    top:auto !important;
    left:auto !important;
    height:auto !important;
    overscroll-behavior-y:auto !important;
  }
  /* Minimal navigation button visible ONLY after the in-flow header leaves
     the screen. It does not cover or clip the headline / eyebrow. */
  .sx-mobile-float-toggle {
    position:fixed;
    top: max(14px, env(safe-area-inset-top, 0px));
    right: clamp(15px,4vw,25px);
    z-index: 7500;
    width: 48px;
    height: 48px;
    padding: 0;
    display:flex;
    flex-direction:column;
    gap: 6px;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(231,236,245,.4);
    border-radius:15px;
    color:#f7f8fb;
    background: linear-gradient(145deg,#2b2d33ed,#090b0ff5 60%,#050609f5);
    box-shadow:0 9px 26px #000a, inset 0 1px 1px #ffffff25;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    -webkit-tap-highlight-color:transparent;
    cursor:pointer;
    touch-action:manipulation;
  }
  .sx-mobile-float-toggle[hidden] {display:none !important;}
  .sx-mobile-float-toggle span {
    display:block;
    width:21px;
    height:1.8px;
    background:currentColor;
    border-radius:4px;
  }
  .sx-mobile-float-toggle:focus-visible {outline:2px solid #fff;outline-offset:3px;}
  body.nav-open .sx-mobile-float-toggle {opacity:0 !important;pointer-events:none !important;}
  main section[id],main [id]:target {scroll-margin-top:18px !important;}
}
@media (min-width:1181px) {
  .sx-mobile-float-toggle{display:none !important;}
}
@media (max-width:600px) {
  body.page-home .hero {min-height:625px !important;}
}