/* ──────────────────────────────────────────────────────────────
   Mobile responsiveness for the Real Estate Buyout Landing DCs.
   The DCs are built with inline styles (so they stream and paint
   immediately); these rules use !important to layer media-query
   overrides on top — the only way to introduce breakpoints into
   inline-styled markup.
   ────────────────────────────────────────────────────────────── */

img, video { max-width: 100%; height: auto; }

/* ════════════ TABLET — ≤ 1024px ════════════ */
@media (max-width: 1024px) {
  /* Hero → single column */
  #home > div:nth-of-type(2) {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
  }
  #home h1 { font-size: 48px !important; }

  /* Property cards 4 → 2 */
  #properties [style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Contact two-column → single column */
  #contact > div {
    grid-template-columns: 1fr !important;
    gap: 52px !important;
  }

  /* Footer 4 → 2 cols */
  footer [style*="1.6fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }

  /* Why-us accordion — slightly shorter so it still fits */
  #why [style*="height: 440px"] { height: 380px !important; }

  /* Section padding tighten */
  section { padding-top: 96px !important; padding-bottom: 96px !important; }
}

/* ════════════ MOBILE — ≤ 768px ════════════ */
@media (max-width: 768px) {

  /* ───── Nav ───── */
  nav > div {
    padding: 0 18px !important;
    height: 64px !important;
    gap: 8px !important;
  }
  /* Hide menu items + phone — keep logo + CTA */
  nav > div > div:first-child > div:last-child { display: none !important; }
  nav > div > div:first-child { gap: 0 !important; }
  nav > div > div:last-child a[href^="tel"] { display: none !important; }
  /* Logo size */
  nav span[style*="font-size: 25px"] { font-size: 20px !important; }
  /* CTA shrinks */
  nav a[href="#contact"] {
    padding: 9px 16px !important;
    font-size: 12.5px !important;
  }
  html { scroll-padding-top: 72px !important; }

  /* ───── Section padding ───── */
  section, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  /* ───── Hero ───── */
  #home {
    min-height: auto !important;
    padding: 110px 0 70px !important;
  }
  #home h1 { font-size: 38px !important; line-height: 1.06 !important; }
  #home p { font-size: 16px !important; }
  /* Hero stats: smaller numbers, tighter gap */
  #home [style*="font-size: 32px"] { font-size: 26px !important; }
  #home > div:nth-of-type(2) > div:first-child > div:last-child {
    gap: 20px !important;
  }
  /* Hero form card */
  #home [style*="border-radius: 7px"][style*="padding: 36px"] {
    padding: 26px !important;
  }
  /* Hero parallax: anchor to top so house stays visible above the form */
  #home [data-parallax] > div:first-child {
    background-position: 30% center !important;
  }
  /* Scroll arrow — hide on mobile (no fold to encourage) */
  a[aria-label="Scroll to next section"] { display: none !important; }

  /* ───── Services 3 → 1 ───── */
  #services [style*="repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  #services [style*="padding: 40px 34px"] {
    padding: 32px 26px !important;
  }

  /* ───── Process ───── */
  #process h2 { font-size: 30px !important; line-height: 1.1 !important; }
  #process h3 { font-size: 24px !important; }
  /* Detail card padding */
  #process [style*="padding: 38px 42px"] {
    padding: 28px 22px !important;
  }
  /* Timeline dots smaller so the row still fits */
  #process [style*="border-radius: 50%"][style*="width: 46px"] {
    width: 38px !important;
    height: 38px !important;
    font-size: 12px !important;
  }
  /* Hide step labels under the dots — they truncate badly */
  #process [style*="repeat(5"] > div > div:last-child {
    display: none !important;
  }
  #process [style*="top: 23px"] { top: 19px !important; }

  /* ───── Property cards 4 → 1 ───── */
  #properties [style*="repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  #properties [style*="height: 168px"] { height: 200px !important; }

  /* ───── CTA band ───── */
  #properties + section h2 { font-size: 32px !important; }
  #properties + section p { font-size: 16px !important; }
  #properties + section a[href^="tel"] {
    padding: 14px 26px !important;
    font-size: 15px !important;
  }
  #properties + section { padding-top: 80px !important; padding-bottom: 80px !important; }

  /* ───── Why-us accordion — stack vertically ───── */
  #why h2 { font-size: 32px !important; }
  #why [style*="height: 440px"] {
    flex-direction: column !important;
    height: auto !important;
    gap: 10px !important;
  }
  #why [style*="height: 440px"] > div {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  /* Collapsed inner: column + vertical title → horizontal row */
  #why [style*="justify-content: space-between"][style*="padding: 26px 0"] {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    padding: 18px 22px !important;
  }
  #why [style*="writing-mode: vertical-rl"] {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 20px !important;
  }
  /* Hide diamond marker on collapsed (saves space) */
  #why [style*="justify-content: space-between"][style*="padding: 26px 0"] > div:last-child {
    margin-left: auto !important;
  }
  /* Active panel padding */
  #why [style*="padding: 42px 40px"] {
    padding: 28px 24px !important;
  }
  #why [style*="padding: 42px 40px"] h3 { font-size: 26px !important; }
  #why [style*="font-size: 56px"] { font-size: 42px !important; }

  /* ───── Contact ───── */
  #contact h2 { font-size: 32px !important; }
  #contact [style*="padding: 42px"] { padding: 26px !important; }
  /* Phone + email row stacks */
  #contact [style*="border-top: 1px solid"] {
    flex-direction: column !important;
    gap: 22px !important;
  }

  /* ───── Forms: 2-col input rows → 1 col ───── */
  form [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ───── Footer ───── */
  footer [style*="1.6fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-bottom: 36px !important;
  }
  footer [style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  footer { padding-top: 56px !important; padding-bottom: 32px !important; }
}

/* ════════════ SMALL — ≤ 480px ════════════ */
@media (max-width: 480px) {
  #home h1 { font-size: 32px !important; }
  section h2 { font-size: 26px !important; }

  /* Process timeline: dots get tight on very small screens */
  #process [style*="border-radius: 50%"][style*="width: 46px"] {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
  }
  #process [style*="top: 23px"] { top: 16px !important; }

  /* Hero stats: drop dividers when wrapped */
  #home [style*="width: 1px"] { display: none !important; }

  /* CTA band button row stacks */
  #properties + section [style*="justify-content: center"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    gap: 14px !important;
  }
}