/* Decima — Mobile Stylesheet */

/* Hamburger — hidden on desktop, shown via JS on mobile */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px 4px;
  background: none;
  border: none;
  z-index: 400;
  flex-shrink: 0;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: #111;
  display: block;
  border-radius: 1px;
}

/* Mobile menu — always hidden until JS opens it */
.mobile-menu {
  position: fixed !important;
  top: 57px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 399 !important;
  background: #F5F4F1 !important;
  border-bottom: 1px solid rgba(0,0,0,.1) !important;
  padding: 8px 0 16px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}
.mobile-menu a {
  display: block !important;
  padding: 13px 24px !important;
  font-family: 'DM Sans', 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #111 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
}
.mobile-menu a:last-child {
  border-bottom: none !important;
  color: #0D2137 !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

@media (max-width: 768px) {
  /* Disable scroll animations on mobile — prevents invisible content */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important }

  html, body { overflow-x: hidden !important }

  /* NAV */
  nav { padding: 14px 20px !important; background: rgba(245,244,241,.97) !important; backdrop-filter: blur(18px) !important }
  .nav-links { display: none !important }
  .nav-r .nav-learn { display: none !important }
  .nav-r > a:not(.nav-cta):not([href*="intake"]) { display: none !important }
  .hamburger { display: flex !important }
  .nav-cta { font-size: 10px !important; padding: 8px 12px !important }

  /* HERO */
  .hero { display: block !important; min-height: auto !important }
  .hero-l { padding: 90px 20px 40px !important; width: 100% !important; box-sizing: border-box !important }
  .hero-r { height: 260px !important; width: 100% !important }
  h1 { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.1 !important }
  .hero-sub { max-width: 100% !important }
  .action { max-width: 100% !important; padding: 20px !important; box-sizing: border-box !important }
  .a-btns { flex-direction: column !important }
  .btn-w, .btn-ghost { width: 100% !important; justify-content: center !important }
  .trust-row { flex-wrap: wrap !important }
  .vbadge { display: none !important }

  /* PROTOCOL HERO */
  .hero-content { display: block !important; padding: 90px 20px 48px !important; box-sizing: border-box !important }
  .hero-h1 { font-size: clamp(28px,8vw,40px) !important; line-height: 1.1 !important }
  .hero-cta-btn { width: 100% !important; justify-content: center !important }
  .trust-chips { flex-wrap: wrap !important }
  .price-num { font-size: 34px !important }

  /* SECTIONS */
  section, .how, .treatments, .education, .verify, .testimonials,
  .cta, .all-treatments, .page-body, .treatments-hero, .page-hero,
  [class*="-section"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .fstrip { display: none !important }
  .research { padding: 16px 20px !important; flex-wrap: wrap !important }
  .treatments-hero, .page-hero { padding-top: 90px !important; padding-bottom: 48px !important }

  /* GRIDS → BLOCK */
  .how-inner, .treatments-hero-inner, .page-hero-inner, .dstrip,
  .verify-inner, .edu-inner, .standards-inner, .exp-inner, .proc-inner,
  .sci-inner, .dezawa-inner, .chain-inner, .intake-inner, .contact-inner,
  .founder-inner, .price-cards, .tgrid, .cond-grid, .who-grid,
  .event-grid, .testi-grid, .test-grid, .faq-grid, .loc-grid,
  .steps, .gallery, .blog-grid, .footer-top {
    display: block !important;
    width: 100% !important;
  }

  /* TREATMENT BLOCKS */
  .treatment-block { display: block !important; width: 100% !important }
  .tb-left, .tb-right { width: 100% !important; padding: 28px 20px !important; box-sizing: border-box !important }
  .tb-right { border-top: 1px solid rgba(0,0,0,.08) !important }
  .t-head { display: block !important }

  /* CARDS */
  .tc, .tcard, .step, .gi, .faq-item, .loc-card, .test-card, .who-card, .cond-card {
    width: 100% !important; box-sizing: border-box !important;
  }
  .tc { padding: 22px 20px !important }
  .tcard { padding: 26px 20px !important }
  .gi { height: 200px !important }
  .dstrip { padding: 28px 20px !important }
  .ds-r { margin-top: 16px !important; min-width: 0 !important }

  /* PRODUCT HERO */
  .prod-hero { height: 40vh !important }
  .ph-content { display: block !important; left: 16px !important; right: 16px !important; bottom: 20px !important }
  .ph-specs { display: none !important }

  /* CTA */
  .cta { padding-top: 56px !important; padding-bottom: 56px !important }
  .cta-btns { flex-direction: column !important; align-items: stretch !important }
  .btn-navy, .btn-outline { width: 100% !important; justify-content: center !important; box-sizing: border-box !important }

  /* STICKY BAR */
  .sticky-bar { padding: 12px 20px !important; flex-wrap: wrap !important; gap: 8px !important }
  .sb-note { display: none !important }

  /* FOOTER */
  .footer-top { grid-template-columns: 1fr 1fr !important; padding: 28px 20px !important; gap: 20px !important }
  .footer-bottom { flex-direction: column !important; padding: 14px 20px !important; text-align: center !important; gap: 8px !important }
  footer { flex-direction: column !important; padding: 28px 20px !important; text-align: center !important; gap: 14px !important }
  .footer-links { justify-content: center !important }

  /* INTAKE */
  .page-layout { display: block !important }
  .sidebar { display: none !important }
  .main-content { padding: 20px !important; max-width: 100% !important }
  .field-row { display: block !important }
  .option-grid { display: block !important }

  /* PROOF */
  .proof-strip { flex-direction: column !important; padding: 20px !important; gap: 16px !important }
  .ps-sep { display: none !important }

  /* TYPOGRAPHY */
  h2 { font-size: clamp(22px, 6vw, 32px) !important }
  h3 { font-size: 18px !important }

  /* INLINE PADDING OVERRIDES */
  [style*="padding:80px 48px"] { padding: 48px 20px !important }
  [style*="padding:72px 48px"] { padding: 48px 20px !important }
  [style*="padding:88px 48px"] { padding: 48px 20px !important }
  [style*="padding:64px 48px"] { padding: 40px 20px !important }
  [style*="padding:56px 48px"] { padding: 36px 20px !important }
  [style*="padding:48px 48px"] { padding: 32px 20px !important }
  [style*="padding:36px 48px"] { padding: 24px 20px !important }
  [style*="padding:28px 48px"] { padding: 20px !important }
  [style*="padding:24px 48px"] { padding: 18px 20px !important }
  [style*="padding:18px 48px"] { padding: 14px 20px !important }
  [style*="padding:16px 48px"] { padding: 14px 20px !important }
  [style*="padding:14px 48px"] { padding: 12px 20px !important }
  [style*="padding:104px 48px"] { padding: 56px 20px !important }
  [style*="padding:120px 48px"] { padding: 90px 20px 48px !important }
  [style*="padding:140px 48px"] { padding: 90px 20px 48px !important }
  [style*="padding:160px 48px"] { padding: 90px 20px 48px !important }

  /* INLINE GRID OVERRIDES */
  [style*="grid-template-columns:1fr 1fr"] { display: block !important }
  [style*="grid-template-columns:repeat(2"] { display: block !important }
  [style*="grid-template-columns:repeat(3"] { display: block !important }
  [style*="grid-template-columns:repeat(4"] { display: block !important }
  [style*="grid-template-columns:280px"] { display: block !important }
  [style*="grid-template-columns:260px"] { display: block !important }
  [style*="grid-template-columns:320px"] { display: block !important }
  [style*="grid-template-columns:52fr"] { display: block !important }
  [style*="grid-template-columns:54fr"] { display: block !important }
  [style*="grid-template-columns:1.6fr"] { grid-template-columns: 1fr 1fr !important }
  [style*="max-width:1100px"], [style*="max-width:1200px"],
  [style*="max-width:900px"], [style*="max-width:700px"],
  [style*="max-width:780px"] { max-width: 100% !important }
  [style*="display:flex"][style*="gap:32px"] { flex-wrap: wrap !important }
}

@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr !important }
  h1 { font-size: 28px !important }
  nav { padding: 12px 16px !important }
}