.hero {
position: relative;
background-color: var(--color-bg-primary);
overflow: hidden;
display: flex;
align-items: center;
min-height: 500px;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
} .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.hero-overlay--dark {
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.7) 50%,
rgba(0, 0, 0, 0.3) 100%
);
}
.hero-overlay--full {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.6) 50%,
transparent 100%
);
}
.hero-overlay--accent {
background: linear-gradient(
135deg,
rgba(194, 109, 40, 0.1) 0%,
transparent 60%
);
} .hero-content {
position: relative;
z-index: 3;
max-width: 700px;
}
.hero-label {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-accent);
margin-bottom: var(--spacing-md);
padding: 6px 14px;
border: 1px solid var(--color-accent);
border-radius: var(--radius-full);
}
.hero-title {
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-extrabold);
line-height: 1.1;
margin-bottom: var(--spacing-lg);
letter-spacing: -0.025em;
}
.hero-title .accent {
color: var(--color-accent);
}
.hero-subtitle {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-xl);
max-width: 560px;
}
.hero-actions {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.hero-actions .btn {
padding: 1rem 2rem;
font-size: var(--font-size-base);
} .hero-page {
min-height: 300px;
padding: var(--spacing-section) 0 var(--spacing-2xl);
display: flex;
align-items: flex-end;
}
.hero-page .hero-content {
max-width: 100%;
}
.hero-page .hero-title {
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-sm);
}
.hero-page .hero-subtitle {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-md);
max-width: 100%;
} .hero .breadcrumb {
margin-top: var(--spacing-md);
}
.breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.breadcrumb-link {
color: var(--color-text-muted);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-link:hover {
color: var(--color-accent);
}
.breadcrumb-separator {
color: var(--color-text-faint);
font-size: var(--font-size-xs);
}
.breadcrumb-current {
color: var(--color-text-secondary);
} .hero--split {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
min-height: 600px;
}
.hero--split .hero-content {
padding: var(--spacing-section) 0;
}
.hero-attorney-image {
position: relative;
z-index: 3;
align-self: end;
text-align: right;
}
.hero-attorney-image img {
max-height: 550px;
width: auto;
object-fit: contain;
}