/* Responsive layer — Birchmeyer Real Estate Group
   Page markup uses inline styles, so overrides here need !important.
   Breakpoints: 1080px (nav collapses), 900px (tablet), 640px (phone). */

/* clip (not hidden) so body never becomes the scroll container — window
   scrolling must keep working for Lenis and ScrollTrigger */
html, body { overflow-x: clip; }
img, iframe { max-width: 100%; }

/* ---- Testimonial stage: stack slides in one grid cell so the box grows
   to fit the longest quote instead of overflowing a fixed min-height ---- */
.t-stage { display: grid !important; min-height: 0 !important; }
.t-stage > * { grid-area: 1 / 1; }
.t-stage blockquote { position: relative !important; inset: auto !important; grid-area: 1 / 1; }

/* ---- Nav: hamburger + full-screen menu ---- */
.nav-toggle, .nav-call { display: none; }

@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px;
    width: 44px; height: 44px; padding: 0; margin-left: 8px; flex-shrink: 0;
    background: transparent; border: 1px solid rgba(124,92,255,0.45); cursor: pointer;
  }
  .nav-toggle span {
    display: block; width: 20px; height: 1.5px; background: #F1F2F8;
    transition: transform 0.35s ease;
  }
  html.nav-open .nav-toggle span:first-child { transform: translateY(4.25px) rotate(45deg); }
  html.nav-open .nav-toggle span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

  .nav-phone { margin-left: auto; }

  .nav-links {
    position: fixed; top: 0; left: 0; z-index: -1;
    width: 100vw; height: 100vh; height: 100dvh; box-sizing: border-box;
    flex-direction: column; flex-wrap: nowrap !important;
    align-items: flex-start !important; justify-content: center;
    gap: 22px !important; padding: 96px 28px 48px; overflow-y: auto;
    background: linear-gradient(160deg, #0A0A12 60%, #160F38 100%);
    opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s;
  }
  html.nav-open .nav-links { opacity: 1; visibility: visible; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  .nav-links a {
    font-family: 'Playfair Display', serif !important; font-size: 30px !important;
    letter-spacing: 0.01em !important; text-transform: none !important;
  }
  .nav-links .nav-call {
    display: inline-block; margin-top: 18px;
    font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 600;
    letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #7C5CFF; border: 1px solid rgba(124,92,255,0.5); padding: 14px 22px;
  }
}

/* ---- Tablet ---- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 44px 32px !important; }
  .footer-grid > :first-child, .footer-grid > :last-child { grid-column: 1 / -1; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 64px !important; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 120px !important; gap: 12px !important; }
  .gallery-grid > * { grid-column: span 1 !important; grid-row: span 2 !important; }
  .gallery-grid > :first-child, .gallery-grid > :last-child { grid-column: span 2 !important; }
}

/* ---- Phone ---- */
@media (max-width: 640px) {
  .nav-phone { display: none !important; }
  .site-nav img { height: 28px !important; }

  .home-hero { height: 100svh !important; min-height: 600px !important; }

  .step-row { grid-template-columns: 1fr !important; gap: 14px !important; padding: 36px 0 !important; }

  .form-row { grid-template-columns: 1fr !important; }
  .form-submit { align-self: stretch !important; }

}