
@media (max-width: 860px){
  :root{ --m-header-h: calc(60px + env(safe-area-inset-top, 0px)); }
  html, body{ margin:0; padding:0; overflow-x:hidden !important; }
  body{ padding-top: var(--m-header-h) !important; }

  /* V22-like layered background via pseudo-elements with absolute paths */
  body{ background: transparent !important; }
  body::before{
    content:"" !important; position:fixed !important; inset:0 !important; display:block !important;
    background-image: url("/assets/esg-global-bg.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    z-index: -2 !important; pointer-events:none !important;
  }
  body::after{
    content:"" !important; position:fixed !important; inset:0 !important; display:block !important;
    background-image: url("/assets/mesh.svg") !important;
    background-repeat: repeat !important; opacity: .15 !important;
    mix-blend-mode: multiply !important; pointer-events: none !important;
    z-index: -1 !important;
  }
  body > *{ position:relative; z-index:1; }

  /* Header fixed to top (no pills) */
  header, .site-header{
    position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:10000 !important;
    min-height: var(--m-header-h) !important;
    background: rgba(19,19,19,0.86) !important;
    -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important; border-radius:0 !important; box-shadow:none !important;
  }
  header .container, header .inner, header .row, header nav, header .brand, header .logo, header .brand a, header .logo a{
    background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important;
  }
  header [class*="rounded"], header [class*="pill"], header [class*="badge"]{ border-radius:0 !important; background:transparent !important; box-shadow:none !important; }
  header .m-header-row, header .container, header .inner, header .row, header nav{
    min-height: var(--m-header-h) !important; display:flex !important; align-items:center !important; gap:12px !important;
    padding-right:64px !important;
  }
  .desktop-nav{ display:none !important; } /* hide desktop-only groups on mobile */

  /* Use ONLY the m-burger/#m-panel system on mobile; hide legacy to avoid conflicts */
  #mobile-nav-toggle, #mobile-menu{ display:none !important; }

  .m-burger{
    position:fixed !important; right:12px !important; 
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    z-index:10002 !important; width:40px !important; height:40px !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    border:1px solid rgba(255,255,255,0.2) !important; border-radius:12px !important;
    background:rgba(255,255,255,0.12) !important; pointer-events:auto !important;
  }
  .m-burger .bar{ width:22px; height:2px; background:#fff; display:block; margin:3px 0; }

  #m-panel{
    position:fixed !important; right:12px !important; top: calc(var(--m-header-h) + 6px) !important;
    width:min(88vw,340px) !important; padding:12px !important; border-radius:14px !important;
    background:rgba(11,11,11,0.96) !important; color:#fff !important;
    box-shadow:0 20px 40px rgba(0,0,0,0.45) !important; z-index:10001 !important;
    overflow:auto !important; max-height: calc(100vh - var(--m-header-h) - 24px) !important;
    display:none !important; flex-direction:column !important; gap:6px !important;
  }
  #m-panel.open{ display:flex !important; }

  #m-panel a{ color:#fff !important; text-decoration:none !important; padding:10px 12px !important; border-radius:10px !important; display:block !important; }
  #m-panel a:hover{ background:rgba(255,255,255,0.06) !important; }
  #m-panel a.cta{ font-weight:700 !important; border:1px solid rgba(255,255,255,0.2) !important; text-align:center !important; }

  /* Home hero CTA under heading */
  #home-page .flex.items-end.justify-between{ flex-direction:column !important; align-items:flex-start !important; gap:12px !important; }
  #home-page .case-button{ display:inline-block !important; margin-top:4px !important; }
}


/* === ORVENZIA FIX: Keep "Start screening" black on hover/focus === */
a[href*="screening"].btn:hover,
a[href*="screening"].btn:focus,
a[href*="screening"].cta:hover,
a[href*="screening"].cta:focus,
a[href*="screening"]:hover,
a[href*="screening"]:focus,
#start-screening:hover,
#start-screening:focus,
.start-screening:hover,
.start-screening:focus,
button.start-screening:hover,
button.start-screening:focus {
  background: #22C55E !important; /* green */
  color: #000 !important; /* black text */
  border-color: #22C55E !important;
  filter: none !important;
  text-decoration: none !important;
}

a[href*="screening"].btn,
a[href*="screening"].cta,
a[href*="screening"],
#start-screening,
.start-screening,
button.start-screening {
  background: #22C55E !important; /* green */
  color: #000 !important; /* black text */
  border: 1px solid #22C55E !important;
}
/* === END FIX === */
