/* UAE-only mobile hero correction.
 * The existing UAE page styles had fixed 280px title/subtitle widths and
 * compact 20px/13px type, which compressed the hero on narrow screens.
 */
@media (max-width: 767.98px) {
    .sd-page-hero--uae {
        min-height: 0;
        padding: calc(var(--nav-height) + 3rem) 0 3.25rem;
    }

    .sd-page-hero--uae .container,
    .sd-page-hero--uae .sd-page-hero-content {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        padding-inline: 18px;
        width: 100%;
    }

    .sd-page-hero--uae .sd-page-hero-eyebrow {
        font-size: 10px;
        letter-spacing: .14em;
        line-height: 1.4;
        margin-bottom: 1rem;
        max-width: 100%;
        white-space: normal;
    }

    .sd-page-hero--uae .sd-page-hero-eyebrow::before,
    .sd-page-hero--uae .sd-page-hero-eyebrow::after {
        width: 20px;
    }

    .sd-page-hero--uae .sd-page-hero-title {
        box-sizing: border-box;
        display: block;
        font-size: clamp(28px, 7.6vw, 38px) !important;
        line-height: 1.12;
        letter-spacing: -.035em;
        margin: 0 auto !important;
        max-width: 100% !important;
        overflow-wrap: normal;
        text-align: center !important;
        text-wrap: balance;
        white-space: normal !important;
        width: auto !important;
        word-break: normal;
    }

    .sd-page-hero--uae .sd-page-hero-title::after {
        height: 3px;
        margin: 1rem auto 0;
        width: 44px;
    }

    .sd-page-hero--uae .sd-page-hero-subtitle {
        box-sizing: border-box;
        font-size: 15px !important;
        line-height: 1.55;
        margin: 1rem auto 0 !important;
        max-width: 680px !important;
        overflow-wrap: normal;
        padding-inline: 0;
        text-align: center !important;
        width: auto !important;
        word-break: normal;
    }

    .sd-page-hero--uae .sd-breadcrumb {
        margin: 1rem auto 0;
        max-width: 100%;
        overflow: visible;
        width: 100%;
    }

    .sd-page-hero--uae .sd-breadcrumb .breadcrumb {
        align-items: center;
        display: flex !important;
        flex-wrap: wrap;
        gap: .15rem .35rem;
        justify-content: center;
        margin: 0;
        max-width: 100%;
        overflow: visible;
        padding: 0;
    }

    .sd-page-hero--uae .sd-breadcrumb .breadcrumb-item,
    .sd-page-hero--uae .sd-breadcrumb .breadcrumb-item.active {
        display: inline-flex !important;
        flex: 0 1 auto;
        font-size: 12px !important;
        line-height: 1.4;
        margin: 0;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        text-align: center;
        white-space: normal;
        width: auto;
        word-break: normal !important;
    }

    .sd-page-hero--uae .sd-breadcrumb .breadcrumb-item.active {
        color: var(--uae-accent);
    }

    .sd-page-hero--uae .sd-breadcrumb .breadcrumb-item.active::after {
        display: block;
        font-size: 12px;
        line-height: 1.4;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .sd-page-hero--uae .sd-page-hero-grid {
        inset: -12%;
        opacity: .2;
        transform: perspective(700px) rotateX(58deg) scale(1.12) translateY(18%);
    }

    .sd-page-hero--uae .sd-page-hero-beams {
        inset: -8%;
        opacity: .24;
    }

    .sd-page-hero--uae .sd-page-hero-data {
        opacity: .34;
    }
}

@media (max-width: 359.98px) {
    .sd-page-hero--uae {
        padding-top: calc(var(--nav-height) + 2.5rem);
        padding-bottom: 2.75rem;
    }

    .sd-page-hero--uae .container,
    .sd-page-hero--uae .sd-page-hero-content {
        padding-inline: 14px;
    }

    .sd-page-hero--uae .sd-page-hero-eyebrow {
        font-size: 9px;
        letter-spacing: .1em;
    }

    .sd-page-hero--uae .sd-page-hero-title {
        font-size: 27px !important;
        line-height: 1.1;
    }

    .sd-page-hero--uae .sd-page-hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5;
    }

    .sd-page-hero--uae .sd-breadcrumb .breadcrumb-item,
    .sd-page-hero--uae .sd-breadcrumb .breadcrumb-item.active,
    .sd-page-hero--uae .sd-breadcrumb .breadcrumb-item.active::after {
        font-size: 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sd-page-hero--uae .sd-page-hero-grid,
    .sd-page-hero--uae .sd-page-hero-beams,
    .sd-page-hero--uae .sd-page-hero-data {
        transform: none;
    }
}