/* ============================================================
   DBIM - DIGITAL BRAND IDENTITY MANUAL
   Single stylesheet for: font, type scale, colour tokens,
   DBIM icons, accessibility panel + modes, footer.
   Loaded after every other stylesheet (see header.blade.php).
============================================================ */


/* ============================================================
   1. FONT - NOTO SANS (DBIM)
============================================================ */

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   2. TOKENS
   Type scale: DBIM Table 3 (desktop) / Table 4 (mobile).
   --hkux-font-scale is set by accessibility.js (Text size).
============================================================ */

:root {

    /* Colour - primary palette */
    --hkux-blue: #162f6a;
    --hkux-blue-dark: #162f6a;
    --dbim-navy: #162f6a;
    --dbim-navy-hover: #214aab;
    --dbim-white: #ffffff;
    --dbim-text: #150202;
    /* Deep Earthy Brown */
    --dbim-border: #c9d1e3;
    --dbim-surface-soft: #dbe4ff;
    --dbim-focus: #214aab;

    /* Font */
    --dbim-font: 'Noto Sans', 'Segoe UI', Arial, sans-serif;

    /* Scale */
    --hkux-font-scale: 1;

    --fs-h1: calc(36px * var(--hkux-font-scale));
    --fs-h2: calc(24px * var(--hkux-font-scale));
    --fs-h3: calc(20px * var(--hkux-font-scale));
    --fs-p1: calc(16px * var(--hkux-font-scale));
    --fs-p2: calc(14px * var(--hkux-font-scale));
    --fs-sm: calc(12px * var(--hkux-font-scale));

    /* Line height 1.2 - 1.5 x type size */
    --lh-heading: 1.25;
    --lh-body: 1.5;
}

@media (max-width: 767.98px) {

    :root {
        --fs-h1: calc(24px * var(--hkux-font-scale));
        --fs-h2: calc(20px * var(--hkux-font-scale));
        --fs-h3: calc(16px * var(--hkux-font-scale));
        --fs-p1: calc(14px * var(--hkux-font-scale));
        --fs-p2: calc(12px * var(--hkux-font-scale));
        --fs-sm: calc(10px * var(--hkux-font-scale));
    }

}


/* ============================================================
   3. GLOBAL TYPOGRAPHY
   Noto Sans everywhere except icon fonts.
============================================================ */

body,
button,
input,
select,
textarea,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.icon):not([class*="fa-"]):not(.dbim-icon) {
    font-family: var(--dbim-font) !important;
}

body {
    font-size: var(--fs-p1) !important;
    line-height: var(--lh-body);
    color: var(--dbim-text);
    font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: var(--lh-heading);
    font-weight: 700;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3,
h4 {
    font-size: var(--fs-h3);
}

h5,
h6 {
    font-size: var(--fs-p1);
}

p,
li,
td,
th,
label,
a {
    line-height: var(--lh-body);
}

small {
    font-size: var(--fs-sm);
}


/* ------------------------------------------------------------
   3.1 Existing components mapped to the nearest DBIM size.
   (Replaces the old per-class px * scale block in header.blade)
------------------------------------------------------------ */

/* Heading 1 */
.hkux-inner-page h1 {
    font-size: var(--fs-h1) !important;
}

/* Heading 2 */
.hkux-header__title,
.hkux-newsroom-heading h2,
.hkux-services-header h2,
.hkux-media-heading h2,
.hkux-resource-title,
.hkux-social-title,
.hkux-contact-title,
.hkux-emergency-phone strong,
.hkux-inner-page h2 {
    font-size: var(--fs-h2) !important;
}

/* Heading 3 / subtitle */
.hkux-links-card-header h3,
.hkux-featured-content h3,
.hkux-desk-quote,
.hkux-events-placeholder h3,
.hkux-side-nav__header,
.hkux-inner-page h3 {
    font-size: var(--fs-h3) !important;
}

/* Paragraph 1 */
.hkux-header__subtitle,
.hkux-news-title,
.hkux-service-content h3,
.hkux-small-media-content h3,
.hkux-desk-name h3,
.hkux-social-platform h3,
.hkux-link-row,
.hkux-side-nav__link,
.hkux-gallery-title,
.hkux-imp-link,
.imp-link-card-new,
.hkux-form input,
.hkux-form select,
.hkux-form textarea,
.hkux-inner-page p,
.hkux-inner-page li,
.hkux-inner-page td,
.hkux-inner-page th,
.hkux-inner-page a,
.hkux-rich-content p,
.hkux-rich-content li,
.hkux-rich-content td,
.hkux-rich-content th,
.hkux-rich-content a {
    font-size: var(--fs-p1) !important;
}

/* Paragraph 2 */
.hkux-topbar__link,
.hkux-topbar__separator,
.hkux-header__search-input,
.hkux-header__app-label,
.hkux-nav-link,
.hkux-menu-link,
.hkux-navigation a,
.hkux-date span,
.hkux-featured-date,
.hkux-small-media-date,
.hkux-desk-description,
.hkux-contact-value,
.hkux-contact-label,
.hkux-map-location-card strong,
.hkux-breadcrumb,
.hkux-breadcrumb a,
.hkux-breadcrumb span,
.hkux-toggle-label,
.imp-link-text-new,
.hkux-emergency-heading,
.hkux-table,
.hkux-table th,
.hkux-table td,
.hkux-form label,
.hkux-links-card-header p,
.hkux-service-content p,
.hkux-news-meta,
.hkux-emergency-text,
.hkux-resource-description,
.hkux-social-description,
.hkux-contact-description,
.hkux-events-placeholder p,
.hkux-social-platform p,
.hkux-gallery-date,
.hkux-lang-panel-title,
.hkux-lang-item {
    font-size: var(--fs-p2) !important;
}

/* Small text */
.hkux-eyebrow,
.hkux-desk-eyebrow,
.hkux-media-eyebrow,
.hkux-resource-eyebrow,
.hkux-social-eyebrow,
.hkux-contact-eyebrow,
.hkux-inner-eyebrow,
.hkux-news-tab,
.hkux-media-tab,
.hkux-social-tab,
.hkux-date small,
.hkux-new-badge,
.hkux-media-new-badge,
.hkux-small-new,
.hkux-showing,
.hkux-view-all,
.hkux-media-view-all,
.hkux-resource-view-all,
.hkux-gallery-view-more,
.hkux-social-view,
.hkux-social-helper,
.hkux-desk-btn,
.hkux-service-link,
.hkux-emergency-phone span,
.hkux-map-location-card span,
.hkux-desk-name p {
    font-size: var(--fs-sm) !important;
}

/* Header title wraps on very small screens */
@media (max-width: 575.98px) {
    .hkux-header__title {
        font-size: var(--fs-h3) !important;
    }
}


/* ============================================================
   4. DBIM ICONS
   SVGs live in public_files/assets/images/dbim_icons
   (copied from D:\DBIM\Icons). Rendered as a mask so the icon
   follows the text colour - needed for active / dark states.
============================================================ */

.dbim-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--dbim-icon-url) center / contain no-repeat;
    mask: var(--dbim-icon-url) center / contain no-repeat;
}

.dbim-icon--accessibility {
    --dbim-icon-url: url('../images/dbim_icons/accessibility.svg');
}

.dbim-icon--language {
    --dbim-icon-url: url('../images/dbim_icons/language.svg');
}

.dbim-icon--search {
    --dbim-icon-url: url('../images/dbim_icons/search.svg');
}

.dbim-icon--text-decrease {
    --dbim-icon-url: url('../images/dbim_icons/text-decrease.svg');
}

.dbim-icon--text-increase {
    --dbim-icon-url: url('../images/dbim_icons/text-increase.svg');
}

.dbim-icon--format-clear {
    --dbim-icon-url: url('../images/dbim_icons/format-clear.svg');
}

.dbim-icon--light-mode {
    --dbim-icon-url: url('../images/dbim_icons/light-mode.svg');
}

.dbim-icon--dark-mode {
    --dbim-icon-url: url('../images/dbim_icons/dark-mode.svg');
}

.dbim-icon--high-contrast {
    --dbim-icon-url: url('../images/dbim_icons/high-contrast.svg');
}

.dbim-icon--invert {
    --dbim-icon-url: url('../images/dbim_icons/invert.svg');
}

.dbim-icon--greyscale {
    --dbim-icon-url: url('../images/dbim_icons/greyscale.svg');
}

.dbim-icon--highlight-links {
    --dbim-icon-url: url('../images/dbim_icons/highlight-links.svg');
}

.dbim-icon--hide-image {
    --dbim-icon-url: url('../images/dbim_icons/hide-image.svg');
}

.dbim-icon--pause {
    --dbim-icon-url: url('../images/dbim_icons/pause.svg');
}

.dbim-icon--play {
    --dbim-icon-url: url('../images/dbim_icons/play.svg');
}

.dbim-icon--x {
    --dbim-icon-url: url('../images/dbim_icons/x.svg');
}

.dbim-icon--facebook {
    --dbim-icon-url: url('../images/dbim_icons/facebook.svg');
}

.dbim-icon--instagram {
    --dbim-icon-url: url('../images/dbim_icons/instagram.svg');
}

.dbim-icon--youtube {
    --dbim-icon-url: url('../images/dbim_icons/youtube.svg');
}

.dbim-icon--whatsapp {
    --dbim-icon-url: url('../images/dbim_icons/whatsapp.svg');
}

.dbim-icon--skip {
    --dbim-icon-url: url('../images/dbim_icons/skip-to-content.svg');
}

.dbim-icon--speech {
    --dbim-icon-url: url('../images/dbim_icons/speech.svg');
}

.dbim-icon--open-in-new {
    --dbim-icon-url: url('../images/dbim_icons/open-in-new.svg');
}


/* ============================================================
   5. TOP BAR ICON BUTTONS (language / accessibility)
============================================================ */

.hkux-topbar__icon,
.hkux-lang-trigger {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dbim-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.hkux-topbar__icon:hover,
.hkux-lang-trigger:hover,
.hkux-topbar__icon[aria-expanded="true"] {
    background: rgba(22, 47, 106, .10);
    transform: none;
}

.hkux-topbar__icon:focus-visible,
.hkux-lang-trigger:focus-visible {
    outline: 3px solid var(--dbim-focus);
    outline-offset: 2px;
}

.hkux-topbar__icon .dbim-icon,
.hkux-lang-trigger .dbim-icon {
    width: 28px;
    height: 28px;
}


/* ============================================================
   6. SKIP LINKS (visible on keyboard focus)
============================================================ */

.hkux-skip-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3000;
}

.hkux-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 10px 16px;
    background: var(--dbim-navy);
    color: var(--dbim-white);
    font-size: var(--fs-p2);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hkux-skip-link:focus {
    left: 0;
    outline: 3px solid var(--dbim-focus);
    outline-offset: 2px;
    color: var(--dbim-white);
}


/* ============================================================
   7. ACCESSIBILITY PANEL
============================================================ */

.hkux-a11y {
    position: fixed;
    top: 48px;
    right: 20px;
    z-index: 1200;

    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;

    padding: 20px;

    background: var(--dbim-white);
    color: var(--dbim-navy);
    border: 1px solid var(--dbim-border);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(22, 47, 106, .22);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.hkux-a11y.hkux-is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ---- Header: title + close ---- */

.hkux-a11y__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hkux-a11y__title {
    margin: 0;
    color: var(--dbim-navy);
    font-size: var(--fs-p1) !important;
    font-weight: 700;
    line-height: var(--lh-heading);
}

.hkux-a11y__close {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--dbim-navy);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.hkux-a11y__close::before,
.hkux-a11y__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.hkux-a11y__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.hkux-a11y__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.hkux-a11y__close:hover {
    background: rgba(22, 47, 106, .10);
    border-color: var(--dbim-navy);
}

.hkux-a11y__close:focus-visible {
    outline: 3px solid var(--dbim-focus);
    outline-offset: 2px;
}


/* ---- Sections ---- */

.hkux-a11y__section {
    padding: 14px 0;
    border-top: 1px solid var(--dbim-border);
}

.hkux-a11y__header+.hkux-a11y__section {
    border-top: 0;
    padding-top: 0;
}

.hkux-a11y__label {
    margin: 0 0 10px;
    color: var(--dbim-navy);
    font-size: var(--fs-p2) !important;
    font-weight: 700;
    line-height: var(--lh-heading);
}

.hkux-a11y__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hkux-a11y__status {
    margin: 8px 0 0;
    text-align: center;
    color: #5a6275;
    font-size: var(--fs-sm) !important;
    line-height: var(--lh-body);
}


/* ---- Buttons ---- */

.hkux-a11y__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-height: 64px;
    padding: 8px 4px;

    border: 1px solid var(--dbim-navy);
    border-radius: 4px;
    background: var(--dbim-white);
    color: var(--dbim-navy);

    font-size: var(--fs-p2) !important;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;

    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.hkux-a11y__btn:hover:not(:disabled) {
    background: var(--dbim-surface-soft);
}

.hkux-a11y__btn:focus-visible {
    outline: 3px solid var(--dbim-focus);
    outline-offset: 2px;
}

.hkux-a11y__btn.is-active,
.hkux-a11y__btn[aria-pressed="true"] {
    background: var(--dbim-navy);
    color: var(--dbim-white);
}

.hkux-a11y__btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Text-size icons: 24px high, keep proportions */
.hkux-a11y__btn .dbim-icon {
    width: 24px;
    height: 24px;
}

.hkux-a11y__reset {
    width: 100%;
    flex-direction: row;
    gap: 8px;
    min-height: 48px;
    margin-top: 6px;
    border-color: var(--dbim-navy);
    background: var(--dbim-surface-soft);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.hkux-a11y__reset:hover:not(:disabled) {
    background: #c8d6ff;
}


@media (max-width: 767.98px) {

    .hkux-a11y {
        top: 46px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        padding: 16px;
    }

}

@media (max-width: 399.98px) {

    .hkux-a11y__grid {
        gap: 6px;
    }

    .hkux-a11y__btn {
        min-height: 60px;
        padding: 6px 2px;
    }

}


/* ============================================================
   8. ACCESSIBILITY MODES (classes set on <html>)
============================================================ */

/* ---- Dark / Invert / Greyscale (whole page filter) ---- */

html.hkux-theme-dark {
    filter: invert(1) hue-rotate(180deg);
    background: #fff;
}

html.hkux-invert {
    filter: invert(1);
    background: #fff;
}

html.hkux-greyscale {
    filter: grayscale(1);
}

/* Media keeps its original colours */
html.hkux-invert img,
html.hkux-invert video,
html.hkux-invert picture,
html.hkux-invert iframe,
html.hkux-invert [style*="background-image"],
html.hkux-invert .owl-item {
    filter: invert(1);
}

html.hkux-theme-dark img,
html.hkux-theme-dark video,
html.hkux-theme-dark picture,
html.hkux-theme-dark iframe,
html.hkux-theme-dark [style*="background-image"],
html.hkux-theme-dark .owl-item {
    filter: invert(1) hue-rotate(180deg);
}

/* ---- High contrast (existing black & white theme: hkux-dark-mode) ---- */

html.hkux-dark-mode .hkux-a11y,
html.hkux-dark-mode .hkux-a11y *:not(.dbim-icon) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

html.hkux-dark-mode .hkux-a11y__btn:hover:not(:disabled),
html.hkux-dark-mode .hkux-a11y__btn.is-active,
html.hkux-dark-mode .hkux-a11y__btn[aria-pressed="true"],
html.hkux-dark-mode .hkux-a11y__btn.is-active *:not(.dbim-icon),
html.hkux-dark-mode .hkux-a11y__btn[aria-pressed="true"] *:not(.dbim-icon) {
    background-color: #fff !important;
    color: #000 !important;
}

html.hkux-dark-mode .hkux-a11y__close::before,
html.hkux-dark-mode .hkux-a11y__close::after {
    background: #fff !important;
}

html.hkux-dark-mode .hkux-topbar__icon,
html.hkux-dark-mode .hkux-lang-trigger {
    background: transparent !important;
}

html.hkux-dark-mode .dbim-icon {
    background-color: currentColor !important;
}

html.hkux-dark-mode .hkux-footer-social__link {
    background: transparent !important;
}

/* ---- Highlight links ---- */

html.hkux-highlight-links a:not(.hkux-skip-link) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    background-color: #fff3a3 !important;
    color: #0b1f66 !important;
    outline: 1px solid var(--dbim-navy);
    outline-offset: 1px;
}

/* ---- Hide images ---- */

html.hkux-hide-images img,
html.hkux-hide-images picture,
html.hkux-hide-images video {
    visibility: hidden !important;
}

html.hkux-hide-images [style*="background-image"],
html.hkux-hide-images .owl-item,
html.hkux-hide-images .hkux-hero__slide {
    background-image: none !important;
}

/* ---- Pause motion ---- */

html.hkux-pause-motion *,
html.hkux-pause-motion *::before,
html.hkux-pause-motion *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}


/* ============================================================
   9. FOOTER (DBIM)
============================================================ */

.hkux-footer {
    position: relative;
    margin: 0;
    padding: 32px 0 24px;

    background: var(--dbim-navy);
    color: var(--dbim-white);
    text-align: center;
    overflow: visible;
}

/* remove decorative circles from the previous footer */
.hkux-footer::before,
.hkux-footer::after {
    content: none;
}

.hkux-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* ---- Link rows ---- */

.hkux-footer__nav {
    width: 100%;
}

.hkux-footer__nav+.hkux-footer__nav {
    margin-top: 12px;
}

.hkux-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hkux-footer__links li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.hkux-footer__links li:not(:last-child)::after {
    content: "|";
    margin: 0 12px;
    color: rgba(255, 255, 255, .7);
    font-size: var(--fs-p2);
    line-height: 1;
}

span.dbim-icon:hover {
    color: var(--dbim-navy) !important;
}

.hkux-footer__links a {
    color: var(--dbim-white);
    font-size: var(--fs-p2) !important;
    font-weight: 400;
    line-height: var(--lh-body);
    /* text-decoration: underline; */
    text-underline-offset: 3px;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.hkux-footer__links a:hover {
    color: #dbe4ff;
    text-decoration-thickness: 2px;
}


/* ---- Social ---- */

.hkux-footer-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.hkux-footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--dbim-white);
    border-radius: 50%;
    color: var(--dbim-white);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.hkux-footer-social__link .dbim-icon {
    width: 20px;
    height: 20px;
}

.hkux-footer-social__link i {
    font-size: 16px;
}

.hkux-footer-social__link:hover {
    background: var(--dbim-white);
    color: var(--dbim-navy);
}


/* ---- Divider ---- */

.hkux-footer__divider {
    width: 100%;
    height: 1px;
    margin: 20px 0;
    border: 0;
    background: rgba(255, 255, 255, .35);
    opacity: 1;
}


/* ---- Info ---- */

.hkux-footer__org {
    margin: 0 0 8px;
    color: var(--dbim-white);
    font-size: var(--fs-p2) !important;
    font-weight: 700;
    line-height: var(--lh-body);
}

.hkux-footer__copy,
.hkux-footer__meta,
.hkux-footer__powered {
    margin: 0 0 8px;
    color: var(--dbim-white);
    font-size: var(--fs-p2) !important;
    font-weight: 400;
    line-height: var(--lh-body);
}

.hkux-footer__meta strong,
.hkux-footer__powered strong {
    font-weight: 700;
}

.hkux-footer__meta-sep {
    margin: 0 8px;
    color: #7fc4ff;
}

.hkux-footer__powered {
    margin: 0;
}

.hkux-footer__powered a {
    color: var(--dbim-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hkux-footer__powered a:hover {
    color: #dbe4ff;
}


/* ---- Focus ---- */

.hkux-footer a:focus-visible {
    outline: 3px solid var(--dbim-white);
    outline-offset: 3px;
    border-radius: 3px;
}


/* ---- Tablet ---- */

@media (max-width: 991.98px) {

    .hkux-footer {
        padding: 28px 0 22px;
    }

}


/* ---- Mobile ---- */

@media (max-width: 767.98px) {

    .hkux-footer {
        padding: 24px 0 20px;
    }

    .hkux-footer__links li:not(:last-child)::after {
        margin: 0 8px;
    }

    .hkux-footer-social {
        margin-top: 16px;
    }

    .hkux-footer__divider {
        margin: 16px 0;
    }

    .hkux-footer__meta-sep {
        margin: 0 6px;
    }

}


@media (max-width: 399.98px) {

    .hkux-footer__links li:not(:last-child)::after {
        margin: 0 6px;
    }

}


/* ============================================================
   10. REDUCED MOTION (OS preference)
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .hkux-a11y,
    .hkux-a11y__btn,
    .hkux-footer__links a,
    .hkux-footer-social__link {
        transition: none;
    }

}


/* ============================================================
   11. HEADER (DBIM) - one row: brand | search | actions
============================================================ */

.hkux-header {
    position: relative;
    width: 100%;
    background: var(--dbim-white);
    border-bottom: 0;
}

.hkux-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 98px;
    padding: 12px 0;
}

/* ---- Brand ---- */

.hkux-header__brand {
    flex: 1 1 auto;
    min-width: 0;
}

.hkux-header__brand-link {
    display: flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.hkux-header__logo {
    width: 52px;
    height: 78px;
    object-fit: contain;
    flex: 0 0 auto;
}

.hkux-header__title {
    margin: 0;
    color: var(--dbim-text);
    font-weight: 700;
    letter-spacing: 0;
    line-height: var(--lh-heading);
    white-space: normal;
}

.hkux-header__subtitle {
    margin: 2px 0 0;
    color: #3a3a3a;
    font-weight: 400;
    letter-spacing: 0;
    line-height: var(--lh-body);
}

.hkux-header__accreditation {
    margin: 0;
    color: #3a3a3a;
    font-size: var(--fs-sm) !important;
    line-height: var(--lh-body);
}

/* ---- Search ---- */

.hkux-header__search {
    flex: 0 1 380px;
    width: 380px;
    margin: 0;
}

.hkux-header__search-box {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 8px 0 16px;
    background: var(--dbim-white);
    border: 1px solid var(--dbim-border);
    border-bottom: 3px solid var(--dbim-navy);
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.hkux-header__search-box:hover,
.hkux-header__search-box:focus-within {
    border-color: var(--dbim-navy-hover);
    border-bottom-color: var(--dbim-navy);
    box-shadow: 0 0 0 3px rgba(33, 74, 171, .18);
}

.hkux-header__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--dbim-text);
    box-shadow: none;
}

.hkux-header__search-input::placeholder {
    color: #4b5468;
    opacity: 1;
}

.hkux-header__search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dbim-navy-hover);
    cursor: pointer;
    transition: background-color .2s ease;
}

.hkux-header__search-button:hover {
    background: rgba(33, 74, 171, .12);
}

.hkux-header__search-button:focus-visible {
    outline: 3px solid var(--dbim-focus);
    outline-offset: 1px;
}

/* ---- Actions ---- */

.hkux-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.hkux-header__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--dbim-navy);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.hkux-header__action:hover,
.hkux-header__action[aria-expanded="true"],
.hkux-header__action[aria-pressed="true"] {
    background: rgba(22, 47, 106, .10);
    color: var(--dbim-navy);
}

.hkux-header__action:focus-visible {
    outline: 3px solid var(--dbim-focus);
    outline-offset: 2px;
}

.hkux-header__action .dbim-icon {
    width: 28px;
    height: 28px;
}

.hkux-header__divider {
    width: 1px;
    height: 32px;
    margin: 0 6px;
    background: var(--dbim-border);
}

.hkux-header__lang {
    position: relative;
    display: inline-flex;
}

.hkux-header__lang .hkux-lang-panel {
    top: calc(100% + 8px);
    right: 0;
    border-radius: 8px;
}

/* ---- Accessibility panel sits under the header icons ---- */

.hkux-a11y {
    top: 84px;
}


/* ============================================================
   12. MAIN MENU (DBIM) - navy bar, light-blue hover / active
============================================================ */

.hkux-navigation {
    background: var(--dbim-navy);
}

.hkux-navigation .container {
    padding-left: 0;
    padding-right: 0;
}

.hkux-navigation__inner {
    min-height: 54px;
}

.hkux-navigation__list {
    justify-content: space-between;
}

.hkux-navigation__link {
    min-height: 54px;
    padding: 0 16px;
    color: var(--dbim-white);
    font-weight: 500;
    line-height: 1.2;
}

.hkux-navigation__link:hover,
.hkux-navigation__item--parent:hover>.hkux-navigation__link,
.hkux-navigation__item--active .hkux-navigation__link {
    background: var(--dbim-navy-hover);
    color: var(--dbim-white);
    font-weight: 500;
}

.hkux-navigation__item--active .hkux-navigation__link::after {
    display: none;
}

.hkux-navigation a:focus-visible,
.hkux-navigation button:focus-visible {
    outline: 3px solid var(--dbim-white);
    outline-offset: -3px;
}

.hkux-navigation__dropdown-link {
    color: var(--dbim-text);
}

.hkux-navigation__dropdown-link:hover,
.hkux-navigation__dropdown-item--active>.hkux-navigation__dropdown-link {
    color: var(--dbim-navy);
    background: #eef3fc;
}

/* Drawer close button (mobile) */

.hkux-navigation__close {
    display: none;
}

body.hkux-menu-open {
    overflow: hidden;
}


/* ============================================================
   13. HEADER + MENU - TABLET / MOBILE
============================================================ */

@media (max-width: 1199.98px) {

    .hkux-navigation__link {
        padding: 0 11px;
    }

    .hkux-header__search {
        flex-basis: 300px;
        width: 300px;
    }

}

@media (max-width: 991.98px) {

    .hkux-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "search search";
        gap: 12px 16px;
        min-height: 0;
        padding: 12px 0;
    }

    .hkux-header__brand {
        grid-area: brand;
    }

    .hkux-header__actions {
        grid-area: actions;
    }

    .hkux-header__search {
        grid-area: search;
        width: 100%;
        flex-basis: auto;
    }

    .hkux-header__logo {
        width: 44px;
        height: 66px;
    }

    .hkux-navigation .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hkux-navigation__mobile-toggle {
        color: var(--dbim-white);
    }

    /* Drawer */
    .hkux-navigation__menu {
        padding-top: 64px;
    }

    .hkux-navigation__close {
        position: absolute;
        top: 12px;
        right: 12px;
        display: block;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--dbim-navy);
        border-radius: 4px;
        background: var(--dbim-white);
        color: var(--dbim-navy);
        cursor: pointer;
    }

    .hkux-navigation__close::before,
    .hkux-navigation__close::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
    }

    .hkux-navigation__close::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .hkux-navigation__close::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .hkux-navigation__link,
    .hkux-navigation__item--active .hkux-navigation__link {
        padding: 14px 18px;
        color: var(--dbim-text);
        background: var(--dbim-white);
    }

    .hkux-navigation__link:hover,
    .hkux-navigation__item--parent:hover>.hkux-navigation__link,
    .hkux-navigation__item--active .hkux-navigation__link {
        color: var(--dbim-white);
        background: var(--dbim-navy-hover);
    }

    .hkux-navigation__item--active .hkux-navigation__link {
        background: var(--dbim-navy);
    }

    .hkux-a11y {
        top: 120px;
    }

}

@media (max-width: 575.98px) {

    .hkux-header__inner {
        gap: 10px 8px;
    }

    .hkux-header__brand-link {
        gap: 10px;
    }

    .hkux-header__logo {
        width: 38px;
        height: 58px;
    }

    .hkux-header__action {
        width: 36px;
        height: 36px;
    }

    .hkux-header__action .dbim-icon {
        width: 24px;
        height: 24px;
    }

    .hkux-header__divider {
        margin: 0 2px;
        height: 24px;
    }

    .hkux-header__actions {
        gap: 2px;
    }

    .hkux-a11y {
        top: 132px;
    }

}

@media (max-width: 399.98px) {

    /* keep brand and four icons on one row: hide dividers */
    .hkux-header__divider {
        display: none;
    }

}


/* ============================================================
   14. LAYOUT GUARD
   style.css floats every <header>, <nav>, <footer> (width:100%);
   keep the DBIM header, menu and footer in normal flow.
============================================================ */

#header {
    display: flow-root;
    width: 100%;
    clear: both;
}

.hkux-header,
.hkux-navigation,
.hkux-footer {
    float: none !important;
    clear: both;
    width: 100%;
}

.hkux-header,
.hkux-navigation {
    display: block;
}

.hkux-header__inner nav,
.hkux-footer nav {
    float: none;
    width: auto;
}

.hkux-footer nav.hkux-footer__nav {
    width: 100%;
}


/* ============================================================
   15. NESTED SUBMENUS (3rd level and deeper)
============================================================ */

/* Desktop / large tablet: open on hover, keyboard focus or tap */
@media (min-width: 992px) {

    .hkux-navigation__item--parent:focus-within>.hkux-navigation__dropdown,
    .hkux-navigation__item--parent.hkux-mobile-expanded>.hkux-navigation__dropdown,
    .hkux-navigation__dropdown-item--parent:hover>.hkux-navigation__dropdown,
    .hkux-navigation__dropdown-item--parent:focus-within>.hkux-navigation__dropdown,
    .hkux-navigation__dropdown-item--parent.hkux-mobile-expanded>.hkux-navigation__dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: block;
    }

    .hkux-navigation__dropdown-item--parent>.hkux-navigation__dropdown {
        top: -9px;
        left: 100%;
        min-width: 255px;
        border-radius: 8px;
        transform: translateX(8px);
    }

    .hkux-navigation__dropdown-item--parent:hover>.hkux-navigation__dropdown,
    .hkux-navigation__dropdown-item--parent:focus-within>.hkux-navigation__dropdown,
    .hkux-navigation__dropdown-item--parent.hkux-mobile-expanded>.hkux-navigation__dropdown {
        transform: translateX(0);
    }

    /* Highlight the parent while its submenu is open */
    .hkux-navigation__dropdown-item--parent:hover>.hkux-navigation__dropdown-link,
    .hkux-navigation__dropdown-item--parent:focus-within>.hkux-navigation__dropdown-link {
        color: var(--dbim-navy);
        background: #eef3fc;
    }

    /* Flip when there is no room on the right (set by header.js) */
    .hkux-navigation__dropdown-item--parent>.hkux-navigation__dropdown.hkux-submenu-left {
        left: auto;
        right: 100%;
    }

    .hkux-navigation__item>.hkux-navigation__dropdown.hkux-dropdown-right {
        left: auto;
        right: 0;
    }

}

/* Mobile drawer: nested lists expand in place (accordion) */
@media (max-width: 991.98px) {

    .hkux-navigation__dropdown-item--parent.hkux-mobile-expanded>.hkux-navigation__dropdown {
        display: block;
    }

    .hkux-navigation__child-arrow {
        margin-left: auto;
        padding: 8px 6px;
        transition: transform .25s ease;
    }

    .hkux-navigation__dropdown-item--parent.hkux-mobile-expanded>.hkux-navigation__dropdown-link .hkux-navigation__child-arrow {
        transform: rotate(90deg);
    }

    .hkux-navigation__dropdown-item--parent.hkux-mobile-expanded>.hkux-navigation__dropdown-link {
        color: var(--dbim-navy);
        font-weight: 600;
    }

    .hkux-navigation__dropdown .hkux-navigation__dropdown .hkux-navigation__dropdown-link {
        padding-left: 38px;
    }

    .hkux-navigation__dropdown .hkux-navigation__dropdown .hkux-navigation__dropdown .hkux-navigation__dropdown-link {
        padding-left: 52px;
    }

}


/* ============================================================
   16. HOME PAGE + CONTENT PAGES - DBIM BLUE THEME
   Blue colour group: #162F6A  #214AAB  #5279D7  #A3BBF3  #D2DFFF
   Functional: text #150202, linen #EBEAEA, white, error #DC3545,
   success #198754, warning #FFC107, info #0D6EFD.
============================================================ */

:root {
    --dbim-blue-1: #162f6a;
    --dbim-blue-2: #214aab;
    --dbim-blue-3: #5279d7;
    --dbim-blue-4: #a3bbf3;
    --dbim-blue-5: #d2dfff;
    --dbim-tint: #f2f6ff;
    --dbim-linen: #ebeaea;
    --dbim-shadow: 0 2px 10px rgba(22, 47, 106, .08);
    --dbim-shadow-hover: 0 12px 28px rgba(22, 47, 106, .16);
}

/* ---- Links: noticeable hover (DBIM 4.5.iv) ---- */

.hkux-page-content a,
.hkux-inner-page a,
.hkux-news-title,
.hkux-link-row {
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.hkux-page-content a:hover,
.hkux-sidebar-card a:hover,
.hkux-news-title:hover {
    color: var(--dbim-blue-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Notice marquee strip ---- */

.marquees,
.marques_con {
    background: var(--dbim-tint);
}

.marques_con {
    border-top: 1px solid var(--dbim-blue-5);
    border-bottom: 1px solid var(--dbim-blue-5);
    padding: 8px 0;
}

.marques_con a,
.marques_con .custom-link {
    color: var(--dbim-blue-1) !important;
    font-size: var(--fs-p1) !important;
}

.marques_con a:hover {
    color: var(--dbim-blue-2) !important;
    text-decoration: underline !important;
}

/* ---- Section rhythm: white / soft-blue alternation ---- */

.hkux-home-section,
.hkux-desk-section {
    background: var(--dbim-white);
}

.hkux-media-section,
.hkux-contact-section {
    background-color: var(--dbim-tint);
}

.hkux-resources-section {
    background-color: var(--dbim-white);
}

.hkux-social-section {
    background-color: var(--dbim-tint);
}

/* ---- Light cards ---- */

.hkux-newsroom-card,
.hkux-links-card,
.hkux-social-card,
.hkux-service-box,
.hkux-small-media-card,
.hkux-contact-card,
.hkux-featured-media-card {
    border: 1px solid var(--dbim-blue-5);
    border-radius: 8px;
    box-shadow: var(--dbim-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.hkux-service-box:hover,
.hkux-small-media-card:hover,
.hkux-contact-card:hover,
.hkux-featured-media-card:hover,
.hkux-links-card:hover,
.hkux-social-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--dbim-shadow-hover);
    border-color: var(--dbim-blue-3);
}

/* ---- Eyebrows / quote mark that sit on dark backgrounds ---- */

.hkux-desk-eyebrow,
.hkux-quote-mark,
.hkux-inner-eyebrow,
.hkux-listing-eyebrow {
    color: var(--dbim-blue-4);
}

/* ---- Eyebrow labels on light backgrounds ---- */

.hkux-eyebrow,
.hkux-media-eyebrow,
.hkux-resource-eyebrow,
.hkux-social-eyebrow,
.hkux-contact-eyebrow,
.hkux-resources-toggle-eyebrow {
    color: var(--dbim-blue-2);
    font-weight: 700;
    letter-spacing: .08em;
}

/* ---- Section headings ---- */

.hkux-newsroom-heading h2,
.hkux-services-header h2,
.hkux-media-heading h2,
.hkux-resource-title,
.hkux-social-title,
.hkux-contact-title {
    color: var(--dbim-blue-1);
}

/* ---- News ---- */

.hkux-news-tab-active {
    background: var(--dbim-blue-1);
    border-color: var(--dbim-blue-1);
    color: var(--dbim-white);
}

.hkux-news-item {
    transition: background-color .2s ease;
}

.hkux-news-item:hover {
    background: var(--dbim-tint);
}

/* ---- CTA buttons (DBIM 4.5.i): enabled / hover / focus / disabled ---- */

.hkux-view-all,
.hkux-media-view-all,
.hkux-resource-view-all,
.hkux-services-view-all,
.hkux-gallery-view-more,
.hkux-desk-btn,
.hkux-social-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 20px;
    border: 1px solid var(--dbim-blue-2);
    border-radius: 4px;
    background: var(--dbim-blue-5);
    color: var(--dbim-blue-1);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.hkux-view-all:hover,
.hkux-media-view-all:hover,
.hkux-resource-view-all:hover,
.hkux-services-view-all:hover,
.hkux-gallery-view-more:hover,
.hkux-desk-btn:hover,
.hkux-social-view:hover {
    background: var(--dbim-blue-2);
    color: var(--dbim-white);
    text-decoration: none;
}

.hkux-view-all:focus-visible,
.hkux-media-view-all:focus-visible,
.hkux-resource-view-all:focus-visible,
.hkux-services-view-all:focus-visible,
.hkux-gallery-view-more:focus-visible,
.hkux-desk-btn:focus-visible,
.hkux-social-view:focus-visible {
    outline: 3px solid var(--dbim-blue-1);
    outline-offset: 2px;
    background: var(--dbim-blue-4);
    color: var(--dbim-blue-1);
}

.hkux-view-all[disabled],
.hkux-view-all.disabled,
.hkux-media-view-all.disabled,
.hkux-resource-view-all.disabled {
    background: var(--dbim-linen);
    border-color: #c6c6c6;
    color: #8e8e8e;
    pointer-events: none;
}

/* ---- Status colours (functional palette) ---- */

.hkux-category-new {
    color: var(--dbim-blue-2);
}

.hkux-category-press {
    color: var(--dbim-blue-1);
}

.hkux-sidebar-pdf,
.hkux-navigation__external-icon {
    color: #dc3545;
}

/* ---- Notice popup ---- */

.hkux-popup-title {
    font-size: var(--fs-h2) !important;
}

.hkux-popup-box p {
    font-size: var(--fs-p1) !important;
    color: var(--dbim-text);
}

/* ---- Slider focus on dark imagery ---- */

.hkux-hero__control:focus-visible,
.hkux-hero__indicator:focus-visible {
    outline-color: #ffffff;
}

/* ---- Footer line / india line accents -> blue strip ---- */

.hkux-india-line,
.hkux-footer-line {
    background: linear-gradient(90deg, var(--dbim-blue-1) 0 33%, var(--dbim-blue-3) 33% 66%, var(--dbim-blue-4) 66% 100%);
}


/* ============================================================
   17. SCROLL ANIMATION
   Needs html.dbim-js (added by scroll-reveal.js).
============================================================ */

html.dbim-js .dbim-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--dbim-delay, 0ms);
    will-change: opacity, transform;
}

html.dbim-js .dbim-reveal[data-reveal="left"] {
    transform: translate3d(-32px, 0, 0);
}

html.dbim-js .dbim-reveal[data-reveal="right"] {
    transform: translate3d(32px, 0, 0);
}

html.dbim-js .dbim-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Back to top */

.dbim-back-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--dbim-white);
    border-radius: 50%;
    background: var(--dbim-blue-1);
    color: var(--dbim-white);
    box-shadow: 0 6px 18px rgba(22, 47, 106, .35);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background-color .2s ease;
}

.dbim-back-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.dbim-back-top:hover {
    background: var(--dbim-blue-2);
}

.dbim-back-top:focus-visible {
    outline: 3px solid var(--dbim-blue-4);
    outline-offset: 2px;
}

.dbim-back-top span {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

/* No motion: OS preference or accessibility panel */

@media (prefers-reduced-motion: reduce) {

    html.dbim-js .dbim-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .dbim-back-top {
        transition: none;
    }

}

html.hkux-pause-motion .dbim-reveal {
    opacity: 1 !important;
    transform: none !important;
}


/* ============================================================
   18. RESPONSIVE - HOME PAGE
============================================================ */

@media (max-width: 991.98px) {

    .hkux-home-section,
    .hkux-desk-section,
    .hkux-media-section,
    .hkux-resources-section,
    .hkux-social-section,
    .hkux-contact-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .hkux-newsroom-header,
    .hkux-media-header,
    .hkux-resource-header,
    .hkux-social-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    .hkux-news-tabs,
    .hkux-media-tabs {
        flex-wrap: wrap;
    }

}

@media (max-width: 767.98px) {

    .hkux-home-section,
    .hkux-desk-section,
    .hkux-media-section,
    .hkux-resources-section,
    .hkux-social-section,
    .hkux-contact-section {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .hkux-view-all,
    .hkux-media-view-all,
    .hkux-resource-view-all,
    .hkux-services-view-all {
        width: 100%;
    }

    .hkux-service-box:hover,
    .hkux-small-media-card:hover,
    .hkux-contact-card:hover,
    .hkux-featured-media-card:hover,
    .hkux-links-card:hover,
    .hkux-social-card:hover {
        transform: none;
    }

    .dbim-back-top {
        right: 12px;
        bottom: 12px;
    }

    .hkux-contact-map iframe,
    .hkux-video-wrapper iframe,
    .hkux-social-feed iframe {
        max-width: 100%;
    }

}

img,
video,
iframe {
    max-width: 100%;
}


/* ============================================================
   19. TEXT COLOUR RULE (DBIM 4.4 - Figures 16 / 17)
   - Dark blue surfaces (#162F6A, #214AAB): text = Inclusive White
   - Light surfaces (white, linen, #A3BBF3, #D2DFFF): text = Deep Earthy Brown #150202
   - #5279D7 is never used as a text background
   Headings on white may keep the group key colour (#162F6A, 12:1).
============================================================ */

/* ---- Dark surfaces ---- */

.hkux-desk-card :where(h1, h2, h3, h4, p, span, small, strong, div, blockquote, li):not(a *):not(button *),
.hkux-emergency-card :where(h1, h2, h3, h4, p, span, small, strong, div, li):not(a *):not(button *),
.hkux-media-section :where(h1, h2, h3, h4, p, span, small, strong, time):not(a *):not(button *),
.hkux-inner-banner :where(h1, h2, h3, h4, p, span, small, strong, li):not(a *):not(button *),
.hkux-listing-banner :where(h1, h2, h3, h4, p, span, small, strong, li):not(a *):not(button *),
.hkux-hero__content :where(h1, h2, h3, h4, h5, h6, p, span, small, time):not(a *):not(button *),
.hkux-footer :where(p, span, strong, li) {
    color: var(--dbim-white) !important;
    opacity: 1;
}

.hkux-media-section a:not(.hkux-media-view-all):not(.hkux-view-all),
.hkux-inner-banner a,
.hkux-listing-banner a {
    color: var(--dbim-white);
}

.hkux-media-section .hkux-media-heading h2,
.hkux-media-section .hkux-media-eyebrow {
    color: var(--dbim-white) !important;
}

/* media section background: let the original dark gradient show */
.hkux-media-section {
    background-color: transparent;
}

/* ---- Light surfaces: body / meta text ---- */

.hkux-news-tab:not(.hkux-news-tab-active),
.hkux-media-tab:not(.hkux-media-tab-active),
.hkux-showing,
.hkux-social-description,
.hkux-social-helper,
.hkux-toggle-label,
.hkux-india-description,
.hkux-resources-toggle-description,
.hkux-contact-description,
.hkux-contact-value,
.hkux-contact-label,
.hkux-news-meta,
.hkux-map-location-card strong,
.hkux-map-location-card span,
.hkux-service-content p,
.hkux-resource-description,
.hkux-links-card-header p,
.hkux-popup-box p,
.hkux-address {
    color: var(--dbim-text) !important;
}

.hkux-news-info .hkux-news-meta,
.hkux-news-item span,
.hkux-newsroom-card :where(span, small):not(a *):not(button *):not(.hkux-date *):not(.hkux-category-new):not(.hkux-category-press) {
    color: var(--dbim-text);
}

.hkux-news-tab-active,
.hkux-media-tab-active {
    color: var(--dbim-white) !important;
}

/* ---- CTA: light surface (enabled / hover / focus) ---- */

.hkux-view-all,
.hkux-media-view-all,
.hkux-resource-view-all,
.hkux-services-view-all,
.hkux-gallery-view-more,
.hkux-desk-btn,
.hkux-social-view {
    background: var(--dbim-blue-5) !important;
    color: var(--dbim-text) !important;
    border-color: var(--dbim-blue-2) !important;
}

.hkux-view-all:hover,
.hkux-media-view-all:hover,
.hkux-resource-view-all:hover,
.hkux-services-view-all:hover,
.hkux-gallery-view-more:hover,
.hkux-desk-btn:hover,
.hkux-social-view:hover {
    background: var(--dbim-blue-2) !important;
    color: var(--dbim-white) !important;
}

.hkux-view-all:focus-visible,
.hkux-media-view-all:focus-visible,
.hkux-resource-view-all:focus-visible,
.hkux-services-view-all:focus-visible,
.hkux-gallery-view-more:focus-visible,
.hkux-desk-btn:focus-visible,
.hkux-social-view:focus-visible {
    background: var(--dbim-blue-4) !important;
    color: var(--dbim-text) !important;
}

/* CTA icons follow the text colour */
.hkux-view-all i,
.hkux-media-view-all i,
.hkux-resource-view-all i,
.hkux-services-view-all i,
.hkux-desk-btn i,
.hkux-social-view i {
    color: inherit !important;
}

/* ---- CTA: on dark surfaces (white button) ---- */

.hkux-media-section .hkux-media-view-all,
.hkux-media-section .hkux-view-all,
.hkux-desk-card .hkux-desk-btn {
    background: var(--dbim-white) !important;
    color: var(--dbim-text) !important;
    border-color: var(--dbim-white) !important;
}

.hkux-media-section .hkux-media-view-all:hover,
.hkux-media-section .hkux-view-all:hover,
.hkux-desk-card .hkux-desk-btn:hover {
    background: var(--dbim-blue-4) !important;
    color: var(--dbim-text) !important;
}


/* tiny eyebrow labels without a class */
.hkux-india-eyebrow span,
.hkux-resources-toggle-eyebrow span {
    font-size: var(--fs-sm) !important;
}


/* ---- polish found during visual review ---- */

.hkux-news-title,
.hkux-news-info a.hkux-news-title {
    color: var(--dbim-text);
}

.hkux-news-title:hover {
    color: var(--dbim-blue-2);
}

/* icons on dark media cards */
.hkux-featured-date i,
.hkux-small-media-date i,
.hkux-small-media-arrow,
.hkux-featured-arrow {
    color: var(--dbim-white) !important;
}

/* photo frame in the Consul General card */
.hkux-desk-photo-wrap,
.hkux-desk-photo {
    border-color: var(--dbim-blue-4) !important;
}


/* ---- layout fixes found on mobile ---- */

.page .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.hkux-header__search-box {
    width: 100%;
}


/* ============================================================
   20. INNER / LISTING / FORM PAGES - TEXT COLOUR + SIZE FLOOR
============================================================ */

/* body copy in CMS pages */
.hkux-page-content,
.hkux-page-content :where(p, li, td, strong, b, span, div):not(a *):not(th *):not(.hkux-btn *) {
    color: var(--dbim-text);
}

/* breadcrumbs / meta / helper text */
.breadcrumb span,
.hkux-list-breadcrumb span:not(a *),
.hkux-album-breadcrumb__current,
.hkux-list-date,
.hkux-list-date time,
.hkux-album-card__subtitle,
.hkux-feedback-card__header p,
.hkux-feedback-label,
.hkux-feedback-select option {
    color: var(--dbim-text) !important;
}

.hkux-feedback-card__header h2,
.hkux-feedback-captcha__code,
.hkux-inner-content-title,
.hkux-sidebar-title,
.hkux-listing-heading {
    color: var(--dbim-blue-1);
}

.breadcrumb a,
.hkux-list-breadcrumb a,
.hkux-album-breadcrumb a {
    color: var(--dbim-blue-2);
}

/* DBIM minimum sizes: 12px desktop / 10px mobile */
[class*="eyebrow"],
[class*="eyebrow"] span,
.hkux-list-date time,
.hkux-list-date,
.hkux-album-item__link,
.page-link {
    font-size: var(--fs-sm) !important;
}


/* ============================================================
   21. LINKS - NO DECORATIVE UNDERLINES
   Underline stays only where it carries meaning:
   - footer links (design reference)
   - inline links inside running text, on hover / focus
   - "Highlight links" accessibility mode
============================================================ */

body a:not(.hkux-footer a),
body a:not(.hkux-footer a):hover,
body a:not(.hkux-footer a):focus,
body a:not(.hkux-footer a):active,
body a:not(.hkux-footer a):visited {
    text-decoration: none !important;
}

/* inline links in running text: weight is the non-colour cue, underline on hover/focus */
body #innerContent :is(p, li, td, span, div)>a:not([class*="btn"]):not([class*="button"]),
body .hkux-page-content :is(p, li, td, span, div)>a:not([class*="btn"]):not([class*="button"]) {
    font-weight: 600;
    color: var(--dbim-blue-2);
}

body #innerContent :is(p, li, td, span, div)>a:hover,
body #innerContent :is(p, li, td, span, div)>a:focus-visible,
body .hkux-page-content :is(p, li, td, span, div)>a:hover,
body .hkux-page-content :is(p, li, td, span, div)>a:focus-visible,
body .hkux-footer a:hover {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

a:focus-visible {
    outline: 3px solid var(--dbim-blue-2);
    outline-offset: 2px;
    border-radius: 2px;
}

.hkux-navigation a:focus-visible,
.hkux-footer a:focus-visible,
.hkux-hero a:focus-visible,
.innerBanner a:focus-visible {
    outline-color: var(--dbim-white);
}


/* ============================================================
   22. PDF + EXTERNAL-LINK ICONS (DBIM icon set)
   Font-Awesome glyphs and legacy GIFs are replaced by the DBIM
   PDF and Open-in-new icons. They follow the text colour.
============================================================ */

.dbim-icon--pdf {
    --dbim-icon-url: url('../images/dbim_icons/pdf.svg');
}

.dbim-icon--external {
    --dbim-icon-url: url('../images/dbim_icons/external-link.svg');
}

/* template icons written as <i class="fa-... fa-file-pdf"> */
i.fa-file-pdf,
i.fa-file-pdf-o,
i.fa-regular.fa-file-pdf,
i.fa-solid.fa-file-pdf,
i.fa-arrow-up-right-from-square,
i.fa-up-right-from-square,
i.fa-external-link,
i.fa-external-link-alt,
i.fa-square-arrow-up-right {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin-left: 6px;
    vertical-align: -0.2em;
    font-size: inherit;
    line-height: 1;
    background-color: currentColor;
    -webkit-mask: var(--dbim-icon-url) center / contain no-repeat;
    mask: var(--dbim-icon-url) center / contain no-repeat;
}

i.fa-file-pdf::before,
i.fa-file-pdf-o::before,
i.fa-arrow-up-right-from-square::before,
i.fa-up-right-from-square::before,
i.fa-external-link::before,
i.fa-external-link-alt::before,
i.fa-square-arrow-up-right::before {
    content: none !important;
}

i.fa-file-pdf,
i.fa-file-pdf-o {
    --dbim-icon-url: url('../images/dbim_icons/pdf.svg');
}

i.fa-arrow-up-right-from-square,
i.fa-up-right-from-square,
i.fa-external-link,
i.fa-external-link-alt,
i.fa-square-arrow-up-right {
    --dbim-icon-url: url('../images/dbim_icons/external-link.svg');
}

/* legacy GIF-based external link marker */
.extLink {
    background: none !important;
    padding-right: 0 !important;
}

.extLink::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-left: 6px;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: url('../images/dbim_icons/external-link.svg') center / contain no-repeat;
    mask: url('../images/dbim_icons/external-link.svg') center / contain no-repeat;
}

/* links inside CMS text: add the icon automatically when the editor did not */
#innerContent a[href$=".pdf" i]:not(:has(img, i, svg, .dbim-icon))::after,
.hkux-page-content a[href$=".pdf" i]:not(:has(img, i, svg, .dbim-icon))::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-left: 6px;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: url('../images/dbim_icons/pdf.svg') center / contain no-repeat;
    mask: url('../images/dbim_icons/pdf.svg') center / contain no-repeat;
}

#innerContent a[target="_blank"]:not([href$=".pdf" i]):not(:has(img, i, svg, .dbim-icon))::after,
.hkux-page-content a[target="_blank"]:not([href$=".pdf" i]):not(:has(img, i, svg, .dbim-icon))::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-left: 6px;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: url('../images/dbim_icons/external-link.svg') center / contain no-repeat;
    mask: url('../images/dbim_icons/external-link.svg') center / contain no-repeat;
}

.hkux-navigation__external-icon.dbim-icon {
    width: 16px;
    height: 16px;
    color: var(--dbim-blue-2);
}

.hkux-navigation__external-icon.dbim-icon--pdf {
    color: #dc3545;
}

/* keep the home marquee / news icons in the DBIM palette */
.marques_con i.fa-file-pdf-o {
    color: #dc3545 !important;
}

.marques_con i.fa-arrow-up-right-from-square {
    color: var(--dbim-blue-2) !important;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ============================================================
   23. INNER PAGES (legacy templates) - SAME DESIGN AS HOME
   Banner / content card / sidebar / breadcrumb / typography.
============================================================ */

/* ---- Banner ---- */

.innerBanner {
    position: relative;
    overflow: hidden;
    float: none !important;
    clear: both;
    width: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(110deg, #162f6a 0%, #162f6a 45%, #214aab 100%) !important;
    color: var(--dbim-white);
}

.innerBanner::before,
.innerBanner::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    pointer-events: none;
}

.innerBanner::before {
    width: 320px;
    height: 320px;
    right: -80px;
    top: -200px;
}

.innerBanner::after {
    width: 230px;
    height: 230px;
    right: 140px;
    bottom: -170px;
}

.innerBanner>.container {
    position: relative;
    z-index: 2;
    padding: 34px 12px;
    background: transparent !important;
}

.innerBanner>.container>img {
    display: none;
}

.innerBanner__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--dbim-white) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.innerBanner__eyebrow::before {
    content: "";
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #162f6a 0 33%, #5279d7 33% 66%, #a3bbf3 66% 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

.innerBanner__title,
.innerBanner h1 {
    margin: 0;
    color: var(--dbim-white) !important;
    font-size: var(--fs-h1) !important;
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: 0;
    text-shadow: none;
}

/* ---- Content area ---- */

.contentPart.innerContentPart,
.innerContentPart {
    float: none !important;
    clear: both;
    width: 100%;
    padding: 32px 0 56px;
    background: #f5f7fb;
}

.innerContentPart>.container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.leftPartInner {
    float: none !important;
    flex: 1 1 640px;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
}

.rightPartShadow {
    float: none !important;
    flex: 0 0 300px;
    width: 300px !important;
    max-width: 100%;
}

.leftContOuter {
    padding: 28px 32px;
    background: var(--dbim-white);
    border: 1px solid var(--dbim-blue-5);
    border-radius: 8px;
    box-shadow: var(--dbim-shadow);
}

.bdrAddOut {
    padding: 0 0 14px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--dbim-blue-5);
}

/* ---- Breadcrumb ---- */

ul.breadcrumb,
.breadcrumb {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
    font-size: var(--fs-p2) !important;
    line-height: var(--lh-body);
}

.breadcrumb li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    padding: 0;
    color: var(--dbim-text);
}

.breadcrumb li a {
    color: var(--dbim-blue-2);
    font-weight: 600;
}

.breadcrumb li span {
    color: var(--dbim-text);
    font-size: inherit !important;
}

/* ---- Typography inside content ---- */

#innerContent {
    color: var(--dbim-text);
    font-size: var(--fs-p1);
    line-height: var(--lh-body);
    overflow-x: auto;
}

body #innerContent h1,
body #innerContent h2 {
    margin: 0 0 16px;
    color: var(--dbim-blue-1) !important;
    font-size: var(--fs-h2) !important;
    font-weight: 700;
    line-height: var(--lh-heading);
}

body #innerContent h3 {
    margin: 24px 0 12px;
    color: var(--dbim-blue-1) !important;
    font-size: var(--fs-h3) !important;
    font-weight: 700;
}

body #innerContent h4,
body #innerContent h5,
body #innerContent h6 {
    margin: 20px 0 10px;
    color: var(--dbim-text) !important;
    font-size: var(--fs-p1) !important;
    font-weight: 700;
}

#innerContent p,
#innerContent li,
#innerContent td,
#innerContent th {
    font-size: var(--fs-p1);
    line-height: var(--lh-body);
}

#innerContent p {
    margin: 0 0 14px;
}

#innerContent img,
#innerContent iframe,
#innerContent video {
    max-width: 100%;
    height: auto;
}

#innerContent iframe {
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 6px;
}

/* ---- Tables ---- */

#innerContent table {
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 20px;
    border-collapse: collapse;
    background: var(--dbim-white);
}

#innerContent th {
    padding: 10px 12px;
    background: var(--dbim-blue-1) !important;
    color: var(--dbim-white) !important;
    font-weight: 700;
    text-align: left;
    border: 1px solid var(--dbim-blue-1);
}

#innerContent td {
    padding: 10px 12px;
    border: 1px solid var(--dbim-blue-5);
    vertical-align: top;
}

#innerContent tbody tr:nth-child(even) td {
    background: var(--dbim-tint);
}

/* ---- Lists ---- */

#innerContent ul,
#innerContent ol {
    padding-left: 1.4em;
    margin: 0 0 14px;
}

/* ---- Alerts ---- */

.alert,
.alert-warning,
.alert-success,
.alert-danger,
.alert-info {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--dbim-white) !important;
    color: var(--dbim-text) !important;
    border: 1px solid var(--dbim-blue-5);
    border-left: 4px solid var(--dbim-blue-2);
    border-radius: 4px;
    font-size: var(--fs-p1);
}

.alert-success {
    border-left-color: #198754;
}

.alert-danger {
    border-left-color: #dc3545;
}

.alert-warning {
    border-left-color: #ffc107;
}

.alert-info {
    border-left-color: #0d6efd;
}

/* ---- Cards (video / gallery legacy) ---- */

.innerContentPart .card {
    height: auto !important;
    margin: 0 0 16px !important;
    background: var(--dbim-white);
    border: 1px solid var(--dbim-blue-5) !important;
    border-radius: 8px !important;
    box-shadow: var(--dbim-shadow) !important;
    text-align: left !important;
    overflow: hidden;
}

.innerContentPart .card-title {
    font-size: var(--fs-p1) !important;
    color: var(--dbim-text);
}

.innerContentPart .card .card-body {
    padding: 14px 16px;
}

/* ---- Pagination ---- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 20px 0;
    list-style: none;
}

.pagination>li>a,
.pagination>li>span,
.page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 6px 12px !important;
    border: 1px solid var(--dbim-blue-2) !important;
    border-radius: 4px !important;
    background: var(--dbim-white) !important;
    color: var(--dbim-blue-1) !important;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

.pagination>li>a:hover,
.page-link:hover {
    background: var(--dbim-blue-5) !important;
}

.pagination>.active>a,
.pagination>.active>span,
.page-item.active .page-link {
    background: var(--dbim-blue-1) !important;
    border-color: var(--dbim-blue-1) !important;
    color: var(--dbim-white) !important;
}

/* ============================================================
   24. FORMS (legacy templates)
============================================================ */

.innerContentPart form {
    margin: 0;
}

.fielsRow {
    display: grid !important;
    grid-template-columns: minmax(160px, 300px) minmax(0, 1fr);
    gap: 6px 24px;
    align-items: start;
    padding: 0 0 16px !important;
    margin: 0;
}

.fielsRow .fieldName {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding-top: 10px;
}

.fielsRow .fieldValues {
    float: none !important;
    width: auto !important;
    min-width: 0;
}

.fLabel,
.fielsRow label {
    color: var(--dbim-text) !important;
    font-size: var(--fs-p2) !important;
    font-weight: 600;
}

.red,
.validation_error,
.error,
span.red {
    color: #dc3545 !important;
    font-size: var(--fs-p2) !important;
    font-weight: 600;
}

.innerContentPart input[type="text"],
.innerContentPart input[type="email"],
.innerContentPart input[type="tel"],
.innerContentPart input[type="number"],
.innerContentPart input[type="password"],
.innerContentPart input[type="date"],
.innerContentPart input[type="url"],
.innerContentPart input[type="search"],
.innerContentPart input:not([type]),
.innerContentPart select,
.innerContentPart textarea,
.innerContentPart .textBox,
.innerContentPart .cpvInput {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 520px;
    min-height: 44px;
    height: auto !important;
    padding: 10px 12px !important;
    border: 1px solid #8e8e8e !important;
    border-radius: 4px !important;
    background: var(--dbim-white) !important;
    background-image: none !important;
    color: var(--dbim-text) !important;
    font-size: var(--fs-p1) !important;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.innerContentPart select {
    appearance: auto;
    padding-right: 8px !important;
}

.innerContentPart textarea,
.innerContentPart textarea.cpvInput {
    min-height: 110px;
    resize: vertical;
}

.innerContentPart input:hover,
.innerContentPart select:hover,
.innerContentPart textarea:hover {
    border-color: var(--dbim-blue-2) !important;
}

.innerContentPart input:focus,
.innerContentPart select:focus,
.innerContentPart textarea:focus {
    outline: 0;
    border-color: var(--dbim-blue-2) !important;
    box-shadow: 0 0 0 3px rgba(33, 74, 171, .25) !important;
}

.innerContentPart input[type="checkbox"],
.innerContentPart input[type="radio"] {
    display: inline-block !important;
    width: 18px !important;
    min-height: 0;
    height: 18px !important;
    margin-right: 8px;
    accent-color: var(--dbim-blue-1);
}

.innerContentPart input[type="file"] {
    padding: 8px 10px !important;
}

.innerContentPart input#CaptchaInput {
    width: 180px !important;
}

.innerContentPart #dob,
.innerContentPart #arrival,
.innerContentPart #yr_sem,
.innerContentPart #cyr_sem,
.innerContentPart #current_sem,
.innerContentPart #mark,
.innerContentPart #title,
.innerContentPart #Acc_holder_name,
.innerContentPart #cardpdf,
.innerContentPart #passport_number,
.innerContentPart #idcard,
.innerContentPart #fee_receipt,
.innerContentPart #certificate,
.innerContentPart #marksheet,
.innerContentPart #passbook {
    width: 100% !important;
    max-width: 520px;
    height: auto !important;
}

.innerContentPart .isd {
    float: none;
    width: auto;
}

.innerContentPart form h5,
.innerContentPart form h4 {
    margin: 24px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--dbim-blue-5);
    color: var(--dbim-blue-1) !important;
    font-size: var(--fs-h3) !important;
}

/* submit / action buttons (DBIM CTA - primary) */

.innerContentPart input[type="submit"],
.innerContentPart input[type="button"],
.innerContentPart input[type="reset"],
.innerContentPart button[type="submit"],
.innerContentPart .btn,
.innerContentPart .button,
.innerContentPart a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    min-height: 44px;
    padding: 10px 24px !important;
    border: 1px solid var(--dbim-blue-1) !important;
    border-radius: 4px !important;
    background: var(--dbim-blue-1) !important;
    color: var(--dbim-white) !important;
    font-size: var(--fs-p2) !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.innerContentPart input[type="reset"] {
    background: var(--dbim-blue-5) !important;
    color: var(--dbim-text) !important;
    border-color: var(--dbim-blue-2) !important;
}

.innerContentPart input[type="submit"]:hover,
.innerContentPart input[type="button"]:hover,
.innerContentPart button[type="submit"]:hover,
.innerContentPart .btn:hover {
    background: var(--dbim-blue-2) !important;
    border-color: var(--dbim-blue-2) !important;
}

.innerContentPart input[type="submit"]:focus-visible,
.innerContentPart button[type="submit"]:focus-visible,
.innerContentPart .btn:focus-visible {
    outline: 3px solid var(--dbim-blue-4);
    outline-offset: 2px;
}

.innerContentPart input[disabled],
.innerContentPart button[disabled] {
    background: var(--dbim-linen) !important;
    border-color: #c6c6c6 !important;
    color: #606060 !important;
    cursor: not-allowed;
}

.cap_status {
    font-size: var(--fs-p2) !important;
}


/* ============================================================
   25. INNER PAGES - RESPONSIVE
============================================================ */

@media (max-width: 991.98px) {

    .rightPartShadow {
        flex: 1 1 100%;
        width: 100% !important;
    }

    .leftPartInner {
        flex-basis: 100%;
    }

    .leftContOuter {
        padding: 22px 20px;
    }

    .innerBanner>.container {
        padding: 26px 12px;
    }

}

@media (max-width: 767.98px) {

    .innerContentPart {
        padding: 20px 0 40px;
    }

    .leftContOuter {
        padding: 18px 14px;
        border-radius: 6px;
    }

    .innerBanner>.container {
        padding: 22px 12px;
    }

    .fielsRow {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .fielsRow .fieldName {
        padding-top: 0;
    }

    .innerContentPart input[type="text"],
    .innerContentPart input[type="email"],
    .innerContentPart input[type="tel"],
    .innerContentPart input[type="number"],
    .innerContentPart input[type="password"],
    .innerContentPart input[type="date"],
    .innerContentPart select,
    .innerContentPart textarea,
    .innerContentPart .textBox,
    .innerContentPart .cpvInput {
        max-width: 100%;
    }

    .innerContentPart input[type="submit"],
    .innerContentPart button[type="submit"] {
        width: 100% !important;
    }

    #innerContent table {
        display: block;
        overflow-x: auto;
    }

}

/* ============================================================
   26. HIDE-IMAGES / DARK MODE COMPAT FOR NEW COMPONENTS
============================================================ */

html.hkux-hide-images .innerBanner>.container>img {
    display: none;
}

html.hkux-dark-mode .innerBanner,
html.hkux-dark-mode .leftContOuter,
html.hkux-dark-mode .innerContentPart {
    background: #000 !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .innerBanner__title,
html.hkux-dark-mode .innerBanner__eyebrow,
html.hkux-dark-mode #innerContent *,
html.hkux-dark-mode .breadcrumb * {
    color: #fff !important;
}

html.hkux-dark-mode #innerContent th {
    background: #fff !important;
    color: #000 !important;
}

html.hkux-dark-mode .innerContentPart input,
html.hkux-dark-mode .innerContentPart select,
html.hkux-dark-mode .innerContentPart textarea {
    background: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.hkux-dark-mode .innerContentPart input[type="submit"],
html.hkux-dark-mode .innerContentPart button[type="submit"] {
    background: #fff !important;
    color: #000 !important;
}


/* hero caption is a <p> now (was h6): keep it tight */
.hkux-hero__title {
    margin: 0;
}



/* form section headings (were h5/h6, now h2 for a correct outline) */
body #innerContent form h2,
body .innerContentPart form h2 {
    margin: 28px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--dbim-blue-5);
    font-size: var(--fs-h3) !important;
}


/* legacy clearfix pseudo-elements become empty grid cells - remove them */
.fielsRow::before,
.fielsRow::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 767.98px) {

    .innerContentPart input[type="reset"],
    .innerContentPart button[type="reset"] {
        width: 100% !important;
        margin-top: 8px;
    }
}


/* ============================================================
   27. MODERN FORM PAGES (BLS feedback / registration) + FORM HEADINGS
============================================================ */

body .innerContentPart form h2 {
    color: var(--dbim-blue-1) !important;
    font-size: var(--fs-h3) !important;
}

.hkux-bls-label,
.hkux-registration-label,
.hkux-registration-intro__text,
.hkux-bls-card-header p,
.hkux-bls-card p,
.hkux-bls-rating-icon,
.hkux-registration-card strong,
.hkux-registration-card p,
.hkux-registration-field span:not(.red),
[class*="breadcrumb"] span {
    color: var(--dbim-text) !important;
}

[class*="bls-card-header__label"],
[class*="registration-card-header__label"] {
    font-size: var(--fs-sm) !important;
}

/* decorative section icon inside modern banner titles: keep banners consistent */
.hkux-listing-banner-title img,
.hkux-inner-banner-title img,
.hkux-album-banner__title img {
    display: none;
}


/* ============================================================
   28. DARK THEME - keep the navy brand surfaces navy
   The dark theme inverts the page; surfaces that are already
   dark blue are inverted back so the brand blue is preserved.
============================================================ */

html.hkux-theme-dark .hkux-navigation,
html.hkux-theme-dark .hkux-footer,
html.hkux-theme-dark .innerBanner,
html.hkux-theme-dark .hkux-inner-banner,
html.hkux-theme-dark .hkux-listing-banner,
html.hkux-theme-dark .hkux-album-banner,
html.hkux-theme-dark .hkux-feedback-banner,
html.hkux-theme-dark .hkux-desk-card,
html.hkux-theme-dark .hkux-emergency-card,
html.hkux-theme-dark .hkux-media-section,
html.hkux-theme-dark .hkux-hero,
html.hkux-theme-dark .hkux-popup-close,
html.hkux-theme-dark .dbim-back-top {
    filter: invert(1) hue-rotate(180deg);
}

/* images inside re-inverted blocks keep a single inversion (original colours) */
html.hkux-theme-dark .hkux-navigation img,
html.hkux-theme-dark .hkux-footer img,
html.hkux-theme-dark .hkux-hero img,
html.hkux-theme-dark .hkux-media-section img,
html.hkux-theme-dark .hkux-desk-card img {
    filter: none;
}

html.hkux-theme-dark .hkux-hero .owl-item,
html.hkux-theme-dark .hkux-hero [style*="background-image"],
html.hkux-theme-dark .hkux-media-section [style*="background-image"],
html.hkux-theme-dark .hkux-desk-card [style*="background-image"] {
    filter: none;
}


/* ============================================================
   29. EXTERNAL-LINK + PDF ICONS ARE RED (functional error/alert red)
   Icons: DBIM External_Link and PDF (D:\DBIM\Icons)
============================================================ */

.dbim-icon--external,
.dbim-icon--pdf,
i.fa-file-pdf,
i.fa-file-pdf-o,
i.fa-arrow-up-right-from-square,
i.fa-up-right-from-square,
i.fa-external-link,
i.fa-external-link-alt,
i.fa-square-arrow-up-right,
.hkux-navigation__external-icon.dbim-icon {
    color: #dc3545;
}

.extLink::after,
#innerContent a[href$=".pdf" i]:not(:has(img, i, svg, .dbim-icon))::after,
.hkux-page-content a[href$=".pdf" i]:not(:has(img, i, svg, .dbim-icon))::after,
#innerContent a[target="_blank"]:not([href$=".pdf" i]):not(:has(img, i, svg, .dbim-icon))::after,
.hkux-page-content a[target="_blank"]:not([href$=".pdf" i]):not(:has(img, i, svg, .dbim-icon))::after {
    color: #dc3545;
    background-color: #dc3545;
}

/* icons that sit on dark navy or inside CTA buttons follow the text colour instead */
.hkux-media-section i.fa-arrow-up-right-from-square,
.hkux-desk-card i.fa-arrow-up-right-from-square,
.hkux-hero i.fa-arrow-up-right-from-square,
.hkux-footer i.fa-arrow-up-right-from-square,
.hkux-view-all .dbim-icon--external,
.hkux-media-view-all .dbim-icon--external {
    color: inherit;
}

.indialink .dbim-icon--external {
    width: 1em;
    height: 1em;
    margin-left: 4px;
    vertical-align: -0.15em;
}

/* leftover tricolour accent dashes -> blue family */
.hkux-india-accent--orange,
.hkux-resources-toggle-line--orange {
    background: var(--dbim-blue-1) !important;
}

.hkux-india-accent--green,
.hkux-resources-toggle-line--green {
    background: var(--dbim-blue-3) !important;
}


/* ============================================================
   30. CONSULAR SERVICES - EQUAL-HEIGHT CARDS
   2 x 2 grid; every card stretches to the tallest one.
============================================================ */

.hkux-news-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
    margin: 0;
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.hkux-news-lists>[class*="col-"] {
    display: flex;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.hkux-news-lists a.hkux-service-box,
a.hkux-service-box {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    align-items: flex-start;
}

@media (max-width: 575.98px) {

    .hkux-news-lists {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

}

/* legacy .row clearfix pseudo-elements would occupy grid cells */
.hkux-news-lists::before,
.hkux-news-lists::after {
    content: none !important;
    display: none !important;
}

/* ============================================================
   31. UNIFORM CONTENT TYPOGRAPHY
   CMS / editor content often carries inline font-family, size and
   line-height. Inside page content everything is normalised to the
   DBIM scale: body 16px (14px mobile), headings per the heading
   tokens, Noto Sans throughout. Colour, bold and italic are kept.
============================================================ */

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content)
  *:not(i):not(svg):not(svg *):not(.dbim-icon):not(img):not(iframe)
  :not(h1, h2, h3, h4, h5, h6):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *):not(sup, sub, small, code, pre, kbd) {
}

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content)
  :is(p, li, td, th, div, span, font, strong, b, em, u, a, blockquote, dd, dt, ul, ol, table, tr, section, article)
  :not(.fLabel):not(.red):not(label):not(.pagination *):not(.breadcrumb *):not(.btn):not(.button) {
}

/* text elements */
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) :is(p, li, td, th, div, span, font, strong, b, em, u, a, blockquote, dd, dt, label, address):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *):not(.fLabel):not(.red):not(.validation_error):not(.pagination *):not(.breadcrumb *):not(.btn):not(.button):not(.cap_status):not(sup):not(sub) {
    font-family: var(--dbim-font) !important;
    font-size: var(--fs-p1) !important;
    line-height: var(--lh-body) !important;
}

/* headings: one scale, whatever the editor typed */
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) :is(h1, h2) {
    font-family: var(--dbim-font) !important;
    font-size: var(--fs-h2) !important;
    line-height: var(--lh-heading) !important;
}

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) h3 {
    font-family: var(--dbim-font) !important;
    font-size: var(--fs-h3) !important;
    line-height: var(--lh-heading) !important;
}

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) :is(h4, h5, h6) {
    font-family: var(--dbim-font) !important;
    font-size: var(--fs-p1) !important;
    line-height: var(--lh-heading) !important;
}

/* anything nested inside a heading follows the heading */
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) :is(h1, h2, h3, h4, h5, h6) * {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* sub / super script and small print stay relative */
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) :is(sup, sub, small) {
    font-family: var(--dbim-font) !important;
    font-size: .75em !important;
}

/* legacy <font> tags */
font { font-family: var(--dbim-font) !important; }

/* tables in content: same body size, no editor-set widths pushing the layout */
body :is(#innerContent, .hkux-page-content, .mcontent) table { font-size: var(--fs-p1) !important; }


/* ============================================================
   32. ACCORDION HEADERS (FAQ / instructions)
   Headline text was inheriting the 24px heading size.
   They are list-style titles: body size, semi-bold.
============================================================ */

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content, .ren-auto-faq-section, .ren-accordion) .ren-auto-accordion-title,
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content, .ren-auto-faq-section, .ren-accordion) .ren-auto-accordion-title *,
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content, .ren-accordion) .ren-accordion-item > h2,
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content, .ren-accordion) .ren-accordion-item > h2 *,
body .ren-auto-accordion-title,
body .ren-auto-accordion-title * {
    font-size: var(--fs-p1) !important;
    font-weight: 600 !important;
    line-height: var(--lh-body) !important;
    letter-spacing: 0;
}

body .ren-auto-accordion-title {
    min-height: 52px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: var(--dbim-text);
}

body .ren-auto-accordion-title:hover,
body .ren-auto-accordion-title[aria-expanded="true"] { color: var(--dbim-blue-1); }


/* ============================================================
   33. LIST PAGES (What's New, Press releases, archives...)
   Title = Paragraph 1 (16px / 14px mobile), date = Paragraph 2.
============================================================ */

body .hkux-list-item-link {
    font-size: var(--fs-p1) !important;
    font-weight: 600;
    line-height: 1.4;
}

body .hkux-list-item-body .hkux-list-date,
body .hkux-list-item-body .hkux-list-date time,
body .hkux-list-date,
body .hkux-list-date time {
    font-size: var(--fs-p2) !important;
    font-weight: 400;
}

body .hkux-list-date i,
body .hkux-list-date .fa-calendar-days { font-size: var(--fs-p2) !important; }

body .hkux-list-item-body { gap: 4px; }

body .hkux-list-item-link .hkux-list-link-icon { font-size: inherit; }

body .hkux-list-breadcrumb,
body .hkux-list-breadcrumb a,
body .hkux-list-breadcrumb span { font-size: var(--fs-p2) !important; }

body .hkux-list-item-icon { width: 46px; height: 46px; flex: 0 0 46px; }

body .hkux-list-item { padding-top: 16px; padding-bottom: 16px; }

body .hkux-list-pagination a,
body .hkux-list-pagination span,
body .hkux-list-pagination li,
body .hkux-list-footer a { font-size: var(--fs-p2) !important; }

body .hkux-list-pagination a,
body .hkux-list-pagination span { min-width: 40px; min-height: 40px; }


/* ============================================================
   34. PHOTO GALLERY / ALBUM PAGES - DBIM SIZES
============================================================ */

body .hkux-album-breadcrumb,
body .hkux-album-breadcrumb a,
body .hkux-album-breadcrumb li,
body .hkux-album-breadcrumb__current { font-size: var(--fs-p2) !important; }

body .hkux-album-card__title { font-size: var(--fs-h2) !important; line-height: var(--lh-heading); }

body .hkux-album-card__subtitle { font-size: var(--fs-p2) !important; }

body .hkux-album-item__title {
    font-size: var(--fs-p1) !important;
    font-weight: 600;
    line-height: 1.4;
}

body .hkux-album-item__link,
body .hkux-album-item__meta,
body .hkux-album-item__date { font-size: var(--fs-p2) !important; }

body .hkux-album-item__content { padding: 16px 18px 18px; }

body .hkux-album-pagination a,
body .hkux-album-pagination span,
body .hkux-album-pagination li,
body .pagination .page-link { font-size: var(--fs-p2) !important; }

body .hkux-album-banner__eyebrow { font-size: var(--fs-sm) !important; }
body .hkux-album-banner__title,
body .hkux-album-banner h1 { font-size: var(--fs-h1) !important; }


/* ============================================================
   35. CONTENT TABLES - ONE DESIGN FOR EVERY PAGE
   Navy header row, soft zebra rows, hover tint, even padding,
   vertical centring, scroll inside the card on small screens.
   (table-enhance.js adds .dbim-table, <thead> and the wrapper.)
============================================================ */

.dbim-table-wrap {
    margin: 0 0 20px;
    overflow-x: auto;
    background: var(--dbim-white);
    border: 1px solid var(--dbim-blue-5);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.dbim-table-wrap:focus-visible {
    outline: 3px solid var(--dbim-blue-2);
    outline-offset: 2px;
}

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--dbim-white) !important;
    table-layout: auto;
}

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table :is(th, td) {
    padding: 12px 16px !important;
    border: 0 !important;
    border-right: 1px solid var(--dbim-blue-5) !important;
    border-bottom: 1px solid var(--dbim-blue-5) !important;
    background-color: var(--dbim-white) !important;
    color: var(--dbim-text);
    text-align: left;
    vertical-align: middle !important;
}

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table :is(th, td):last-child { border-right: 0 !important; }

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table tr:last-child > :is(th, td) { border-bottom: 0 !important; }

/* header row */
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table th {
    background-color: var(--dbim-blue-1) !important;
    border-right-color: rgba(255, 255, 255, .25) !important;
    color: var(--dbim-white) !important;
    font-weight: 700 !important;
    white-space: normal;
}

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table th * { color: inherit !important; }

/* zebra + hover */
body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table tbody tr:nth-child(even) > td { background-color: var(--dbim-tint) !important; }

body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table tbody tr:hover > td { background-color: var(--dbim-blue-5) !important; }

/* cell content */
.dbim-table td p,
.dbim-table th p { margin: 0 0 8px; }

.dbim-table td p:last-child,
.dbim-table th p:last-child,
.dbim-table td > :last-child { margin-bottom: 0; }

.dbim-table td ul,
.dbim-table td ol { margin: 0; }

.dbim-table td img { max-width: 100%; height: auto; }

.dbim-table caption {
    padding: 10px 16px;
    color: var(--dbim-text);
    font-weight: 700;
    text-align: left;
    caption-side: top;
}

@media (max-width: 767.98px) {

    body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table { min-width: 520px; }

    body :is(#innerContent, .hkux-page-content, .mcontent, .hkux-rich-content) table.dbim-table :is(th, td) { padding: 10px 12px !important; }

}

/* high contrast */
html.hkux-dark-mode .dbim-table-wrap { border-color: #fff; background: #000; }

html.hkux-dark-mode table.dbim-table :is(td) { background-color: #000 !important; color: #fff !important; border-color: #fff !important; }

html.hkux-dark-mode table.dbim-table th { background-color: #fff !important; color: #000 !important; border-color: #000 !important; }

html.hkux-dark-mode table.dbim-table th * { color: #000 !important; }

/* editors often leave empty paragraphs / trailing breaks inside cells */
.dbim-table td p:empty,
.dbim-table th p:empty { display: none; }

.dbim-table td > br:last-child,
.dbim-table td p > br:last-child { display: none; }


/* ============================================================
   36. STATE EMBLEM IN DARK / INVERT / HIGH CONTRAST
   The emblem is black line-art. Counter-inverting it (as done for
   photos) keeps it black on a dark page, so it must follow the page.
============================================================ */

html.hkux-theme-dark .hkux-header__logo,
html.hkux-theme-dark .hkux-footer-emblem,
html.hkux-invert .hkux-header__logo,
html.hkux-invert .hkux-footer-emblem {
    filter: none;
}

html.hkux-dark-mode .hkux-header__logo,
html.hkux-dark-mode .hkux-footer-emblem {
    filter: invert(1) brightness(1.1);
    background: transparent !important;
    mix-blend-mode: normal;
}


/* ============================================================
   37. COOKIE CONSENT (DBIM 7.6.1) - banner, dialog, placeholders
============================================================ */

.dbim-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    background: var(--dbim-white);
    color: var(--dbim-text);
    border-top: 3px solid var(--dbim-blue-1);
    box-shadow: 0 -8px 28px rgba(22, 47, 106, .18);
}

.dbim-consent[hidden],
.dbim-consent-modal[hidden],
.dbim-consent-placeholder[hidden] { display: none !important; }

.dbim-consent__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 20px;
}

.dbim-consent__text {
    flex: 1 1 420px;
    margin: 0;
    font-size: var(--fs-p2) !important;
    line-height: var(--lh-body);
    color: var(--dbim-text);
}

.dbim-consent__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--dbim-blue-2);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dbim-consent__link:hover { color: var(--dbim-blue-1); }

.dbim-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 0 0 auto;
}

.dbim-consent__btn {
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--dbim-blue-1);
    border-radius: 4px;
    font-family: var(--dbim-font) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.dbim-consent__btn--outline { background: var(--dbim-white); color: var(--dbim-blue-1); }
.dbim-consent__btn--outline:hover { background: var(--dbim-blue-5); }

.dbim-consent__btn--solid { background: var(--dbim-blue-1); color: var(--dbim-white); }
.dbim-consent__btn--solid:hover { background: var(--dbim-blue-2); border-color: var(--dbim-blue-2); }

.dbim-consent__btn:focus-visible,
.dbim-consent__link:focus-visible,
.dbim-consent-modal input:focus-visible,
.dbim-consent-modal__close:focus-visible {
    outline: 3px solid var(--dbim-blue-2);
    outline-offset: 2px;
}

/* page content never hides behind the banner */
html.dbim-consent-open body { padding-bottom: var(--dbim-consent-h, 0px); }
html.dbim-consent-open .dbim-back-top { bottom: calc(var(--dbim-consent-h, 0px) + 16px); }

/* ---- dialog ---- */

.dbim-consent-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(21, 2, 2, .6);
}

html.dbim-consent-modal-open { overflow: hidden; }

.dbim-consent-modal__box {
    width: min(640px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    background: var(--dbim-white);
    color: var(--dbim-text);
    border-radius: 8px;
    border-top: 5px solid var(--dbim-blue-1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}

.dbim-consent-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 8px;
}

.dbim-consent-modal__title {
    margin: 0;
    color: var(--dbim-blue-1);
    font-size: var(--fs-h2) !important;
    font-weight: 700;
}

.dbim-consent-modal__close {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: var(--dbim-blue-1);
    cursor: pointer;
}

.dbim-consent-modal__close::before,
.dbim-consent-modal__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: currentColor;
}

.dbim-consent-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.dbim-consent-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.dbim-consent-modal__close:hover { background: var(--dbim-blue-5); }

.dbim-consent-modal__body { padding: 0 24px 8px; overflow-y: auto; }

.dbim-consent-modal__intro {
    margin: 0 0 12px;
    font-size: var(--fs-p2) !important;
    line-height: var(--lh-body);
}

.dbim-consent-modal__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid var(--dbim-blue-5);
}

.dbim-consent-modal__label {
    display: block;
    margin: 0 0 4px;
    font-size: var(--fs-p1) !important;
    font-weight: 700;
    color: var(--dbim-text);
}

.dbim-consent-modal__desc {
    margin: 0;
    font-size: var(--fs-p2) !important;
    line-height: var(--lh-body);
    color: var(--dbim-text);
}

.dbim-consent-modal__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding-top: 2px;
}

.dbim-consent-modal__toggle input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 46px;
    height: 26px;
    margin: 0;
    border: 1px solid #606060;
    border-radius: 13px;
    background: #c6c6c6;
    cursor: pointer;
    transition: background-color .2s ease;
}

.dbim-consent-modal__toggle input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dbim-white);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    transition: transform .2s ease;
}

.dbim-consent-modal__toggle input:checked { background: var(--dbim-blue-1); border-color: var(--dbim-blue-1); }
.dbim-consent-modal__toggle input:checked::after { transform: translateX(20px); }
.dbim-consent-modal__toggle input:disabled { opacity: .6; cursor: not-allowed; }

.dbim-consent-modal__state {
    min-width: 72px;
    font-size: var(--fs-p2) !important;
    font-weight: 600;
    color: var(--dbim-text);
}

.dbim-consent-modal__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--dbim-blue-5);
}

/* ---- blocked third-party embeds ---- */

.dbim-consent-placeholder {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 20px;
    background: var(--dbim-tint);
    border: 1px dashed var(--dbim-blue-2);
    border-radius: 8px;
}

.dbim-consent-placeholder__text {
    margin: 0;
    font-size: var(--fs-p2) !important;
    color: var(--dbim-text);
}

iframe[data-consent-src]:not([src]) { display: none !important; }

/* ---- footer link ---- */

.hkux-footer__linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--dbim-white);
    font: inherit;
    font-size: var(--fs-p2) !important;
    line-height: var(--lh-body);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.hkux-footer__linkbtn:hover { color: #dbe4ff; text-decoration-thickness: 2px; }
.hkux-footer__linkbtn:focus-visible { outline: 3px solid var(--dbim-white); outline-offset: 3px; border-radius: 3px; }

/* ---- responsive ---- */

@media (max-width: 767.98px) {

    .dbim-consent__inner { flex-direction: column; align-items: stretch; padding: 14px 16px; }

    .dbim-consent__actions { flex-direction: column; }

    .dbim-consent__btn { width: 100%; }

    .dbim-consent-modal__row { flex-direction: column; gap: 10px; }

    .dbim-consent-modal__foot { flex-direction: column-reverse; }

    .dbim-consent-modal__foot .dbim-consent__btn { width: 100%; }

    .dbim-consent-modal__head { padding: 16px 16px 6px; }
    .dbim-consent-modal__body { padding: 0 16px 8px; }
    .dbim-consent-modal__foot { padding: 14px 16px 18px; }

}

@media (min-width: 768px) and (max-width: 1099.98px) {

    .dbim-consent__actions { width: 100%; justify-content: flex-end; }

}

/* high contrast */
html.hkux-dark-mode .dbim-consent,
html.hkux-dark-mode .dbim-consent-modal__box { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.hkux-dark-mode .dbim-consent *:not(button),
html.hkux-dark-mode .dbim-consent-modal__box *:not(button):not(input) { color: #fff !important; }
html.hkux-dark-mode .dbim-consent__btn--outline { background: #000 !important; color: #fff !important; border-color: #fff !important; }
html.hkux-dark-mode .dbim-consent__btn--solid { background: #fff !important; color: #000 !important; border-color: #fff !important; }
html.hkux-dark-mode .dbim-consent__link { color: #fff !important; }

@media (max-width: 767.98px) {
    /* in a column layout the 420px flex-basis became a 420px tall block */
    .dbim-consent__text { flex: 0 0 auto; }
    .dbim-consent__inner { gap: 12px; }
}

/* tablet: text on its own line, buttons right-aligned below (never squeezed or cut off) */
.dbim-consent__inner { flex-wrap: wrap; }

@media (min-width: 768px) and (max-width: 1099.98px) {
    .dbim-consent__text { flex: 1 1 100%; }
    .dbim-consent__actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}


/* ============================================================
   38. FEATURED MEDIA CARD (home - Events, Gallery & Media)
   Headline was Heading-3 (20px) and too heavy over the photo:
   now Paragraph 1 (16px / 14px mobile), semi-bold.
============================================================ */

body .hkux-featured-content h3,
body .hkux-featured-content h3 a {
    font-size: var(--fs-p1) !important;
    font-weight: 600;
    line-height: 1.4;
}

body .hkux-featured-date,
body .hkux-featured-date span { font-size: var(--fs-p2) !important; }

body .hkux-small-media-content h3 { font-weight: 600; line-height: 1.4; }