/* Sharp Growth Co. mobile-only hamburger navigation
   Applies strictly below 768px. Desktop header/navigation remains controlled by existing styles. */

.sgc-mobile-brand-logo,
.sgc-mobile-menu-toggle,
.sgc-mobile-menu-panel,
.sgc-mobile-menu-backdrop {
  display: none;
}

@media (min-width: 769px) {
  body.sgc-non-home-header #root header nav a,
  body.sgc-non-home-header header nav a {
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 768px) {
  #root header.sgc-mobile-menu-ready,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready {
    position: fixed !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #root header.sgc-mobile-menu-ready nav,
  #root header.sgc-mobile-menu-ready [data-sgc-header-book-cta="true"],
  #root header.sgc-mobile-menu-ready button[aria-label="Toggle menu"]:not(#sgc-mobile-header-toggle),
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready button[aria-label="Toggle menu"]:not(#sgc-mobile-header-toggle) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-brand-logo,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready .sgc-mobile-brand-logo,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready .sgc-mobile-brand-logo,
  header.sgc-mobile-menu-ready .sgc-mobile-brand-logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: min(52vw, 210px) !important;
    height: 48px !important;
    position: fixed !important;
    top: 0.82rem !important;
    left: 1rem !important;
    z-index: 10002 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-brand-logo img,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready .sgc-mobile-brand-logo img,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready .sgc-mobile-brand-logo img,
  header.sgc-mobile-menu-ready .sgc-mobile-brand-logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin-left: auto !important;
    padding: 0 !important;
    position: absolute !important;
    top: 50% !important;
    right: 1rem !important;
    transform: translateY(-50%) !important;
    z-index: 10002 !important;
    border: 1px solid rgba(199, 157, 91, 0.72) !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #FAF6F0 !important;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.30), 0 0 0 1px rgba(250, 246, 240, 0.08) inset !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle:hover,
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle:focus-visible {
    border-color: #C79D5B !important;
    color: #C79D5B !important;
    outline: none !important;
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.36), 0 0 0 3px rgba(199, 157, 91, 0.18) !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    position: absolute !important;
    left: 50% !important;
    margin-left: -9px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    transition: transform 180ms ease, opacity 180ms ease, top 180ms ease !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle span:nth-child(1) { top: 14px !important; }
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle span:nth-child(2) { top: 21px !important; }
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle span:nth-child(3) { top: 28px !important; }

  #root header.sgc-mobile-menu-ready.sgc-mobile-menu-open .sgc-mobile-menu-toggle span:nth-child(1) {
    top: 21px !important;
    transform: rotate(45deg) !important;
  }

  #root header.sgc-mobile-menu-ready.sgc-mobile-menu-open .sgc-mobile-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  #root header.sgc-mobile-menu-ready.sgc-mobile-menu-open .sgc-mobile-menu-toggle span:nth-child(3) {
    top: 21px !important;
    transform: rotate(-45deg) !important;
  }

  .sgc-mobile-menu-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    background: rgba(17, 17, 17, 0.38) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 180ms ease !important;
  }

  #root header.sgc-mobile-menu-ready.sgc-mobile-menu-open ~ .sgc-mobile-menu-backdrop,
  body.sgc-mobile-menu-open .sgc-mobile-menu-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.35rem !important;
    width: min(82vw, 320px) !important;
    position: absolute !important;
    top: calc(100% + 0.65rem) !important;
    right: 1rem !important;
    z-index: 10001 !important;
    padding: 1rem !important;
    border: 1px solid rgba(199, 157, 91, 0.56) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    box-shadow: 0 22px 50px rgba(17, 17, 17, 0.24), 0 0 0 1px rgba(17, 17, 17, 0.04) inset !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(0.98) !important;
    transform-origin: top right !important;
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease !important;
  }

  #root header.sgc-mobile-menu-ready.sgc-mobile-menu-open .sgc-mobile-menu-panel,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready.sgc-mobile-menu-open .sgc-mobile-menu-panel,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready.sgc-mobile-menu-open .sgc-mobile-menu-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel a,
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0.72rem 0.85rem !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
    font-family: Outfit, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    filter: none !important;
    transform: none !important;
    cursor: pointer !important;
  }

  body.sgc-non-home-header #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel a,
  body.sgc-non-home-header #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel button,
  body.sgc-non-home-header header.sgc-mobile-menu-ready .sgc-mobile-menu-panel a,
  body.sgc-non-home-header header.sgc-mobile-menu-ready .sgc-mobile-menu-panel button {
    font-size: 1.06rem !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel a:hover,
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel a:focus-visible,
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel button:hover,
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel button:focus-visible {
    background: rgba(199, 157, 91, 0.16) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    outline: none !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel .sgc-mobile-book-cta {
    justify-content: center !important;
    margin-top: 0.55rem !important;
    border: 1px solid rgba(199, 157, 91, 0.88) !important;
    background: #C79D5B !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 800 !important;
    letter-spacing: 0.075em !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel .sgc-mobile-book-cta:hover,
  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel .sgc-mobile-book-cta:focus-visible {
    background: #FAF6F0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
  }
}

@media (min-width: 1100px) {
  #root header [aria-label="Book a consultation with Sharp Growth Co."],
  header [aria-label="Book a consultation with Sharp Growth Co."] {
    transform: translateX(clamp(1.5rem, 3.75vw, 3rem)) !important;
  }
}

@media (min-width: 769px) {
  .sgc-mobile-brand-logo,
  .sgc-mobile-menu-toggle,
  .sgc-mobile-menu-panel,
  .sgc-mobile-menu-backdrop {
    display: none !important;
  }
}

/* 2026-06-10 urgent mobile header strip fix:
   At mobile widths, the original desktop header shell must not render as a
   white or dark strip. Hide every original header child and make the header
   itself transparent/heightless; only the injected hamburger toggle and its
   dropdown panel remain interactive. */
@media (max-width: 768px) {
  html,
  body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #root header.sgc-mobile-menu-ready,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready,
  header.sgc-mobile-menu-ready {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  #root header.sgc-mobile-menu-ready > *:not(.sgc-mobile-brand-logo):not(.sgc-mobile-menu-toggle):not(.sgc-mobile-menu-panel),
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready > *:not(.sgc-mobile-brand-logo):not(.sgc-mobile-menu-toggle):not(.sgc-mobile-menu-panel),
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready > *:not(.sgc-mobile-brand-logo):not(.sgc-mobile-menu-toggle):not(.sgc-mobile-menu-panel),
  header.sgc-mobile-menu-ready > *:not(.sgc-mobile-brand-logo):not(.sgc-mobile-menu-toggle):not(.sgc-mobile-menu-panel) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-brand-logo,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready .sgc-mobile-brand-logo,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready .sgc-mobile-brand-logo,
  header.sgc-mobile-menu-ready .sgc-mobile-brand-logo {
    position: fixed !important;
    top: 0.82rem !important;
    left: 1rem !important;
    pointer-events: auto !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle,
  header.sgc-mobile-menu-ready .sgc-mobile-menu-toggle {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel,
  body.sgc-home-exact-reference #root header.sgc-mobile-menu-ready .sgc-mobile-menu-panel,
  body.sgc-home-exact-reference header.sgc-mobile-menu-ready .sgc-mobile-menu-panel,
  header.sgc-mobile-menu-ready .sgc-mobile-menu-panel {
    position: fixed !important;
    top: 4.65rem !important;
    right: 1rem !important;
  }
}

/* 2026-06-10 top strip removal:
   The empty accessibility notifications viewport must not consume page space,
   because site-wide section padding can otherwise expose the dark body background
   above the fixed header. */
#root > section[aria-label^="Notifications"],
body > section[aria-label^="Notifications"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}