*,
*::before,
*::after{
box-sizing:border-box;
}
html,body{
margin:0;
padding:0;
width:100%;
overflow-x:hidden;
overflow-y:auto;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
color:#111;
} .container{
width:100%;
max-width:1280px;
margin:0 auto;
padding:0 24px;
} .fullwidth{
width:100%;
max-width:none;
padding-left:0;
padding-right:0;
} .breakout{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
} .section,
.site-hero,
.section-services,
.site-works,
.vl24-works{
padding:80px 0;
}
@media(max-width:768px){
.section,
.site-hero,
.section-services,
.site-works,
.vl24-works{
padding:50px 0;
}
}  .services-grid,
.vl24-services-grid,
.vl24-services .services-grid{
display:grid !important;
gap:40px !important;
} .services-grid--auto,
.vl24-services-grid--auto{
grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
} .services-grid--1, .vl24-services-grid--1{ grid-template-columns:1fr !important; }
.services-grid--2, .vl24-services-grid--2{ grid-template-columns:repeat(2,1fr) !important; }
.services-grid--3, .vl24-services-grid--3{ grid-template-columns:repeat(3,1fr) !important; }
.services-grid--4, .vl24-services-grid--4{ grid-template-columns:repeat(4,1fr) !important; }
.services-grid--6, .vl24-services-grid--6{ grid-template-columns:repeat(6,1fr) !important; }
@media(max-width:1200px){
.services-grid--6, .vl24-services-grid--6{ grid-template-columns:repeat(3,1fr) !important; }
}
@media(max-width:1024px){
.services-grid--6, .vl24-services-grid--6,
.services-grid--4, .vl24-services-grid--4,
.services-grid--3, .vl24-services-grid--3{
grid-template-columns:repeat(2,1fr) !important;
}
}
@media(max-width:640px){
.services-grid,
.vl24-services-grid{
grid-template-columns:1fr !important;
}
} .service-card,
.work-card,
.vl24-work-card{
background:#fff;
border-radius:14px;
padding:20px;
box-shadow:0 6px 24px rgba(0,0,0,.06);
transition:.25s ease;
}
.work-card{
overflow:hidden;
}
.vl24-work-card:hover{
transform:translateY(-4px);
}
.vl24-work-card img{
width:100%;
border-radius:10px;
margin-bottom:12px;
} .work-img{
height:200px;
background-size:cover;
background-position:center;
}
.work-body{
padding:20px;
}
.work-link{
display:inline-block;
margin-top:12px;
color:#2563eb;
font-weight:600;
} .hero-cinematic{
position:relative;
width:100%;
height:100vh;
min-height:100vh;
overflow:hidden;
color:#fff;
perspective:1200px;
} .hero-slides{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:hidden;
z-index:0;
will-change:transform;
}
.hero-slide{
position:absolute;
inset:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
z-index:0;
transform:scale(1.15);
transition:
opacity 1.2s ease,
transform 8s cubic-bezier(.2,.8,.2,1);
will-change:opacity, transform;
backface-visibility:hidden;
pointer-events:none;
}
.hero-slide.active{
opacity:1;
z-index:2;
} .motion-a{
transform:scale(1.25) rotateY(3deg) rotateX(-2deg) translateX(-4%) translateY(2%);
}
.motion-b{
transform:scale(1.3) rotateY(-4deg) rotateX(2deg) translateX(5%) translateY(-3%);
}
.motion-c{
transform:scale(1.2) rotateY(2deg) rotateX(3deg) translateX(-2%) translateY(-4%);
}
.motion-d{
transform:scale(1.35) rotateY(-3deg) rotateX(-2deg) translateX(3%) translateY(3%);
} .hero-overlay{
position:absolute;
inset:0;
z-index:1;
}
.hero-content,
.hero-meta{
position:relative;
z-index:5;
} .hero-energy-badge{
position:absolute;
top:120px;
right:var(--hero-edge,24px);
z-index:8;
pointer-events:none;
}
.hero-energy-badge img{
width:220px;
max-width:22vw;
height:auto;
display:block;
filter:
drop-shadow(0 10px 30px rgba(255,185,90,.7))
drop-shadow(0 0 20px rgba(255,160,60,.45));
} .vl24-lightbox{
position:fixed;
inset:0;
background:rgba(10,15,25,.9);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
pointer-events:none;
transition:.25s ease;
z-index:9999;
}
.vl24-lightbox.active{
opacity:1;
pointer-events:auto;
}
.vl24-lightbox img{
max-width:90%;
max-height:90%;
border-radius:12px;
box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.vl24-lightbox-close{
position:absolute;
top:28px;
right:32px;
font-size:28px;
color:#fff;
cursor:pointer;
opacity:.85;
}
.vl24-lightbox-close:hover{
opacity:1;
} .project-image{
position:relative;
overflow:hidden;
}
.project-zoom-btn{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,.55);
color:#fff;
font-weight:600;
font-size:15px;
opacity:0;
transition:.25s;
pointer-events:none;
}
.project-image:hover .project-zoom-btn{
opacity:1;
}
@media(max-width:768px){
.project-zoom-btn{
opacity:1;
background:rgba(0,0,0,.35);
}
} section[id]{
scroll-margin-top:100px;
} .hero-spacer{
height:90vh;
} :root{
--site-max: 1440px; --site-pad: 24px; } .site-wrap{
max-width: var(--site-max);
margin: 0 auto;
padding-left: var(--site-pad);
padding-right: var(--site-pad);
width: 100%;
} .fullwidth{
width:100%;
max-width:none;
padding:0;
} .feature-strip{
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
overflow:hidden;
padding:28px 0;
background:
radial-gradient(circle at 50% 0%, rgba(212,175,55,.08), transparent 70%),
linear-gradient(180deg,#121214 0%,#0a0a0c 100%);
position:relative;
} .feature-strip::before,
.feature-strip::after{
content:"";
position:absolute;
left:0;
width:100%;
height:1px;
background:linear-gradient(90deg, transparent, rgba(212,175,55,.85), transparent);
pointer-events:none;
}
.feature-strip::before{ top:0; }
.feature-strip::after{ bottom:0; }
.feature-strip__viewport{
width:100%;
overflow:hidden;
} .feature-strip__track{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
width:max-content !important;
white-space:nowrap !important;
gap:0 !important; will-change:transform;
} .feature-strip__item{
flex:0 0 auto !important;
display:inline-flex !important;
flex-direction:row !important; align-items:center !important;
justify-content:flex-start !important;
width:auto !important; padding:0 26px !important;
text-align:left !important;
white-space:nowrap !important;
position:relative;
} .feature-strip__item:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:22px;
background:linear-gradient(180deg, transparent, rgba(212,175,55,.85), transparent);
opacity:.9;
} .feature-strip__svg{
display:inline-flex;
align-items:center;
justify-content:center;
margin-right:12px;
flex:0 0 auto;
}
.feature-strip__svg svg{
width:28px !important;
height:28px !important;
display:block; fill:none;
stroke:#d4af37;
stroke-width:2;
filter:drop-shadow(0 0 8px rgba(212,175,55,.22));
} .feature-strip__img{
width:28px !important;
height:auto !important;
display:block !important;
margin-right:12px !important;
flex:0 0 auto !important;
} .feature-strip__text{
display:inline-block !important;
white-space:nowrap !important;
font-family:"Space Grotesk", sans-serif;
font-weight:600;
font-size:14px;
letter-spacing:.06em;
background:linear-gradient(
180deg,
#fff3c4 0%,
#e8c86a 22%,
#d4af37 50%,
#f6e7a3 74%,
#b8962e 100%
);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:
0 1px 0 rgba(255,255,255,.10),
0 0 12px rgba(212,175,55,.18);
} .feature-strip:hover .feature-strip__track{
animation-play-state:paused;
} @keyframes vl24FeatureScroll{
from{ transform:translate3d(0,0,0); }
to{ transform:translate3d(-50%,0,0); }
} @media (max-width:768px){
.feature-strip{ padding:22px 0; }
.feature-strip__item{ padding:0 18px !important; }
.feature-strip__svg svg{ width:24px !important; height:24px !important; }
.feature-strip__text{ font-size:13px; }
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-body{
padding:16px;
}
#vl24-builder .vl24-section[data-type="apartment_single"] h4{
margin:18px 0 10px;
font-size:14px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.04em;
color:#1e293b;
} #vl24-builder .vl24-section[data-type="apartment_single"] p{
margin:0 0 12px;
}
#vl24-builder .vl24-section[data-type="apartment_single"] label{
display:block;
font-weight:700;
font-size:12px;
margin:0 0 6px;
color:#334155;
} #vl24-builder .vl24-section[data-type="apartment_single"] .widefat,
#vl24-builder .vl24-section[data-type="apartment_single"] .small-text,
#vl24-builder .vl24-section[data-type="apartment_single"] textarea{
margin:0;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .widefat{
margin-bottom:10px;
} #vl24-builder .vl24-section[data-type="apartment_single"] hr{
margin:18px 0;
border:0;
border-top:1px solid #e5e7eb;
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image{
background:#fafafa;
border:1px solid #e5e7eb;
border-radius:12px;
padding:14px;
margin:10px 0 12px;
display:flex;
flex-direction:column;
gap:10px;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image-actions{
display:flex;
justify-content:space-between;
align-items:center;
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image .vl24-remove-img{
color:#dc2626;
font-weight:800;
cursor:pointer;
padding:4px 8px;
border-radius:8px;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image .vl24-remove-img:hover{
background:#fee2e2;
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-docs,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-nearby{
display:flex;
flex-direction:column;
gap:12px;
margin:10px 0 14px;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-doc-item,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-nearby-item{
background:#fafafa;
border:1px solid #e5e7eb;
border-radius:12px;
padding:14px 44px 14px 14px; position:relative;
display:flex;
flex-direction:column;
gap:10px;
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-doc,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-nearby{
position:absolute;
top:10px;
right:10px;
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:pointer;
color:#dc2626;
font-weight:900;
line-height:1;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-doc:hover,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-nearby:hover{
background:#fee2e2;
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-gallery-preview{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(90px,1fr));
gap:10px;
margin:10px 0 12px;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-gallery-preview .vl24-thumb{
position:relative;
border-radius:10px;
overflow:hidden;
border:1px solid #e5e7eb;
background:#fff;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-gallery-preview img{
width:100%;
height:auto;
display:block;
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-gallery-img{
position:absolute;
top:6px;
right:6px;
width:22px;
height:22px;
background:#dc2626;
color:#fff;
border-radius:50%;
font-size:12px;
line-height:22px;
text-align:center;
cursor:pointer;
font-weight:900;
opacity:.95;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-gallery-img:hover{
opacity:1;
transform:scale(1.03);
} #vl24-builder .vl24-section[data-type="apartment_single"] .button{
margin-top:6px;
} #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid2,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid3{
margin-bottom:10px;
}
@media (max-width:900px){
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid3{
grid-template-columns:1fr;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid2{
grid-template-columns:1fr;
}
}
:root{
--header-h: 100px;
}
.vl24-project-move{
cursor:grab;
font-size:16px;
padding:4px 8px;
background:#eee;
border-radius:6px;
}