/* Page hero — desktop 1280×400; mobile/tablet Figma 240:12938 (390×623) */

.navid-page-hero {
    --navid-page-hero-ref-w: 1280;
    --navid-page-hero-ref-h: 400;
    --navid-page-hero-diagonal-offset: 384;
    margin-top: var(--navid-page-hero-gap, 24px);
    margin-bottom: 40px;
}

@media (max-width: 991.98px) {
    .navid-page-hero {
        margin-top: 0;
        margin-bottom: 24px;
    }
}

.navid-page-hero__breakout {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ── Desktop (lg+) — frozen layout ── */
.navid-page-hero__frame--desktop {
    container-type: inline-size;
    container-name: navid-page-hero;
    width: 100%;
    aspect-ratio: 1280 / 400;
    height: auto;
}

.navid-page-hero__frame--desktop .navid-page-hero__slide {
    --navid-page-hero-edge: calc(12 / var(--navid-page-hero-ref-w) * 100cqw);
    --navid-page-hero-seam: calc(3 / var(--navid-page-hero-ref-w) * 100cqw);
    --navid-page-hero-strip-half: calc(
        (var(--navid-page-hero-edge) + var(--navid-page-hero-seam)) / 2
    );
    --navid-page-hero-diagonal-x: calc(
        40% +
            (
                var(--navid-page-hero-diagonal-offset) /
                    var(--navid-page-hero-ref-h)
            ) *
            100cqh
    );
    container-type: size;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--navid-white, #fff);
}

.navid-page-hero__frame--desktop .navid-page-hero__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    clip-path: polygon(
        0 0,
        calc(var(--navid-page-hero-diagonal-x) - var(--navid-page-hero-strip-half))
            0,
        calc(40% - var(--navid-page-hero-strip-half)) 100%,
        0 100%
    );
    transform: translateZ(0);
    backface-visibility: hidden;
}

.navid-page-hero__frame--desktop .navid-page-hero__image--fallback {
    background: var(--navid-tertiary, #ededee);
    clip-path: none;
}

.navid-page-hero__frame--desktop .navid-page-hero__shape {
    position: absolute;
    inset: 0;
    z-index: 2;
    isolation: isolate;
    pointer-events: none;
}

.navid-page-hero__frame--desktop .navid-page-hero__shape-edge {
    position: absolute;
    inset: 0;
    background: var(--navid-white, #fff);
    clip-path: polygon(
        calc(40% - var(--navid-page-hero-strip-half)) 100%,
        calc(40% + var(--navid-page-hero-strip-half)) 100%,
        calc(var(--navid-page-hero-diagonal-x) + var(--navid-page-hero-strip-half))
            0,
        calc(var(--navid-page-hero-diagonal-x) - var(--navid-page-hero-strip-half))
            0
    );
    transform: translateZ(0);
    backface-visibility: hidden;
}

.navid-page-hero__frame--desktop .navid-page-hero__shape-fill {
    position: absolute;
    inset: -4px;
    background: var(--navid-tertiary, #ededee);
    clip-path: polygon(
        calc(var(--navid-page-hero-diagonal-x) + var(--navid-page-hero-strip-half))
            0,
        calc(100% + 4px) -4px,
        calc(100% + 4px) calc(100% + 4px),
        calc(40% + var(--navid-page-hero-strip-half)) calc(100% + 4px)
    );
    transform: translateZ(0);
    backface-visibility: hidden;
}

.navid-page-hero__frame--desktop .navid-page-hero__panel {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 calc(40 / var(--navid-page-hero-ref-h) * 100cqh);
    box-sizing: border-box;
    pointer-events: none;
}

.navid-page-hero__frame--desktop .navid-page-hero__panel-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(24 / var(--navid-page-hero-ref-w) * 100cqw);
    width: 100%;
    max-width: calc(
        var(--navid-content-width) + (2 * var(--navid-container-padding))
    );
    margin: 0 auto;
    padding: 0 var(--navid-container-padding);
    box-sizing: border-box;
    pointer-events: auto;
    direction: rtl;
    text-align: right;
}

.navid-page-hero__frame--desktop .navid-page-hero__panel-inner > * {
    width: calc(403 / var(--navid-page-hero-ref-w) * 100cqw);
    max-width: 403px;
    margin: 0;
}

.navid-page-hero__frame--desktop .navid-page-hero__title-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    justify-content: flex-start;
    gap: calc(24 / var(--navid-page-hero-ref-w) * 100cqw);
}

.navid-page-hero__frame--desktop .navid-page-hero__accent {
    width: calc(4 / var(--navid-page-hero-ref-w) * 100cqw);
    flex-shrink: 0;
    background: var(--navid-primary, #f3703a);
    border-radius: calc(2 / var(--navid-page-hero-ref-w) * 100cqw);
}

.navid-page-hero__frame--desktop .navid-page-hero__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--navid-secondary, #003663);
    font-size: calc(40 / var(--navid-page-hero-ref-w) * 100cqw);
    font-weight: 500;
    line-height: 1.2;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
}

.navid-page-hero__frame--desktop .navid-page-hero__subtitle {
    margin: 0;
    width: 100%;
    color: var(--navid-gray, #6c7580);
    font-size: calc(16 / var(--navid-page-hero-ref-w) * 100cqw);
    font-weight: 400;
    line-height: 1.75;
    text-align: justify;
    overflow-wrap: anywhere;
}

/* ── Mobile / tablet (<992px) — Figma 240:12938, 390×623 artboard ── */
@media (max-width: 991.98px) {
    .navid-page-hero__frame--mobile {
        --navid-page-hero-mobile-ref-w: 390;
        --navid-page-hero-mobile-ref-h: 623;
        --navid-page-hero-mobile-max-h: none;
        container-type: inline-size;
        container-name: navid-page-hero-mobile;
        aspect-ratio: var(--navid-page-hero-mobile-ref-w) /
            var(--navid-page-hero-mobile-ref-h);
        width: 100%;
        max-height: var(--navid-page-hero-mobile-max-h);
        height: auto;
    }

    /* Short viewports (iPhone SE) — cap height, keep full width */
    @media (max-width: 389.98px) {
        .navid-page-hero__frame--mobile {
            --navid-page-hero-mobile-max-h: 72dvh;
        }
    }

    /* Tablets (iPad Mini / Air) — aspect-ratio at full width makes hero too tall */
    @media (min-width: 744px) and (max-width: 991.98px) {
        .navid-page-hero__frame--mobile {
            --navid-page-hero-mobile-max-h: 58dvh;
        }
    }

    .navid-page-hero__frame--mobile .navid-page-hero__slide {
        --navid-page-hero-edge: calc(
            12 / var(--navid-page-hero-mobile-ref-w) * 100cqw
        );
        --navid-page-hero-seam: calc(
            3 / var(--navid-page-hero-mobile-ref-w) * 100cqw
        );
        --navid-page-hero-strip-half: calc(
            (var(--navid-page-hero-edge) + var(--navid-page-hero-seam)) / 2
        );
        --navid-page-hero-mobile-shape-top: calc(
            12 / var(--navid-page-hero-mobile-ref-h) * 100cqh
        );
        --navid-page-hero-mobile-cut-x: calc(
            12cqw + 395 / var(--navid-page-hero-mobile-ref-w) * 100cqw
        );
        --navid-page-hero-mobile-base: -10cqw;
        --navid-page-hero-mobile-bleed: calc(
            3 / var(--navid-page-hero-mobile-ref-w) * 100cqw
        );
        --navid-page-hero-mobile-content-width: min(
            calc(278 / var(--navid-page-hero-mobile-ref-w) * 100cqw),
            calc(
                100% -
                    (
                        2 * 16 / var(--navid-page-hero-mobile-ref-w) * 100cqw
                    )
            )
        );
        container-type: size;
        position: relative;
        width: 100%;
        height: 100%;
        background: var(--navid-white, #fff);
        overflow: hidden;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__image {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-position: 28% center;
        background-size: cover;
        background-repeat: no-repeat;
        clip-path: polygon(
            0 0,
            100% 0,
            100% var(--navid-page-hero-mobile-shape-top),
            calc(
                    var(--navid-page-hero-mobile-cut-x) -
                        var(--navid-page-hero-strip-half)
                )
                var(--navid-page-hero-mobile-shape-top),
            calc(
                    var(--navid-page-hero-mobile-base) -
                        var(--navid-page-hero-strip-half)
                )
                100%,
            0 100%
        );
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__image--mobile {
        display: none;
    }

    .navid-page-hero__frame--mobile.navid-page-hero__frame--mobile-art
        .navid-page-hero__image--primary {
        display: none;
    }

    .navid-page-hero__frame--mobile.navid-page-hero__frame--mobile-art
        .navid-page-hero__image--mobile {
        display: block;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__image--fallback {
        background: var(--navid-tertiary, #ededee);
        clip-path: polygon(
            0 0,
            100% 0,
            100% var(--navid-page-hero-mobile-shape-top),
            calc(
                    var(--navid-page-hero-mobile-cut-x) -
                        var(--navid-page-hero-strip-half)
                )
                var(--navid-page-hero-mobile-shape-top),
            calc(
                    var(--navid-page-hero-mobile-base) -
                        var(--navid-page-hero-strip-half)
                )
                100%,
            0 100%
        );
    }

    .navid-page-hero__frame--mobile .navid-page-hero__shape {
        position: absolute;
        inset: 0;
        z-index: 2;
        isolation: isolate;
        pointer-events: none;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__shape-edge {
        position: absolute;
        inset: 0;
        background: var(--navid-white, #fff);
        clip-path: polygon(
            calc(
                    var(--navid-page-hero-mobile-base) -
                        var(--navid-page-hero-strip-half)
                )
                100%,
            calc(
                    var(--navid-page-hero-mobile-base) +
                        var(--navid-page-hero-strip-half)
                )
                100%,
            calc(
                    var(--navid-page-hero-mobile-cut-x) +
                        var(--navid-page-hero-strip-half)
                )
                var(--navid-page-hero-mobile-shape-top),
            calc(
                    var(--navid-page-hero-mobile-cut-x) -
                        var(--navid-page-hero-strip-half)
                )
                var(--navid-page-hero-mobile-shape-top)
        );
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__shape-fill {
        position: absolute;
        inset: calc(-1 * var(--navid-page-hero-mobile-bleed));
        background: var(--navid-tertiary, #ededee);
        clip-path: polygon(
            calc(
                    var(--navid-page-hero-mobile-cut-x) +
                        var(--navid-page-hero-strip-half)
                )
                var(--navid-page-hero-mobile-shape-top),
            calc(100% + var(--navid-page-hero-mobile-bleed))
                var(--navid-page-hero-mobile-shape-top),
            calc(100% + var(--navid-page-hero-mobile-bleed))
                calc(100% + var(--navid-page-hero-mobile-bleed)),
            calc(
                    var(--navid-page-hero-mobile-base) +
                        var(--navid-page-hero-strip-half)
                )
                calc(100% + var(--navid-page-hero-mobile-bleed))
        );
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__panel {
        position: absolute;
        inset: 0;
        z-index: 3;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0
            calc(16 / var(--navid-page-hero-mobile-ref-w) * 100cqw)
            calc(28 / var(--navid-page-hero-mobile-ref-h) * 100cqh);
        box-sizing: border-box;
        pointer-events: none;
        direction: rtl;
        text-align: right;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__panel-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: calc(16 / var(--navid-page-hero-mobile-ref-w) * 100cqw);
        width: var(--navid-page-hero-mobile-content-width);
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        pointer-events: auto;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__panel-inner > * {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__title-wrap {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-end;
        gap: 0;
        width: 100%;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__accent {
        width: calc(4 / var(--navid-page-hero-mobile-ref-w) * 100cqw);
        flex-shrink: 0;
        align-self: stretch;
        background: var(--navid-primary, #f3703a);
        border-radius: calc(2 / var(--navid-page-hero-mobile-ref-w) * 100cqw);
    }

    .navid-page-hero__frame--mobile .navid-page-hero__title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding-inline-start: calc(
            16 / var(--navid-page-hero-mobile-ref-w) * 100cqw
        );
        color: var(--navid-secondary, #003663);
        font-size: calc(24 / var(--navid-page-hero-mobile-ref-w) * 100cqw);
        font-weight: 500;
        line-height: normal;
        text-align: right;
        white-space: pre-line;
    }

    .navid-page-hero__frame--mobile .navid-page-hero__subtitle {
        margin: 0;
        width: 100%;
        max-width: none;
        color: var(--navid-gray, #6c7580);
        font-size: calc(12 / var(--navid-page-hero-mobile-ref-w) * 100cqw);
        font-weight: 400;
        line-height: normal;
        text-align: justify;
    }
}

/* Page body below hero — Figma 127:13751 (900px column, 1280 grid) */
.navid-page-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 104px;
    padding: 0 var(--navid-container-padding, 16px);
    color: var(--navid-gray, #6c7580);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    text-align: justify;
    overflow-wrap: anywhere;
    word-break: normal;
}

.navid-page-content h2,
.navid-page-content h3,
.navid-page-content h4 {
    color: var(--navid-secondary, #003663);
    font-weight: 500;
    text-align: right;
}

.navid-page-content h2,
.navid-page-content h3 {
    font-size: 24px;
    line-height: 1.4;
    margin: 0 0 16px;
}

.navid-page-content h4 {
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 12px;
}

.navid-page-content p {
    margin: 0 0 16px;
}

.navid-page-content > *:last-child,
.navid-page-content p:last-child {
    margin-bottom: 0;
}

.navid-page-content ul,
.navid-page-content ol {
    margin: 0 0 16px;
    padding-right: 20px;
}

.navid-page-content li + li {
    margin-top: 8px;
}

.navid-page-content img,
.navid-page-content video,
.navid-page-content iframe {
    max-width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .navid-page .main-container {
        max-width: calc(
            var(--navid-content-width) + (2 * var(--navid-container-padding))
        );
    }

    .navid-page-content {
        padding: 64px 0 0;
    }

    .navid-page-content h2,
    .navid-page-content h3 {
        display: block;
        min-height: 48px;
        padding: 4px 0;
    }
}

.navid-page--contact .content-box-container {
    margin-top: 0;
}