/* ==========================================================================
   DBIM / MEA-style design layer
   Loaded AFTER the legacy sheets (semantic.css, 5.css, 18.css, style.css ...)
   so that it can restyle the existing markup without touching the legacy files.

   1. Fonts            5. Header / search / language / accessibility panel
   2. Tokens           6. Navigation and mega-menu
   3. Base             7. Footer
   4. Layout helpers   8. Homepage      9. Inner pages      10. Accessibility modes
   11. Responsive      12. Motion / print
   ========================================================================== */

/* ---------- 1. Fonts: Noto Sans (self-hosted, variable weight) ---------- */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/NotoSans-devanagari.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/NotoSans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(fonts/NotoSans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Design tokens ---------- */
:root {
    /* DBIM blue palette */
    --c-900: #162F6A;
    --c-700: #214AAB;
    --c-500: #5297D7;
    --c-300: #A3BBF3;
    --c-100: #D2DFFF;
    --c-50: #EEF3FF;
    --white: #FFFFFF;

    /* DBIM functional colours (status / utility only; the blue palette stays the brand colour) */
    --c-success: #198754;
    /* Liberty Green: success only */
    --c-warning: #FFC107;
    /* Mustard Yellow: warning only */
    --c-error: #DC3545;
    --c-info: #0D6EFD;
    --grey-1: #C6C6C6;
    --grey-2: #8E8E8E;
    --grey-3: #606060;

    /* Roles */
    --bg: #FFFFFF;
    --surface: #F5F7FC;
    --tint: var(--c-50);
    --tint-strong: var(--c-100);
    --text: #150202;
    /* DBIM Deep Earthy Brown: text over light backgrounds */
    --muted: #606060;
    /* DBIM functional grey 03 */
    --head: var(--c-900);
    --link: var(--c-700);
    --link-hover: var(--c-900);
    --border: #CBD5E8;
    --border-strong: var(--c-300);
    --accent: var(--c-700);
    --focus: var(--c-700);
    --on-dark: #FFFFFF;
    --shadow: 0 8px 24px rgba(22, 47, 106, .14);

    /* Typography (DBIM scale, desktop) */
    /* Noto Sans is self-hosted for Latin and Devanagari; other Indian scripts fall back to the matching Noto Sans family if installed */
    --font: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Oriya', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs-h1: 2.25rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.25rem;
    --fs-p1: 1rem;
    --fs-p2: .875rem;
    --fs-sm: .75rem;
    --lh: 1.5;

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    --container: 1440px;
    --gutter: 16px;
    --radius: 4px;
    --radius-lg: 8px;
    --sidebar: 300px;
    --ease: cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 767.98px) {
    :root {
        --fs-h1: 1.5rem;
        --fs-h2: 1.25rem;
        --fs-h3: 1rem;
        --fs-p1: .875rem;
        --fs-p2: .75rem;
        /* DBIM mobile secondary paragraph: 12px */
        --fs-sm: .75rem;
    }
}

/* Dark mode: same roles, darker values */
html.a11y-dark {
    --bg: #0D1530;
    --surface: #131D3D;
    --tint: #16224A;
    --tint-strong: #1D2C5E;
    --text: #E7ECF8;
    --muted: #B9C4DD;
    --head: #C6D5FF;
    --link: #9DBBFF;
    --link-hover: #FFFFFF;
    --border: #2C3C6B;
    --border-strong: #3F5496;
    --accent: #7FA6FF;
    --focus: #FFFFFF;
    --shadow: 0 8px 24px rgba(0, 0, 0, .5);
    color-scheme: dark;
}

/* Dark contrast: maximum contrast black / white / yellow */
html.a11y-contrast {
    --bg: #000000;
    --surface: #000000;
    --tint: #000000;
    --tint-strong: #1A1A1A;
    --text: #FFFFFF;
    --muted: #FFFFFF;
    --head: #FFEB3B;
    --link: #FFEB3B;
    --link-hover: #FFFFFF;
    --border: #FFFFFF;
    --border-strong: #FFFFFF;
    --accent: #FFEB3B;
    --focus: #00E5FF;
    --shadow: none;
    color-scheme: dark;
}

/* ---------- 3. Base ---------- */
/* The legacy sheets force 12px on html/body below 1024px with !important; rem-based sizes need a real 16px root */
html:root {
    font-size: 100% !important;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-p1) !important;
    line-height: var(--lh);
    font-weight: 400;
    min-width: 0;
    overflow-x: hidden;
}

/* Noto Sans everywhere except icon fonts */
html body :not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(svg):not(svg *) {
    font-family: var(--font) !important;
}

html body p,
html body li,
html body td,
html body th,
html body dd,
html body dt,
html body label,
html body input,
html body select,
html body textarea,
html body button {
    font-size: inherit;
}

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

html body h1,
html body h2,
html body h3,
html body h4 {
    color: var(--head);
    line-height: 1.3;
    font-weight: 600;
    margin-top: 0;
    text-transform: none;
}

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

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

html body h3 {
    font-size: var(--fs-h3);
}

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

html body strong,
html body b {
    font-weight: 700;
}

html body img {
    max-width: 100%;
}

html body a {
    color: var(--link);
    transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}

html body a:hover {
    color: var(--link-hover);
}

/* Visible keyboard focus everywhere (overrides legacy outline:none) */
html body :focus-visible {
    outline: 3px solid var(--focus) !important;
    outline-offset: 2px !important;
}

html body .mea-footer :focus-visible,
html body .mea-lang__list li:focus-visible {
    outline-color: #FFFFFF !important;
}

/* ---------- 4. Layout helpers ---------- */
.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;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 1000;
    background: var(--c-900);
    color: #fff !important;
    padding: 10px 16px;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 600;
    text-decoration: none;
    transition: top .15s var(--ease);
}

.skip-link:focus {
    top: 0;
}

/* One maximum content width shared by header, content and footer */
.mea-container,
html body .container {
    width: 100% !important;
    max-width: var(--container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
}

html body .container .container,
html body .mea-container .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    :root {
        --gutter: 24px;
    }
}

html body #wrapper,
html body .page,
html body #ContentPlaceHolder1_mainbody,
html body .mp-pusher {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

html body india-flag {
    display: block;
    height: 4px;
    overflow: hidden;
    background: linear-gradient(90deg, #FF9933 0 33.33%, #FFFFFF 33.33% 66.66%, #138808 66.66% 100%);
}

html body india-flag img {
    display: none;
}

/* Legacy sheets float these semantic tags (style.css: "header, section, footer ... { float:left }") */
html body header,
html body section,
html body footer,
html body nav,
html body india-flag {
    float: none !important;
    clear: both;
}

html body #menuPartWrapper {
    display: none !important;
}

/* ---------- 5. Header ---------- */
.mea-header-wrap {
    position: relative;
    z-index: 50;
    background: var(--bg);
    box-shadow: 0 1px 0 var(--border);
}

.mea-header {
    background: var(--bg);
}

/* One row on desktop (MeitY-style): brand | search | initiative logos | user controls */
.mea-header__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto auto;
    grid-template-areas: "brand search logos tools";
    align-items: center;
    column-gap: 20px;
    row-gap: var(--s-3);
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
}

.mea-brand {
    grid-area: brand;
    min-width: 0;
}

.mea-brand__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    color: var(--head);
    max-width: 100%;
}

html body .mea-brand__link:hover {
    color: var(--head);
}

html body .mea-brand__emblem {
    height: 64px;
    width: auto;
    flex: 0 0 auto;
}

.mea-brand__link {
    gap: var(--s-2);
}

/* Three clear levels: organisation (bold), place (medium), accreditation (small) */
.mea-brand__text {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
    line-height: 1.25;
}

.mea-brand__name {
    color: var(--head);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.005em;
}

.mea-brand__country {
    color: var(--text);
    font-size: calc(1.025rem * .9);
    /* 10% smaller */
    font-weight: 500;
}

.mea-brand__sub {
    margin-top: 2px;
    color: var(--muted);
    font-size: calc(var(--fs-p1) * .7);
    /* 30% smaller */
    line-height: 1.35;
}

/* Search: icon on the left, light border with an accent underline */
.mea-search {
    grid-area: search;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-bottom: 2px solid var(--c-700);
    border-radius: var(--radius);
    background: var(--bg);
    transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}

.mea-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--c-300);
}

html.a11y-dark body .mea-search {
    border-bottom-color: var(--accent);
}

html body .mea-search__btn {
    flex: 0 0 40px;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--link);
    font-size: .875rem;
    cursor: pointer;
    transition: background-color .15s var(--ease);
}

html body .mea-search__btn:hover {
    background: var(--tint-strong);
}

html body .mea-search input.mea-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0 var(--s-3) 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: var(--fs-p2);
    box-shadow: none;
    outline: none !important;
}

html body .mea-search input.mea-search__input::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* Tool buttons (language, accessibility) */
.mea-tools {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

html body .mea-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: 40px;
    min-width: 40px;
    padding: 0 var(--s-2);
    margin: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--head);
    font-size: var(--fs-p2);
    font-weight: 500;
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

html body .mea-tool-btn i {
    font-size: 1.375rem;
}

html body .mea-tool-btn:hover,
html body .mea-tool-btn[aria-expanded="true"] {
    background: var(--tint-strong);
}

.mea-lang {
    position: relative;
    padding-right: var(--s-2);
    margin-right: var(--s-2);
    border-right: 1px solid var(--border);
}

.mea-pop {
    position: absolute;
    right: 0;
    top: calc(100% + var(--s-2));
    z-index: 70;
    min-width: 230px;
    max-width: calc(100vw - 24px);
    padding: var(--s-3) 0;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    animation: mea-pop-in .16s var(--ease);
}

.mea-pop[hidden] {
    display: none;
}

.mea-pop__title {
    margin: 0;
    padding: 0 var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--border);
    color: var(--head);
    font-size: var(--fs-p2);
    font-weight: 700;
}

.mea-lang__list {
    list-style: none;
    margin: var(--s-2) 0 0;
    padding: 0;
}

html body .mea-lang__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 10px var(--s-4);
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s var(--ease);
}

html body .mea-lang__list li:hover,
html body .mea-lang__list li:focus-visible {
    background: var(--tint-strong);
}

html body .mea-lang__list li[aria-selected="true"] {
    background: var(--tint);
    font-weight: 700;
}

html body .mea-lang__list li[aria-selected="true"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

html body .mea-lang__list {
    outline: none !important;
}

/* Initiative / scheme logos (existing assets; aspect ratio preserved) */
.mea-initiatives {
    grid-area: logos;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

.mea-initiatives a {
    display: inline-flex;
    align-items: center;
}

html body .mea-initiatives img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

/* Header layout below the one-row breakpoint */
@media (max-width: 1199.98px) {
    .mea-header__row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand tools"
            "search logos";
    }

    .mea-search {
        max-width: 420px;
    }
}

/* Phones: the brand gets the full width (so the accreditation line wraps in two lines, not four);
   search and the user controls share the second row; the campaign banner sits below. */
@media (max-width: 575.98px) {
    .mea-header__row {
        grid-template-areas:
            "brand brand"
            "search tools"
            "logos logos";
        column-gap: var(--s-3);
        row-gap: var(--s-2);
        padding-top: var(--s-2);
        padding-bottom: var(--s-2);
    }

    .mea-search {
        max-width: none;
    }

    html body .mea-brand__emblem {
        height: 52px;
    }

    .mea-brand__name {
        font-size: 1.1875rem;
    }

    .mea-brand__country {
        font-size: calc(1rem * .9);
    }

    html body .mea-initiatives img {
        height: 44px;
    }
}

/* Hide the Google Translate engine UI; the language list above drives it */
.mea-translate-engine {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

html body .goog-te-banner-frame,
html body iframe.skiptranslate,
html body #goog-gt-tt,
html body .goog-tooltip,
html body .goog-text-highlight {
    display: none !important;
    box-shadow: none !important;
    background: none !important;
}

html body {
    top: 0 !important;
}

/* Accessibility panel */
.mea-a11y {
    position: absolute;
    right: 0;
    top: calc(100% + var(--s-2));
    z-index: 80;
    width: 340px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: var(--s-4);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    box-sizing: border-box;
    animation: mea-pop-in .18s var(--ease);
}

.mea-a11y[hidden] {
    display: none;
}

.mea-a11y__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.mea-a11y__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 700;
}

html body .mea-a11y__close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--head);
    font-size: 1.125rem;
    cursor: pointer;
    transition: background-color .15s var(--ease);
}

html body .mea-a11y__close:hover {
    background: var(--tint-strong);
}

.mea-a11y__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
}

html body .mea-a11y__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 84px;
    margin: 0;
    padding: var(--s-3) var(--s-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg);
    color: var(--head);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}

html body .mea-a11y__btn i {
    font-size: 1.25rem;
}

html body .mea-a11y__btn:hover {
    background: var(--tint);
    border-color: var(--accent);
}

html body .mea-a11y__btn:active {
    transform: scale(.98);
}

html body .mea-a11y__btn[aria-pressed="true"] {
    background: var(--c-700);
    border-color: var(--c-700);
    color: #fff;
}

html body .mea-a11y__btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: var(--surface);
}

.mea-a11y__btn--wide {
    grid-column: 1 / -1;
    min-height: 52px;
    flex-direction: row;
}

.mea-a11y__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
}

html body .mea-a11y__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) 0;
    border: 0;
    background: none;
    color: var(--head);
    font-size: var(--fs-p2);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

html body .mea-a11y__link:hover {
    color: var(--link-hover);
}

@keyframes mea-pop-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 6. Navigation, mega-menu and small-screen drawer ----------
   Desktop (default): one row of items; drop-downs open directly under their item
   (multi-column "mega" panels span the content width).
   Small screens: html.nav-mobile is set by an inline script in <head> (below 1200px) and by
   dbim.js when the items no longer fit on one row (e.g. larger text). The same list then
   becomes an off-canvas drawer, so one rule set serves every width. */
.mea-nav {
    --nav-pad: 8px;
    position: relative;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.mea-nav__inner {
    position: relative;
}

.mea-nav__menu-btn,
.mea-nav__drawer-head,
.mea-nav__scrim {
    display: none;
}

.mea-nav__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: space-between;
}

.mea-nav__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-nav__item.has-simple {
    position: relative;
}

.mea-nav__row {
    display: flex;
    align-items: stretch;
}

/* Items share one metric: 12px either side of the label; the chevron adds 4px + icon + 12px,
   so the visual gap between neighbouring labels is the same with or without a submenu. */
.mea-nav__link {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 var(--nav-pad);
    border-bottom: 3px solid transparent;
    color: var(--text);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}

.mea-nav__item.has-sub>.mea-nav__row>.mea-nav__link {
    padding-right: 0;
}

.mea-nav__sub-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0 var(--nav-pad) 0 2px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.mea-nav .dbim-icon {
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: middle;
}

.mea-nav__sub-btn .dbim-icon,
.mea-mega__toggle .dbim-icon {
    transition: rotate .2s var(--ease);
}

.mea-nav__item.is-open>.mea-nav__row .dbim-icon,
.mea-mega__col.is-open>.mea-mega__row .dbim-icon,
.mea-mega__list li.is-open>.mea-mega__row .dbim-icon {
    rotate: -90deg;
}

.mea-nav__item:hover>.mea-nav__row>.mea-nav__link,
.mea-nav__item:hover>.mea-nav__row>.mea-nav__sub-btn,
.mea-nav__item.is-open>.mea-nav__row>.mea-nav__link,
.mea-nav__item.is-open>.mea-nav__row>.mea-nav__sub-btn {
    background: var(--tint);
    color: var(--link);
}

.mea-nav__item.is-active>.mea-nav__row>.mea-nav__link,
.mea-nav__item.is-active>.mea-nav__row>.mea-nav__sub-btn {
    border-bottom-color: var(--accent);
    color: var(--link);
}

/* ---- Panels ---- */
.mea-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 100;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}

/* Single-column drop-down: sits directly under its own item */
.mea-mega--simple {
    right: auto;
    width: max-content;
    min-width: 260px;
    max-width: min(380px, calc(100vw - 32px));
}

.mea-mega--simple.align-end {
    right: 0;
    left: auto;
}

html:not(.js) .mea-nav__item:hover>.mea-mega,
html:not(.js) .mea-nav__item:focus-within>.mea-mega,
.mea-nav__item.is-open>.mea-mega {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.mea-mega__inner {
    padding: var(--s-5) var(--s-5) var(--s-6);
}

.mea-mega--simple .mea-mega__inner {
    padding: var(--s-2) 0;
}

.mea-mega__cols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--s-5) var(--s-6);
}

.mea-mega--simple .mea-mega__cols {
    display: block;
}

.mea-mega__col {
    min-width: 0;
}

.mea-mega__toggle {
    display: none;
}

.mea-mega__head,
.mea-mega__col--plain .mea-mega__link {
    display: block;
    padding: var(--s-1) 0;
    color: var(--link);
    font-size: var(--fs-p1);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

.mea-mega__head {
    margin-bottom: var(--s-2);
}

.mea-mega__link {
    display: inline-block;
    padding: 3px 0;
    color: var(--text);
    font-size: var(--fs-p2);
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
}

.mea-mega__head:hover,
.mea-mega__link:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Plain drop-down rows read like a menu: full-width targets, tinted on hover */
.mea-mega--simple .mea-mega__col--plain .mea-mega__link {
    display: block;
    padding: 10px var(--s-5);
    color: var(--text);
    font-size: var(--fs-p1);
    font-weight: 500;
}

.mea-mega--simple .mea-mega__link:hover,
.mea-mega--simple .mea-mega__link:focus-visible {
    background: var(--tint);
    color: var(--link);
    text-decoration: none;
}

.mea-mega__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-mega__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-mega__list .mea-mega__list {
    margin: 2px 0 4px 6px;
    padding-left: var(--s-3);
    border-left: 2px solid var(--tint-strong);
}

.mea-mega li.is-active>a,
.mea-mega__col.is-active>.mea-mega__row>.mea-mega__head,
.mea-mega__link[aria-current="page"] {
    color: var(--link);
    font-weight: 700;
}

.mea-link-icon {
    margin-left: 4px;
    font-size: .75em;
    opacity: .8;
}

/* ---- Small screens: off-canvas drawer ---- */
html.nav-mobile .mea-nav {
    border-top: 0;
    background: var(--c-900);
}

html.nav-mobile .mea-nav__inner {
    padding-left: 0;
    padding-right: 0;
}

html.nav-mobile .mea-nav__menu-btn {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 var(--gutter);
    border: 0;
    background: var(--c-900);
    color: #fff;
    font-size: var(--fs-p1);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

html.nav-mobile .mea-nav__menu-btn .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
}

html.nav-mobile .mea-nav__menu-btn:focus-visible {
    outline-color: #fff;
    outline-offset: -4px;
}

html.nav-mobile .mea-nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(10, 17, 40, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility 0s linear .25s;
}

html.nav-mobile .mea-nav.is-open .mea-nav__scrim {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

html.nav-mobile .mea-nav__drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(88vw, 360px);
    background: var(--bg);
    box-shadow: var(--shadow);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
}

html.nav-mobile .mea-nav.is-open .mea-nav__drawer {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
}

html.nav-mobile .mea-nav__drawer-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 var(--s-2) 0 var(--gutter);
    background: var(--c-900);
    color: #fff;
}

.mea-nav__drawer-title {
    font-size: var(--fs-p1);
    font-weight: 700;
}

.mea-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s var(--ease);
}

.mea-nav__close:hover {
    background: rgba(255, 255, 255, .18);
}

.mea-nav__close .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
}

html.nav-mobile .mea-nav__drawer :focus-visible {
    outline-offset: -3px;
}

html.nav-mobile .mea-nav__drawer-head :focus-visible {
    outline-color: #fff;
}

html.nav-mobile .mea-nav__list {
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

html.nav-mobile .mea-nav__item {
    border-bottom: 1px solid var(--border);
}

html.nav-mobile .mea-nav__item.has-simple {
    position: static;
}

html.nav-mobile .mea-nav__link {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    padding: var(--s-3) var(--gutter);
    border-bottom: 0;
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 600;
    white-space: normal;
}

html.nav-mobile .mea-nav__item.has-sub>.mea-nav__row>.mea-nav__link {
    padding-right: var(--s-2);
}

html.nav-mobile .mea-nav__sub-btn {
    flex: 0 0 52px;
    padding: 0;
    border-bottom: 0;
    border-left: 1px solid var(--border);
}

html.nav-mobile .mea-nav__item:hover>.mea-nav__row>.mea-nav__link,
html.nav-mobile .mea-nav__item:hover>.mea-nav__row>.mea-nav__sub-btn {
    background: transparent;
}

html.nav-mobile .mea-nav__item.is-open>.mea-nav__row>.mea-nav__link,
html.nav-mobile .mea-nav__item.is-open>.mea-nav__row>.mea-nav__sub-btn {
    background: var(--tint);
}

html.nav-mobile .mea-nav__item.is-active>.mea-nav__row>.mea-nav__link {
    box-shadow: inset 4px 0 0 var(--accent);
}

/* Submenus become accordions inside the drawer */
html.nav-mobile .mea-mega,
html.nav-mobile .mea-mega--simple {
    position: static;
    display: none;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
}

html.nav-mobile .mea-nav__item.is-open>.mea-mega {
    display: block;
}

html.nav-mobile .mea-mega__inner,
html.nav-mobile .mea-mega--simple .mea-mega__inner {
    padding: 0;
}

html.nav-mobile .mea-mega__cols {
    display: block;
}

html.nav-mobile .mea-mega__col {
    border-bottom: 1px solid var(--border);
}

html.nav-mobile .mea-mega__col:last-child {
    border-bottom: 0;
}

html.nav-mobile .mea-mega__row {
    display: flex;
    align-items: stretch;
}

html.nav-mobile .mea-mega__head,
html.nav-mobile .mea-mega__link,
html.nav-mobile .mea-mega__col--plain .mea-mega__link,
html.nav-mobile .mea-mega--simple .mea-mega__col--plain .mea-mega__link {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 12px var(--gutter) 12px 24px;
    box-sizing: border-box;
    font-size: var(--fs-p1);
    line-height: 1.4;
}

html.nav-mobile .mea-mega__head,
html.nav-mobile .mea-mega__col--plain .mea-mega__link {
    font-weight: 600;
    color: var(--link);
}

html.nav-mobile .mea-mega__link {
    font-weight: 400;
    color: var(--text);
}

html.nav-mobile .mea-mega__toggle {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--border);
    background: transparent;
    color: var(--head);
    cursor: pointer;
}

html.nav-mobile .mea-mega__col.is-open>.mea-mega__row,
html.nav-mobile .mea-mega__list li.is-open>.mea-mega__row {
    background: var(--tint);
}

/* Nested lists: collapsed until their toggle is pressed; each level indents one step */
html.nav-mobile .mea-mega__list {
    margin: 0;
    padding: 0;
    border: 0;
}

html.nav-mobile .mea-mega__list .mea-mega__list {
    margin: 0;
    padding-left: var(--s-4);
    border: 0;
}

html.nav-mobile .mea-mega__col:not(.mea-mega__col--plain):not(.is-open)>.mea-mega__list,
html.nav-mobile .mea-mega__list li.has-nested:not(.is-open)>.mea-mega__list {
    display: none;
}

html.nav-mobile .mea-mega__list li {
    border-top: 1px solid var(--border);
}

html.nav-mobile .mea-mega__col--plain .mea-mega__list li:first-child {
    border-top: 0;
}

html.nav-mobile .mea-mega li.is-active>a,
html.nav-mobile .mea-mega__col.is-active>.mea-mega__row>.mea-mega__head {
    font-weight: 700;
}

html.nav-mobile .mea-mega .mea-link-icon {
    margin-left: 6px;
}

/* Page behind the open drawer does not scroll; floating controls step aside */
html.nav-open {
    overflow: hidden;
}

html.nav-open .mea-top-btn {
    display: none;
}

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

    html.nav-mobile .mea-nav__drawer,
    html.nav-mobile .mea-nav__scrim {
        transition-duration: .001ms;
    }
}

/* ---------- 7. Footer ---------- */
html body #footer {
    margin: 0;
    padding: 0;
    background: var(--bg);
}

html body .mea-footer,
html body .footerCont.mea-footer {
    background: var(--c-900) !important;
    color: var(--on-dark) !important;
    padding: var(--s-6) 0 var(--s-5) !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    text-align: left;
}

html.a11y-dark body .mea-footer {
    background: #0A1128 !important;
    border-top: 1px solid var(--border);
}

html.a11y-contrast body .mea-footer {
    background: #000 !important;
    border-top: 2px solid #fff;
}

.mea-footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-6);
    padding-bottom: var(--s-5);
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}

.mea-footer__links {
    flex: 1 1 520px;
    min-width: 0;
}

.mea-footer__social {
    flex: 0 1 auto;
}

html body .mea-footer__heading {
    margin: 0 0 var(--s-3);
    color: #fff;
    font-size: var(--fs-p2);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

html body .mea-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .mea-footer__list li {
    margin: 0;
    padding: 0;
    float: none;
    list-style: none;
    background: none;
    border: 0;
}

html body .mea-footer__list li a,
html body .mea-footer a {
    color: #fff;
    background: none;
    font-size: var(--fs-p1);
    text-decoration: none;
}

html body .mea-footer__list li a::before {
    content: "\203A";
    display: inline-block;
    margin-right: var(--s-2);
    font-weight: 700;
    transition: transform .15s var(--ease);
}

html body .mea-footer a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body .mea-footer__list li a:hover::before {
    transform: translateX(3px);
}

html body .mea-footer__social-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .mea-footer__social-list li {
    margin: 0;
    padding: 0;
    list-style: none;
}

html body .mea-footer__social-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    font-size: 1.125rem;
    color: #fff !important;
    transition: background-color .15s var(--ease), transform .15s var(--ease);
}

html body .mea-footer__social-list a:hover {
    background: rgba(255, 255, 255, .18);
    transform: translateY(-2px);
    text-decoration: none;
}

.mea-footer__meta {
    padding-top: var(--s-5);
}

html body .mea-footer__meta p {
    margin: 0 0 var(--s-2);
    color: #fff;
    font-size: var(--fs-p1);
    line-height: 1.5;
    float: none;
    text-align: left;
}

html body .mea-footer__meta .mea-footer__small {
    font-size: var(--fs-sm);
    color: #E2EAFF;
}

html body .mea-footer__meta .mea-footer__small a {
    font-size: inherit;
    text-decoration: underline;
}

.mea-footer__sep {
    margin: 0 var(--s-2);
    opacity: .6;
}

/* Partner-logo strip above the footer */
html body .footerLogos {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: var(--s-5) 0;
    margin: 0;
}

html body .footerLogos img {
    height: auto;
    max-height: 80px;
    width: auto;
    object-fit: contain;
}

html body .footerLogos .container-fluid {
    overflow: hidden;
}

/* Back to top */
html body .mea-top-btn {
    position: fixed;
    left: var(--s-4);
    /* bottom-left keeps clear of chat widgets that sit bottom-right */
    bottom: var(--s-4);
    z-index: 90;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--c-700);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: background-color .15s var(--ease), transform .15s var(--ease);
}

html body .mea-top-btn:hover {
    background: var(--c-900);
    transform: translateY(-2px);
}

html body .mea-top-btn[hidden] {
    display: none;
}

/* ---------- 8. Homepage ---------- */
.mea-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
    margin-bottom: var(--s-4);
}

html body .mea-section-head h2 {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--head);
    font-size: var(--fs-h2);
    font-weight: 700;
}

html body .mea-viewall {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--link);
    font-size: var(--fs-p2);
    font-weight: 600;
    text-decoration: none;
}

html body .mea-viewall i {
    transition: transform .15s var(--ease);
}

html body .mea-viewall:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body .mea-viewall:hover i {
    transform: translateX(3px);
}

/* Page sections: main column + sidebar sharing a common top edge */
html body .container:has(> .leftPartInner) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar);
    gap: var(--s-6);
    align-items: start;
}

html body .container:has(> .leftPartInner)::before,
html body .container:has(> .leftPartInner)::after {
    display: none !important;
}

html body .leftPartInner,
html body .rightPartShadow {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    background: none;
}

html body .rightPartShadow::after,
html body .rightPartShadow::before {
    display: none !important;
}

html body .rightPartShadow {
    margin-top: var(--s-5) !important;
}

/* ---------- 9. Inner pages ---------- */
html body .innerBanner {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: var(--s-5) 0 !important;
    background: var(--c-900) !important;
    border: 0;
}

html body .innerBanner .container {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: auto !important;
    background: none !important;
}

html body .innerBanner img {
    order: -1;
    width: 40px !important;
    height: 40px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    filter: brightness(0) invert(1);
}

html body .innerBanner span,
html body .innerBanner h1 {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: none !important;
    color: #fff !important;
    font-size: var(--fs-h1) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}

html body .innerContentPart,
html body .contentPart.innerContentPart {
    padding: var(--s-5) 0 var(--s-7);
    background: var(--bg);
}

html body .containWrap.wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .bdrAddOut {
    padding: 0 !important;
    margin: 0 0 var(--s-4) !important;
    border: 0 !important;
    background: none !important;
}

html body .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0;
    list-style: none;
    font-size: var(--fs-p2);
    color: var(--muted);
}

html body .breadcrumb li {
    display: inline;
    float: none;
    margin: 0;
    padding: 0;
    background: none !important;
    color: var(--muted) !important;
    font-size: var(--fs-p2) !important;
    list-style: none;
}

html body .breadcrumb li::before {
    display: none !important;
}

html body .breadcrumb a {
    color: var(--link) !important;
    font-size: var(--fs-p2) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body .breadcrumb a:hover {
    color: var(--link-hover) !important;
}

html body .breadcrumb .bdrNoLink {
    color: var(--text);
    font-weight: 600;
}

html body #innerContent {
    padding: 0 !important;
    background: none !important;
    color: var(--text);
    overflow-wrap: anywhere;
}

html body #innerContent>h2,
html body .contentPart h2 {
    margin: 0 0 var(--s-4) !important;
    padding: 0 0 var(--s-3) !important;
    border: 0 !important;
    border-bottom: 2px solid var(--c-100) !important;
    background: none !important;
    color: var(--head) !important;
    font-size: var(--fs-h2) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    text-align: left;
}

html.a11y-dark body #innerContent>h2,
html.a11y-dark body .contentPart h2 {
    border-bottom-color: var(--border-strong) !important;
}

html body #innerContent h3,
html body .mcontent h3 {
    color: var(--head);
    font-size: var(--fs-h3);
    font-weight: 600;
    margin: var(--s-5) 0 var(--s-2);
}

html body .mcontent p {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-p1);
    line-height: 1.6;
    text-align: left;
}

html body .mcontent {
    font-size: var(--fs-p1);
    line-height: 1.6;
}

html body .mcontent ul,
html body .mcontent ol {
    margin: 0 0 var(--s-4);
    padding-left: var(--s-6);
}

html body .mcontent li {
    margin-bottom: var(--s-1);
    list-style: revert;
}

html body #innerContent a,
html body .mcontent a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

html body #innerContent a:hover,
html body .mcontent a:hover {
    color: var(--link-hover);
}

html body .mcontent img {
    height: auto;
}

/* Lists of child pages */
html body .commonListing,
html body .commonListings {
    margin: 0 0 var(--s-5);
    padding: 0;
    list-style: none;
}

html body .commonListing li,
html body .commonListings li {
    float: none !important;
    width: auto !important;
    margin: 0;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    list-style: none !important;
}

/* Tables: scroll inside their own box so the page never overflows */
html body .mcontent table,
html body #innerContent table {
    max-width: 100%;
}

html body .tableOut,
html body .mcontent .table-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html body .mcontent table,
html body .web {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-p2);
}

html body .mcontent table th,
html body .web th {
    background: var(--c-900) !important;
    color: #fff !important;
    font-weight: 600;
    text-align: left;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-900);
}

html body .mcontent table td,
html body .web td {
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    vertical-align: top;
}

html body .mcontent table tr:nth-child(even) td,
html body .web tr:nth-child(even) td {
    background: var(--tint);
}

/* Sidebar / secondary navigation */
html body .rightPart {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--border);
    background: var(--bg) !important;
}

html body .rightPart .leftMenu {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

html body .rightPart .menuTitle {
    display: block;
    margin: 0 !important;
    padding: var(--s-3) var(--s-4) !important;
    background: var(--c-900) !important;
    color: #fff !important;
    font-size: var(--fs-p1) !important;
    font-weight: 600 !important;
    text-transform: none;
}

html body .rightPart .menuTitle::before,
html body .rightPart .menuTitle::after {
    display: none !important;
}

html body #menuLeft {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}

html body #menuLeft li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border);
    background: none !important;
    list-style: none !important;
}

html body #menuLeft li:last-child {
    border-bottom: 0;
}

html body #menuLeft li a {
    display: block;
    padding: var(--s-3) var(--s-4) !important;
    background: none !important;
    color: var(--text) !important;
    font-size: var(--fs-p2) !important;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
    border-left: 3px solid transparent;
}

html body #menuLeft li a:hover {
    background: var(--tint) !important;
    color: var(--link) !important;
    border-left-color: var(--c-700);
}

/* Forms and buttons */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="tel"],
html body input[type="date"],
html body input[type="search"],
html body select,
html body textarea {
    max-width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-p1);
    box-sizing: border-box;
}

html body input[type="text"]:not(.mea-search__input):not(.mea-keep):focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input[type="number"]:focus,
html body select:focus,
html body textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--c-300);
}

html body input[type="submit"],
html body input[type="button"],
html body button[type="submit"]:not(.mea-search__btn),
html body .btn,
html body .btn-primary {
    min-height: 44px;
    padding: 0 var(--s-5);
    border: 1px solid var(--c-700);
    border-radius: var(--radius);
    background: var(--c-700);
    color: #fff;
    font-size: var(--fs-p1);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s var(--ease), border-color .15s var(--ease);
}

html body input[type="submit"]:hover,
html body input[type="button"]:hover,
html body button[type="submit"]:not(.mea-search__btn):hover,
html body .btn:hover,
html body .btn-primary:hover {
    background: var(--c-900);
    border-color: var(--c-900);
    color: #fff;
}

html body input[type="submit"]:disabled,
html body button:disabled:not(.mea-a11y__btn),
html body .btn.disabled {
    background: var(--surface);
    border-color: var(--border);
    color: var(--muted);
    cursor: not-allowed;
}

/* Pagination */
html body .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin: var(--s-5) 0;
    padding: 0;
    list-style: none;
}

html body .pagination>li {
    display: block;
    float: none;
}

html body .pagination>li>a,
html body .pagination>li>span {
    float: none;
    margin: 0 !important;
    min-width: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius) !important;
    background: var(--bg);
    color: var(--link);
    text-align: center;
    text-decoration: none;
}

html body .pagination>li>a:hover {
    background: var(--tint-strong);
}

html body .pagination>.active>span,
html body .pagination>.active>a {
    background: var(--c-700);
    border-color: var(--c-700);
    color: #fff;
}

/* Gallery */
html body .photoGalleryList img,
html body .galleryImg img {
    height: auto;
}

/* ---------- 10. Accessibility modes ---------- */
html.a11y-links body a:not(.mea-a11y__btn):not(.skip-link) {
    background: #FFEB3B !important;
    color: #000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    outline: 2px solid #000;
    outline-offset: 1px;
}

html.a11y-links body .mea-footer a {
    outline-color: #fff;
}

html.a11y-noimg body img:not(.mea-keep-img),
html.a11y-noimg body video,
html.a11y-noimg body .mea-card__media,
html.a11y-noimg body .mea-feature__media,
html.a11y-noimg body .sliderImg,
html.a11y-noimg body .mea-initiatives {
    visibility: hidden !important;
}

html.a11y-noimg body [style*="background-image"] {
    background-image: none !important;
}

html.a11y-cursor,
html.a11y-cursor body,
html.a11y-cursor body * {
    cursor: auto !important;
}

html.a11y-invert body img,
html.a11y-invert body video,
html.a11y-invert body iframe {
    filter: invert(1) hue-rotate(180deg);
}

/* Dark mode / dark contrast: bring legacy surfaces onto the token colours */
html.a11y-dark body,
html.a11y-contrast body {
    background: var(--bg);
    color: var(--text);
}

html.a11y-dark body :is(.leftPartInner, .rightPart, #innerContent, .mcontent, .innerContentPart, #wrapper, .container-fluid) {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

html.a11y-contrast body :is(.leftPartInner, .rightPart, #innerContent, .mcontent, .innerContentPart, #wrapper, .container-fluid,
    .mea-header, .mea-nav, .mea-mega, .mea-pop, .mea-a11y) {
    background-color: #000 !important;
    color: #fff !important;
}

html.a11y-dark body .mcontent *,
html.a11y-contrast body .mcontent * {
    color: inherit !important;
    background-color: transparent !important;
}

html.a11y-dark body .mcontent a,
html.a11y-contrast body .mcontent a,
html.a11y-dark body #innerContent a,
html.a11y-contrast body #innerContent a {
    color: var(--link) !important;
}

html.a11y-dark body .mcontent th,
html.a11y-contrast body .mcontent th {
    background-color: var(--tint-strong) !important;
    color: var(--text) !important;
}

html.a11y-dark body :is(a.readMore, .mea-btn:not(.mea-btn--outline)) {
    background: var(--c-700);
    color: #fff;
}

html.a11y-dark body .mea-btn--outline {
    background: transparent;
    border-color: var(--c-300);
    color: var(--c-300);
}

html.a11y-dark body .mea-btn--outline:hover {
    background: var(--tint-strong);
}

html.a11y-contrast body :is(a.readMore, .mea-btn:not(.mea-btn--outline), .mea-a11y__btn[aria-pressed="true"]) {
    background: #FFEB3B;
    color: #000;
    border-color: #FFEB3B;
}

html.a11y-contrast body .mea-btn--outline {
    background: #000;
    border-color: #FFEB3B;
    color: #FFEB3B;
}

html.a11y-contrast body :is(.innerBanner, .rightPart .menuTitle, .mcontent th) {
    background: #000 !important;
    color: #FFEB3B !important;
    border: 1px solid #fff;
}

html.a11y-contrast body :is(.innerBanner span, .innerBanner h1) {
    color: #FFEB3B !important;
}

html.a11y-contrast body :is(.mea-search__input, input, select, textarea) {
    background: #000;
    color: #fff;
    border-color: #fff;
}

html.a11y-contrast body .mea-top-btn {
    background: #FFEB3B;
    color: #000;
}

html.a11y-dark body :is(input, select, textarea) {
    background: var(--surface);
    color: var(--text);
}

html.a11y-dark body .mea-brand__sub {
    color: var(--muted);
}

html.a11y-dark body .mea-a11y__btn[aria-pressed="true"] {
    background: var(--c-700);
    color: #fff;
}

html.a11y-dark body .mea-brand__emblem,
html.a11y-contrast body .mea-brand__emblem {
    background: #fff;
    border-radius: var(--radius);
    padding: 2px;
}

/* ---------- 11. Responsive ---------- */
@media (max-width: 991.98px) {
    html body .container:has(> .leftPartInner) {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-5);
    }

    html body .rightPartShadow {
        margin-top: 0 !important;
    }
}

@media (max-width: 767.98px) {
    .mea-a11y {
        position: fixed;
        left: 8px;
        right: 8px;
        top: 8px;
        width: auto;
        max-height: calc(100dvh - 16px);
    }

    .mea-lang__pop {
        right: -48px;
    }

    .mea-footer__list {
        flex-direction: column;
    }

    html body .mea-footer__list {
        gap: var(--s-2);
    }

    html body .innerBanner img {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 575.98px) {
    :root {
        --gutter: 16px;
    }

    .mea-a11y__grid {
        gap: var(--s-2);
    }

    html body .mea-a11y__btn {
        min-height: 76px;
    }
}

@media (max-width: 359.98px) {
    .mea-a11y__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mea-brand__name {
        font-size: 1rem;
    }
}

/* ---------- 12. Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

@media print {

    .mea-header-wrap,
    .mea-footer__social,
    .mea-top-btn,
    .skip-link,
    .footerLogos {
        display: none !important;
    }

    html body .mea-footer {
        background: none !important;
        color: #000 !important;
    }
}

/* Scroll box around wide tables */
.mea-table-scroll {
    max-width: 100%;
    margin: 0 0 var(--s-4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mea-table-scroll table {
    margin-bottom: 0;
}

html body .mea-footer__list li::before,
html body .mea-footer__list li::after {
    display: none !important;
    content: none !important;
}

html.a11y-links body a *:not(i) {
    color: #000 !important;
}

html.a11y-links body .mea-footer a,
html.a11y-links body .mea-footer a * {
    color: #000 !important;
}

/* Inner page banner: icon + title in a row, no legacy absolute positioning or text shadow */
html body .innerBanner img {
    position: static !important;
    float: none !important;
}

html body .innerBanner,
html body .innerBanner * {
    text-shadow: none !important;
}

/* Sidebar menu stays in the normal flow (legacy small-screen CSS floated it above the content) */
html body .rightPart .leftMenu,
html body .rightPart .menuTitle,
html body #menuLeft {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
}

html body .container:has(> .leftPartInner)>.leftPartInner {
    order: 1;
}

html body .container:has(> .leftPartInner)>.rightPartShadow {
    order: 2;
}

/* Listings of documents / news on inner pages */
html body #innerContent .commonListings li,
html body #innerContent .commonListing li {
    font-size: var(--fs-p1);
}

html body #innerContent .commonListings a,
html body #innerContent .commonListing a {
    font-size: var(--fs-p1) !important;
    font-weight: 500;
    line-height: 1.5;
}

html body #innerContent .commonListings img,
html body #innerContent .commonListing img {
    display: inline-block;
    width: auto;
    height: 1.1em;
    vertical-align: -0.15em;
}

html body #innerContent .commonListings li>div>span,
html body #innerContent .commonListings .date {
    color: var(--muted);
    font-size: var(--fs-p2);
}

/* Pages without sidebar content: the main column takes the full width */
html body .rightPart:not(:has(*)) {
    display: none;
}

html body .rightPartShadow:has(> .rightPart:not(:has(*))) {
    display: none;
}

html body .container:has(> .leftPartInner):has(> .rightPartShadow > .rightPart:not(:has(*))) {
    grid-template-columns: minmax(0, 1fr);
}

html body main {
    display: block;
    float: none !important;
    width: 100%;
    clear: both;
}

/* ==========================================================================
   Homepage news / highlights
   Left: featured card (always the latest item). Right: next items, two at a time,
   scrolled by dbim.js. Grid makes both columns the same height; the carousel
   viewport fills whatever height the featured card sets.
   ========================================================================== */
.mea-news {
    --gap: 20px;
    --pv-base: 2;
    --pv: min(var(--pv-base), var(--count, 2));
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: stretch;
}

.mea-news--single {
    grid-template-columns: minmax(0, 1fr);
}

.mea-news--single .mea-feature {
    max-width: 880px;
}

/* ---- Featured card ---- */
.mea-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--tint);
    overflow: hidden;
}

.mea-feature__media,
.mea-card__media {
    position: relative;
    overflow: hidden;
    background: var(--c-900);
}

.mea-feature__media {
    aspect-ratio: 3 / 2;
}

.mea-feature__media::before,
.mea-card__media::before {
    content: "\f03e";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .35);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 2.5rem;
}

html body .mea-feature__media img,
html body .mea-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.mea-feature:hover .mea-feature__media img,
.mea-card:hover .mea-card__media img {
    transform: scale(1.03);
}

.mea-feature__body {
    flex: 1 1 auto;
    padding: var(--s-4) var(--s-5) var(--s-5);
}

html body .mea-feature__date,
html body .mea-card__date {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-1);
    color: var(--muted);
    font-size: var(--fs-p2);
    font-weight: 500;
}

html body .mea-feature__title {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* ---- Side column: head row + carousel viewport ---- */
.mea-news__side {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-width: 0;
    min-height: 0;
}

.mea-news__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 40px;
}

html body .mea-news__label {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 700;
}

.mea-news__status {
    margin-left: var(--s-2);
    color: var(--muted);
    font-size: var(--fs-p2);
    font-weight: 500;
    white-space: nowrap;
}

.mea-news__controls {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.mea-news__controls[hidden] {
    display: none;
}

html body .mea-news__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--c-700);
    border-radius: 50%;
    background: var(--bg);
    color: var(--link);
    font-size: .875rem;
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

html body .mea-news__btn:hover {
    background: var(--c-700);
    color: #fff;
}

.mea-news__viewport {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

html:not(.js) .mea-news__viewport {
    overflow: auto;
}

html body .mea-news__track {
    position: absolute;
    inset: 0 0 1px 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .55s var(--ease);
    will-change: transform;
}

html body .mea-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - (var(--pv) - 1) * var(--gap)) / var(--pv));
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--tint);
    overflow: hidden;
    list-style: none;
    transition: box-shadow .2s var(--ease);
}

.mea-card:hover,
.mea-feature:hover {
    box-shadow: var(--shadow);
}

.mea-card__media {
    flex: 1 1 0;
    min-height: 96px;
}

.mea-card__body {
    flex: 0 0 auto;
    padding: var(--s-3) var(--s-4);
}

html body .mea-card__title {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 600;
    line-height: 1.4;
}

html body .mea-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--head);
    text-decoration: none;
}

html body .mea-feature__title a {
    color: var(--head);
    text-decoration: none;
}

/* The whole card is the click target; focus is drawn around the card */
html body .mea-card__title a::after,
html body .mea-feature__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

html body .mea-card__title a:focus-visible,
html body .mea-feature__title a:focus-visible {
    outline: none !important;
}

html body .mea-card__title a:focus-visible::after,
html body .mea-feature__title a:focus-visible::after {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

html body .mea-card__title a:hover,
html body .mea-feature__title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Tablet / mobile: stacked, cards slide horizontally ---- */
@media (max-width: 991.98px) {
    .mea-news {
        grid-template-columns: minmax(0, 1fr);
        --gap: 16px;
    }

    .mea-feature__body {
        padding: var(--s-4);
    }

    html body .mea-news__track {
        position: static;
        flex-direction: row;
        touch-action: pan-y;
    }

    .mea-news__viewport {
        flex: 0 0 auto;
    }

    .mea-card__media {
        flex: 0 0 auto;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    html body .mea-card {
        height: auto;
    }
}

@media (max-width: 575.98px) {
    .mea-news {
        --pv-base: 1;
    }

    .mea-news__status {
        display: block;
        margin: 0;
    }

    html body .mea-news__label {
        line-height: 1.2;
    }
}

/* Legacy list clearfix pseudo-elements would become flex items (and add a phantom gap) */
html body .mea-news__track::before,
html body .mea-news__track::after,
html body .mea-news::before,
html body .mea-news::after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   DBIM icon set (public_files/assets/images/dbim_icons, from the DBIM icon library).
   Rendered as a CSS mask so the glyph takes the current text colour and follows
   the dark / contrast / highlight modes. Direction variants use `rotate`
   (independent of `transform`, which hover effects use).
   ========================================================================== */
.dbim-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    vertical-align: -0.28em;
    background-color: currentColor;
    -webkit-mask: var(--dbim-icon, none) center / contain no-repeat;
    mask: var(--dbim-icon, none) center / contain no-repeat;
}

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

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

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

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

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

.dbim-icon--saturation {
    --dbim-icon: url("../images/dbim_icons/saturation.svg");
}

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

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

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

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

.dbim-icon--default-cursor {
    --dbim-icon: url("../images/dbim_icons/default-cursor.svg");
}

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

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

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

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

.dbim-icon--menu {
    --dbim-icon: url("../images/dbim_icons/menu.svg");
}

.dbim-icon--chevron-left {
    --dbim-icon: url("../images/dbim_icons/chevron-left.svg");
}

.dbim-icon--chevron-right {
    --dbim-icon: url("../images/dbim_icons/chevron-right.svg");
}

.dbim-icon--arrow-left {
    --dbim-icon: url("../images/dbim_icons/arrow-left.svg");
}

.dbim-icon--calendar {
    --dbim-icon: url("../images/dbim_icons/calendar.svg");
}

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

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

.dbim-icon--account-circle {
    --dbim-icon: url("../images/dbim_icons/account-circle.svg");
}

.dbim-icon--phone {
    --dbim-icon: url("../images/dbim_icons/phone.svg");
}

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

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

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

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

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

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

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

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

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

.dbim-icon--arrow-right {
    --dbim-icon: url("../images/dbim_icons/arrow-left.svg");
    rotate: 180deg;
}

.dbim-icon--arrow-up {
    --dbim-icon: url("../images/dbim_icons/arrow-left.svg");
    rotate: 90deg;
}

.dbim-icon--chevron-down {
    --dbim-icon: url("../images/dbim_icons/chevron-right.svg");
    rotate: 90deg;
}

/* Sizes in context */
html body .mea-search__btn .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
}

html body .mea-tool-btn .dbim-icon {
    width: 1.875rem;
    height: 1.875rem;
    vertical-align: middle;
}

html body .mea-a11y__title .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

html body .mea-a11y__btn .dbim-icon {
    width: 1.75rem;
    height: 1.75rem;
    vertical-align: middle;
}

html body .mea-a11y__link .dbim-icon {
    width: 1.25rem;
    height: 1.25rem;
}

html body .mea-news__btn .dbim-icon,
html body .mea-top-btn .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

html body .mea-footer__social-list .dbim-icon {
    width: 1.375rem;
    height: 1.375rem;
    vertical-align: middle;
}

html body .mea-viewall .dbim-icon {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

html body .mea-feature__date .dbim-icon,
html body .mea-card__date .dbim-icon {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

html body .mea-link-icon.dbim-icon {
    width: 1.05em;
    height: 1.05em;
    margin-left: 4px;
    opacity: .85;
    vertical-align: -0.15em;
}

html body .skip-link .dbim-icon {
    vertical-align: -0.3em;
    margin-right: 4px;
}

/* PDF links inside page content get the DBIM PDF glyph */
html body .mcontent a[href$=".pdf"]::after,
html body .commonListing a[href$=".pdf"]::after {
    content: "";
    width: 1.1em;
    height: 1.1em;
    margin-left: 6px;
    font-family: inherit;
    font-size: inherit;
    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;
}

/* ==========================================================================
   Homepage layout system
   - every top-level block is a .mea-section; spacing between blocks is always
     2 x --section-pad (each section pads itself, grey bands included)
   - rows with a left and a right column use .mea-split (grid, stretch) so both
     columns share the same top and bottom edge; the boxes inside grow to fill
   ========================================================================== */
:root {
    --section-pad: 24px;
}

@media (max-width: 991.98px) {
    :root {
        --section-pad: 20px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --section-pad: 16px;
    }
}

.mea-section {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}

.mea-band {
    background: var(--surface);
}

.mea-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--s-5);
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .mea-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Buttons (DBIM 4.5: consistent size, short labels, distinct enabled / hover / focus / active / disabled) */
.mea-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 44px;
    padding: 0 var(--s-5);
    border: 1px solid var(--c-700);
    border-radius: var(--radius);
    background: var(--c-700);
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-p2);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}

.mea-btn:hover {
    background: var(--c-900);
    border-color: var(--c-900);
    color: #fff;
}

.mea-btn:active {
    background: var(--c-900);
    border-color: var(--c-900);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .25);
}

.mea-btn--outline {
    background: var(--bg);
    border-color: var(--c-700);
    color: var(--c-700);
}

.mea-btn--outline:hover {
    background: var(--tint-strong);
    border-color: var(--c-700);
    color: var(--c-900);
}

.mea-btn--outline:active {
    background: var(--c-300);
}

.mea-btn:disabled,
.mea-btn[aria-disabled="true"] {
    background: var(--grey-1);
    border-color: var(--grey-1);
    color: var(--grey-3);
    box-shadow: none;
    cursor: not-allowed;
}

/* ---- Updates ticker (also used for the partner logos in the footer) ---- */
.mea-ticker-band {
    background: var(--c-900);
    color: #fff;
}

.mea-ticker-band__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 48px;
}

.mea-ticker-band__label {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 12px;
    border-radius: var(--radius);
    background: var(--c-100);
    color: var(--c-900);
    font-size: var(--fs-p2);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mea-ticker {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: var(--s-3);
    min-width: 0;
}

.mea-ticker__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    touch-action: pan-y;
}

.mea-ticker__track {
    display: flex;
    width: max-content;
}

.mea-ticker__list {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-ticker__item {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 var(--s-4);
    list-style: none;
    white-space: nowrap;
}

.mea-ticker-band .mea-ticker__item::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-right: var(--s-3);
    border-radius: 50%;
    background: var(--c-300);
}

.mea-ticker-band .mea-ticker__item a {
    color: #fff;
    font-size: var(--fs-p1);
    font-weight: 500;
    line-height: 48px;
    text-decoration: none;
}

.mea-ticker-band .mea-ticker__item a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Continuous loop: the list is cloned once, so -50% is exactly one list width */
.mea-ticker.is-running .mea-ticker__track {
    animation: mea-ticker var(--ticker-duration, 40s) linear infinite;
}

.mea-ticker.is-paused .mea-ticker__track {
    animation-play-state: paused;
}

/* Reduced motion: no animation until the user presses Play; content stays reachable by scrolling */
.mea-ticker.is-static .mea-ticker__track {
    animation: none;
}

.mea-ticker.is-static .mea-ticker__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
}

@keyframes mea-ticker {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.mea-ticker__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .15s var(--ease);
}

.mea-ticker__toggle:hover {
    background: rgba(255, 255, 255, .18);
}

.mea-ticker__toggle[hidden] {
    display: none;
}

.mea-ticker-band :focus-visible {
    outline-color: #fff;
}

/* ---- Performance board banner ---- */
.mea-banner {
    display: block;
}

.mea-banner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Panels and boxes ---- */
.mea-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--bg);
}

.mea-panel__title,
.mea-box__title {
    margin: 0;
    padding: 12px var(--s-4);
    background: var(--c-900);
    color: #fff;
    font-size: var(--fs-p1);
    font-weight: 600;
    line-height: 1.4;
}

.mea-panel__more {
    margin: auto 0 0;
    padding: var(--s-4) 0 0;
    text-align: right;
}

.mea-panel>.mea-panel__more {
    padding: var(--s-3) var(--s-4) var(--s-4);
}

.mea-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-width: 0;
}

.mea-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--border);
    background: var(--bg);
}

.mea-box__body {
    flex: 1 1 auto;
    padding: var(--s-4);
    font-size: var(--fs-p2);
}

.mea-box__body p {
    margin: 0 0 var(--s-2);
    line-height: 1.5;
}

.mea-box__body p:last-child {
    margin-bottom: 0;
}

.mea-emergency {
    color: var(--c-error);
    font-weight: 700;
}

html.a11y-dark .mea-emergency {
    color: #FF9A92;
}

.mea-box--profile {
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-4);
    background: var(--tint);
    text-align: center;
}

.mea-box__photo {
    width: 150px;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
}

.mea-box__name {
    margin: 0;
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 700;
}

.mea-box__role {
    display: block;
    color: var(--muted);
    font-size: var(--fs-p2);
    font-weight: 500;
}

.mea-box__link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--link);
    font-size: var(--fs-p2);
    font-weight: 600;
}

.mea-org {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}

.mea-org img {
    flex: 0 0 auto;
    width: 30px;
    height: auto;
}

.mea-org p {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.mea-org strong {
    color: var(--head);
}

.mea-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-social li {
    margin: 0;
}

.mea-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    color: var(--head);
    transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}

.mea-social a:hover {
    background: var(--tint-strong);
    border-color: var(--c-700);
    color: var(--c-700);
    transform: translateY(-2px);
}

.mea-social .dbim-icon {
    width: 1.375rem;
    height: 1.375rem;
}

/* ---- Tabs (own implementation; see dbim.js) ---- */
.mea-tabs__list {
    display: flex;
    flex: 0 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: inset 0 -2px 0 var(--tint-strong);
    /* baseline drawn inside, so no negative margins are needed */
    scrollbar-width: thin;
}

.mea-tabs__tab {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px var(--s-4);
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--text);
    font-size: var(--fs-p1);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease);
}

.mea-tabs__tab:hover {
    background: var(--tint);
    color: var(--link);
}

.mea-tabs__tab[aria-selected="true"] {
    color: var(--link);
    border-bottom-color: var(--accent);
}

/* All panels share one grid cell, so the box is as tall as the tallest panel and never changes height
   when a tab is selected. Inactive panels stay laid out but are visibility:hidden (not focusable,
   not read out by screen readers). */
.mea-tabs__panels {
    display: grid;
    flex: 1 1 auto;
}

.mea-tabs__panel {
    display: flex;
    flex-direction: column;
    grid-area: 1 / 1;
    min-width: 0;
    padding: var(--s-4);
}

.mea-tabs__panel[hidden] {
    display: flex;
    visibility: hidden;
}

.mea-feed {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-feed__item {
    margin: 0;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
    list-style: none;
}

.mea-feed__item:first-child {
    padding-top: 0;
}

.mea-feed__item:last-child {
    border-bottom: 0;
}

.mea-feed__link {
    color: var(--link);
    font-size: var(--fs-p1);
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
}

.mea-feed__link:hover {
    color: var(--link-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mea-feed__new {
    display: inline-block;
    width: auto;
    height: 12px;
    margin-left: var(--s-1);
    vertical-align: baseline;
}

.mea-feed__date {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    color: var(--muted);
    font-size: var(--fs-p2);
}

.mea-feed__date .dbim-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.mea-embeds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
}

.mea-embeds iframe {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
    height: 450px;
    border: 0;
}

.mea-embeds--x a {
    flex: 1 1 280px;
}

/* ---- Photo gallery list ---- */
.mea-albums {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    margin: 0;
    padding: var(--s-4);
    list-style: none;
}

.mea-album {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--s-4);
    margin: 0;
    padding: 0 0 var(--s-4);
    border-bottom: 1px solid var(--border);
    list-style: none;
}

.mea-album:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.mea-album__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--c-900);
}

.mea-album__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mea-album__date {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 6px;
    background: rgba(22, 47, 106, .9);
    color: #fff;
    font-size: var(--fs-sm);
    text-align: center;
}

.mea-album__title {
    /* At most 3 lines, then an ellipsis; the box is always 3 lines tall so every item lines up */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: calc(1.45em * 3);
    margin: 0 0 var(--s-2);
    font-size: var(--fs-p1);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mea-album__title a,
.mea-album__more {
    color: var(--link);
    text-decoration: none;
}

.mea-album__title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mea-album__more {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--fs-p2);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .mea-album {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Important links ---- */
.mea-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-links__item {
    margin: 0;
    list-style: none;
}

.mea-link-card {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    height: 100%;
    min-height: 72px;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--head);
    font-size: var(--fs-p2);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.mea-link-card img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.mea-link-card:hover {
    border-color: var(--c-700);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    color: var(--head);
}

/* ---- Portal tiles ---- */
.mea-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mea-tiles li {
    margin: 0;
    list-style: none;
}

.mea-tiles a {
    display: block;
    border: 1px solid var(--border);
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.mea-tiles a:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.mea-tiles img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

/* ---- Contact strip + map ---- */
.mea-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--s-4);
    margin: 0 0 var(--s-4);
    padding: 0;
    list-style: none;
}

.mea-contact__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0;
    padding: var(--s-4);
    border: 1px solid var(--border);
    background: var(--bg);
    list-style: none;
}

.mea-contact__item p {
    min-width: 0;
    margin: 0;
    font-size: var(--fs-p2);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mea-contact__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--tint-strong);
    color: var(--link);
}

.mea-contact__icon .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.mea-map {
    display: block;
    width: 100%;
    height: 260px;
    border: 1px solid var(--border);
}

/* ---- Partner-logo strip above the footer (same ticker component) ---- */
.mea-logos {
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.mea-ticker--logos .mea-ticker__item {
    padding: 0 var(--s-5);
}

.mea-ticker--logos img {
    display: block;
    width: auto;
    height: 64px;
    max-width: 200px;
    object-fit: contain;
}

.mea-ticker--logos .mea-ticker__toggle {
    border-color: var(--border-strong);
    color: var(--head);
}

.mea-ticker--logos .mea-ticker__toggle:hover {
    background: var(--tint-strong);
}

/* ---- Modes ---- */
html.a11y-contrast .mea-panel__title,
html.a11y-contrast .mea-box__title,
html.a11y-contrast .mea-ticker-band__label {
    background: #000;
    color: #FFEB3B;
    border-bottom: 1px solid #fff;
}

html.a11y-contrast .mea-ticker-band {
    background: #000;
    border-block: 1px solid #fff;
}

html.a11y-contrast .mea-ticker-band .mea-ticker__item a {
    color: #FFEB3B;
}

html.a11y-dark .mea-ticker-band {
    background: #0A1128;
    border-block: 1px solid var(--border);
}

/* Tickers autoplay by default (a Pause button is always available), even when the OS asks for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mea-ticker.is-running .mea-ticker__track {
        animation-duration: var(--ticker-duration, 40s) !important;
        animation-iteration-count: infinite !important;
    }
}

html body .mea-ticker__toggle .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
}

html body .mea-box__link .dbim-icon {
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

html body .mea-album__more .dbim-icon {
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: middle;
}

/* Lucide line icons for the few glyphs the DBIM set does not include */
.dbim-icon--mail {
    --dbim-icon: url("../images/dbim_icons/mail.svg");
}

.dbim-icon--map-pin {
    --dbim-icon: url("../images/dbim_icons/map-pin.svg");
}

.dbim-icon--clock {
    --dbim-icon: url("../images/dbim_icons/clock.svg");
}

.dbim-icon--close {
    --dbim-icon: url("../images/dbim_icons/close.svg");
}

/* Legacy list clearfix pseudo-elements would become stray grid / flex items */
.mea-links::before,
.mea-links::after,
.mea-tiles::before,
.mea-tiles::after,
.mea-contact::before,
.mea-contact::after,
.mea-social::before,
.mea-social::after,
.mea-albums::before,
.mea-albums::after,
.mea-ticker__list::before,
.mea-ticker__list::after,
.mea-footer__list::before,
.mea-footer__list::after,
.mea-tabs__list::before,
.mea-tabs__list::after {
    content: none;
    display: none;
}

html.a11y-contrast .mea-emergency {
    color: #FFEB3B;
}

html.a11y-dark .mea-org img,
html.a11y-contrast .mea-org img {
    padding: 2px;
    border-radius: var(--radius);
    background: #fff;
}

/* Ambassador card takes the spare height of the column; the "Stay Connected" card is only as tall as its content */
.mea-side>.mea-box--profile {
    flex: 1 1 auto;
    /* never smaller than its content, takes the spare height */
    min-height: min-content;
}

.mea-side>.mea-box--compact {
    flex: 0 0 auto;
}

/* Skip to main content: icon control with the same divider as the language selector */
html body .mea-tool-btn--skip {
    margin-right: var(--s-2);
    padding-right: var(--s-2);
    border-right: 1px solid var(--border);
    border-radius: var(--radius) 0 0 var(--radius);
    text-decoration: none;
}

/* ==========================================================================
   Border-radius scale (one rule set, applied consistently)
   --radius     4px  controls: buttons, inputs, search, tags
   --radius-lg  8px  containers: cards, panels, boxes, pop-ups, media, maps
   50%               round icon buttons only
   ========================================================================== */
.mea-feature,
.mea-panel,
.mea-box,
.mea-card,
.mea-link-card,
.mea-contact__item,
.mea-map,
.mea-tiles a,
.mea-banner,
.mea-album__media,
.mea-a11y,
.mea-pop,
html body .rightPart {
    border-radius: var(--radius-lg);
}

/* Containers whose coloured title bars / media must follow the rounded corners */
.mea-feature,
.mea-panel,
.mea-box,
.mea-card,
.mea-link-card,
.mea-tiles a,
.mea-banner,
html body .rightPart {
    overflow: hidden;
}

.mea-banner img,
.mea-tiles img {
    border-radius: inherit;
}

html body .mea-tabs__tab {
    border-radius: var(--radius) var(--radius) 0 0;
}

html body .footerLogos .mea-ticker__viewport,
html body .mea-ticker__viewport {
    border-radius: var(--radius);
}

/* Same radius for content images and embedded media on inner pages */
html body .mcontent img,
html body .mcontent iframe {
    border-radius: var(--radius);
}

/* Containers clip their children, so draw keyboard focus inside them */
html body .mea-tabs__tab:focus-visible,
html body .mea-link-card:focus-visible,
html body .mea-tiles a:focus-visible,
html body .mea-banner:focus-visible {
    outline-offset: -3px !important;
}

/* Drawer follows the contrast / dark themes */
html.a11y-contrast .mea-nav__drawer {
    background: #000;
    border-right: 1px solid #fff;
}

html.a11y-contrast.nav-mobile .mea-nav,
html.a11y-contrast.nav-mobile .mea-nav__menu-btn,
html.a11y-contrast.nav-mobile .mea-nav__drawer-head {
    background: #000;
    color: #FFEB3B;
    border-bottom: 1px solid #fff;
}

html.a11y-contrast.nav-mobile .mea-nav__link,
html.a11y-contrast.nav-mobile .mea-mega__head,
html.a11y-contrast.nav-mobile .mea-mega__link {
    color: #FFEB3B;
}

html.a11y-dark.nav-mobile .mea-nav,
html.a11y-dark.nav-mobile .mea-nav__menu-btn,
html.a11y-dark.nav-mobile .mea-nav__drawer-head {
    background: #0A1128;
}

html.a11y-dark.nav-mobile .mea-mega {
    background: var(--surface);
}

/* X (Twitter) tab: timeline links read as a list until the widget replaces them */
.mea-embeds--x a {
    display: block;
    padding: var(--s-2) 0;
}

/* ==========================================================================
   Links are never underlined (normal, hover, focus), site-wide.
   Keyboard focus keeps its outline. The opt-in "Highlight links" accessibility mode
   is the one exception, because underlining is part of what that mode does.
   ========================================================================== */
html:not(.a11y-links) body a,
html:not(.a11y-links) body a:hover,
html:not(.a11y-links) body a:focus,
html:not(.a11y-links) body a:active,
html:not(.a11y-links) body a:visited,
html:not(.a11y-links) body button.mea-a11y__link {
    text-decoration: none !important;
}

/* ==========================================================================
   Cookie consent banner, preferences dialog, switches, embed placeholders
   ========================================================================== */
.mea-consent {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    /* above the drawer (200), pop-ups and floating buttons */
    max-height: 75vh;
    overflow-y: auto;
    padding: var(--s-4) 0;
    background: var(--bg);
    border-top: 3px solid var(--c-700);
    box-shadow: 0 -6px 24px rgba(22, 47, 106, .16);
    animation: mea-consent-in .3s var(--ease);
}

.mea-consent[hidden],
.mea-modal[hidden],
.mea-gate[hidden] {
    display: none;
}

.mea-consent__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-6);
}

.mea-consent__body {
    flex: 1 1 420px;
    min-width: 0;
}

.mea-consent__title {
    margin: 0 0 var(--s-1);
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 700;
    line-height: 1.4;
}

.mea-consent__text {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-p2);
    line-height: 1.5;
}

.mea-consent__text a {
    color: var(--link);
    font-weight: 600;
}

.mea-consent__actions {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--s-3);
}

@keyframes mea-consent-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: none;
    }
}

/* Room for the banner so it never hides the end of the page, and floating buttons sit above it */
html.consent-open body {
    padding-bottom: var(--consent-h, 0px);
}

html.consent-open .mea-top-btn {
    bottom: calc(var(--consent-h, 0px) + var(--s-4));
}

@media (max-width: 767.98px) {
    .mea-consent {
        padding: var(--s-3) 0;
    }

    /* Phones: Customize on its own row, Reject and Accept side by side */
    .mea-consent__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        flex: 1 1 100%;
        gap: var(--s-2);
    }

    .mea-consent__actions .mea-btn {
        width: 100%;
        padding: 0 var(--s-2);
    }

    .mea-consent__actions .mea-btn:first-child {
        grid-column: 1 / -1;
    }

    .mea-consent__title {
        font-size: var(--fs-p1);
    }
}

/* ---- Preferences dialog ---- */
html.modal-open {
    overflow: hidden;
}

.mea-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
}

.mea-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgba(10, 17, 40, .6);
}

.mea-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: calc(100vh - 2 * var(--s-4));
    max-height: calc(100dvh - 2 * var(--s-4));
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mea-modal__dialog:focus {
    outline: none;
}

.mea-modal__head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
    background: var(--c-900);
    color: #fff;
}

html body .mea-modal__title {
    margin: 0;
    color: #fff;
    font-size: var(--fs-h3);
    font-weight: 700;
}

.mea-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.mea-modal__close:hover {
    background: rgba(255, 255, 255, .18);
}

.mea-modal__close .dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.mea-modal__close:focus-visible,
.mea-modal__head :focus-visible {
    outline-color: #fff;
}

.mea-modal__body {
    flex: 1 1 auto;
    padding: var(--s-4) var(--s-5);
    overflow-y: auto;
}

.mea-modal__intro {
    margin: 0 0 var(--s-4);
    font-size: var(--fs-p2);
    line-height: 1.5;
}

.mea-modal__foot {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-5) var(--s-4);
    border-top: 1px solid var(--border);
}

@media (max-width: 575.98px) {
    .mea-modal {
        padding: var(--s-2);
    }

    .mea-modal__foot {
        flex-direction: column;
    }

    .mea-modal__foot .mea-btn {
        width: 100%;
    }
}

.mea-consent-cat {
    margin: 0;
    padding: 0;
    border: 0;
}

.mea-consent-cat__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--border);
}

.mea-consent-cat__row:last-child {
    border-bottom: 0;
}

.mea-consent-cat__info {
    min-width: 0;
}

.mea-consent-cat__name {
    display: block;
    margin: 0 0 var(--s-1);
    color: var(--head);
    font-size: var(--fs-p1);
    font-weight: 600;
    line-height: 1.4;
}

.mea-consent-cat__desc {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-p2);
    line-height: 1.5;
}

.mea-consent-cat__fixed {
    flex: 0 0 auto;
    color: var(--c-success);
    font-size: var(--fs-p2);
    font-weight: 600;
    white-space: nowrap;
}

/* Switch: a real (visually transparent) checkbox on top of a drawn track, so keyboard and screen readers get a native control */
.mea-switch {
    position: relative;
    flex: 0 0 48px;
    width: 48px;
    height: 28px;
}

.mea-switch input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mea-switch__ui {
    position: absolute;
    inset: 0;
    border: 1px solid var(--grey-2);
    border-radius: 14px;
    background: var(--grey-1);
    transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

.mea-switch__ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .2s var(--ease);
}

.mea-switch input:checked+.mea-switch__ui {
    border-color: var(--c-700);
    background: var(--c-700);
}

.mea-switch input:checked+.mea-switch__ui::after {
    transform: translateX(20px);
}

.mea-switch input:focus-visible+.mea-switch__ui {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ---- Placeholder shown instead of third-party content until it is allowed ---- */
.mea-gate {
    flex: 0 0 auto;
    padding: var(--s-5);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--tint);
}

.mea-gate p {
    margin: 0 0 var(--s-3);
    font-size: var(--fs-p2);
    line-height: 1.5;
}

.mea-gate__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-4);
    margin: 0;
}

.mea-gate__link {
    color: var(--link);
    font-size: var(--fs-p2);
    font-weight: 600;
}

.mea-gate--map {
    margin-bottom: var(--s-4);
}

.mea-gate--video {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
    overflow: auto;
}

/* Footer "Cookie Settings" looks like the other footer links */
html body .mea-footer__linkbtn {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-family: inherit;
    font-size: var(--fs-p1);
    cursor: pointer;
}

html body .mea-footer__linkbtn::before {
    content: "\203A";
    display: inline-block;
    margin-right: var(--s-2);
    font-weight: 700;
}

/* Text links inside page content: no underline, so they are set apart by colour and weight */
.mcontent p a,
.mcontent li a,
.mcontent td a {
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .mea-consent {
        animation: none;
    }
}

/* The banner sits above the drawer and the accessibility panel; keep their content clear of it */
html.consent-open.nav-mobile .mea-nav__drawer {
    bottom: var(--consent-h, 0px);
}

@media (max-width: 767.98px) {
    html.consent-open .mea-a11y {
        max-height: calc(100dvh - 16px - var(--consent-h, 0px));
    }
}

/* Embeds that have not been allowed yet have no src: they take no space (the placeholder is shown instead) */
.mea-embeds iframe:not([src]),
iframe.mea-map:not([src]) {
    display: none;
}

/* Wide screens: a slightly wider crop keeps the featured card from becoming taller than a laptop viewport */
@media (min-width: 1360px) {
    .mea-feature__media {
        aspect-ratio: 16 / 10;
    }
}