/* ==========================================================================
   Smooth Projects Sticky Card Stacking & Horizontal Overflow Clip
   ========================================================================== */
html, body {
  overflow-x: clip !important;
}

#projects .sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
}

/* ==========================================================================
   Seamless Hero Sky to Marquee Blend (Eliminates harsh line / seam)
   ========================================================================== */
#top {
  border-bottom: none !important;
}

/* Only target the bottom sky fade gradient overlay (Child 0), NEVER cutout containers */
#top > div.inset-x-0.bottom-0 {
  display: block !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  height: clamp(140px, 22vh, 240px) !important;
  background: linear-gradient(
    to top,
    #F8FAFC 0%,
    rgba(248, 250, 252, 0.99) 14%,
    rgba(248, 250, 252, 0.92) 28%,
    rgba(248, 250, 252, 0.78) 44%,
    rgba(248, 250, 252, 0.54) 62%,
    rgba(248, 250, 252, 0.28) 78%,
    rgba(248, 250, 252, 0.08) 90%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 12 !important;
}

html.dark #top > div.inset-x-0.bottom-0 {
  background: linear-gradient(
    to top,
    #0A0A0E 0%,
    rgba(10, 10, 14, 0.99) 14%,
    rgba(10, 10, 14, 0.92) 28%,
    rgba(10, 10, 14, 0.78) 44%,
    rgba(10, 10, 14, 0.54) 62%,
    rgba(10, 10, 14, 0.26) 80%,
    rgba(10, 10, 14, 0.08) 90%,
    transparent 100%
  ) !important;
}

/* Ensure desktop Bhanu cutout container stays properly on the right and hidden on mobile */
#top div:has(> img[alt="Bhanu Cutout"]) {
  left: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 40vw !important;
  max-width: 500px !important;
  height: 540px !important;
  background: transparent !important;
  z-index: 20 !important;
}

@media (max-width: 767px) {
  #top div:has(> img[alt="Bhanu Cutout"]) {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #top div:has(> img[alt="Bhanu Cutout"]) {
    display: flex !important;
  }
}

/* Ensure mobile Bhanu cutout has transparent background and only shows on mobile */
#top div:has(> img[alt="Bhanu"]) {
  background: transparent !important;
}

/* Also ensure Bhanu's cutout mask fully dissolves before reaching the bottom edge */
#top img[alt="Bhanu"],
#top img[alt="Bhanu Cutout"] {
  -webkit-mask-image: linear-gradient(to bottom, black 65%, rgba(0, 0, 0, 0.6) 78%, transparent 92%) !important;
  mask-image: linear-gradient(to bottom, black 65%, rgba(0, 0, 0, 0.6) 78%, transparent 92%) !important;
}

#top + section,
main > section:has(.marquee-track),
section:has(.marquee-track) {
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ==========================================================================
   Seamless Section Dividers (Eliminates harsh 1px line, blends softly)
   ========================================================================== */
[aria-hidden="true"] > .flex.items-center.w-full {
  mask-image: radial-gradient(ellipse 65% 100% at 50% 50%, black 15%, transparent 90%) !important;
  -webkit-mask-image: radial-gradient(ellipse 65% 100% at 50% 50%, black 15%, transparent 90%) !important;
  opacity: 0.55 !important;
  transition: opacity 0.3s ease;
}

[aria-hidden="true"] > .flex.items-center.w-full > div.flex-1:first-child {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 200, 225, 0.4) 40%, rgba(150, 175, 205, 0.6) 100%) !important;
}

[aria-hidden="true"] > .flex.items-center.w-full > div.flex-1:last-child {
  background: linear-gradient(270deg, transparent 0%, rgba(180, 200, 225, 0.4) 40%, rgba(150, 175, 205, 0.6) 100%) !important;
}

[aria-hidden="true"] > .flex.items-center.w-full span {
  opacity: 0.45 !important;
}

/* ==========================================================================
   Marquee Ticker (High Opacity, Crisp, Bold & Vibrant)
   ========================================================================== */
.marquee-track {
  opacity: 1 !important;
}

.marquee-track div,
.marquee-track span {
  opacity: 1 !important;
}

.marquee-track .font-display,
.marquee-track span.font-display,
.marquee-track span.text-text-1 {
  opacity: 1 !important;
  color: #0F172A !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html.dark .marquee-track .font-display,
html.dark .marquee-track span.font-display,
html.dark .marquee-track span.text-text-1 {
  color: #F8FAFC !important;
}

.marquee-track span.text-purple-2,
.marquee-track .text-purple-2 {
  opacity: 1 !important;
  color: #3B82F6 !important;
  text-shadow: 0 0 14px rgba(59, 130, 246, 0.65) !important;
}

/* Extra gentle fade for the bottom divider right above contact */
main > [aria-hidden="true"]:last-child {
  opacity: 0.4 !important;
}

/* Exact Store Page Footer & Contact Styling with Rich Upward Blue Fade */
main + div,
div:has(> #contact) {
  position: relative !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  background: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Seamless top blend overlay from white/light page section into sky blue */
div:has(> #contact) > div.absolute.top-0.h-44,
div:has(> #contact) > div[class*="h-44"] {
  display: block !important;
  position: absolute !important;
  top: -30px !important;
  left: 0 !important;
  right: 0 !important;
  height: clamp(300px, 34vw, 460px) !important;
  background: linear-gradient(
    to bottom,
    #F8FAFC 0%,
    #F8FAFC 25px,
    rgba(248, 250, 252, 0.98) 18%,
    rgba(248, 250, 252, 0.88) 32%,
    rgba(248, 250, 252, 0.62) 52%,
    rgba(248, 250, 252, 0.32) 72%,
    rgba(248, 250, 252, 0.1) 88%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 8 !important;
}

html.dark div:has(> #contact) > div.absolute.top-0.h-44,
html.dark div:has(> #contact) > div[class*="h-44"] {
  background: linear-gradient(
    to bottom,
    #0A0A0E 0%,
    #0A0A0E 25px,
    rgba(10, 10, 14, 0.98) 18%,
    rgba(10, 10, 14, 0.88) 32%,
    rgba(10, 10, 14, 0.62) 52%,
    rgba(10, 10, 14, 0.32) 72%,
    rgba(10, 10, 14, 0.1) 88%,
    transparent 100%
  ) !important;
}

main + div::before,
div:has(> #contact)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse 120% 70% at 50% 25%, rgba(56, 189, 248, 0.4) 0%, rgba(37, 99, 235, 0.25) 45%, transparent 80%),
    url('/assets/sky-bg-CNhair3L.webp') no-repeat center bottom / cover !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 60px,
    rgba(0, 0, 0, 0.18) 120px,
    rgba(0, 0, 0, 0.45) 190px,
    rgba(0, 0, 0, 0.78) 270px,
    #000000 350px
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 60px,
    rgba(0, 0, 0, 0.18) 120px,
    rgba(0, 0, 0, 0.45) 190px,
    rgba(0, 0, 0, 0.78) 270px,
    #000000 350px
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Atmospheric sky glow rising upwards above the contact section */
main + div::after,
div:has(> #contact)::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 380px !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 100px,
    rgba(56, 189, 248, 0.14) 200px,
    rgba(37, 99, 235, 0.1) 300px,
    transparent 380px
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

#root > div > main::after,
#root main::after {
  display: none !important;
}

#contact {
  padding: clamp(56px, 7vw, 84px) 16px clamp(32px, 4vw, 56px) !important;
  z-index: 10 !important;
}

#contact > .container {
  max-width: 1200px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

div:has(> #contact) > footer {
  position: relative !important;
  padding-top: 16px !important;
  z-index: 2 !important;
}

div:has(> #contact) > footer > .container > div:last-child {
  min-height: 120px !important;
  max-height: 280px !important;
}

#contact .contact-eyebrow,
.contact-eyebrow {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #1D4ED8 !important;
  margin-bottom: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#contact .contact-headline span:has(> .rotating-word),
#contact .contact-headline > span:first-of-type,
#contact .rotating-word-container,
.rotating-word-container {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  height: 1.25em !important;
  vertical-align: -0.26em !important;
  text-align: left !important;
  padding: 2px 20px 4px 4px !important;
  margin-right: -14px !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

#contact .font-cursive,
#contact .rotating-word,
.rotating-word {
  display: inline-block !important;
  font-family: 'Caveat', cursive !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: #1D4ED8 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  white-space: nowrap !important;
  padding-right: 14px !important;
  text-shadow: none !important;
}
#contact .contact-headline,
.contact-headline {
  font-family: Outfit, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(2rem, 4.4vw, 3.8rem) !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 24px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
}
#contact .contact-glass-card,
.contact-glass-card {
  border-radius: clamp(1.8rem, 3vw, 2.5rem) !important;
  padding: clamp(28px, 5vw, 64px) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(28px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

@media (max-width: 768px) {
  #contact .contact-glass-card,
  .contact-glass-card {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    padding: 24px 16px 32px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
  .contact-dot-grid,
  .contact-cloud-glow {
    display: none !important;
  }
  .contact-video-col {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    margin-top: 24px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .contact-video-card,
  #contact .contact-video-card,
  #contact div:has(> video) {
    margin: 0 auto !important;
    width: clamp(200px, 62vw, 280px) !important;
    max-width: 280px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 1.25rem !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
    transform: rotate(-3deg) !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    isolation: isolate !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
  }
  .contact-video-elem,
  .contact-video-card video,
  #contact div:has(> video) video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    border: none !important;
    outline: none !important;
  }
}
.btn-contact-whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 26px !important;
  border-radius: 9999px !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  font-family: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-contact-whatsapp:hover {
  background: #20BD5A !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.42) !important;
  color: #FFFFFF !important;
}
.store-footer-pill {
  height: 36px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 9999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #1E293B !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
.store-footer-pill:hover {
  color: #2D6FF0 !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(45, 111, 240, 0.15), inset 0 1px 1px #FFFFFF !important;
}

/* ==========================================================================
   SCNX UNIFIED HEADER — FLOATING CAPSULE NAVIGATION
   Target strictly header:has(nav.liquid-glass) or header.fixed to never affect
   case study hero banners (<header class="relative ...">)
   ========================================================================== */
header:has(nav.liquid-glass),
header.fixed {
  position: fixed !important;
  top: 24px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  justify-content: center !important;
  padding: 0 20px !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Hide navigation header completely while preloader is active on Home page */
body.loading header:has(nav.liquid-glass),
body.loading header.fixed,
body.loading nav.liquid-glass,
body:has(#sitePreloader:not(.is-hidden)) header:has(nav.liquid-glass),
body:has(#sitePreloader:not(.is-hidden)) header.fixed,
body:has(#sitePreloader:not(.is-hidden)) nav.liquid-glass,
body:has(.site-preloader:not(.is-hidden)) header:has(nav.liquid-glass),
body:has(.site-preloader:not(.is-hidden)) header.fixed,
body:has(.site-preloader:not(.is-hidden)) nav.liquid-glass {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-24px) !important;
}

header nav.liquid-glass {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  height: 52px !important;
  padding: 0 18px 0 14px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.48) 100%) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 9999px !important;
  box-shadow: 0 8px 32px rgba(31, 41, 55, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -1px rgba(31, 41, 55, 0.02) !important;
  width: 100% !important;
  max-width: 660px !important;
  margin: 0 auto !important;
  pointer-events: auto !important;
  transition: max-width 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease !important;
  will-change: max-width, padding;
  overflow: hidden !important;
}

/* Collapsed capsule state on scroll down (silky-smooth shrink to 215px) */
header nav.liquid-glass.md\:max-w-\[340px\],
header nav.liquid-glass.is-contracted {
  max-width: 215px !important;
  padding: 0 14px !important;
  justify-content: space-between !important;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
}

header nav.liquid-glass.md\:max-w-\[340px\] > a:first-child,
header nav.liquid-glass.is-contracted > a:first-child {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

header nav.liquid-glass.md\:max-w-\[340px\] > div.overflow-hidden.whitespace-nowrap,
header nav.liquid-glass.is-contracted > div.overflow-hidden.whitespace-nowrap {
  width: 0px !important;
  max-width: 0px !important;
  opacity: 0 !important;
  transform: translateX(12px) scale(0.96) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: max-width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.42s !important;
}

/* Hover expansion physics when collapsed on desktop */
@media (min-width: 769px) {
  header nav.liquid-glass:hover {
    max-width: 660px !important;
    padding: 0 18px 0 14px !important;
    justify-content: space-between !important;
  }

  header nav.liquid-glass:hover > a:first-child {
    margin: 0 !important;
  }

  header nav.liquid-glass:hover > div.overflow-hidden.whitespace-nowrap {
    width: 390px !important;
    max-width: 420px !important;
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: inline-flex !important;
    margin-left: auto !important;
    transition: max-width 0.48s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.48s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Desktop nav links styling (smooth liquid slide & fade) */
  header nav.liquid-glass > div.overflow-hidden.whitespace-nowrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    max-width: 420px !important;
    opacity: 1 !important;
    transform: translateX(0) scale(1) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transition: max-width 0.48s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.48s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.06s,
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  header nav.liquid-glass > div.overflow-hidden.whitespace-nowrap a {
    height: 32px !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 9999px !important;
    font-family: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
  }

  header nav.liquid-glass > div.overflow-hidden.whitespace-nowrap a:hover {
    color: #2D6FF0 !important;
    background: rgba(45, 111, 240, 0.08) !important;
    transform: translateY(-1px) !important;
  }
}

/* ==========================================================================
   MOBILE HEADER PERFECTION (< 768px)
   Hides overflowing desktop links, cleanly docks Brand left & Hamburger right
   ========================================================================== */
@media (max-width: 768px) {
  header:has(nav.liquid-glass),
  header.fixed {
    top: 16px !important;
    padding: 0 16px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  header nav.liquid-glass {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    height: 48px !important;
    padding: 0 10px 0 12px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
    transition: max-width 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease !important;
  }

  /* Completely hide desktop text links on mobile */
  header nav.liquid-glass > div.overflow-hidden.whitespace-nowrap {
    display: none !important;
    width: 0px !important;
    max-width: 0px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Brand group on the left */
  header nav.liquid-glass > a:first-child {
    min-width: 0 !important;
    margin: 0 !important;
    gap: 10px !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  header nav.liquid-glass > a:first-child .relative,
  header nav.liquid-glass > a:first-child .relative img {
    width: 32px !important;
    height: 32px !important;
  }

  header nav.liquid-glass > a:first-child span {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
  }

  /* Hamburger button on the right */
  header nav.liquid-glass > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  header nav.liquid-glass button[aria-label="Open Menu"],
  header nav.liquid-glass .md\:hidden {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #0F172A !important;
    border-radius: 50% !important;
    cursor: pointer !important;
  }

  header nav.liquid-glass button[aria-label="Open Menu"]:hover,
  header nav.liquid-glass button[aria-label="Open Menu"]:active {
    background: rgba(45, 111, 240, 0.08) !important;
    color: #2D6FF0 !important;
  }

  header nav.liquid-glass button[aria-label="Open Menu"] svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    stroke: #0F172A !important;
  }

  /* When scrolled down on mobile: contract capsule */
  body.mobile-header-contracted header nav.liquid-glass,
  header nav.liquid-glass.is-contracted {
    max-width: 220px !important;
    padding: 0 10px 0 10px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16), inset 0 1px 1px rgba(255, 255, 255, 0.95) !important;
  }
}


/* Universal Clean Form Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: inherit !important;
  transition: background-color 99999s ease-in-out 0s !important;
}