*, *::before, *::after {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                -webkit-tap-highlight-color: transparent !important;
            }

            html, body {
                -webkit-tap-highlight-color: transparent !important;
            }

            body {
                background-color: #000000;
                color: #ffffff;
                font-family: "Chakra Petch", sans-serif;
                overflow-x: hidden;
                width: 100vw;
                max-width: 100vw;
                min-height: 100vh;
                -webkit-font-smoothing: antialiased;
            }

            /* Main Container (Responsive Desktop Scaling Layout) */
            .page-wrapper {
                width: 100vw;
                max-width: 100vw;
                margin: 0 auto;
                position: relative;
                min-height: 100vh;
                background-color: #000000;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-bottom: clamp(16px, 2vw, 24px);
            }

            /* ── Header Badge Section ── */
            .section-badge-header {
                margin-top: max(140px, calc(7.315vh + 3.796vh + 55px));
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                width: min(88vw, 1340px);
                padding: 0;
                box-sizing: border-box;
            }

            .page-main-title {
                font-family: "Chakra Petch", sans-serif;
                font-size: 36px;
                font-weight: 500;
                line-height: 1.25;
                color: #ffffff;
                text-align: center;
                letter-spacing: -0.01em;
                margin-top: 18px;
                width: 100%;
                max-width: 760px;
                padding: 0 clamp(16px, 4vw, 32px);
                box-sizing: border-box;
                text-wrap: normal;
            }

            /* ── Giant Outer Purple Enclosing Box & Cards Grid ── */
            .grid-outer-wrapper {
                margin-top: 48px;
                position: relative;
                width: min(88vw, 1340px);
                padding: clamp(1.25rem, 2.5vw, 2.125rem) clamp(1.5rem, 2.5vw, 2.125rem);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            /* Outer Chamfer Border with fixed non-distorting cut corners (design system grey) */
            .outer-purple-border {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                background: rgba(255, 255, 255, 0.12);
                clip-path: polygon(
                    28px 0,
                    calc(100% - 28px) 0,
                    100% 28px,
                    100% calc(100% - 28px),
                    calc(100% - 28px) 100%,
                    28px 100%,
                    0 calc(100% - 28px),
                    0 28px
                );
                z-index: 1;
            }

            .outer-purple-border::after {
                content: '';
                position: absolute;
                top: 1.5px;
                left: 1.5px;
                right: 1.5px;
                bottom: 1.5px;
                background: #000000;
                clip-path: polygon(
                    27px 0,
                    calc(100% - 27px) 0,
                    100% 27px,
                    100% calc(100% - 27px),
                    calc(100% - 27px) 100%,
                    27px 100%,
                    0 calc(100% - 27px),
                    0 27px
                );
            }

            .cards-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: clamp(1rem, 2vw, 1.75rem);
                width: 100%;
                position: relative;
                z-index: 2;
                perspective: 900px;
            }

            /* ── Individual Chamfered Work Card (Vilendesign 3D Tilt) ── */
            .chamfer-card {
                width: 100%;
                min-width: 0;
                position: relative;
                clip-path: polygon(
                    6.575% 0,
                    93.425% 0,
                    100% 5.634%,
                    100% 94.366%,
                    93.425% 100%,
                    6.575% 100%,
                    0 94.366%,
                    0 5.634%
                );
                background-color: #0a0a0a;
                display: flex;
                flex-direction: column;
                cursor: pointer;
                transform-style: preserve-3d;
                transform: translateY(var(--tile-lift, 0px)) rotateX(var(--tile-rx, 0deg)) rotateY(var(--tile-ry, 0deg)) scale(var(--tile-scale, 1));
                transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease;
                will-change: transform;
                text-decoration: none;
                color: inherit;
                outline: none !important;
                -webkit-tap-highlight-color: transparent !important;
                -webkit-touch-callout: none;
                user-select: none;
                -webkit-user-select: none;
            }

            @media (hover: hover) and (pointer: fine) {
                .chamfer-card:hover {
                    --tile-lift: -4px;
                    --tile-scale: 1.025;
                    background-color: #0a0a0a !important;
                    color: inherit;
                    text-decoration: none;
                }
            }

            /* Card Dynamic Radial Sheen (Vilendesign style) */
            .card-sheen {
                position: absolute;
                inset: 0;
                pointer-events: none;
                z-index: 8;
                background: radial-gradient(
                    65% 65% at var(--tile-shx, 50%) var(--tile-shy, 50%),
                    rgba(255, 255, 255, 0.12),
                    transparent 70%
                );
                mix-blend-mode: soft-light;
                opacity: 0;
                transition: opacity 0.35s ease;
                clip-path: inherit;
            }

            .chamfer-card:hover .card-sheen {
                opacity: 1;
            }

            .chamfer-card:focus,
            .chamfer-card:focus-visible,
            .chamfer-card:active {
                outline: none !important;
                -webkit-tap-highlight-color: transparent !important;
                background-color: #0a0a0a !important;
                color: inherit;
                text-decoration: none;
            }

            .chamfer-card * {
                -webkit-tap-highlight-color: transparent !important;
            }

            .card-banner svg,
            .card-arrow-btn,
            .card-arrow-btn svg {
                pointer-events: none;
            }

            /* Card Chamfered SVG Border Overlay */
            .card-border-svg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 10;
            }

            .card-border-svg path {
                stroke: #333333;
                stroke-width: 2.4;
            }

            /* Card Image Banner */
            .card-banner {
                width: 100%;
                aspect-ratio: 365 / 222;
                flex-shrink: 0;
                background-color: #0e0e0e;
                position: relative;
                overflow: hidden;
                clip-path: polygon(
                    6.575% 0,
                    93.425% 0,
                    100% 10.811%,
                    100% 89.189%,
                    93.425% 100%,
                    6.575% 100%,
                    0 89.189%,
                    0 10.811%
                );
            }

            .card-thumbnail-img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
                z-index: 1;
                pointer-events: none;
                transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
            }

            .card-hover-video {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
                display: block;
                opacity: 0;
                z-index: 2;
                pointer-events: none;
                transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .chamfer-card:hover .card-thumbnail-img,
            .chamfer-card:hover .card-hover-video {
                transform: scale(1.04);
            }

            .card-hover-video.is-playing {
                opacity: 1;
            }

            .card-banner-border-svg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 5;
            }

            .card-banner-border-svg path {
                stroke: #333333;
            }

            /* Card Content Area */
            .card-body {
                padding: 22px 22px 18px 22px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;
                min-width: 0;
                overflow: hidden;
            }

            .card-tags {
                font-family: "Chakra Petch", sans-serif;
                font-size: 11px;
                font-weight: 500;
                color: #7A2CEF;
                display: flex;
                align-items: center;
                gap: 8px;
                letter-spacing: 0.05em;
            }

            .card-tags .dot {
                font-size: 10px;
                color: #7A2CEF;
            }

            .card-title {
                font-family: "Chakra Petch", sans-serif;
                font-size: 18px;
                font-weight: 500;
                color: #ffffff;
                margin-top: 4px;
                line-height: 24px;
                overflow-wrap: break-word;
                word-break: break-word;
            }

            .card-description {
                font-family: "Chakra Petch", sans-serif;
                font-size: 14px;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.8);
                margin-top: 6px;
                line-height: 20px;
                overflow-wrap: break-word;
                word-break: break-word;
            }

            .card-footer {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                margin-top: 10px;
            }

            .card-year {
                font-family: "Chakra Petch", sans-serif;
                font-size: 14px;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.5);
                transform: translateY(-6px);
            }

            /* Circular Arrow Button at bottom right of card */
            .card-arrow-btn {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background: transparent;
                border: 1px solid rgba(255, 255, 255, 0.2);
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.25s ease;
            }

            .chamfer-card:hover .card-arrow-btn {
                background: rgba(255, 255, 255, 0.8);
                border-color: rgba(255, 255, 255, 0.8);
                transform: scale(1.08);
            }

            .card-arrow-btn svg path {
                transition: stroke 0.25s ease;
            }

            .chamfer-card:hover .card-arrow-btn svg path {
                stroke: #000000;
            }

            /* ── "See More" Cut-Corner Button ── */
            .see-more-wrapper {
                margin-top: 38px;
                display: flex;
                justify-content: center;
            }

            .cut-button {
                position: relative;
                padding: 8px 22px;
                background: transparent;
                border: none;
                color: #ffffff;
                font-family: "Chakra Petch", sans-serif;
                font-size: 14px;
                font-weight: 500;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                cursor: pointer;
                text-decoration: none;
                transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease;
            }

            .cut-button-svg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
            }

            .cut-button-svg path {
                transition:
                    fill 220ms ease,
                    stroke 220ms ease,
                    opacity 220ms ease;
                fill: transparent;
                stroke: #ffffff;
                vector-effect: non-scaling-stroke;
            }

            .cut-button-arrow {
                transition: transform 220ms ease;
            }

            @media (hover: hover) {
                .see-more-wrapper .cut-button:hover {
                    transform: translateY(-2px);
                }

                .cut-button:hover .cut-button-svg path {
                    fill: rgba(255, 255, 255, 0.0864) !important;
                    stroke: #ffffff !important;
                    opacity: 1;
                }

                .cut-button:hover .cut-button-arrow {
                    transform: translate(1.5px, -1.5px);
                }

                .cut-button:hover {
                    color: #ffffff;
                }
            }

            .cut-button:active .cut-button-arrow {
                transform: translate(1.5px, -1.5px);
            }

            .cut-button:active .cut-button-svg path {
                fill: rgba(255, 255, 255, 0.0864) !important;
                stroke: #ffffff !important;
                opacity: 1;
            }

            .cut-button:active {
                color: #ffffff;
            }


            /* ── Tablet & Mid-Screen: 2 cards per row (501px to 1024px) ── */
            @media (max-width: 1024px) {
                .grid-outer-wrapper {
                    width: min(92vw, 860px);
                    padding: clamp(20px, 3.2vw, 32px);
                    box-sizing: border-box;
                }
                .cards-grid {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: clamp(12px, 2vw, 20px);
                }
                .chamfer-card {
                    container-type: inline-size;
                    min-width: 0;
                }
                .card-body {
                    min-width: 0;
                    overflow: hidden;
                    padding: clamp(10px, 5.2cqw, 24px);
                }
                .card-tags {
                    font-size: clamp(9px, 2.8cqw, 13px);
                    gap: clamp(4px, 1.8cqw, 8px);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .card-tags .dot {
                    font-size: clamp(8px, 2.2cqw, 11px);
                }
                .card-title {
                    font-size: clamp(13px, 5cqw, 22px);
                    line-height: clamp(16px, 6.5cqw, 28px);
                    margin-top: clamp(2px, 1.2cqw, 6px);
                }
                .card-description {
                    font-size: clamp(10.5px, 3.4cqw, 15.5px);
                    line-height: clamp(14px, 4.8cqw, 22px);
                    margin-top: clamp(3px, 1.5cqw, 8px);
                }
                .card-footer {
                    margin-top: clamp(6px, 2.2cqw, 14px);
                }
                .card-year {
                    font-size: clamp(10.5px, 3.4cqw, 15.5px);
                    transform: translateY(clamp(-3px, -1.2cqw, -6px));
                }
                .card-arrow-btn {
                    width: clamp(26px, 9.5cqw, 44px);
                    height: clamp(26px, 9.5cqw, 44px);
                    flex-shrink: 0;
                }
                .card-arrow-btn svg {
                    width: clamp(10px, 3.8cqw, 18px);
                    height: clamp(10px, 3.8cqw, 18px);
                }
                .section-badge-header {
                    width: min(92vw, 860px);
                    padding: 0;
                }
            }

            /* ── Responsive Section Spacing matching Works Single vertical position ── */
            @media (max-width: 1024px) {
                .section-badge-header {
                    margin-top: max(130px, calc(5vh + 36px + 58px));
                }
            }

            @media (orientation: landscape) and (max-width: 1024px) {
                .section-badge-header {
                    margin-top: calc(8.4svh + 36px + 54px) !important;
                }
            }

            @media (max-width: 768px) {
                .section-badge-header {
                    margin-top: max(120px, calc(4svh + 36px + 54px));
                }
                .chamfer-card:hover {
                    transform: none;
                }
                .see-more-wrapper {
                    margin-top: 28px;
                }
                .page-main-title {
                    font-size: clamp(22px, 5.5vw, 28px);
                    line-height: 1.25;
                    margin-top: 16px;
                    width: 100%;
                    max-width: 100%;
                    padding: 0 16px;
                    box-sizing: border-box;
                    text-wrap: normal;
                }
            }

            @media (max-width: 640px) {
                .section-badge-header {
                    margin-top: max(112px, calc(4svh + 36px + 48px));
                }
            }

            @media (max-width: 480px) {
                .section-badge-header {
                    margin-top: max(104px, calc(4svh + 36px + 42px));
                }
            }

            /* ── Mobile: 1 card per row (<=500px) — matches reference design ── */
            @media (max-width: 500px) {
                .grid-outer-wrapper {
                    margin-top: 24px;
                    width: min(92vw, 480px);
                    padding: 14px;
                }
                .section-badge-header {
                    width: min(92vw, 480px);
                    padding: 0;
                }
                .page-main-title {
                    font-size: clamp(21px, 6.2vw, 25px);
                    line-height: 1.25;
                    margin-top: 14px;
                    width: 100%;
                    max-width: 100%;
                    padding: 0 12px;
                    box-sizing: border-box;
                    text-wrap: normal;
                }
                .page-wrapper {
                    padding-bottom: 16px;
                }
                .outer-purple-border {
                    clip-path: polygon(
                        22px 0,
                        calc(100% - 22px) 0,
                        100% 22px,
                        100% calc(100% - 22px),
                        calc(100% - 22px) 100%,
                        22px 100%,
                        0 calc(100% - 22px),
                        0 22px
                    );
                }
                .outer-purple-border::after {
                    clip-path: polygon(
                        21px 0,
                        calc(100% - 21px) 0,
                        100% 21px,
                        100% calc(100% - 21px),
                        calc(100% - 21px) 100%,
                        21px 100%,
                        0 calc(100% - 21px),
                        0 21px
                    );
                }
                .cards-grid {
                    grid-template-columns: 1fr;
                    gap: 20px;
                }
                /* Reset card text/elements back to full size for single-column */
                .card-body {
                    padding: 22px 22px 18px 22px;
                }
                .card-tags {
                    font-size: 11px;
                    gap: 8px;
                    white-space: normal;
                    overflow: visible;
                    text-overflow: unset;
                }
                .card-tags .dot {
                    font-size: 10px;
                }
                .card-title {
                    font-size: 18px;
                    line-height: 24px;
                    margin-top: 4px;
                }
                .card-description {
                    font-size: 14px;
                    line-height: 20px;
                    margin-top: 6px;
                }
                .card-footer {
                    margin-top: 10px;
                }
                .card-year {
                    font-size: 14px;
                    transform: translateY(-6px);
                }
                .card-arrow-btn {
                    width: 36px;
                    height: 36px;
                }
                .card-arrow-btn svg {
                    width: 14px;
                    height: 14px;
                }
            }

            /* ── Ultra-small: lock card layout at 350px shape & scale down ── */
            @media (max-width: 350px) {
                .grid-outer-wrapper {
                    width: 322px; /* 92% of 350px — frozen layout */
                }
            }