:root {
            --project-bg: #f7f5f1;
            --project-card: #ffffff;
            --project-text: #171717;
            --project-muted: #667085;
            --project-line: #e7e3dc;
            --project-red: #ab0000;
            --project-red-light: #ff3838;
        }

        body {
            margin: 0;
            background: var(--project-bg);
            color: var(--project-text);
        }

        .projects-page {
            min-height: 100vh;
            padding: 130px 0 90px;
            background:
                radial-gradient(circle at 10% 10%, rgba(171, 0, 0, 0.06), transparent 30%),
                var(--project-bg);
        }

        .projects-container {
            width: min(1180px, calc(100% - 40px));
            margin: 0 auto;
        }

        .projects-header {
            max-width: 760px;
            margin-bottom: 46px;
        }

        .projects-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            color: var(--project-red);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .projects-label::before {
            content: "";
            width: 34px;
            height: 2px;
            background: linear-gradient(
                90deg,
                var(--project-red),
                var(--project-red-light)
            );
        }

        .projects-title {
            margin: 0;
            font-size: clamp(48px, 7vw, 86px);
            line-height: 0.98;
            letter-spacing: -0.055em;
        }

        .projects-intro {
            max-width: 680px;
            margin-top: 24px;
            color: var(--project-muted);
            font-size: 18px;
            line-height: 1.75;
        }

        .project-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin: 0 0 42px;
        }

        .project-filter {
            appearance: none;
            border: 1px solid var(--project-line);
            background: rgba(255, 255, 255, 0.84);
            color: #344054;
            padding: 12px 19px;
            border-radius: 999px;
            font: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition:
                transform 0.25s ease,
                border-color 0.25s ease,
                background 0.25s ease,
                color 0.25s ease,
                box-shadow 0.25s ease;
        }

        .project-filter:hover {
            transform: translateY(-2px);
            border-color: rgba(171, 0, 0, 0.32);
        }

        .project-filter.active {
            color: #ffffff;
            border-color: transparent;
            background: linear-gradient(
                90deg,
                var(--project-red),
                var(--project-red-light)
            );
            box-shadow: 0 12px 26px rgba(171, 0, 0, 0.18);
        }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 26px;
        }

        .project-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 430px;
            padding: 34px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid var(--project-line);
            border-radius: 28px;
            box-shadow: 0 18px 46px rgba(17, 24, 39, 0.07);
            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
        }

        .project-card::before {
            content: "";
            position: absolute;
            width: 230px;
            height: 230px;
            right: -100px;
            top: -120px;
            border-radius: 50%;
            background: radial-gradient(
                circle,
                rgba(255, 56, 56, 0.14),
                transparent 70%
            );
            pointer-events: none;
        }

        .project-card:hover {
            transform: translateY(-7px);
            border-color: rgba(171, 0, 0, 0.24);
            box-shadow: 0 28px 70px rgba(17, 24, 39, 0.12);
        }

        .project-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 28px;
        }

        .project-type {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .project-type.national {
            color: #7a2e00;
            background: #fff1e8;
        }

        .project-type.international {
            color: #8a0d19;
            background: #ffe8eb;
        }

        .project-dates {
            color: #7b8494;
            font-size: 13px;
            font-weight: 700;
            text-align: right;
        }

        .project-card h2 {
            position: relative;
            z-index: 1;
            margin: 0;
            font-size: clamp(27px, 3vw, 39px);
            line-height: 1.08;
            letter-spacing: -0.035em;
        }

        .project-leader {
            margin: 18px 0 0;
            color: #475467;
            font-size: 15px;
        }

        .project-description {
            margin: 24px 0 0;
            color: var(--project-muted);
            font-size: 16px;
            line-height: 1.72;
        }

        .project-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-top: auto;
            padding-top: 34px;
        }

        .project-duration {
            color: #7b8494;
            font-size: 13px;
        }

        .project-link {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 12px 18px;
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 800;
            border-radius: 999px;
            background: linear-gradient(
                90deg,
                var(--project-red),
                var(--project-red-light)
            );
            box-shadow: 0 12px 26px rgba(171, 0, 0, 0.18);
            transition:
                transform 0.25s ease,
                box-shadow 0.25s ease;
        }

        .project-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 17px 34px rgba(171, 0, 0, 0.26);
        }

        .project-link svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
        }

        .projects-empty {
            grid-column: 1 / -1;
            padding: 60px 30px;
            text-align: center;
            color: var(--project-muted);
            background: #ffffff;
            border: 1px solid var(--project-line);
            border-radius: 28px;
        }

        @media (max-width: 850px) {
            .projects-page {
                padding-top: 90px;
            }

            .projects-grid {
                grid-template-columns: 1fr;
            }

            .project-card {
                min-height: auto;
            }
        }

        @media (max-width: 560px) {
            .projects-container {
                width: min(100% - 24px, 1180px);
            }

            .project-card {
                padding: 26px;
                border-radius: 22px;
            }

            .project-topline,
            .project-footer {
                align-items: flex-start;
                flex-direction: column;
            }

            .project-dates {
                text-align: left;
            }
        }