/* Shared mobile responsive helper styles */
:root{--mr-break:768px}
/* Default: hide mobile menu button until mobile */
.menu-btn{display:none}
.syb-menu-btn{display:none}

/* Make images and media fluid */
img, video { max-width:100%; height:auto; display:block; }

@media (max-width: 768px) {
  header, .global-header, .hero, .workflow-header { padding: 12px 16px !important; }
  .container { padding: 0 16px !important; }

  /* Mobile nav: hide desktop nav, show mobile menu button */
  nav { display: none !important; }
  .menu-btn, .syb-menu-btn { display: inline-block !important; width:32px; height:28px; cursor:pointer; }

  /* When active, show nav as overlay column */
  #navLinks.active {
    display: flex !important;
    flex-direction: column;
    gap:12px;
    position: absolute;
    top: 56px;
    right: 16px;
    background: rgba(0,0,0,0.85);
    padding: 12px;
    border-radius: 8px;
    z-index: 9999;
    min-width: 180px;
  }

  /* Support new syb- header selectors */
  #sybNav.active, .syb-nav.active {
    display: flex !important;
    flex-direction: column;
    gap:12px;
    position: absolute;
    top: 56px;
    right: 16px;
    background: rgba(0,0,0,0.85);
    padding: 12px;
    border-radius: 8px;
    z-index: 9999;
    min-width: 180px;
  }

  /* Make grid layouts single column */
  .workflow-container, .services-grid, .pillar-grid, .matrix-grid, .pillars-grid, .network-grid, .contact-layout {
    display: block !important;
  }

  /* Make cards and forms full width */
  .service-card, .pillar-card, .matrix-card, .info-card, .contact-form-area, .contact-info-area, .stage-card {
    width: 100% !important;
    margin-bottom: 18px !important;
    box-sizing: border-box;
  }

  /* Forms and inputs */
  input[type="text"], input[type="email"], input[type="tel"], textarea, select, .contact-form-area form {
    width: 100% !important;
  }

  /* Footer spacing */
  footer, .site-footer { padding: 40px 16px !important; }

  /* Reduce hero sizes */
  .hero h1, .detail-title, .section-title, .workflow-header h1 { font-size: clamp(20px, 5vw, 34px) !important; }
}