/*
 * Roya shape / شيب رؤية — reusable on any div, card or section.
 * Usage: <div class="roya-shape">...</div>
 * Custom cut: style="--roya-cut-x: 40px; --roya-cut-y: 34px"
 * The cut is always on the bottom-left, matching the brand buttons.
 */
:root,
.roya-shape,
.site-primary-button,
.site-secondary-button,
.nav-project-button {
    --roya-shape: polygon(0 0, 100% 0, 100% 100%, var(--roya-cut-x, 14px) 100%, 0 calc(100% - var(--roya-cut-y, 12px)));
}

.roya-shape {
    border-radius: 0 !important;
    clip-path: var(--roya-shape);
}

/* Existing component sizes. Set the custom properties to choose another size. */
.site-primary-button, .site-secondary-button, .nav-project-button { --roya-cut-x: 14px; --roya-cut-y: 12px; }
.feedback-card.roya-shape, .work-item.roya-shape { --roya-cut-x: 32px; --roya-cut-y: 28px; }
.contact-column.roya-shape { --roya-cut-x: 44px; --roya-cut-y: 38px; }