/* === Homes (Namai) Section === */
.homes-section{ position:relative; padding: 0 0 120px; }
.homes-section .container{ 
max-width: 1443px;
/* padding-inline: max(24px, calc((100vw - 1443px)/2));  */
}

.homes-header{ position:relative; margin-bottom: 36px; }
.homes-label{ font-family:'Syne',sans-serif; font-weight:600; font-size:24px; line-height:29px; color:#01172C; margin-bottom: 14px; }
.homes-title{ margin:0 0 24px; font-family:'Syne',sans-serif; font-weight:700; font-size:72px; line-height:80px; color:#01172C; }

.homes-grid{ display:grid; grid-template-columns: 1fr 349px; gap: 64px; align-items:start; }

.home-card{ position:relative; overflow:hidden; background:#000; border-radius: 0; }

/* Image loading skeleton */
.home-card .image-container{ 
  position:relative; width:100%; height:100%; overflow:hidden; 
}
.home-card .image-skeleton{ 
  position:absolute; inset:0; background:#E5E7EB;
  background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index:1;
}
.home-card .image-container img{ 
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 0.3s ease;
  z-index:2;
}
.home-card .image-container.loaded img{ opacity:1; }
.home-card .image-container.loaded .image-skeleton{ opacity:0; transition: opacity 0.3s ease; }

.home-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.10); pointer-events:none; }

@keyframes shimmer{
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Left large photo ~955x688 per figma */
.home-left{ width: min(955px, 100%); height: min(688px, 45vw); }

/* Right tall photo ~349x464 per figma */
.home-right{ width: 349px; height: 464px; }

.homes-description{
  max-width: 834px;
  margin: 36px 0 0; 
  font-family:'Syne',sans-serif; font-weight:600; font-size:36px; line-height:46px; color:#01172C;
}

/* Responsive */
@media (max-width: 1200px){
  .homes-title{ font-size: clamp(40px, 6vw, 72px); line-height: clamp(48px, 6.5vw, 80px); }
  .homes-grid{ grid-template-columns: 1fr 320px; gap: 40px; }
  .home-right{ width: 320px; height: 426px; }
}

@media (max-width: 900px){
  .homes-grid{ grid-template-columns: 1fr; gap: 24px; }
  .home-left{ width:100%; height: min(600px, 60vw); }
  .home-right{ display:none;}
  .homes-section{padding: 0 0 60px; }
}

@media (max-width: 500px){
  .homes-title{ font-size:35px; line-height:32px; }
  .homes-description{ font-size:24px; line-height:20px; }
}