/* TrustedHelpdesk Glassmorphic Header & Sremium Brand 2 Logo Component */
header.site-nav {
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
background: rgba(255, 255, 255, 0.88) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border-bottom: 1px solid rgba(10, 17, 40, 0.08) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nav-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 82px !important;
transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.scrolled-down .nav-inner {
height: 62px !important;
}
body.scrolled-down header.site-nav {
box-shadow: 0 8px 30px rgba(10, 17, 40, 0.08) !important;
background: rgba(255, 255, 255, 0.94) !important;
}
/* Brand Logo Component (Matching TrustedHelpdesk.com & Sremium Brand 2) */
.brand-logo {
display: flex !important;
align-items: center !important;
gap: 12px !important;
text-decoration: none !important;
background: transparent !important;
}
.brand-logo-icon {
height: 36px !important;
width: auto !important;
display: block !important;
filter: drop-shadow(0 2px 5px rgba(245, 158, 11, 0.22)) !important;
transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.scrolled-down .brand-logo-icon {
height: 30px !important;
}
.brand-logo-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
line-height: 1 !important;
}
.brand-subtext {
font-family: 'JetBrains Mono', monospace !important;
font-size: 8.5px !important;
font-weight: 600 !important;
letter-spacing: 0.13em !important;
color: #64748B !important;
text-transform: uppercase !important;
display: block !important;
line-height: 1 !important;
margin-bottom: 3px !important;
white-space: nowrap !important;
transition: font-size 0.3s ease !important;
}
body.scrolled-down .brand-subtext {
font-size: 7.5px !important;
}
.brand-main-heading {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 21px !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
transition: font-size 0.3s ease !important;
}
body.scrolled-down .brand-main-heading {
font-size: 18px !important;
}
.brand-pins {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 900 !important;
color: #0B132B !important;
text-transform: uppercase !important;
}
.brand-parking {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
color: #F59E0B !important;
text-transform: uppercase !important;
}
/* Footer Brand Logo Match on Dark Background */
.brand-logo-footer {
margin-bottom: 16px !important;
}
.brand-logo-footer .brand-subtext {
color: #CBD5E1 !important;
}
.brand-logo-footer .brand-pins {
color: #FFFFFF !important;
}
.brand-logo-footer .brand-parking {
color: #F59E0B !important;
}
/* Nav Bar Links - Un-squashed Clean Spacing */
.nav-links {
display: flex !important;
align-items: center !important;
gap: 28px !important;
list-style: none !important;
}
.nav-links li {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
.nav-links a {
font-family: 'JetBrains Mono', monospace !important;
font-size: 11.5px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: #475569 !important;
white-space: nowrap !important;
text-align: center !important;
transition: color 0.2s ease !important;
}
.nav-links a:hover {
color: #F59E0B !important;
}
/* Exact TrustedHelpdesk & PINS Command Monospace Wide Tracking Button & Eyebrow Tokens */
.pill-eyebrow, .sec-eyebrow, .enable-eyebrow, .driver-pay-eyebrow, .eyebrow-badge, .work-card-cat {
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #0A1128 !important;
}
.prob-eyebrow, .card-dark-eyebrow {
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: #F59E0B !important;
}
.btn-orange, .btn-audit-orange, .btn-enable-orange, .btn-pay-orange, .btn-lead-orange, .btn-orange-glow {
font-family: 'JetBrains Mono', monospace !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
background-color: #F59E0B !important;
color: #0A1128 !important;
border-radius: 12px !important;
padding: 14px 28px !important;
border: none !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.btn-orange:hover, .btn-audit-orange:hover, .btn-enable-orange:hover, .btn-pay-orange:hover, .btn-lead-orange:hover {
background-color: #D97706 !important;
color: #0A1128 !important;
}
.btn-outline, .btn-faq-outline, .btn-white-card {
font-family: 'JetBrains Mono', monospace !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
background-color: #FFFFFF !important;
color: #0A1128 !important;
border: 1px solid #CBD5E1 !important;
border-radius: 12px !important;
padding: 14px 28px !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.btn-outline:hover, .btn-faq-outline:hover, .btn-white-card:hover {
background-color: #F8FAFC !important;
border-color: #94A3B8 !important;
}
.floating-pay-btn {
font-family: 'JetBrains Mono', monospace !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
border-radius: 12px !important;
}
/* Hero & Section Headlines: Plus Jakarta Sans Extra-Bold */
h1, h2, h3, .hero-title, .how-title, .prob-title, .offer-title-clean, .market-title, .sec-title-clean, .houston-title, .enable-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.15 !important;
}
/* Right-align navigation links closer to 'Enable Your Lot' CTA button */
.nav-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.nav-links {
display: flex !important;
align-items: center !important;
gap: 28px !important;
list-style: none !important;
margin-left: auto !important;
margin-right: 32px !important;
}
.nav-ctas {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-left: 0 !important;
}
/* Dark Theme Glass Input Field Styling */
.teaser-input-row input,
.audit-teaser-card input,
.audit-form input,
#teaser-address,
#teaser-email {
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #FFFFFF !important;
border-radius: 8px !important;
padding: 14px 18px !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
outline: none !important;
box-shadow: none !important;
transition: all 0.2s ease !important;
}
.teaser-input-row input::placeholder,
.audit-teaser-card input::placeholder,
.audit-form input::placeholder,
#teaser-address::placeholder,
#teaser-email::placeholder {
color: #94A3B8 !important;
}
.teaser-input-row input:focus,
.audit-teaser-card input:focus,
.audit-form input:focus,
#teaser-address:focus,
#teaser-email:focus {
background: rgba(255, 255, 255, 0.12) !important;
border-color: #F59E0B !important;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}
/* Lot Card 'PAY NOW' Interactive Action Button */
.lot-pay-now-btn { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 10 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 16px !important; background-color: #0A1128 !important; color: #FFFFFF !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; text-decoration: none !important; border: 1px solid #F59E0B !important; border-radius: 20px !important; box-shadow: 0 4px 12px rgba(10, 17, 40, 0.3) !important; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; }
.lot-pay-now-btn:hover { background-color: #F59E0B !important; color: #0A1128 !important; border-color: #D97706 !important; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4) !important; transform: translateY(-2px) scale(1.03) !important; }
/* Audit Form Vertical Column Input Stack */
.audit-input-stack {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-bottom: 16px !important;
width: 100% !important;
}
.audit-input-stack input {
width: 100% !important;
box-sizing: border-box !important;
}





/* === NAVBAR LINK STYLING & ABOUT US DROPDOWN === */
.nav-links a,
.nav-links li.nav-item-dropdown a.dropdown-toggle {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.nav-links a:hover,
.nav-links li.nav-item-dropdown:hover a.dropdown-toggle,
.nav-links li.nav-item-dropdown a.dropdown-toggle:hover {
  color: #F59E0B !important;
}

.nav-links li.nav-item-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 0 !important;
}

.nav-links li.nav-item-dropdown .dropdown-menu {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: -10px !important;
  min-width: 240px !important;
  background: #0A1128 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  z-index: 99999 !important;
  flex-direction: column !important;
}

/* Large Invisible Hover Bridge Pseudoelement covering gap between trigger and popup */
.nav-links li.nav-item-dropdown .dropdown-menu::before {
  content: "" !important;
  position: absolute !important;
  top: -28px !important;
  left: -20px !important;
  right: -20px !important;
  height: 28px !important;
  background: transparent !important;
}

.nav-links li.nav-item-dropdown:hover .dropdown-menu,
.nav-links li.nav-item-dropdown:focus-within .dropdown-menu {
  display: flex !important;
}

.nav-links li.nav-item-dropdown .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.nav-links li.nav-item-dropdown .dropdown-menu li a {
  display: block !important;
  padding: 10px 18px !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.nav-links li.nav-item-dropdown .dropdown-menu li a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #F59E0B !important;
}







/* === Bottom Left Circular Flag Switcher (Matching Accessibility Button) === */
.floating-lang-btn {
  position: fixed !important;
  bottom: 24px !important;
  left: 80px !important;
  z-index: 99999 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: #0A1128 !important;
  border: 2px solid #F59E0B !important;
  box-shadow: 0 4px 16px rgba(10, 17, 40, 0.25) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  outline: none !important;
}

.floating-lang-btn:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35) !important;
}

.floating-lang-btn .flag-svg {
  width: 22px !important;
  height: 15px !important;
  border-radius: 3px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  display: block !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .floating-lang-btn {
    bottom: 16px !important;
    left: 64px !important;
    width: 38px !important;
    height: 38px !important;
  }
  .floating-lang-btn .flag-svg {
    width: 18px !important;
    height: 12px !important;
  }
}