/* Mobile Navigation & Responsive Layout System (<768px and <480px) */

.hamburger-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 1001;
}

.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #0A1128;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.hamburger-btn.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.is-active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-drawer {
  display: none;
}

@media (max-width: 768px) {
  .hamburger-btn {
    display: flex !important;
  }

  .site-nav .nav-links,
  .site-nav .nav-ctas {
    display: none !important;
  }

  .mobile-drawer {
    display: flex !important;
    position: fixed;
    top: 62px;
    left: 0;
    width: 100%;
    height: calc(100vh - 62px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 20px;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease;
    z-index: 999;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    overflow-y: auto;
  }

  .mobile-drawer.is-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .mobile-drawer .nav-links-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile-drawer .nav-links-mobile a {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #0A1128;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
    display: block;
  }

  .mobile-drawer .nav-ctas-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .mobile-drawer .nav-ctas-mobile a {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Responsive Logo Lockup (<768px) */
  .brand-logo-icon {
    height: 30px !important;
    width: auto !important;
  }

  .brand-subtext {
    font-size: 7.5px !important;
    white-space: nowrap !important;
  }

  .brand-pins,
  .brand-parking {
    font-size: 16px !important;
  }

  .brand-logo-details {
    white-space: nowrap !important;
  }

  /* Responsive Headline Scaling (<768px) */
  h1, h2, h3, .hero-title, .how-title, .prob-title, .offer-title-clean, .market-title, .sec-title-clean, .houston-title, .enable-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* Layout Stacking (<768px) */
  .how-grid, .offer-grid, .team-grid, .dual-cta-sec, .hero-grid, .calculator-grid, .footer-grid,
  .how-cards-grid-4col, .prob-cards-grid-3col, .offer-rows-grid-2x2, .offer-grid-framed,
  .market-grid-2col, .work-grid-2x2, .houston-cards-grid, .houston-sec-grid, .enable-grid-2col,
  .form-row-2col, .dual-cta-grid, .sat-grid-2col, .calc-inputs-grid, .team-grid-3col,
  .testimonials-grid-3col, .hero-about-grid, .hero-checks-grid {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Card Padding (16px) & Touch Targets (<768px) */
  .how-card-item, .offer-card-framed, .offer-feature-card, .team-card-box, .prob-card-item,
  .work-card, .lot-card, .cta-card-left, .cta-card-right, .enable-card-white, .sat-calc-col,
  .sat-trace-col, .sat-card-box, .hero-checks-grid > div, .faq-card, .faq-group, .policy-card,
  .legal-card, .calc-input-box, .calc-output-box, .human-card-white, .testimonial-card-item {
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-actions, .bottom-cta-btns-row, .nav-ctas-mobile {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .hero-actions a, .bottom-cta-btns-row a, .nav-ctas-mobile a, .cta-card-left a, .cta-card-right a {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Yield Calculator Single-Column Alignment (<768px) */
  .card-dark-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .calc-slider-bar {
    width: 100% !important;
    height: 8px !important;
    margin-top: 10px !important;
  }

  .calc-output-num, #total-yield-display {
    font-size: 26px !important;
  }

  /* Sticky Floating Pay Button (<768px) */
  .floating-pay-btn {
    bottom: 16px !important;
    right: 16px !important;
    font-size: 11px !important;
    padding: 10px 18px !important;
  }
}

@media (max-width: 480px) {
  /* Headline Scaling (<480px) */
  h1, h2, h3, .hero-title, .how-title, .prob-title, .offer-title-clean, .market-title, .sec-title-clean, .houston-title, .enable-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }

  /* Buttons & Eyebrows (<480px) */
  .btn-orange, .btn-outline, .btn-pay, .btn-audit-orange, .btn-enable-orange,
  .btn-pay-orange, .btn-lead-orange, .btn-white-card, .pill-eyebrow, .sec-eyebrow,
  .eyebrow, .how-eyebrow, .offer-eyebrow, .team-eyebrow, .stat-label, .card-dark-eyebrow,
  .enable-eyebrow, .driver-pay-eyebrow, .prob-eyebrow {
    letter-spacing: 0.08em !important;
    font-size: 11.5px !important;
  }

  .btn-orange, .btn-outline, .btn-pay, .btn-audit-orange, .btn-enable-orange,
  .btn-pay-orange, .btn-lead-orange, .btn-white-card {
    padding: 12px 18px !important;
  }
}