/* Up Designs v1.5.19 — mobile-only navigation and delayed CTA fixes. Desktop is untouched. */
@media (max-width: 760px) {
  /* Sticky mobile header. */
  html body.upd-theme .site-header,
  html body.upd-theme .site-header.scrolled {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    z-index: 5000 !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(5,8,13,.97) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    backdrop-filter: blur(18px) saturate(1.08);
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.065) !important;
    box-shadow: 0 7px 24px rgba(0,0,0,.16) !important;
  }
  html body.upd-theme .header-inner,
  html body.upd-theme .header-inner-v4 {
    height: 72px !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 12px !important;
  }
  html body.upd-theme .brand {
    position: relative !important;
    z-index: 2 !important;
  }
  html body.upd-theme .brand img {
    width: 138px !important;
    max-height: 48px !important;
  }
  html body.upd-theme .header-actions { display: none !important; }

  /* Hamburger / X remains entirely inside the header. */
  html body.upd-theme .menu-toggle {
    display: block !important;
    justify-self: end !important;
    position: relative !important;
    z-index: 4 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body.upd-theme .menu-toggle span {
    position: absolute !important;
    left: 10px !important;
    width: 24px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #f5f8fc !important;
    transition: transform .25s ease, top .25s ease, opacity .2s ease !important;
  }
  html body.upd-theme .menu-toggle span:first-child { top: 16px !important; }
  html body.upd-theme .menu-toggle span:last-child { top: 26px !important; }
  html body.upd-theme .menu-toggle[aria-expanded="true"] span:first-child {
    top: 21px !important;
    transform: rotate(45deg) !important;
  }
  html body.upd-theme .menu-toggle[aria-expanded="true"] span:last-child {
    top: 21px !important;
    transform: rotate(-45deg) !important;
  }

  /*
   * Real mobile menu overlay.
   * The NAV itself is the dimmed viewport area below the header.
   * The UL is the actual opaque drawer. This replaces the old giant box-shadow hack.
   */
  html body.upd-theme .primary-nav {
    position: fixed !important;
    top: 72px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 72px) !important;
    min-height: calc(100vh - 72px) !important;
    z-index: 4900 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(1,3,6,.68) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
    transition: opacity .24s ease, visibility .24s ease !important;
    overflow: hidden !important;
  }
  html body.upd-theme .primary-nav.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  html body.upd-theme .primary-nav .nav-list,
  html body.upd-theme .primary-nav ul {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(82vw, 340px) !important;
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 22px 20px calc(34px + env(safe-area-inset-bottom)) !important;
    list-style: none !important;
    background: #070a0f !important;
    border-left: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: -24px 0 65px rgba(0,0,0,.28) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    transform: translate3d(102%,0,0) !important;
    transition: transform .3s cubic-bezier(.2,.76,.25,1) !important;
  }
  html body.upd-theme .primary-nav.open .nav-list,
  html body.upd-theme .primary-nav.open ul {
    transform: translate3d(0,0,0) !important;
  }
  html body.upd-theme .primary-nav li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
  }
  html body.upd-theme .primary-nav li:last-child { border-bottom: 0 !important; }
  html body.upd-theme .primary-nav a,
  html body.upd-theme .primary-nav button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 62px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #eef3fb !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 720 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  html body.upd-theme .primary-nav a::after {
    content: '→' !important;
    display: block !important;
    margin-left: 18px !important;
    color: #7186ab !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    transition: transform .2s ease, color .2s ease !important;
  }
  html body.upd-theme .primary-nav a:active::after {
    transform: translateX(3px) !important;
    color: #74cfff !important;
  }

  /* Desktop website mockup is desktop/tablet only. */
  html body.upd-theme .web-feature .browser-stage { display: none !important; }
  html body.upd-theme .web-feature .split-grid,
  html body.upd-theme .web-feature .split-grid-v5 { display: block !important; }
  html body.upd-theme .web-feature {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  /* Compact delayed mobile consultation CTA. */
  html body.upd-theme .mobile-scroll-consult {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(26px + env(safe-area-inset-bottom)) !important;
    z-index: 4200 !important;
    width: min(calc(100vw - 36px), 340px) !important;
    max-width: 340px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 17px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%,14px,0) scale(.985) !important;
    transition: opacity .24s ease, transform .3s cubic-bezier(.2,.75,.25,1), visibility .24s !important;
  }
  html body.upd-theme .mobile-scroll-consult.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%,0,0) scale(1) !important;
  }
  html body.upd-theme.menu-open .mobile-scroll-consult,
  html body.upd-theme.nav-open .mobile-scroll-consult {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(-50%,14px,0) scale(.985) !important;
  }
  html body.upd-theme .mobile-scroll-consult .cta-content {
    width: auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }
  html body.upd-theme .mobile-scroll-consult .cta-label {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }
  html body.upd-theme .mobile-scroll-consult .cta-arrow {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  html body.upd-theme [id] { scroll-margin-top: 82px !important; }
}

@media (max-width: 390px) {
  html body.upd-theme .brand img { width: 132px !important; }
  html body.upd-theme .primary-nav .nav-list,
  html body.upd-theme .primary-nav ul { width: min(84vw, 320px) !important; }
  html body.upd-theme .mobile-scroll-consult {
    width: calc(100vw - 30px) !important;
    height: 47px !important;
    min-height: 47px !important;
    max-height: 47px !important;
  }
  html body.upd-theme .mobile-scroll-consult .cta-label { font-size: 12.5px !important; }
}

@media (min-width: 761px) {
  .mobile-scroll-consult { display: none !important; }
}

/* Up Designs v1.5.36 — mobile hero/nav/contact drawer corrections. */
@media (max-width: 760px) {
  /* Keep the service eyebrow on desktop only. */
  html body.upd-theme .hero-v5 .eyebrow { display: none !important; }

  /* Mobile-only Contact entry inside the navigation drawer. */
  html body.upd-theme .primary-nav .mobile-nav-contact { display: block !important; }
  html body.upd-theme .primary-nav .mobile-nav-contact button::after {
    content: '→' !important;
    display: block !important;
    margin-left: 18px !important;
    color: #7186ab !important;
    font-size: 17px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    transition: transform .2s ease, color .2s ease !important;
  }
  html body.upd-theme .primary-nav .mobile-nav-contact button:active::after {
    transform: translateX(3px) !important;
    color: #74cfff !important;
  }

  /* Keep the contact drawer below the fixed mobile header and make its controls permanently reachable. */
  html body.upd-theme .contact-drawer { z-index: 4950 !important; }
  html body.upd-theme .contact-drawer-panel {
    top: 72px !important;
    bottom: 0 !important;
    right: 0 !important;
    height: calc(100dvh - 72px) !important;
    min-height: calc(100vh - 72px) !important;
    width: min(88vw, 400px) !important;
    padding: 0 20px calc(34px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scroll-padding-top: 78px !important;
  }
  html body.upd-theme .drawer-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin: 0 -20px !important;
    padding: 18px 20px 14px !important;
    background: linear-gradient(180deg,#0a0e15 0%,#0a0e15 82%,rgba(10,14,21,.94) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.055) !important;
  }
  html body.upd-theme .drawer-head > div { min-width: 0 !important; }
  html body.upd-theme .drawer-head .kicker { display: block !important; }
  html body.upd-theme .drawer-head h2 {
    margin: 6px 0 0 !important;
    font-size: clamp(25px,7.2vw,31px) !important;
    line-height: 1.04 !important;
  }
  html body.upd-theme .drawer-close {
    position: sticky !important;
    top: 12px !important;
    z-index: 10 !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }
  html body.upd-theme .drawer-intro { margin: 20px 0 !important; }
  html body.upd-theme .drawer-options { gap: 10px !important; }
  html body.upd-theme .drawer-option {
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  html body.upd-theme .drawer-icon { width: 44px !important; height: 44px !important; }
  html body.upd-theme .drawer-option small { line-height: 1.35 !important; }
}

@media (max-width: 390px) {
  html body.upd-theme .contact-drawer-panel { width: min(90vw, 360px) !important; }
  html body.upd-theme .drawer-head h2 { font-size: 25px !important; }
}