/* ===========================================================
   Revive Bros — Mobile-First Refinement Layer
   Loaded after each page's inline <style> to guarantee that
   navigation, hero, buttons, images, and grids fit perfectly
   on every iPhone and Android screen with no overflow.
   =========================================================== */

/* Global safety: no horizontal scroll, ever */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; height: auto; }

/* Respect iOS safe areas */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {

  /* Container: tighter padding, but never zero */
  .container { padding: 0 18px !important; }

  /* Typography: clamp already handles it, but tighten leading */
  h1 { font-size: clamp(2rem, 8.5vw, 2.8rem) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(1.55rem, 6vw, 2rem) !important; }
  h3 { font-size: 1.1rem !important; }
  p  { font-size: .98rem; }

  /* ---------- NAV: centered logo, hamburger right, no overlap ---------- */
  .nav { padding: 8px 0 !important; background: rgba(10,10,10,.9) !important;
         backdrop-filter: blur(16px) saturate(140%);
         -webkit-backdrop-filter: blur(16px) saturate(140%);
         border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-inner { position: relative; display: flex !important; align-items: center;
               justify-content: center !important; min-height: 60px; gap: 0 !important; }
  .brand { margin: 0 auto; display: flex; align-items: center; justify-content: center; }
  .brand img { height: 52px !important; width: auto !important; }
  .nav.scrolled .brand img { height: 46px !important; }
  .nav-links, .nav-phone { display: none !important; }
  /* Hide desktop Free Estimate pill from header on mobile; sticky bottom bar owns the CTA. */
  .nav-cta { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
             margin: 0 !important; gap: 0 !important; }
  .nav-cta .btn,
  .nav-cta a.btn-primary,
  .nav-cta .nav-phone { display: none !important; }
  .menu-toggle { display: flex !important; width: 44px; height: 44px; min-width: 44px;
                 background: rgba(255,255,255,.04); }

  /* Mobile menu: full sheet, safe padding */
  .mobile-menu { padding: 18px 20px calc(24px + env(safe-area-inset-bottom)) !important; }
  .mobile-menu nav { margin-top: 40px !important; gap: 4px !important; }
  .mobile-menu nav a { font-size: 1.6rem !important; padding: 14px 0 !important; }
  .mobile-menu .mobile-cta .btn { width: 100%; min-height: 52px; }

  /* ---------- HERO ---------- */
  .hero { min-height: auto !important; padding: 96px 0 48px !important; text-align: center; }
  .hero-inner { text-align: center; }
  .hero .eyebrow { margin: 0 auto 16px !important; font-size: .7rem !important;
                   letter-spacing: .18em; text-transform: uppercase; color: #cfd6de !important; }
  .hero .eyebrow::before { display: none !important; }
  .hero h1 { margin-bottom: 14px !important; font-size: clamp(1.75rem, 7.5vw, 2.3rem) !important;
             line-height: 1.12 !important; }
  .hero h1 br { display: inline; }
  .hero-sub { font-size: 1rem !important; margin: 0 auto 24px !important; max-width: 34ch; color: #dfe3e8 !important; }
  .hero-loc { display: none !important; }
  .hero-actions { flex-direction: column; gap: 10px !important; margin: 0 auto 26px !important;
                  align-items: stretch; max-width: 360px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-badges { display: grid !important; grid-template-columns: 1fr 1fr;
                 gap: 10px 14px !important; padding-top: 22px !important;
                 max-width: 360px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.1); }
  .hero-badge { display: flex !important; align-items: center; gap: 8px;
                font-size: .85rem !important; color: #eaeef2 !important;
                justify-content: flex-start; text-align: left; }
  .hero-badge svg { display: none !important; }
  .hero-badge .check { display: inline-flex; align-items: center; justify-content: center;
                       width: 18px; height: 18px; border-radius: 999px;
                       background: rgba(58,124,165,.18); color: #6ba7c9;
                       font-size: .75rem; font-weight: 700; flex-shrink: 0; }


  /* ---------- BUTTONS: thumb-friendly everywhere ---------- */
  .btn { min-height: 48px; padding: 14px 22px; font-size: .95rem;
         white-space: normal; text-align: center; line-height: 1.2; }

  /* ---------- SECTIONS ---------- */
  section { padding: 56px 0 !important; }
  .section-head { margin-bottom: 34px !important; }

  /* Trust strip: stack vertically, centered */
  .trust-strip { padding: 18px 0 !important; }
  .trust-strip-grid { gap: 12px !important; justify-content: center; }
  .trust-strip-item { flex: 1 1 45%; justify-content: center; font-size: .8rem !important; text-align: center; }

  /* Grids collapse safely */
  .why-grid, .services-grid, .reviews-grid,
  .about-features, .footer-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .footer-grid { gap: 32px !important; }

  /* Cards: safer padding */
  .why-card, .service-body, .review, .contact-form, .about-feature,
  .contact-item, .faq summary { padding: 22px !important; }
  .faq p { padding: 0 22px 20px !important; font-size: .95rem !important; }
  .faq summary { font-size: 1rem !important; }

  /* Before/after: single column already handled */
  .ba-picker { grid-template-columns: 1fr !important; }
  .ba-chip { padding: 12px 14px !important; }

  /* Brand story: shrink stat cluster */
  #story .container > div[style] { gap: 20px !important; }
  #story div[style*="font-size:2rem"] { font-size: 1.3rem !important; }

  /* About */
  .about-grid { gap: 32px !important; }
  .about-image { aspect-ratio: 4/3 !important; }

  /* Contact */
  .contact-grid { gap: 32px !important; }
  .contact-form { padding: 22px !important; }
  .form-row { grid-template-columns: 1fr !important; }

  /* CTA banner */
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .cta-inner p { font-size: 1rem !important; }

  /* Footer bottom */
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-legal { gap: 14px; }

  /* ---------- STICKY BOTTOM BAR: safe area + never covers content ---------- */
  .mobile-bar {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .mobile-bar a { min-height: 48px; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; }

  /* Any hero-badge stars text stays on one line */
  .hero-badge > span { line-height: 1.35; }

  /* Inputs never trigger iOS zoom */
  input, select, textarea { font-size: 16px !important; }
}

/* ---------- Small phones (≤380px) ---------- */
@media (max-width: 380px) {
  .container { padding: 0 14px !important; }
  h1 { font-size: 1.85rem !important; }
  h2 { font-size: 1.45rem !important; }
  .brand img { height: 38px !important; }
  .btn { padding: 13px 18px; font-size: .9rem; }
  .trust-strip-item { flex-basis: 100%; }
}

/* ---------- Reduce hover jitter on touch ---------- */
@media (hover: none) {
  .btn:hover, .why-card:hover, .service-card:hover,
  .review:hover, .contact-item:hover { transform: none !important; }
}