/* AR PROPERTIES — universal mobile experience
   Loaded only on phones and intentionally last in the cascade. */
@media (max-width:767px){
  :root{
    --mobile-shell:calc(100% - 24px);
    --mobile-header:64px;
    --mobile-radius:16px;
  }

  html,body,body.ar-site{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    -webkit-text-size-adjust:100%;
  }
  body.ar-site{overscroll-behavior-x:none}
  body.ar-site *{min-width:0}
  body.ar-site img{max-width:100%;height:auto}
  body.ar-site .shell{
    width:var(--mobile-shell)!important;
    max-width:var(--mobile-shell)!important;
    margin-inline:auto!important;
  }

  /* Remove desktop/decorative clutter on phones only. */
  .desktop-nav,.desktop-only,.language-btn,.brand-tagline,
  .hero-proof,.quick-area-chips,.signal-strip,.section-kicker,
  .view-switch,#resetFilters,.compare-btn,.compare-tray,.comparison-modal,
  .intelligence-section,.community-teaser,.project-index{
    display:none!important;
  }

  /* Header: compact, stable and safe for narrow devices. */
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    background:#050505!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    padding-top:env(safe-area-inset-top)!important;
  }
  .header-inner{
    height:var(--mobile-header)!important;
    min-height:var(--mobile-header)!important;
    padding:0!important;
    gap:9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    overflow:hidden!important;
  }
  .site-header .brand{
    display:flex!important;
    align-items:center!important;
    flex:1 1 auto!important;
    gap:8px!important;
    max-width:calc(100% - 46px)!important;
    overflow:hidden!important;
  }
  .site-header .brand-mark,.site-header .brand-logo{
    width:22px!important;
    height:39px!important;
    min-width:22px!important;
    max-width:22px!important;
    min-height:39px!important;
    max-height:39px!important;
    flex:0 0 22px!important;
    aspect-ratio:3834/6835!important;
    object-fit:contain!important;
    object-position:center!important;
    background-size:contain!important;
    background-position:center!important;
    transform:none!important;
  }
  .site-header .brand-copy{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:2px!important;
    max-width:100%!important;
    overflow:hidden!important;
    line-height:1!important;
  }
  .site-header .brand-copy strong{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(10.5px,3.05vw,13px)!important;
    line-height:1.05!important;
    letter-spacing:.015em!important;
    color:#fff!important;
  }
  .site-header .brand-copy small{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    margin:0!important;
    font-size:clamp(6px,1.8vw,7.5px)!important;
    line-height:1!important;
    color:rgba(255,255,255,.68)!important;
  }
  .site-header .header-actions{flex:0 0 auto!important;gap:0!important}
  .site-header .menu-btn{
    display:flex!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    flex:0 0 36px!important;
    border-radius:10px!important;
    background:#151517!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:none!important;
  }
  .site-header .menu-btn span{width:17px!important;height:1.5px!important;background:#fff!important}
  .mobile-menu{
    top:calc(var(--mobile-header) + env(safe-area-inset-top))!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:calc(100% - 24px)!important;
    padding:7px!important;
    gap:3px!important;
    border:1px solid #242426!important;
    border-radius:13px!important;
    background:#0b0b0c!important;
    box-shadow:0 18px 44px rgba(0,0,0,.28)!important;
    overflow:hidden!important;
  }
  .mobile-menu.open{display:flex!important;flex-direction:column!important}
  .mobile-menu a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 12px!important;
    border:0!important;
    border-radius:9px!important;
    background:transparent!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:800!important;
  }
  .mobile-menu a:active{background:#1b1b1d!important}

  /* Home hero: right side of artwork, static on phones for speed. */
  .hero-section{
    min-height:0!important;
    padding:30px 0 24px!important;
    overflow:hidden!important;
    background:#080808!important;
  }
  body.ar-site .hero-section::before{
    inset:0!important;
    background-position:right center!important;
    background-size:cover!important;
    animation:none!important;
    transform:none!important;
    will-change:auto!important;
  }
  .hero-section::after{height:72px!important}
  .hero-grid-lines,.orbit-visual,.ambient-orbits{display:none!important}
  .hero-layout{
    display:block!important;
    min-height:0!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  .hero-copy{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    align-items:flex-start!important;
    text-align:right!important;
  }
  .hero-copy .eyebrow{
    max-width:100%!important;
    padding:6px 10px!important;
    gap:6px!important;
    border-radius:999px!important;
    font-size:clamp(7.5px,2.25vw,9px)!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .hero-copy .eyebrow .live-dot{width:6px!important;height:6px!important;flex:0 0 6px!important}
  #heroTitle,.hero-copy h1{
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    margin:14px 0 9px!important;
    font-size:clamp(29px,9.3vw,38px)!important;
    line-height:1.24!important;
    letter-spacing:-.025em!important;
    text-wrap:balance!important;
    overflow-wrap:break-word!important;
  }
  .hero-type-cursor{display:none!important}
  .hero-copy>p{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    font-size:clamp(11.5px,3.15vw,13px)!important;
    line-height:1.68!important;
    color:#deded9!important;
  }

  /* Search: touch-friendly and fluid from 320 to large phones. */
  .search-wrap{
    width:100%!important;
    max-width:100%!important;
    margin-top:18px!important;
  }
  .search-card{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px!important;
    border-radius:var(--mobile-radius)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
    overflow:hidden!important;
  }
  .search-tabs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    gap:3px!important;
    margin:0 0 7px!important;
    padding:3px!important;
    overflow:hidden!important;
  }
  .search-tabs button{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:6px 3px!important;
    border-radius:9px!important;
    font-size:clamp(9px,2.65vw,10.5px)!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  .search-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:6px!important;
    width:100%!important;
    padding:0!important;
  }
  .location-field,.search-submit{grid-column:1/-1!important}
  .compact-field{display:none!important}
  .search-field{
    width:100%!important;
    max-width:100%!important;
    min-height:54px!important;
    padding:7px 10px!important;
    border-radius:11px!important;
    overflow:hidden!important;
  }
  .search-field span{font-size:8px!important}
  .search-field input,.search-field select{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:30px!important;
    font-size:11px!important;
    text-overflow:ellipsis!important;
  }
  .search-submit{
    width:100%!important;
    max-width:100%!important;
    min-height:50px!important;
    margin:0!important;
    border-radius:11px!important;
    font-size:12px!important;
  }

  /* Home marketplace: focus on cards and core actions. */
  #properties.section,.section{padding:32px 0!important}
  .section-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
    margin-bottom:16px!important;
  }
  .section-head h2{font-size:clamp(22px,6.5vw,27px)!important;line-height:1.3!important;margin:0!important}
  .section-head p,#resultsSummary{display:none!important}
  .section-controls{width:100%!important;display:block!important}
  .section-controls select{
    width:100%!important;
    height:44px!important;
    border-radius:11px!important;
  }
  .property-grid{grid-template-columns:1fr!important;gap:13px!important}
  .property-card{
    width:100%!important;
    max-width:100%!important;
    border-radius:15px!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .property-card:hover{transform:none!important;box-shadow:none!important}
  .property-media{aspect-ratio:16/10!important;height:auto!important}
  .property-media img{transition:none!important}
  .property-card:hover .property-media img{transform:none!important}
  .media-counter{display:none!important}
  .property-content{padding:13px!important}
  .property-title-link h3{font-size:14px!important;min-height:0!important;margin:5px 0 6px!important}
  .property-price{font-size:18px!important;margin-bottom:9px!important}
  .property-meta{gap:8px!important;padding-top:9px!important}
  .property-footer{grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:10px!important}
  .property-footer a{height:42px!important;font-size:10.5px!important}
  .property-more-wrap{margin-top:13px!important}
  .property-more-btn{width:100%!important;min-height:46px!important}
  .map-shell{display:none!important}

  /* Projects / areas: single-column, no decorative numbering. */
  .projects-section{margin-top:20px!important;padding:34px 0!important}
  .project-grid,.area-grid{grid-template-columns:1fr!important;gap:10px!important}
  .project-card,.area-card{
    min-height:170px!important;
    border-radius:16px!important;
    padding:17px!important;
    transform:none!important;
  }
  .project-card:hover:before{transform:none!important}
  .project-copy h3{font-size:23px!important}
  .project-copy p{font-size:10.5px!important}
  .project-search{min-height:38px!important;padding-inline:12px!important}
  .text-link{display:none!important}

  /* Community page. */
  .community-hero{padding:30px 0 25px!important}
  .community-hero-inner{display:block!important}
  .community-radar{display:none!important}
  .community-hero h1{font-size:clamp(30px,9vw,38px)!important;line-height:1.2!important;margin:10px 0!important}
  .community-hero p{font-size:12px!important;line-height:1.7!important}
  .community-main{padding:20px 0 42px!important}
  .community-panel{padding:14px!important;border-radius:16px!important}
  .community-panel-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .community-panel-head h2{font-size:21px!important}
  .community-filter{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important}
  .community-filter input,.community-filter select{width:100%!important;height:46px!important}
  .community-list{grid-template-columns:1fr!important;gap:10px!important}
  .community-listing{grid-template-columns:96px minmax(0,1fr)!important;gap:11px!important;padding:11px!important;border-radius:14px!important}
  .listing-thumb{height:96px!important;border-radius:11px!important}

  /* Property detail: one clear reading column. */
  .detail-main{padding:20px 0 54px!important}
  .detail-breadcrumb{display:none!important}
  .detail-heading{display:block!important;margin-bottom:14px!important}
  .detail-heading h1{font-size:clamp(25px,7.5vw,33px)!important;line-height:1.2!important;margin:0 0 6px!important}
  .detail-location{font-size:11.5px!important}
  .detail-heading-actions{margin-top:10px!important;gap:6px!important}
  .detail-icon-btn{width:40px!important;height:40px!important;border-radius:11px!important}
  .detail-gallery{
    display:block!important;
    width:100%!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .detail-gallery button{display:none!important}
  .detail-gallery button:first-child{
    display:block!important;
    width:100%!important;
    aspect-ratio:4/3!important;
    height:auto!important;
  }
  .detail-gallery button:first-child img{width:100%!important;height:100%!important;object-fit:cover!important}
  .detail-layout{display:flex!important;flex-direction:column!important;gap:12px!important;margin-top:12px!important}
  .detail-sidebar{position:static!important;order:-1!important;display:grid!important;gap:10px!important;width:100%!important}
  .price-card{padding:18px!important;border-radius:17px!important}
  .price-value{font-size:28px!important}
  .detail-stack{gap:12px!important}
  .detail-card{padding:15px!important;border-radius:16px!important}
  .detail-card h2{font-size:19px!important}.detail-card h3{font-size:15px!important}
  .unit-specs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .unit-spec{padding:12px!important;border-radius:12px!important}
  .unit-spec strong{font-size:16px!important}
  .payment-grid{grid-template-columns:1fr!important;gap:7px!important}
  .payment-item.wide{grid-column:auto!important}
  .detail-description{font-size:12px!important;line-height:1.85!important}
  .feature-chips{gap:6px!important}
  .feature-chips span{padding:7px 9px!important;font-size:9px!important}
  .detail-map-wrap{height:280px!important;border-radius:14px!important}
  .developer-card{grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important}
  .developer-mark{width:48px!important;height:48px!important;border-radius:13px!important}
  .developer-card>*:last-child{display:none!important}
  .similar-section{margin-top:38px!important}
  .gallery-modal{padding:12px!important}
  .gallery-modal img{max-width:96vw!important;max-height:78vh!important;border-radius:12px!important}
  .gallery-close{top:12px!important;left:12px!important;width:40px!important;height:40px!important}
  .gallery-nav{width:38px!important;height:56px!important;border-radius:12px!important}
  .gallery-prev{right:8px!important}.gallery-next{left:8px!important}

  /* Compact footer: navigation already lives in the mobile menu. */
  .site-footer{margin-top:24px!important;padding:28px 0 calc(24px + env(safe-area-inset-bottom))!important}
  .footer-grid{display:block!important}
  .footer-grid>div:not(.footer-brand){display:none!important}
  .footer-brand{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:10px!important}
  .footer-brand p{display:none!important}
  .site-footer .brand{max-width:100%!important;justify-content:center!important}
  .footer-brand::after{content:"© 2026 AR PROPERTIES";display:block;color:#777;font-size:9px}

  /* Delay rendering of lower sections until needed. */
  #properties,.projects-section,.community-main,.similar-section,.site-footer{
    content-visibility:auto;
    contain-intrinsic-size:1px 700px;
  }
}

@media (max-width:380px){
  :root{--mobile-shell:calc(100% - 16px);--mobile-header:60px;--mobile-radius:14px}
  .header-inner{gap:6px!important}
  .site-header .brand{gap:6px!important;max-width:calc(100% - 40px)!important}
  .site-header .brand-mark,.site-header .brand-logo{
    width:19px!important;height:34px!important;min-width:19px!important;max-width:19px!important;min-height:34px!important;max-height:34px!important;flex-basis:19px!important;
  }
  .site-header .menu-btn{width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important;flex-basis:32px!important}
  .mobile-menu{left:8px!important;right:8px!important;max-width:calc(100% - 16px)!important}
  .hero-section{padding:25px 0 20px!important}
  #heroTitle,.hero-copy h1{font-size:clamp(27px,8.8vw,32px)!important;margin-top:12px!important}
  .search-wrap{margin-top:14px!important}
  .search-card{padding:7px!important}
  .search-grid{grid-template-columns:1fr!important;gap:5px!important}
  .location-field,.search-submit{grid-column:auto!important}
  .search-tabs button{font-size:9px!important;padding-inline:2px!important}
  .search-field{min-height:50px!important}
}

@media (max-width:330px){
  :root{--mobile-shell:calc(100% - 12px);--mobile-header:58px}
  .site-header .brand-mark,.site-header .brand-logo{
    width:17px!important;height:30px!important;min-width:17px!important;max-width:17px!important;min-height:30px!important;max-height:30px!important;flex-basis:17px!important;
  }
  .site-header .brand-copy strong{font-size:9.6px!important}
  .site-header .brand-copy small{font-size:5.3px!important}
  .site-header .menu-btn{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;flex-basis:30px!important}
  .hero-copy .eyebrow{font-size:7px!important;padding-inline:7px!important}
  #heroTitle,.hero-copy h1{font-size:27px!important;line-height:1.26!important}
  .hero-copy>p{font-size:11px!important}
  .search-tabs button{font-size:8.5px!important}
}

@media (max-width:767px) and (orientation:landscape) and (max-height:500px){
  .hero-section{padding:18px 0 16px!important}
  #heroTitle,.hero-copy h1{font-size:28px!important;margin:10px 0 7px!important}
  .hero-copy>p{font-size:11.5px!important}
  .search-wrap{margin-top:11px!important}
}