/*=============================================
  Large desktop tweak — shrink sidebar a touch so
  the map keeps growing as space gets tighter
=============================================*/
@media (max-width:1500px){
  /*.sidebar{ width:300px; */
  /*flex-basis:300px; }*/
  /* .hero-heading{ width:230px; flex-basis:230px; } */
  .hero-heading h1{ font-size:30px; }
}

@media (max-width:1280px){
  .container{ padding:0 26px; }
  .sidebar{ width:270px; flex-basis:270px; padding:18px; }
  /* .hero-heading{ width:210px; flex-basis:210px; } */
  .hero-heading h1{ font-size:30px; }
}

/*=============================================
  Tablet / small laptop
=============================================*/
@media (max-width:1100px){
  .hero{ padding:130px 0 40px; }
  .sidebar{ width:240px; flex-basis:240px; padding:16px; }
  /* .hero-heading{ width:190px; flex-basis:190px; } */
  .hero-heading h1{ font-size:26px; }
  .services-grid{ grid-template-columns:repeat(3,1fr); }
  .projects-grid{ grid-template-columns:repeat(3,1fr); }
}

/*=============================================
  Header — collapse nav
=============================================*/
@media (max-width:992px){
  .nav-links{ display:none; }
  .contact-btn{ display:none; }
  .menu-toggle{ display:flex; }
}

/*=============================================
  Mobile — heading stacks above the map, desktop
  sidebar + text labels are replaced by icon pins,
  a scrollable chip strip, and the bottom sheet
=============================================*/
@media (max-width:992px){

  .space-hero {
    padding: 90px 0 0!important;
}
  .hero{ min-height:auto; padding:90px 0 30px; align-items:flex-start; }
  .container{ padding:0 18px; }

  .hero-stage{
    flex-direction:column;
    gap:16px;
  }
  .hero-heading{
    width:auto;
    flex-basis:auto;
    text-align:center;
    padding-top:0;
  }
  .hero-heading h1{ font-size:28px; }
  .hero-rule{ margin:14px auto 8px; }
  .hero-kicker{ font-size:10px; letter-spacing:2px; }

  .sidebar{ display:none; }
  .mobile-sheet{ display:block; }

  .map-wrapper{ width:100%; gap:14px; }

  /* Hide the desktop text-card labels — they collide at
     narrow widths — swap for compact icon pins instead */
  .space-label{ display:none; }
  .space-pin{ display:flex; }

  /* Horizontally scrollable category chips under the map */
  .space-chip-strip{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:2px 2px 6px;
    scrollbar-width:none;
  }
  .space-chip-strip::-webkit-scrollbar{ display:none; }
  .space-chip{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:30px;
    background:#fff;
    border:1px solid var(--border);
    font-size:12px;
    font-weight:500;
    color:var(--text);
    white-space:nowrap;
    transition:.25s;
  }
  .space-chip i{ font-size:12px; color:var(--primary); }
  .space-chip.active{
    background:var(--gradient);
    color:#fff;
    border-color:transparent;
  }
  .space-chip.active i{ color:#fff; }

  .feature-bar{ padding:40px 0 30px; }
  .feature-grid{
    grid-template-columns:1fr 1fr;
    padding:22px;
    gap:20px;
  }
}

/*=============================================
  Small phones
=============================================*/
@media (max-width:480px){

  .villa-back-wrap {
top: 36px!important;

  }
  .logo img{ height:36px; max-width:160px; }
  .logo-text{ font-size:15px; }
  .logo-text small{ display:none; }

  .hero-heading h1{ font-size:24px; }

  .space-pin{ width:32px; height:32px; font-size:12px; }
  .pin-num{ min-width:14px; height:14px; font-size:8px; }

  .feature-grid{ grid-template-columns:1fr; }

  .services-grid.mobile,
  .services-grid{ grid-template-columns:repeat(3,1fr); }

  .mobile-content h3{ font-size:20px; }
}

/*=============================================
  Reduced motion
=============================================*/
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}