:root {
    --card-shadow: 8px 10px 8px rgba(6, 36, 67, .06);
    --card-shadow-hover: 12px 16px 18px rgba(6, 36, 67, .12);
}

:where(
    .service-card,
    .career-card,
    .quote-card,
    .feature-grid,
    .content-visual-block,
    .rich-block-content > p:not(:first-of-type),
    .rich-block-content > ul li,
    .rich-block-content > ol li,
    .gallery-card,
    .job-card,
    .job-apply-card,
    .job-detail-content section,
    .career-values,
    .application-methods label
) {
    box-shadow: var(--card-shadow);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

@media (hover: hover) and (pointer: fine) {
    :where(
        .service-card,
        .career-card,
        .quote-card,
        .feature-grid,
        .content-visual-block,
        .rich-block-content > p:not(:first-of-type),
        .rich-block-content > ul li,
        .rich-block-content > ol li,
        .gallery-card,
        .job-card,
        .job-apply-card,
        .job-detail-content section,
        .career-values,
        .application-methods label
    ):hover {
        z-index: 2;
        border-color: rgba(201, 149, 46, .48);
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(
        .service-card,
        .career-card,
        .quote-card,
        .feature-grid,
        .content-visual-block,
        .rich-block-content > p:not(:first-of-type),
        .rich-block-content > ul li,
        .rich-block-content > ol li,
        .gallery-card,
        .job-card,
        .job-apply-card,
        .job-detail-content section,
        .career-values,
        .application-methods label
    ) {
        transition: none;
    }
}