.m33_page_hero {
position: relative;
width: 100%;
min-height: clamp(500px, 60vh, 720px);
background: var(--hs-dark);
color: #fff;
overflow: hidden;
display: flex;
align-items: stretch; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
}
@media (max-width: 768px) {
.m33_page_hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px)); }
}
.m33_hero_bg { position: absolute; inset: 0; z-index: 0; }
.m33_hero_bg_img { width: 100%; height: 100%; object-fit: cover; }
.m33_hero_overlay {
position: absolute;
inset: 0;
background: linear-gradient(110deg, rgba(47,58,70,0.78) 0%, rgba(47,58,70,0.42) 60%, rgba(47,58,70,0.20) 100%);
} .m33_hero_inner {
position: relative;
z-index: 2;
width: 100%;
padding-top: clamp(110px, 13vw, 220px);
padding-bottom: clamp(80px, 8vw, 140px);
display: flex;
align-items: center;
}
.m33_hero_content { max-width: 620px; } @media (min-width: 769px) {
.m33_page_hero:not(.m33_light):not(.m33_has_stats) {
min-height: clamp(700px, 70vh, 900px);
}
.m33_page_hero:not(.m33_light):not(.m33_has_stats) .m33_hero_inner {
padding-bottom: clamp(180px, 20vw, 240px);
}
.m33_hero_content {
margin-left: max(0px, calc(130px - var(--hs-container-px)));
}
}
.m33_hero_headline {
color: #fff !important;
margin-bottom: 28px;
font-weight: 600;
font-size: clamp(20px, 3.5vw, 56px);
line-height: 1.05;
letter-spacing: 0.03em;
text-shadow: 0 2px 18px rgba(0,0,0,0.25);
overflow-wrap: anywhere;
}
.m33_hero_headline em {
font-style: italic;
font-weight: 600;
font-family: var(--hs-font-display);
}
.m33_hero_text {
color: rgba(255,255,255,0.92);
margin-bottom: 38px;
max-width: 580px;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.03em;
} .m33_hero_badge {
position: absolute;
left: 0;
bottom: clamp(60px, 6vh, 90px);
z-index: 3;
width: 107px;
pointer-events: none;
} .m33_page_hero.m33_has_stats .m33_hero_badge {
bottom: auto;
top: 45%;
transform: translateY(-50%);
}
.m33_hero_badge img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) {
.m33_hero_badge { display: none; }
} .m33_page_hero.m33_light {
background: #fff;
color: var(--hs-dark); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 50% 100%, 0 calc(100% - 80px));
min-height: 700px; margin-bottom: -80px;
padding-bottom: 80px;
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
.m33_page_hero.m33_light {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
margin-bottom: -40px;
padding-bottom: 40px;
}
}
.m33_page_hero.m33_light .m33_hero_bg { display: none; }
.m33_page_hero.m33_light .m33_hero_headline { color: var(--hs-dark) !important; text-shadow: none; }
.m33_page_hero.m33_light .m33_hero_text { color: #1d1d1b; }
.m33_page_hero.m33_light .m33_hero_inner {
padding-top: clamp(110px, 13vw, 220px);
padding-bottom: clamp(60px, 7vw, 120px);
display: grid;
grid-template-columns: minmax(0, 760fr) minmax(0, 714fr);
gap: clamp(40px, 5vw, 130px);
align-items: start;
}
.m33_page_hero.m33_light .m33_hero_content { max-width: 760px; }
.m33_page_hero.m33_light .m33_hero_aside {
padding-top: clamp(40px, 6vw, 90px);
}
.m33_page_hero.m33_light .m33_hero_aside .m33_hero_text {
color: #1d1d1b;
font-weight: 300;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.03em;
margin-bottom: 0;
max-width: 714px;
} @media (max-width: 992px) {
.m33_page_hero.m33_light .m33_hero_inner {
grid-template-columns: 1fr;
gap: 36px;
}
.m33_page_hero.m33_light .m33_hero_aside { padding-top: 0; }
} .m33_page_hero.m33_has_stats {
min-height: clamp(820px, 58vw, 1124px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
}
@media (max-width: 768px) {
.m33_page_hero.m33_has_stats {
min-height: 0;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
}
} .m33_page_hero.m33_has_stats .m33_hero_bg {
inset: 0 0 auto 0;
height: 66.3%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
}
@media (max-width: 768px) {
.m33_page_hero.m33_has_stats .m33_hero_bg {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
}
}
.m33_page_hero.m33_has_stats .m33_hero_inner {
padding-top: clamp(110px, 14vw, 240px);
padding-bottom: clamp(220px, 25vw, 380px);
align-items: flex-start;
} .m33_hero_stats {
position: absolute;
left: 0;
right: 0;
bottom: 14.6%;
z-index: 2;
} .m33_hero_stats_list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
align-items: stretch;
}
.m33_hero_stat {
position: relative;
padding: 12px clamp(20px, 3vw, 60px);
display: flex;
flex-direction: column;
gap: 18px;
color: #fff;
}
.m33_hero_stat + .m33_hero_stat::before {
content: '';
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 2px;
background: rgba(255, 255, 255, 0.30);
}
.m33_hero_stat_value {
color: var(--hs-gold);
font-family: var(--hs-font-display);
font-weight: 600;
font-size: clamp(34px, 4vw, 60px);
line-height: 1;
letter-spacing: 0.03em;
}
.m33_hero_stat_label {
color: #fff;
font-weight: 300;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.03em;
max-width: 280px;
}
@media (max-width: 992px) {
.m33_hero_stats_list { grid-template-columns: 1fr; }
.m33_hero_stat + .m33_hero_stat::before {
left: 4px;
right: 4px;
top: 0;
bottom: auto;
height: 1px;
width: auto;
}
.m33_page_hero.m33_has_stats .m33_hero_bg { height: 50%; }
.m33_page_hero.m33_has_stats .m33_hero_inner {
padding-top: clamp(80px, 14vw, 160px);
padding-bottom: clamp(360px, 60vw, 540px);
}
.m33_hero_stats { bottom: 8%; }
}