/* Explain: Card styles, buttons, sections, and scroll margins for corporate site. */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hero-cinematic {
    position: relative;
    z-index: 70;
    isolation: isolate;
}

.service-card,
.project-card,
.timeline-card,
.faq-card,
.benefit-card,
.gallery-card {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--surface-color);
    box-shadow: var(--shadow-card);
    transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.service-card:hover,
.project-card:hover,
.timeline-card:hover,
.benefit-card:hover,
.gallery-card:hover {
    transform: translateY(-0.25rem);
    border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
    box-shadow: var(--shadow-soft);
}

.callback-status.success {
    display: block;
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--charcoal-color);
}

.callback-status.error {
    display: block;
    border: 1px solid color-mix(in srgb, #ef4444 48%, transparent);
    background: color-mix(in srgb, #ef4444 14%, transparent);
    color: var(--charcoal-color);
}

#solutions,
#about,
#booking,
#offers {
    scroll-margin-top: 6rem;
}

@media (max-width: 640px) {
    .service-card,
    .project-card,
    .timeline-card {
        min-height: auto;
    }
}