.hero {
position: relative;
overflow: hidden;
min-height: 80vh;
display: flex;
align-items: center;
}

.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.85));
}

.hero-content {
position: relative;
z-index: 2;
}

.hero-panel {
background: rgba(18,18,18,0.85);
border: 1px solid var(--color-graphite);
padding: var(--space-xl);
border-radius: var(--radius-md);
max-width: 720px;
}

.hero-panel h1 {
margin-bottom: var(--space-md);
}

.section-split {
align-items: center;
}

.media-wrap {
width: 100%;
min-width: 0;
}

.media-wrap img {
width: 100%;
height: auto;
border-radius: var(--radius-md);
}

.alt {
background: var(--color-charcoal);
}

.card h3 {
margin-bottom: var(--space-sm);
}

.button {
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,90,31,0.25);
}

@media (max-width: 640px) {
.hero {
min-height: auto;
padding-block: var(--space-xl);
}

.hero-panel {
padding: var(--space-lg);
}
}