/* ============================================
   MOBILE PERFORMANCE — sellwithgurvinder.com
   Loaded ONLY on max-width: 768px devices
   Goal: FCP < 1.5s, LCP < 3s on mobile
   ============================================ */

/* === RESET DESKTOP HEAVY EFFECTS === */
.grain-overlay { display: none !important; }
.marquee-strip { display: none !important; }
.scroll-cue { display: none !important; }

/* === HIDE TOP BAR ON MOBILE (was overlapping fixed nav) === */
.top-bar { display: none !important; }

/* === SYSTEM FONTS ON MOBILE (no Google Fonts wait) === */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.hero-headline {
  font-family: Georgia, "Times New Roman", serif !important;
}

/* === TOP BAR: Ultra-compact on mobile === */
.top-bar {
  padding: 6px 0;
  font-size: 0.72rem;
}
.top-bar-inner {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px;
  justify-content: space-between;
}
.top-bar-left {
  flex: 1;
  gap: 6px;
  font-size: 0.7rem;
  overflow: hidden;
}
/* Hide email and consultation button on mobile topbar */
.top-bar-left > a:nth-child(3),
.top-bar-left > span:nth-child(4),
.top-bar-left > span:nth-child(5),
.top-bar-left > span:nth-child(6),
.top-bar-left > button {
  display: none !important;
}
.top-bar-right {
  gap: 8px;
}
/* Hide social icons from top bar on mobile */
.top-bar-socials {
  display: none !important;
}

/* === NAVBAR: Tight mobile nav === */
.nav-wrap {
  padding: 0 16px !important;
  height: 60px !important;
}
.brand-logo {
  width: 44px !important;
  height: 44px !important;
}
.brand-text {
  font-size: 1rem !important;
}
.main-nav { display: none; }
.nav-cta { display: none !important; }
.nav-toggle { display: flex !important; }

/* === HERO: Mobile-first layout === */
.hero {
  background-attachment: scroll !important;
  background-image: none !important; /* use picture tag instead */
  background-size: cover !important;
  min-height: 100svh !important;
  min-height: 100vh !important;
  padding: 68px 16px 44px !important;
  contain: layout !important;
  will-change: auto !important;
}

/* Mobile hero: picture element positioned as full background */
.hero-bg-img {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}
.hero-bg-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Remove Get Started btn, keep Browse Properties styled as primary */
.hero-actions .btn-primary { display: none !important; }
.hero-actions .btn-outline {
  background: var(--clay) !important;
  color: var(--pine) !important;
  border: none !important;
  font-weight: 700 !important;
}

.hero-inner {
  padding-left: 0 !important;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-eyebrow {
  font-size: 0.65rem !important;
  padding: 6px 12px !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.04em !important;
}
.eyebrow-dot { display: none !important; }

.hero-headline {
  font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 14px !important;
}

.hero-sub {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  /* Shorten text on mobile for speed */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-actions {
  flex-direction: row !important;
  gap: 10px !important;
  margin-bottom: 30px !important;
}
.btn {
  padding: 11px 20px !important;
  font-size: 0.88rem !important;
}

.hero-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-metric strong {
  font-size: 1.1rem;
}
.hero-metric span {
  font-size: 0.7rem;
}
.metric-divider { display: none !important; }

/* === REVEAL: Faster animations on mobile === */
.reveal {
  opacity: 0;
  transform: translateY(12px) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) !important;
}

/* === PILLARS: Stack on mobile === */
.pillars { padding: 40px 0 !important; }
.pillar-row {
  grid-template-columns: 1fr !important;
  min-height: auto !important;
}
.pillar-row.reverse .pillar-img { order: 0 !important; }
.pillar-row.reverse .pillar-desc { order: 1 !important; }
.pillar-img {
  height: 220px !important;
  min-height: 220px !important;
}
.pillar-img img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}
.pillar-desc {
  padding: 24px 20px !important;
}
.pillar-desc h3 {
  font-size: 1.4rem !important;
}

/* === PROPERTIES: 1 column on mobile === */
.property-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.property-card {
  margin: 0 !important;
}

/* === WHY SECTION: Simplified mobile === */
.why-grid {
  grid-template-columns: 1fr !important;
}
.why-panel { display: none !important; }

/* === EDITORIAL: Stack on mobile === */
.editorial-grid {
  grid-template-columns: 1fr !important;
}
.editorial-img {
  min-height: 200px !important;
  height: 200px !important;
}
.editorial-copy {
  padding: 30px 20px !important;
}

/* === TESTIMONIALS: Full-width cards === */
.testimonial-card {
  min-width: calc(100vw - 40px) !important;
}

/* === CONTACT GRID === */
.contact-grid {
  grid-template-columns: 1fr !important;
}
.map-grid {
  grid-template-columns: 1fr !important;
}

/* === FOOTER: Simplified === */
.footer-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
.footer-bottom {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 20px 16px !important;
  font-size: 0.75rem !important;
}
.footer-bottom-links {
  gap: 12px !important;
}

/* === CONTENT-VISIBILITY for below fold (massive LCP win) === */
.pillars,
.properties,
.why,
.editorial-section,
.testimonials-section,
.contact-section,
.faq-section,
.about-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 350px;
}

/* === SECTION PADDING: Tighter on mobile === */
.section-inner {
  padding: 0 16px !important;
}
section {
  padding: 48px 0 !important;
}
.hero {
  padding: 80px 0 50px !important;
}

/* === SECTION HEADERS: Compact === */
.section-title {
  font-size: 1.6rem !important;
  line-height: 1.2 !important;
}
.section-subtitle {
  font-size: 0.88rem !important;
}

/* === OFFER GRID === */
.offer-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
}
.offer-card {
  padding: 16px 12px !important;
}

/* === COMMIT GRID === */
.commit-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* === FAQ === */
.faq-question h3 {
  font-size: 0.9rem !important;
}

/* === FLOATING BUTTONS: Smaller on mobile === */
.whatsapp-btn,
.phone-btn,
.floating-contact-wrap {
  bottom: 16px !important;
  right: 16px !important;
}