.hero{
position:relative;
min-height:100vh;
min-height:100svh; display:flex;
align-items:flex-end; background-size:cover;
background-repeat:no-repeat;
background-position:center;
color:#fff;
overflow:hidden;
} .hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
rgba(0,0,0,.2),
rgba(0,0,0,.45)
);
z-index:1;
} .hero-content{
position:absolute; left:50%;
bottom:140px; transform:translateX(-50%);
z-index:2;
width:100%;
max-width:1280px;
padding:clamp(40px,6vw,120px);
display:flex;
flex-direction:column;
align-items:flex-start;
} .hero,
.hero *{
font-family:"Inter",sans-serif;
} .hero-eyebrow{
font-family:"Space Grotesk",sans-serif;
font-size:12px;
letter-spacing:.25em;
text-transform:uppercase;
color:#fff;
} .vl24-eyebrow-pill{
display:inline-flex;
align-items:center;
padding:6px 14px; border-radius:999px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(12px);
max-width:140px; overflow:hidden;
margin-bottom:16px;
} .hero-title{
font-family:"Fraunces",serif; font-size:clamp(32px,6vw,96px);
font-weight:600;
line-height:1.05;
margin:0 0 8px;
letter-spacing:-0.02em;
text-wrap:balance;
color:#fff; text-shadow:none;
filter:none;
} .hero-text{
max-width:640px;
font-size:18px;
line-height:1.6;
color:rgba(255,255,255,.85);
} .hero-actions{
display:flex;
gap:22px;
margin-top:40px;
align-items:center;
flex-wrap:wrap;
} @media(max-width:768px){
.hero{
min-height:100svh;
align-items:flex-end;
}
.hero-content{
padding:40px 24px 60px;
}
.hero-title{
font-size:38px;
margin-bottom:6px !important;
}
.hero-text{
font-size:16px;
margin-top:0 !important;
line-height:1.5;
}
.hero-actions{
flex-direction:row;
flex-wrap:wrap;
align-items:flex-start;
}
} .hero{
position:relative !important;
} .hero .hero-content{
position:absolute !important;
left:50% !important;
bottom:160px !important; transform:translateX(-50%) !important;
width:100%;
max-width:1280px !important;
z-index:10 !important;
} @media(max-width:1024px){
.hero .hero-content{
bottom:120px !important;
}
}
@media(max-width:768px){
.hero .hero-content{
bottom:80px !important;
}
} .hero .hero-title{
font-family:"Outfit", sans-serif !important;
font-weight:600 !important;
font-size:clamp(24px,7vw,56px) !important;
letter-spacing:-0.03em !important;
line-height:1 !important;
text-shadow:
0 20px 60px rgba(0,0,0,.35),
0 2px 6px rgba(0,0,0,.25);
} .hero .vl24-eyebrow-pill{
border:1px solid var(--brand-primary) !important;
} .hero .hero-title{
margin:0 0 6px !important; }
.hero .hero-text{
margin:0 !important; line-height:1.5 !important;
} @media (max-width:768px){
.hero .hero-title{
margin:0 0 6px !important;
line-height:1.05 !important;
}
.hero .hero-text{
font-size:16px !important;
margin:0 !important;
line-height:1.5 !important;
}
}
.hero-actions{
display:flex;
gap:12px;
margin-top:20px;
align-items:left;
flex-wrap:wrap;
} .vl24-eyebrow-track{
display:flex;
width:max-content;
white-space:nowrap;
}
.hero-eyebrow{
padding-right:10px;
}
@media(max-width:768px){
.hero .hero-content{
margin-left:calc(var(--sb-width) - 60px) !important;
}
} .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) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:transparent !important; text-shadow:none !important;
filter:none !important;
}
.hero-eyebrow{
padding:6px 12px;
border-radius:6px;
background-color:rgba(18,18,18,.35);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
}
@media(max-width:768px){
.hero-eyebrow{
font-size:12px; letter-spacing:.18em;
padding:4px 8px; border-radius:4px;
margin-bottom:10px; }
} .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;
}
.hero-eyebrow.is-scanning::after{
opacity:.85;
animation:vl24Scan 5s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes vl24Scan{
to{ left:130%; }
} .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);
}
.hero .hero-title{
max-width:600px;
}
@media (max-width:768px){
.hero .hero-title{
max-width:320px; }
}
@media (max-width:768px){
.hero-actions{
width:auto;
gap:14px;
}
.hero-actions .vl24-btn{
width:auto;
justify-content:center;
}
}
@media (max-width:768px){
.hero-actions{
padding-right:24px;
}
} .hero-scroll{
position:absolute;
left:50%;
bottom:45px;
transform:translateX(-50%);
width:56px;          
height:56px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1px;
border:none;
background:none;
opacity:.7;
transition:.3s ease;
}
.hero-scroll:hover{
opacity:1;
} .hero-arrow{
display:block;
border-left:2px solid rgba(255,255,255,.9);
border-bottom:2px solid rgba(255,255,255,.9);
transform:rotate(-45deg);
animation:vl24ScrollArrow 2.4s infinite;
} .hero-arrow-3{
width:3px;
height:3px;
opacity:.4;
animation-delay:.3s;
} .hero-arrow-2{
width:6px;
height:6px;
opacity:.7;
animation-delay:.15s;
} .hero-arrow-1{
width:10px;
height:10px;
opacity:1;
}
@keyframes vl24ScrollArrow{
0%{
transform:translateY(-6px) rotate(-45deg);
}
50%{
transform:translateY(6px) rotate(-45deg);
}
100%{
transform:translateY(-6px) rotate(-45deg);
}
}  .hero-scroll{
opacity:1 !important;
transition:none !important;
animation:none !important;
filter:none !important;
} .hero-arrow,
.hero-arrow-1,
.hero-arrow-2,
.hero-arrow-3{
opacity:1 !important;
filter:none !important;
} .hero-arrow{
will-change:transform;
animation-name:vl24ScrollMove !important;
animation-duration:2.4s !important;
animation-timing-function:ease-in-out !important;
animation-iteration-count:infinite !important;
} .hero-arrow-2{ animation-delay:.15s !important; }
.hero-arrow-3{ animation-delay:.30s !important; } @keyframes vl24ScrollMove{
0%   { transform:translateY(-6px) rotate(-45deg); }
50%  { transform:translateY( 6px) rotate(-45deg); }
100% { transform:translateY(-6px) rotate(-45deg); }
}  .vl24-btn--light{
background:var(--vl24-gold-metal) !important;
border:none !important;
color:#111 !important;
} .vl24-btn--light .vl24-btn__icon{
background:#0a0a0c !important; border:none !important;
} .vl24-btn--light .vl24-btn__icon::before{
filter:
brightness(0)
saturate(100%)
invert(79%)
sepia(42%)
saturate(526%)
hue-rotate(3deg)
brightness(92%)
contrast(92%);
}  .vl24-btn--dark:hover .vl24-btn__icon{
background:#0a0a0c !important; } .vl24-btn--dark:hover .vl24-btn__icon::before{
filter:
brightness(0)
saturate(100%)
invert(79%)
sepia(42%)
saturate(526%)
hue-rotate(3deg)
brightness(92%)
contrast(92%);
} .vl24-btn--light:hover .vl24-btn__icon::before{
filter:none !important; }  .hero{
--hero-offset: 0px;
} .hero.is-offset{
--hero-offset: 100px;
} @media (max-width:1024px){
.hero.is-offset{ --hero-offset: 60px; }
} @media (max-width:640px){
.hero.is-offset{ --hero-offset: 30px; }
} .hero .hero-content{
transform: translateX(calc(-50% + var(--hero-offset))) !important;
transition: transform .45s cubic-bezier(.22,.61,.36,1);
} @media (max-width:420px){
.hero-actions{
gap:10px;
}
.hero-actions .vl24-btn{
min-height:44px;
padding:6px 48px 6px 18px;
font-size:14px;
}
.hero-actions .vl24-btn__icon{
width:34px;
height:34px;
}
}
.vl24-btn--dark{
background:rgba(20,20,20,.35);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.18);
}