/* ==========================================================================
   ARCHITECTURE
   ========================================================================== */
.arch-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.arch-projects{
  margin-top: 32px;
  display:flex;
  flex-direction: column;
}
.arch-projects li{
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.arch-projects li:first-child{ border-top: none; }
.arch-projects li b{ font-size: 15px; font-weight: 600; }
.arch-projects li span{ font-size: 13px; color: var(--ink-faint); }

.arch-gallery{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.arch-gallery img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.arch-gallery img:first-child{
  grid-column: 1 / -1;
  height: 320px;
}

@media (max-width: 900px){
  .arch-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .arch-gallery{ grid-template-columns: 1fr; }
  .arch-gallery img:first-child{ height: 220px; }
}

/* ==========================================================================
   INTERIORS — full bleed strip
   ========================================================================== */
.interiors{
  position: relative;
  padding: 0;
  min-height: 640px;
  display:flex;
  align-items: flex-end;
  background: var(--bg-sunken);
}
.interiors-media{
  position: absolute; inset: 0;
}
.interiors-media img{ width:100%; height:100%; object-fit: cover; }
.interiors-media::after{
  content:'';
  position: absolute; inset:0;
  background: linear-gradient(0deg, rgba(20,22,26,0.94) 0%, rgba(20,22,26,0.5) 42%, rgba(20,22,26,0.15) 70%);
}
.interiors .container{ position: relative; z-index: 1; padding-bottom: 64px; }
.interiors-panel{
  max-width: 560px;
  background: rgba(25,28,33,0.72);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: clamp(26px, 3vw, 40px);
}

/* ==========================================================================
   INFRASTRUCTURE
   ========================================================================== */
.infra-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.infra-card{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 320px;
}
.infra-card--wide{ grid-column: span 1.5; }
.infra-card img{
  position: absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.infra-card:hover img{ transform: scale(1.06); }
.infra-card::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(15,17,20,0.92) 0%, rgba(15,17,20,0.15) 55%, transparent 75%);
  z-index: 1;
}
.infra-card-text{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px;
}
.infra-card-text p{ font-size: 13px; color: var(--ink-dim); margin-top: 8px; line-height: 1.5; }

@media (max-width: 900px){
  .infra-grid{ grid-template-columns: repeat(2, 1fr); }
  .infra-card--wide{ grid-column: span 2; }
}
@media (max-width: 560px){
  .infra-grid{ grid-template-columns: 1fr; }
  .infra-card--wide{ grid-column: span 1; }
  .infra-card{ height: 260px; }
}