.hero-process {
background: linear-gradient(180deg, #0a0a0a 0%, #121212 100%);
}
.hero-process h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
}
.media-wrap {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--color-graphite);
}
.media-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.process-block {
background: var(--color-charcoal);
border-top: 1px solid var(--color-graphite);
border-bottom: 1px solid var(--color-graphite);
}
.process-block.alt {
background: var(--color-black);
}
.process-block h2 {
font-size: clamp(2rem, 3vw, 2.8rem);
}
.process-summary {
background: linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
}
.container > * {
min-width: 0;
}
.button {
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
@media (max-width: 640px) {
.hero-process {
padding-top: var(--space-xl);
}
.media-wrap {
max-height: 300px;
}
}