/* Shared navigation and footer. Keep dimensions independent of inherited
   heading scales, and keep every link available on narrow/short screens. */
@media (min-width: 1101px) {
    .d9-body .d8-header .d8-map-nav {
        gap: 0;
    }
    .d9-body .d8-map-nav > .d9-nav-group {
        padding-inline: 0;
        margin-inline: 0;
    }
    .d9-body .d8-map-nav > .d9-nav-group > summary {
        padding-inline: 7px;
    }
    .d9-body .d8-header .d8-map-nav > :is(.d8-map-nav__theme, .d8-map-nav__search) {
        margin-inline: 0;
    }
}

.d9-body .d8-map-nav .d8-brand,
.d9-body .d8-header.is-scrolled .d8-map-nav .d8-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding-inline: 6px;
}
.d9-body .d8-brand .d8-brand__mark { flex: 0 0 auto; }
.d9-body .d8-brand .d9-brand-name { display: grid; gap: 1px; min-width: 0; text-align: start; }
.d9-body .d8-brand .d9-brand-name strong {
    color: #f1df9a;
    font-family: 'Zain', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
.d9-body .d8-brand .d9-brand-name small {
    display: block;
    color: #ced2c7;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .15px;
    white-space: nowrap;
    /* The line is dir="ltr", so its own "start" is the left edge and it drifted
       away from the Arabic above it. Pin it to the same right edge instead, so
       it reads as one stacked lockup. */
    text-align: right;
}
@media (min-width: 1401px) {
    .d9-body .d8-header > .d8-shell { width: min(1660px, calc(100% - 48px)); }
}

/* Large monitors. The header sits outside the page's zoom, so it has to grow
   on its own: a wider bar, and type and icon chips scaled with it, or the menu
   reads as a small strip lost at the top of a very wide screen. */
/* The logo lockup mirrors the header's: shown on every screen except the
   phone-width footer (≤900px, where the header itself switches to its
   hamburger menu — the site's own line between "phone" and everything else).
   The 1600px+ ladder further up just makes it bigger from there. */
@media (min-width: 901px) {
    .d9-body .d9-footer__intro { display: flex; align-items: center; gap: 12px; }
    /* Same golden halo as the header's .d8-brand__mark: a blurred radial-gradient
       glow behind the mark (::before) plus a matching drop-shadow on the image
       itself, so the footer logo isn't flat against the dark background. */
    .d9-body .d9-footer__brand-mark {
        position: relative;
        display: block;
        flex: 0 0 auto;
        width: 68px;
        height: 54px;
        clip-path: inset(0 -40px);
    }
    .d9-body .d9-footer__brand-mark::before {
        position: absolute;
        z-index: 0;
        inset: -9% -42%;
        display: block;
        content: "";
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 249, 226, .65), rgba(246, 230, 165, .4) 46%, rgba(246, 230, 165, .1) 78%, rgba(246, 230, 165, 0) 100%);
        filter: blur(2px);
        pointer-events: none;
    }
    .d9-body .d9-footer__brand-mark img {
        position: relative;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 0 2px rgba(255, 249, 226, .65)) drop-shadow(0 0 6px rgba(246, 230, 165, .4));
    }
}

/* From 1101px the header's own logo steps up in principle to 78x74 (its
   default, unscaled size) and holds there through 2299px — except the header
   has its own narrow-tablet exception below (1101-1400px: the map-nav brand
   rule shrinks it to 54x64 to make room), so the footer mirrors that dip too
   before matching 78x74 from 1401px onward. */
@media (min-width: 1101px) {
    .d9-body .d9-footer__intro { gap: 14px; }
    .d9-body .d9-footer__brand-mark { width: 78px; height: 74px; }
}

@media (min-width: 1101px) and (max-width: 1400px) {
    .d9-body .d9-footer__brand-mark { width: 54px; height: 64px; }
}


@media (min-width: 1600px) {
    .d9-body .d8-header > .d8-shell { width: min(1760px, calc(100% - 56px)); }
    .d9-body .d8-map-nav__item b,
    .d9-body .d9-nav-group__label b { font-size: 15px; }
    .d9-body .d8-map-nav__icon { width: 32px; height: 32px; }
    .d9-body .d8-map-nav__icon svg { width: 19px; height: 19px; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 15px; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 11px; }

}

@media (min-width: 2300px) {
    .d9-body .d8-header > .d8-shell { width: min(2200px, calc(100% - 72px)); }
    .d9-body .d8-map-nav,
    .d9-body .d8-header.is-scrolled .d8-map-nav { min-height: 104px; }
    .d9-body .d8-map-nav__item,
    .d9-body .d8-header.is-scrolled .d8-map-nav__item { min-height: 88px; }
    .d9-body .d8-map-nav__item b,
    .d9-body .d9-nav-group__label b { font-size: 16.5px; }
    .d9-body .d8-map-nav__icon { width: 36px; height: 36px; border-radius: 9px; }
    .d9-body .d8-map-nav__icon svg { width: 21px; height: 21px; }
    .d9-body .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-brand { width: 118px; min-width: 118px; min-height: 88px; }
    .d9-body .d8-brand .d8-brand__mark { width: 92px; height: 86px; }
    .d9-body .d8-brand .d9-brand-logo { height: 86px; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 17px; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 12px; }

    .d9-body .d9-footer__intro { gap: 18px; }
    .d9-body .d9-footer__brand-mark { width: 92px; height: 86px; }
    .d9-body .d9-footer__copy > span:first-child { font-size: 15px; }
    .d9-body .d9-footer--refined .d9-footer__copy > a { font-size: 29px; }
}

@media (min-width: 3000px) {
    .d9-body .d8-header > .d8-shell { width: min(2680px, calc(100% - 96px)); }
    .d9-body .d8-map-nav,
    .d9-body .d8-header.is-scrolled .d8-map-nav { min-height: 122px; }
    .d9-body .d8-map-nav__item,
    .d9-body .d8-header.is-scrolled .d8-map-nav__item { min-height: 104px; }
    .d9-body .d8-map-nav__item b,
    .d9-body .d9-nav-group__label b { font-size: 19px; }
    .d9-body .d8-map-nav__icon { width: 42px; height: 42px; border-radius: 11px; }
    .d9-body .d8-map-nav__icon svg { width: 25px; height: 25px; }
    .d9-body .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-brand { width: 140px; min-width: 140px; min-height: 104px; }
    .d9-body .d8-brand .d8-brand__mark { width: 110px; height: 102px; }
    .d9-body .d8-brand .d9-brand-logo { height: 102px; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 20px; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 14px; }

    .d9-body .d9-footer__intro { gap: 22px; }
    .d9-body .d9-footer__brand-mark { width: 110px; height: 102px; }
    .d9-body .d9-footer__copy > span:first-child { font-size: 17px; }
    .d9-body .d9-footer--refined .d9-footer__copy > a { font-size: 34px; }
}

@media (min-width: 3600px) {
    .d9-body .d8-header > .d8-shell { width: min(3200px, calc(100% - 112px)); }
    .d9-body .d8-map-nav__item b,
    .d9-body .d9-nav-group__label b { font-size: 21px; }
    .d9-body .d8-map-nav__icon { width: 46px; height: 46px; }
    .d9-body .d8-map-nav__icon svg { width: 27px; height: 27px; }

    .d9-body .d9-footer__intro { gap: 26px; }
    .d9-body .d9-footer__copy > span:first-child { font-size: 19px; }
    .d9-body .d9-footer--refined .d9-footer__copy > a { font-size: 38px; }
}
@media (min-width: 1101px) and (max-width: 1400px) {
    .d9-body .d8-header > .d8-shell { width: calc(100% - 32px); }
    .d9-body .d8-map-nav .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-map-nav .d8-brand { gap: 8px; margin-inline-end: 10px; padding-inline: 0; }
    .d9-body .d8-brand .d8-brand__mark { width: 54px; height: 64px; }
    .d9-body .d8-brand .d9-brand-logo { height: 64px; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 12px; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 8px; letter-spacing: 0; }
}
@media (max-width: 1100px) {
    .d9-body .d8-map-nav .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-map-nav .d8-brand { gap: 10px; margin: 0; padding-inline: 0; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 13px; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 9px; }
}
@media (max-width: 620px) {
    .d9-body .d8-map-nav .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-map-nav .d8-brand { gap: 7px; }
    .d9-body .d8-brand .d8-brand__mark { width: 44px; height: 50px; }
    .d9-body .d8-brand .d9-brand-logo { height: 50px; }
    .d9-body .d8-brand .d9-brand-name { gap: 0; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 12px; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 7px; letter-spacing: 0; }
}
@media (max-width: 440px) {
    .d9-body .d8-map-nav .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-map-nav .d8-brand { gap: 5px; }
    .d9-body .d8-brand .d8-brand__mark { width: 34px; height: 44px; }
    .d9-body .d8-brand .d9-brand-logo { height: 44px; }
    .d9-body .d8-brand .d9-brand-name { width: 112px; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 11px; white-space: normal; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 6px; }
}
@media (max-width: 340px) {
    .d9-body .d8-map-nav .d8-brand,
    .d9-body .d8-header.is-scrolled .d8-map-nav .d8-brand { gap: 4px; }
    .d9-body .d8-brand .d8-brand__mark { width: 30px; }
    .d9-body .d8-brand .d9-brand-name { width: 90px; }
    .d9-body .d8-brand .d9-brand-name strong { font-size: 10px; }
    .d9-body .d8-brand .d9-brand-name small { font-size: 6px; white-space: normal; }
}

.d9-body .d8-drawer {
    width: min(380px, calc(100vw - 28px));
    max-height: 100dvh;
    padding: max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(216, 189, 97, .4) transparent;
    background: radial-gradient(ellipse at top right, rgba(216, 189, 97, .09), transparent 55%), #101f17;
    box-shadow: -16px 0 64px rgba(0, 0, 0, .3);
}

.d9-body .d8-drawer::before { display: none; }
.d9-body .d8-drawer::after { width: 2px; height: 100%; background: var(--d9-gold, #d8bd61); opacity: .5; }
.d9-body .d8-drawer__fabric { opacity: .035; pointer-events: none; }
.d9-body .d8-drawer__head { gap: 14px; margin-bottom: 18px; padding-bottom: 20px; }
.d9-body .d8-drawer__head > div { gap: 6px; min-width: 0; }
.d9-body .d8-drawer__head span { font-size: 13px; line-height: 1.6; color: #bcc6bd; }
.d9-body .d8-drawer__head strong { font-family: 'Zain', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; }
.d9-body .d8-drawer__head button { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; }
.d9-body .d8-drawer nav { grid-template-columns: minmax(0, 1fr); gap: 5px; }
.d9-body .d8-drawer nav > a,
.d9-body .d9-drawer-group summary {
    grid-template-columns: 24px minmax(0, 1fr) 26px;
    min-height: 48px;
    gap: 10px;
    padding: 7px 10px;
    color: #e3e9e2;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 17px;
    line-height: 1.5;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.d9-body .d8-drawer nav a b,
.d9-body .d9-drawer-group summary b {
    font-family: 'Zain', sans-serif;
    font-size: 17px;
    font-weight: 500;
    overflow: visible;
    white-space: normal;
}
.d9-body .d8-drawer nav a span,
.d9-body .d9-drawer-group summary span { color: #d8bd61; font-size: 12px; }
.d9-body .d8-drawer nav a i,
.d9-body .d9-drawer-group summary i { width: 26px; height: 26px; font-size: 15px; border: 0; color: #b7c1b9; }
.d9-body .d8-drawer nav > a:hover,
.d9-body .d8-drawer nav > a:focus-visible,
.d9-body .d8-drawer nav a[aria-current="page"],
.d9-body .d9-drawer-group summary:hover,
.d9-body .d9-drawer-group[open] summary {
    padding-inline: 10px;
    color: #f5e3a0;
    background: rgba(216, 189, 97, .09);
    border-color: rgba(216, 189, 97, .17);
}
.d9-body .d8-drawer nav .d9-drawer-group > div {
    margin: 5px 12px 8px 0;
    padding: 0 14px 0 0;
    border: 0;
    border-inline-start: 1px solid rgba(216, 189, 97, .25);
    background: transparent;
}
.d9-body .d8-drawer nav .d9-drawer-group > div a {
    min-height: 44px;
    padding: 7px 10px;
    color: #d1dbd1;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: 'Zain', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.d9-body .d8-drawer nav .d9-drawer-group > div a:hover,
.d9-body .d8-drawer nav .d9-drawer-group > div a[aria-current="page"] { color: #f5e3a0; background: rgba(216, 189, 97, .09); }
.d9-body .d8-drawer__foot { display: block; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.d9-body .d8-drawer__foot p { color: #aebbad; font-size: 13px; line-height: 1.7; }
.d9-body .d9-nav-submenu { padding: 8px; border-radius: 12px; }
.d9-body .d9-nav-submenu a { min-height: 42px; border-radius: 6px; font-size: 16px; line-height: 1.6; }
.d9-body .d8-drawer :is(a, button, summary):focus-visible,
.d9-body .d9-nav-submenu a:focus-visible,
.d9-body .d9-nav-group > summary:focus-visible,
.d9-body .d8-mobile-actions button:focus-visible,
.d9-footer--refined a:focus-visible { outline: 2px solid #d8bd61; outline-offset: 3px; }

.d9-footer--refined {
    position: relative;
    overflow: hidden;
    padding-block: 42px 0;
    border-top: 1px solid rgba(216, 189, 97, .32);
    background: #0d1b14;
    color: #dde5db;
}
.d9-footer--refined .d8-footer__fabric { opacity: .04; pointer-events: none; }
.d9-footer__layout,
.d9-footer__base { position: relative; z-index: 1; }
.d9-footer__layout { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 28px; padding-block: 0 30px; }
.d9-footer__intro { display: grid; align-content: start; gap: 6px; }
/* The logo mark is large-screen only (see the 1600px+ ladder below); it stays
   out of the flow everywhere else so the text column's own layout is untouched. */
.d9-footer__brand-mark { display: none; }
.d9-footer__copy { display: grid; align-content: start; gap: 6px; }
.d9-footer__copy > span:first-child { color: #b9c5b8; font-size: 14px; line-height: 1.7; }
.d9-footer--refined .d9-footer__copy > a { width: fit-content; color: #f3ecce; font-family: 'Zain', sans-serif; font-size: 26px; font-weight: 700; line-height: 1.5; }
.d9-footer__rule { display: block; width: 44px; height: 2px; margin-top: 12px; background: #d8bd61; }
.d9-footer__group { display: grid; align-content: start; justify-items: start; gap: 2px; min-width: 0; }
.d9-footer--refined .d9-footer__group h2 { margin: 0 0 10px; color: #f5e3a0; font-family: 'Zain', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.6; }
.d9-footer--refined .d9-footer__group > a { display: inline-flex; align-items: center; min-height: 32px; max-width: 100%; color: #c4cfc1; font-family: 'Zain', sans-serif; font-size: 16px; line-height: 1.6; transition: color .2s ease; }
.d9-footer--refined a:hover { color: #fff6d6; }
.d9-footer__base { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.d9-footer__base p { margin: 0; color: #abb9a9; font-size: 14px; line-height: 1.7; }
.d9-footer--refined .d9-footer__back { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: #d5dfd1; font-size: 14px; line-height: 1.5; }
.d9-footer__back svg { width: 34px; height: 34px; padding: 7px; border: 1px solid rgba(216, 189, 97, .3); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.d9-footer--refined a { text-decoration: none; }
.d9-footer__credit a { color: inherit; }
.d9-footer--legacy { font-family: 'Zain', sans-serif; }
.d9-footer--legacy > .d8-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.d9-footer--legacy .d8-footer__fabric { display: none; }

@media (max-width: 1040px) {
    .d9-footer__layout { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
    .d9-footer__intro { grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .d9-footer__rule { display: none; }
}


@media (max-width: 620px) {
    /* Phones: a simple footer — the brand line and the copyright row only;
       the link columns are dropped (the menu drawer already lists them). */
    .d9-footer--refined { padding-top: 22px; }
    .d9-footer__layout { display: block; padding-bottom: 0; }
    .d9-footer__group { display: none; }
    .d9-footer__intro { padding-bottom: 16px; gap: 2px; border-bottom: 0; text-align: center; justify-items: center; }
    .d9-footer__copy { gap: 2px; justify-items: center; }
    .d9-footer__copy > span:first-child { font-size: 12px; line-height: 1.5; }
    .d9-footer--refined .d9-footer__copy > a { font-size: 19px; line-height: 1.4; }
    .d9-footer__rule { display: block; margin: 8px auto 0; width: 36px; }
    .d9-footer__base { gap: 8px 12px; flex-wrap: wrap; justify-content: center; padding-block: 12px; text-align: center; }
    .d9-footer__base p,
    .d9-footer--refined .d9-footer__back { font-size: 12px; }
    .d9-footer__back svg { width: 28px; height: 28px; padding: 6px; }
}
}

@media (max-height: 560px) {
    .d9-body .d8-drawer { padding-block: 14px; }
    .d9-body .d8-drawer__head { margin-bottom: 10px; padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .d9-body .d8-drawer,
    .d9-body .d8-drawer nav a,
    .d9-body .d9-drawer-group summary,
    .d9-footer--refined a { transition: none; }
}

/* Desktop menu labels: 14px at weight 800 (13px on the 1101-1220 band). */
@media (min-width: 1101px) {
    .d9-body .d8-map-nav__item b,
    .d9-body .d9-nav-group__label b {
        font-size: 14px;
        font-weight: 800;
    }
}

@media (min-width: 1101px) and (max-width: 1220px) {
    .d9-body .d8-map-nav__item b,
    .d9-body .d9-nav-group__label b {
        font-size: 13px;
    }
}