.c-hero {
position: relative;
min-height: 500px;
display: flex;
overflow: hidden;
}
.c-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.c-hero__image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 48%;
}
.c-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255,255,255,.88) 0%,
rgba(255,255,255,.66) 28%,
rgba(255,255,255,.20) 58%,
rgba(255,255,255,.02) 82%
);
}
.c-hero__inner {
position: relative;
z-index: 1;
width: min(var(--container-width), calc(100% - (var(--container-padding) * 2)));
margin-inline: auto;
display: flex;
align-items: center;
padding-block: 62px;
}
.c-hero__content {
max-width: 540px;
}
.c-hero__eyebrow {
margin: 0 0 10px;
color: var(--color-primary);
font-size: .82rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.c-hero__title {
margin: 0;
color: var(--color-primary);
font-family: var(--font-display);
font-size: clamp(3.3rem, 5.5vw, 5rem);
line-height: .98;
font-weight: 700;
}
.c-hero__text {
max-width: 500px;
margin: 20px 0 24px;
color: #26343d;
font-size: 1rem;
line-height: 1.7;
}
.c-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.c-hero .button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 24px;
border-radius: 2px;
text-decoration: none;
font-weight: 700;
font-size: .9rem;
transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.c-hero .button-primary {
background: var(--color-primary);
color: #fff;
border: 1px solid var(--color-primary);
}
.c-hero .button-primary:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
transform: translateY(-1px);
}
.c-hero .button-secondary {
background: rgba(255,255,255,.80);
color: var(--color-primary);
border: 1px solid var(--color-primary);
}
.c-hero .button-secondary:hover {
background: var(--color-primary);
color: #fff;
}
@media (max-width: 700px) {
.c-hero { min-height: 560px; }
.c-hero__overlay {
background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.40));
}
.c-hero__inner { align-items: flex-end; padding-block: 48px; }
.c-hero__title { font-size: 3.2rem; }
} .c-hero__media { overflow: hidden; }
.c-hero__slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease, visibility 1.2s ease;
}
.c-hero__slide.is-active {
opacity: 1;
visibility: visible;
}
.c-hero__slide .c-hero__image {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 48%;
}
.c-hero__slide .c-hero__video { background: #17232b; }
.c-hero__overlay { z-index: 1; }
.c-hero__slide { z-index: 0; }