:root {
    --primary-red: #E31E24;
    --dark-red: #B91C1C;
    --light-red: #FEE2E2;
    --dark: #1A1A1A;
    --gray: #6B7280;
}

* {
    box-sizing: border-box
}

body {
    color: var(--dark);
    background: #fff;
}

/* Navbar/footer are provided by the site's global stylesheet (../../style.css). */
/* Keep per-page rules minimal to avoid visual differences. */

/* Hero */
.works-hero {
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 140px;
    padding-bottom: 40px;
    position: relative;
    overflow: hidden
        /* Background handled by SVG in HTML */
}

/* Floating shapes specific to works hero compatibility */
.works-hero .floating-shape {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 40%;
    opacity: 0.12;
    filter: blur(18px);
    z-index: 2;
}

.works-hero .floating-shape.shape-1 {
    background: linear-gradient(135deg, #E31E24, #D4AF37);
    left: 6%;
    top: 10%;
    animation: floatSlow 8s ease-in-out infinite;
}

.works-hero .floating-shape.shape-2 {
    background: linear-gradient(135deg, #B91C1C, #0066CC);
    right: 6%;
    bottom: 8%;
    width: 160px;
    height: 160px;
    animation: floatSlow 11s ease-in-out infinite reverse;
}

@keyframes floatSlow {
    0% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-18px) translateX(6px);
    }

    100% {
        transform: translateY(0) translateX(0);
    }
}

.works-hero h1 {
    font-size: 2.6rem;
    font-weight: 800
}

.works-hero h1 span {
    color: var(--primary-red)
}

.works-hero p {
    color: var(--gray);
    margin-top: .5rem
}

.section-title {
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem
}

.section-title span {
    color: var(--primary-red)
}

/* Works grid */
.works-grid-section {
    padding: 4rem 0
}

.work-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    transition: transform .28s ease, box-shadow .28s ease
}

.work-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08)
}

.work-thumb img,
.carousel-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block
}

.work-body {
    padding: 1rem 1.25rem
}

.work-body h5 {
    font-weight: 700;
    margin-bottom: .4rem
}

.work-meta {
    color: var(--gray);
    font-size: .9rem;
    margin-bottom: .8rem
}

.btn-outline-dark {
    border: 2px solid var(--dark);
    color: var(--dark);
    font-weight: 700;
    padding: .45rem .8rem;
    border-radius: 50px
}

@media (min-width: 992px) {
    .work-thumb img {
        height: 200px
    }
}

@media (max-width:768px) {
    .work-thumb img {
        height: 180px
    }

    .section-title {
        font-size: 1.6rem
    }
}

@media (max-width:480px) {
    .work-thumb img {
        height: 140px
    }
}