.vl24-why-cards{
position:relative;
padding:120px 0;
background-size:cover;
background-position:center;
overflow:hidden;
}
.vl24-why-cards > *{
position:relative;
z-index:2;
} .vl24-why-cards .vl24-wrap{
max-width:1240px;
margin:0 auto;
display:grid;
grid-template-columns: 420px 1fr;
gap:72px;
padding:0 40px;
align-items:flex-start;
position:relative;
z-index:2;
} .vl24-why-cards .vl24-wrap > *{
position:relative;
z-index:2;
} .why-left{
position:sticky;
top:30px;
background:transparent;
padding:0; box-shadow:none;
border-radius:0;
backdrop-filter:none;
display:flex; flex-direction:column; justify-content:flex-start; } .why-intro{
font-size:18px;
line-height:1.65;
color:#555;
} .why-right{
min-width:0;
} .why-tabs{
display:inline-flex;
background:rgba(255,255,255,.65);
backdrop-filter:blur(14px) saturate(150%);
-webkit-backdrop-filter:blur(14px) saturate(150%);
border-radius:999px;
padding:6px;
box-shadow:
0 12px 28px rgba(0,0,0,.10),
inset 0 0 0 1px rgba(255,255,255,.6);
margin:0 0 34px;
gap:2px;
}
.why-tabs button{
background:transparent;
border:0;
padding:11px 24px;
border-radius:0;
font-size:14px;
font-weight:600;
letter-spacing:.01em;
color:#1e293b;
box-shadow:none;
transition:.25s;
}
.why-tabs button:hover{
transform:none;
filter:brightness(0.98);
}
.why-tabs button.active{
background:#1a1205;
color:#fff;
border-radius:999px;
box-shadow:
0 6px 18px rgba(15,23,42,.25);
} .why-panels{
position:relative;
}
.why-panel{
display:none;
}
.why-panel.active{
display:block;
background: rgba(255,255,255,.32);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border-radius:26px;
padding:26px;
box-shadow:
0 24px 60px rgba(0,0,0,.12);
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(12px)}
to{opacity:1;transform:none}
} .why-img{
border-radius:20px 20px 1px 1px;
overflow:hidden;
box-shadow:
0 36px 90px rgba(0,0,0,.22);
transform:translateY(-22px);
margin:-26px -26px 0;
}
.why-img img{
width:100%;
height:auto;
display:block;
object-fit:cover;
} .why-text{
border:0;
border-radius:0;
box-shadow:none;
padding:0;
margin-top:-14px; color:#1e293b;
line-height:1.7;
} .why-text.collapsed{
max-height:12em;
overflow:hidden;
position:relative;
} .why-readmore{
display:inline-flex;
align-items:center;
gap:6px;
font-weight:600;
color:#7a5220;
text-decoration:none;
border-bottom:1px solid rgba(122,82,32,.35);
padding-bottom:2px;
transition:.25s;
}
.why-readmore::after{
content:"→";
transition:.25s;
}
.why-readmore:hover{
color:#c9a15a;
border-color:#c9a15a;
}
.why-readmore:hover::after{
transform:translateX(4px);
} @media(max-width:900px){
.vl24-why-cards{
padding:80px 0;
}
.vl24-why-cards .vl24-wrap{
grid-template-columns:1fr;
gap:46px;
padding:0 22px;
}
.why-left{
position:static;
padding:34px 28px;
}
.why-left h2{
font-size:34px;
}
.why-tabs{
overflow-x:auto;
flex-wrap:nowrap;
padding-bottom:6px;
}
.why-tabs::-webkit-scrollbar{
display:none;
}
.vl24-why-cards .vl24-wrap::before{
top:-34px;
bottom:-24px;
}
.why-panel.active{
padding:18px;
}
.why-img{
margin:0 0 14px;
transform:none;
}
.why-text{
padding:10px 2px 0;
} .why-panel.active{
overflow:hidden; }
.why-img{
margin:
-18px -18px 14px -18px;
border-radius:20px 20px 1px 1px;
}
} @media (max-width:1200px) and (min-width:901px){ .vl24-why-cards .vl24-wrap{
grid-template-columns: 1fr; gap:28px;
}
.why-left{
position:static; padding:30px 0 10px;
} .why-tabs{
margin:10px 0 18px;
} .why-panel.active{
overflow:hidden; } .why-img{
transform:none !important;
margin: -22px -22px 14px -22px !important; border-radius:22px 22px 1px 1px;
}
.why-text{
margin-top:0 !important;
padding:0 2px 0;
}
} .vl24-why-cards::before{
display:none !important;
}
.why-text.collapsed{
max-height:18em;
}
.vl24-why-cards{
isolation:isolate;
} .vl24-why-cards::before{
display:none !important;
} .vl24-why-cards{
isolation:isolate;
} .why-text.collapsed{
max-height:18em;
} .why-readmore{
color:#6b4a1f;
text-decoration:none;
border-bottom:1px solid rgba(107,74,31,.35);
padding-bottom:1px;
transition:.2s;
}
.why-readmore:hover{
color:#8a5a22;
border-color:#8a5a22;
}
@media (max-width:1200px){
.why-left{
position:relative !important;
top:auto !important;
}
}
.vl24-why-cards::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at 50% 0%,
rgba(255,220,160,.25),
transparent 55%
);
pointer-events:none;
z-index:1;
}
.why-img img{
transition:transform 1.6s ease;
}
.why-panel.active:hover .why-img img{
transform:scale(1.04);
}
.why-img{
box-shadow:
0 40px 100px rgba(0,0,0,.25),
0 0 40px rgba(255,200,120,.15);
}
.vl24-why-cards{
animation:sectionFade .8s ease both;
}
@keyframes sectionFade{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:none;
}
} @media (max-width:1200px){ .vl24-why-cards .vl24-wrap{
grid-template-columns: 1fr !important;
gap:32px;
} .why-left{
position:relative !important;
top:auto !important;
padding:20px 0 10px;
} .why-right{
width:100%;
min-width:0;
} .why-tabs-wrap{
position:sticky;
top:64px; z-index:50;
margin:0 -22px -10px;
padding:6px 22px;
background: transparent !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom:0 !important;
box-shadow:none !important;
} .why-tabs{
width:100%;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x mandatory;
padding:6px 4px;
gap:8px;
}
.why-tabs::-webkit-scrollbar{
display:none;
}
.why-tabs button{
flex:0 0 auto;
scroll-snap-align:start;
white-space:nowrap;
font-size:13px;
padding:9px 18px;
} .why-tabs button.active{
box-shadow:
0 4px 14px rgba(0,0,0,.25);
} .why-panels{
padding-top:8px;
}
.why-panel.active{
border-radius:22px;
padding:18px;
} .why-img{
margin:
-18px
-18px
14px
-18px;
border-radius:18px 18px 2px 2px;
} .why-text{
font-size:15px;
line-height:1.65;
padding:6px 2px 0;
} .why-left h2{
font-size:clamp(28px,7vw,34px);
} .why-intro{
max-width:100%;
}
} @keyframes goldShine{
0%   { background-position:0% 0; }
50%  { background-position:100% 0; }
100% { background-position:0% 0; }
}
.vl24-why-cards .why-left h2{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.vl24-why-cards{
padding:40px 0 110px;
} @media (min-width:901px) and (max-width:1200px){ .vl24-why-cards .vl24-wrap{
grid-template-columns: 420px 1fr !important;
gap:56px;
} .why-left{
position:sticky !important;
top:120px;
padding:50px 0 70px 0;
} .why-tabs-wrap{
position:static !important;
margin:0;
padding:0;
backdrop-filter:none;
} .why-right{
width:auto;
}
} .vl24-why-cards .why-left h2{
font-family:"Inter",sans-serif !important;
font-size:clamp(30px,3.2vw,46px) !important;
font-weight:700 !important;
line-height:1.08 !important;
letter-spacing:-.02em !important;
background:linear-gradient(
90deg,
#f5f4f4 0%,
#d0cfcf 20%,
var(--brand-primary) 50%,
#f5f576 60%,
var(--brand-primary) 70%,
#000 100%
) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
text-shadow:none !important;
animation:none !important;
} .vl24-why-cards .why-intro{
font-family:"Inter",sans-serif;
font-size:16px;
line-height:1.75; color:rgba(255,255,255,.85);
} .vl24-why-cards .vl24-wrap::before{
content:"" !important;
position:absolute !important;
left:50% !important;
transform:translateX(-50%) !important;
top:-40px !important;
bottom:-34px !important;
width:100vw !important;
background: linear-gradient(
to bottom,
rgba(0,0,0,.45) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.68) 60%, rgba(0,0,0,.45) 80%,
rgba(0,0,0,.18) 95%,
rgba(0,0,0,0) 100%
) !important;
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important; mask-image: linear-gradient(
to bottom,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 42%,
rgba(0,0,0,.75) 60%,
rgba(0,0,0,.35) 74%,
rgba(0,0,0,0) 90%,
rgba(0,0,0,0) 100%
) !important;
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 42%,
rgba(0,0,0,.75) 60%,
rgba(0,0,0,.35) 74%,
rgba(0,0,0,0) 90%,
rgba(0,0,0,0) 100%
) !important;
pointer-events:none !important;
z-index:0 !important;
} .vl24-why-cards .why-left h2{ font-family:"Outfit",sans-serif !important;
font-weight:600 !important;
font-size:clamp(36px,4vw,56px) !important;
line-height:1.1 !important;
letter-spacing:-0.02em !important;
margin:0 0 16px !important; background:linear-gradient(
90deg,
#f9f7f7 0%,
#bab9b9 10%,
#58752d 25%,
var(--brand-primary) 50%,
#5b7b2c 70%,
#edebeb 90%
) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
text-shadow:none !important;
animation:none !important;
}  .why-tabs-wrap{
position:relative;
z-index:20;
} .why-tabs{
margin-bottom:-50px; transform:translateY(25px); border-radius:20px 20px 0 0;
background:rgba(255,255,255,.9);
backdrop-filter:blur(16px);
} .why-panel.active{
padding-top:60px;
} .why-tabs{ background:var(--brand-primary) !important; backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-radius:20px 20px 0 0;
box-shadow:
0 20px 40px rgba(0,0,0,.25),
inset 0 1px rgba(255,255,255,.25);
} .why-tabs button{
color:#111 !important; } .why-tabs button.active{
background:#1a1205 !important;
color:#fff !important;
} .vl24-why-cards .why-panel.active{ background:#1c1c1c !important; backdrop-filter:none !important;
-webkit-backdrop-filter:none !important; box-shadow:
0 40px 100px rgba(0,0,0,.55);
border-radius:26px;
}
.vl24-why-cards .why-text{
color:#fff;
} .vl24-why-cards .why-readmore{
display:inline-flex;
align-items:center;
gap:6px;
font-weight:600;
font-size:15px;
text-decoration:none;
background:linear-gradient(
180deg,
#fff6c7 0%,
#f0c95a 40%,
#b8962e 70%,
#fff1a3 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
border-bottom:1px solid rgba(212,175,55,.35);
transition:.25s ease;
} .vl24-why-cards .why-readmore::after{
content:"→";
margin-left:4px;
transition:.25s ease;
} .vl24-why-cards .why-readmore:hover{
border-bottom-color:rgba(255,220,140,.8);
text-shadow:
0 0 12px rgba(255,210,120,.35);
}
.vl24-why-cards .why-readmore:hover::after{
transform:translateX(5px);
} .vl24-why-cards{
position:relative;
padding:100px 0;
background:#f6f7f8 !important; overflow:hidden;
color:#111;
} .vl24-why-cards .why-intro{
color:rgba(255,255,255,.78);
max-width:46ch;
} .vl24-why-cards .why-left h2{
font-family:"Outfit",sans-serif !important;
font-weight:600 !important;
letter-spacing:-.02em !important;
line-height:1.08 !important;
color:rgba(255,255,255,.96) !important;
text-shadow:
0 24px 70px rgba(0,0,0,.45),
0 2px 10px rgba(0,0,0,.35);
} .vl24-why-cards .why-tabs{
display:inline-flex;
gap:6px;
padding:7px;
border-radius:999px;
background:rgba(10,10,12,.55) !important;
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
box-shadow:
0 18px 44px rgba(0,0,0,.45),
inset 0 0 0 1px rgba(255,255,255,.10);
margin:0 0 28px;
}
.vl24-why-cards .why-tabs button{
background:transparent;
border:0;
padding:11px 20px;
border-radius:999px;
color:rgba(255,255,255,.82) !important;
font-weight:650;
transition:transform .18s ease, filter .18s ease, background .18s ease, box-shadow .18s ease;
}
.vl24-why-cards .why-tabs button:hover{
filter:brightness(1.05);
}
.vl24-why-cards .why-tabs button.active{
background:var(--vl24-gold-metal) !important;
color:#111 !important;
box-shadow:
0 14px 30px rgba(0,0,0,.35),
0 0 26px rgba(255,205,135,.18);
} .vl24-why-cards .why-panel.active{
display:block;
background:rgba(12,12,14,.62) !important;
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border-radius:26px;
padding:26px;
box-shadow:
0 42px 120px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.10);
}
.vl24-why-cards .why-text{
color:rgba(255,255,255,.88) !important;
line-height:1.75;
}
.vl24-why-cards .why-text p{
margin:0 0 14px;
}
.vl24-why-cards .why-text ul{
margin:10px 0 14px 18px;
}
.vl24-why-cards .why-text li{
margin:0 0 8px;
color:rgba(255,255,255,.82);
} .vl24-why-cards .why-img{
box-shadow:
0 46px 120px rgba(0,0,0,.58),
0 0 46px rgba(255,205,135,.16);
}
.vl24-why-cards .why-img img{
filter:saturate(1.05) contrast(1.02);
} .vl24-why-cards .why-readmore{
color:rgba(255,220,160,.90);
border-bottom:1px solid rgba(255,220,160,.32);
}
.vl24-why-cards .why-readmore:hover{
color:rgba(255,235,190,.98);
border-color:rgba(255,235,190,.55);
} @media(max-width:900px){
.vl24-why-cards .why-tabs{
background:rgba(10,10,12,.62) !important;
}
.vl24-why-cards .why-panel.active{
padding:18px;
border-radius:22px;
}
} .vl24-why-cards .hero-eyebrow{
position:relative;
display:inline-block;
font-family:"Space Grotesk",sans-serif;
font-size:16px;
letter-spacing:.28em;
text-transform:uppercase;
font-weight:700;
margin-bottom:22px;
white-space:nowrap;
background:var(--vl24-gold-metal);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
padding:6px 12px;
border-radius:6px;
background-color:rgba(18,18,18,.35);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
text-shadow:none;
filter:none;
} .vl24-why-cards .hero-eyebrow::after{
content:"";
position:absolute;
top:0;
left:-40%;
width:40%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.9),
rgba(255,255,255,.95),
transparent
);
opacity:0;
pointer-events:none;
}
.vl24-why-cards .hero-eyebrow.is-scanning::after{
opacity:.85;
animation:vl24Scan 5s cubic-bezier(.22,1,.36,1) forwards;
} .vl24-why-cards .hero-eyebrow.is-final{
background:linear-gradient(
180deg,
#fff6c7 0%,
#f0c95a 35%,
#b8962e 65%,
#fff1a3 100%
);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 1px 1px rgba(0,0,0,.6),
0 0 14px rgba(212,175,55,.35);
}
.vl24-why-cards .why-left h2{
font-family:"Outfit",sans-serif;
font-weight:600;
font-size:clamp(36px,4vw,56px);
line-height:1.1;
letter-spacing:-0.02em;
color:#1a1f16 !important; background:none !important;
-webkit-text-fill-color:unset !important;
}  .vl24-why-cards .hero-eyebrow{
font-family:"Space Grotesk",sans-serif !important;
font-size:16px !important;
letter-spacing:.28em !important;
font-weight:700 !important;
text-transform:uppercase !important;
padding:6px 12px !important;
border-radius:6px !important;
margin-bottom:22px !important;
white-space:nowrap !important;
background:var(--vl24-gold-metal) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important;
background-color:rgba(18,18,18,.35) !important;
backdrop-filter:blur(10px) !important;
-webkit-backdrop-filter:blur(10px) !important;
border:1px solid rgba(255,255,255,.08) !important;
text-shadow:none !important;
filter:none !important;
} @media(max-width:768px){
.vl24-why-cards .hero-eyebrow{
font-size:12px !important;
letter-spacing:.18em !important;
padding:4px 8px !important;
border-radius:4px !important;
margin-bottom:10px !important;
}
} .vl24-why-cards .why-left{
align-items:flex-start !important; } .vl24-why-cards .why-left .hero-eyebrow{
align-self:flex-start !important;
width:auto !important;
max-width:max-content !important;
}  .vl24-why-cards .why-tabs{
border-radius:14px !important; } .vl24-why-cards .why-tabs button{
border-radius:10px !important; }
.vl24-why-cards .why-tabs button.active{
border-radius:10px !important;
} .vl24-why-cards .why-panel.active{
border-radius:16px !important; } .vl24-why-cards .why-img{
border-radius:16px 16px 2px 2px !important;
}  .vl24-why-cards{
background:linear-gradient(180deg,#f6f7f8 0%, #ffffff 50%) !important;
padding:40px 0 !important;
color:#111 !important;
} .vl24-why-cards::before,
.vl24-why-cards::after,
.vl24-why-cards .vl24-wrap::before{
display:none !important;
} .vl24-why-cards .why-left h2{
background:none !important;
-webkit-text-fill-color:unset !important;
color:#1a1f16 !important;
font-family:"Outfit",sans-serif !important;
font-weight:600 !important;
font-size:clamp(36px,4vw,56px) !important;
line-height:1.1 !important;
} .vl24-why-cards .why-intro{
color:#555 !important;
} .vl24-why-cards .why-tabs{
display:flex !important;
gap:10px !important;
background:transparent !important;
backdrop-filter:none !important;
box-shadow:none !important;
border-radius:0 !important;
} .vl24-why-cards .why-tabs button{
background:#fff !important;
color:#111 !important;
border:1px solid rgba(0,0,0,.08) !important;
padding:10px 18px !important;
border-radius:8px !important;
box-shadow:none !important;
} .vl24-why-cards .why-tabs button.active{
background:linear-gradient(135deg,#ef4444,#dc2626,#991b1b) !important;
color:#fff !important;
border:none !important;
} .vl24-why-cards .why-panel.active{
background:#fff !important;
backdrop-filter:none !important;
border-radius:16px !important;
padding:24px !important;
box-shadow:0 20px 60px rgba(0,0,0,.08) !important;
} .vl24-why-cards .why-img{
margin:-24px -24px 20px !important;
transform:none !important;
border-radius:16px 16px 2px 2px !important;
box-shadow:none !important;
} .vl24-why-cards .why-text{
margin-top:0 !important;
padding:0 !important;
color:#333 !important;
} .vl24-why-cards .why-readmore{
color:#dc2626 !important;
border-bottom:1px solid rgba(220,38,38,.3) !important;
}
.vl24-why-cards .why-readmore:hover{
color:#991b1b !important;
}
.vl24-why-cards .why-readmore{
color:#111 !important;
border-bottom:1px solid rgba(0,0,0,.2) !important;
}
.vl24-why-cards .hero-eyebrow{
display:none !important;
} .vl24-why-cards .why-readmore{
background:none !important;
-webkit-background-clip:unset !important;
-webkit-text-fill-color:unset !important;
color:#dc2626 !important; border-bottom:1px solid rgba(220,38,38,.3) !important;
}
.vl24-why-cards .why-readmore:hover{
color:#991b1b !important;
border-color:#991b1b !important;
} .vl24-why-cards .why-text ul,
.vl24-why-cards .why-text ol{
color:#333 !important;
}
.vl24-why-cards .why-text li{
color:#333 !important;
}
.vl24-why-cards .why-text li::marker{
color:#dc2626 !important; } .section.projects .section-header h2{
font-family:"Outfit",sans-serif !important;
font-weight:600 !important;
font-size:clamp(36px,4vw,56px) !important;
line-height:1.1 !important;
letter-spacing:-0.02em !important;
color:#1a1f16 !important;
background:none !important;
-webkit-text-fill-color:unset !important;
text-shadow:none !important;
}