/*
 * Belt and Road homepage responsive normalisation
 * Shared by Android Chrome, Android Firefox and iPhone Safari.
 * Loaded after index.css and scoped to homepage only.
 */

@media screen and (max-width: 1279px) {
  body.bnr-index-page,
  body.tc-home-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.bnr-index-page *,
  body.bnr-index-page *::before,
  body.bnr-index-page *::after,
  body.tc-home-page *,
  body.tc-home-page *::before,
  body.tc-home-page *::after {
    box-sizing: border-box;
  }

  body.bnr-index-page img,
  body.bnr-index-page svg,
  body.tc-home-page img,
  body.tc-home-page svg {
    max-width: 100%;
  }

  body.bnr-index-page .bnr-home,
  body.tc-home-page .bnr-home,
  body.bnr-index-page .bnr-section,
  body.tc-home-page .bnr-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  body.bnr-index-page .bnr-home .bnr-container,
  body.tc-home-page .bnr-home .bnr-container,
  body.bnr-index-page .bnr-cta > .bnr-container,
  body.tc-home-page .bnr-cta > .bnr-container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 28px !important;
  }

  body.bnr-index-page :is(.bnr-what-grid, .dev-grid, .bnr-connect-grid, .bnr-impact-main,
    .bnr-stat-slider, .bnr-stat-viewport, .bnr-stat-track, .bnr-stat-panel,
    .bnr-highlight-slider, .bnr-highlight-viewport, .bnr-highlight-track,
    .bnr-highlight-page, .bnr-highlight-footer, .bnr-event-grid),
  body.tc-home-page :is(.bnr-what-grid, .dev-grid, .bnr-connect-grid, .bnr-impact-main,
    .bnr-stat-slider, .bnr-stat-viewport, .bnr-stat-track, .bnr-stat-panel,
    .bnr-highlight-slider, .bnr-highlight-viewport, .bnr-highlight-track,
    .bnr-highlight-page, .bnr-highlight-footer, .bnr-event-grid) {
    min-width: 0;
    max-width: 100%;
  }

  body.bnr-index-page :is(.bnr-what-item, .dev-item, .bnr-news-card, .what_happening_card,
    .bnr-connect-grid > a, .bnr-stat-card),
  body.tc-home-page :is(.bnr-what-item, .dev-item, .bnr-news-card, .what_happening_card,
    .bnr-connect-grid > a, .bnr-stat-card) {
    min-width: 0;
    max-width: 100%;
  }

  body.bnr-index-page :is(h1, h2, h3, strong, p, time, a),
  body.tc-home-page :is(h1, h2, h3, strong, p, time, a) {
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media screen and (max-width: 767px) {
  /* Header / hamburger */
  body.bnr-index-page .headerArea,
  body.tc-home-page .headerArea,
  body.bnr-index-page #header,
  body.tc-home-page #header {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  body.bnr-index-page .menuBtn,
  body.bnr-index-page .mobileMenuBtn,
  body.bnr-index-page .hamburger,
  body.tc-home-page .menuBtn,
  body.tc-home-page .mobileMenuBtn,
  body.tc-home-page .hamburger {
    right: 18px !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  /* Shared section rhythm */
  body.bnr-index-page .bnr-section,
  body.tc-home-page .bnr-section {
    padding-block: 42px !important;
  }

  body.bnr-index-page .bnr-section h2,
  body.tc-home-page .bnr-section h2 {
    width: 100%;
    max-width: 100%;
    margin: 0 0 28px !important;
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.08 !important;
    text-align: center;
  }

  /* Hero */
  body.bnr-index-page .bnr-hero,
  body.tc-home-page .bnr-hero {
    min-height: 0 !important;
    height: auto !important;
  }

  body.bnr-index-page .bnr-hero-slide,
  body.tc-home-page .bnr-hero-slide {
    min-height: 620px !important;
    height: auto !important;
    background-position: center center !important;
  }

  body.bnr-index-page .bnr-hero-content,
  body.tc-home-page .bnr-hero-content {
    width: 100% !important;
    min-width: 0;
    padding: 108px 28px 54px !important;
  }

  body.bnr-index-page .bnr-tags,
  body.tc-home-page .bnr-tags {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px !important;
    width: 100%;
    margin-bottom: 34px !important;
  }

  body.bnr-index-page .bnr-tags span,
  body.tc-home-page .bnr-tags span {
    width: auto !important;
    max-width: 100%;
    padding: 12px 16px !important;
    font-size: clamp(17px, 4.8vw, 22px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.bnr-index-page .bnr-hero h1,
  body.tc-home-page .bnr-hero h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 34px !important;
    font-size: clamp(42px, 12vw, 62px) !important;
    line-height: 1.06 !important;
    letter-spacing: 0 !important;
  }

  body.bnr-index-page .bnr-hero h1 br,
  body.tc-home-page .bnr-hero h1 br {
    display: none;
  }

  body.bnr-index-page .bnr-hero-actions,
  body.tc-home-page .bnr-hero-actions,
  body.bnr-index-page .bnr-hero-actions a,
  body.tc-home-page .bnr-hero-actions a {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.bnr-index-page .bnr-hero-actions a,
  body.tc-home-page .bnr-hero-actions a {
    display: block;
    padding: 18px 16px !important;
    font-size: clamp(17px, 4.5vw, 21px) !important;
    line-height: 1.25 !important;
    text-align: center;
    white-space: normal !important;
  }

  /* What We Do + Select Profile */
  body.bnr-index-page .bnr-what-grid,
  body.tc-home-page .bnr-what-grid,
  body.bnr-index-page .bnr-connect-grid,
  body.tc-home-page .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  body.bnr-index-page .bnr-what-item,
  body.tc-home-page .bnr-what-item,
  body.bnr-index-page .bnr-connect-grid > a,
  body.tc-home-page .bnr-connect-grid > a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    align-items: center !important;
    column-gap: 18px !important;
    width: 100% !important;
    min-height: 138px !important;
    height: auto !important;
    padding: 22px !important;
  }

  body.bnr-index-page .bnr-what-item > strong,
  body.tc-home-page .bnr-what-item > strong,
  body.bnr-index-page .bnr-connect-grid > a > strong,
  body.tc-home-page .bnr-connect-grid > a > strong {
    min-width: 0 !important;
    width: auto !important;
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.bnr-index-page .bnr-what-item > span,
  body.tc-home-page .bnr-what-item > span,
  body.bnr-index-page .bnr-connect-grid > a > span.cbr,
  body.tc-home-page .bnr-connect-grid > a > span.cbr {
    width: 92px !important;
    min-width: 92px !important;
    height: 92px !important;
    justify-self: end;
  }

  body.bnr-index-page .bnr-what-item svg,
  body.tc-home-page .bnr-what-item svg,
  body.bnr-index-page .bnr-connect-grid > a svg,
  body.tc-home-page .bnr-connect-grid > a svg {
    width: 92px !important;
    height: 92px !important;
  }

  /* Impact at a Glance */
  body.bnr-index-page .bnr-impact-main,
  body.tc-home-page .bnr-impact-main {
    display: block !important;
    width: 100% !important;
  }

  body.bnr-index-page .bnr-stat-viewport,
  body.tc-home-page .bnr-stat-viewport {
    overflow: hidden !important;
    width: 100% !important;
  }

  body.bnr-index-page .bnr-stat-track,
  body.tc-home-page .bnr-stat-track {
    display: flex !important;
    align-items: stretch;
  }

  body.bnr-index-page .bnr-stat-panel,
  body.tc-home-page .bnr-stat-panel {
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  body.bnr-index-page .bnr-stat-card,
  body.tc-home-page .bnr-stat-card {
    width: 100% !important;
/*     min-height: 300px !important; */
    height: auto !important;
    padding: 30px 24px !important;
    overflow: hidden;
  }

  body.bnr-index-page .bnr-stat-card :is(strong, b),
  body.tc-home-page .bnr-stat-card :is(strong, b) {
    max-width: 100%;
    font-size: clamp(32px, 9vw, 48px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body.bnr-index-page .bnr-stat-card :is(p, span),
  body.tc-home-page .bnr-stat-card :is(p, span) {
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
  }

  body.bnr-index-page .bnr-slider-nav,
  body.tc-home-page .bnr-slider-nav,
  body.bnr-index-page .bnr-happening-controls,
  body.tc-home-page .bnr-happening-controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.bnr-index-page .bnr-global-standing,
  body.tc-home-page .bnr-global-standing {
    width: 100% !important;
    min-width: 0;
    padding: 28px 22px !important;
  }

  body.bnr-index-page .bnr-global-standing *,
  body.tc-home-page .bnr-global-standing * {
    min-width: 0;
    max-width: 100%;
  }

  /* Development Areas */
  body.bnr-index-page .dev-grid,
  body.tc-home-page .dev-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
  }

  body.bnr-index-page .dev-item,
  body.tc-home-page .dev-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    min-height: 138px !important;
    height: auto !important;
    padding: 22px !important;
  }

  body.bnr-index-page .dev-item :is(strong, span, p),
  body.tc-home-page .dev-item :is(strong, span, p) {
    min-width: 0 !important;
    width: auto !important;
    font-size: clamp(20px, 5.5vw, 28px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  body.bnr-index-page .dev-item svg,
  body.tc-home-page .dev-item svg {
    width: 86px !important;
    height: 86px !important;
    justify-self: end;
  }

  /* Highlights */
  body.bnr-index-page .bnr-highlight-slider,
  body.tc-home-page .bnr-highlight-slider,
  body.bnr-index-page .bnr-highlight-viewport,
  body.tc-home-page .bnr-highlight-viewport,
  body.bnr-index-page .bnr-highlight-page,
  body.tc-home-page .bnr-highlight-page,
  body.bnr-index-page .bnr-highlight-footer,
  body.tc-home-page .bnr-highlight-footer {
    width: 100% !important;
    margin-inline: 0 !important;
  }

  body.bnr-index-page .bnr-highlight-track,
  body.tc-home-page .bnr-highlight-track {
    display: flex !important;
  }

  body.bnr-index-page .bnr-highlight-page,
  body.tc-home-page .bnr-highlight-page {
    flex: 0 0 100% !important;
    padding: 0 !important;
  }

  body.bnr-index-page .bnr-highlight-page > .bnr-news-card,
  body.tc-home-page .bnr-highlight-page > .bnr-news-card {
    display: none !important;
  }

  body.bnr-index-page .bnr-highlight-page > .bnr-news-card:first-child,
  body.tc-home-page .bnr-highlight-page > .bnr-news-card:first-child {
    display: block !important;
    width: 100% !important;
  }

  body.bnr-index-page .bnr-news-card img,
  body.tc-home-page .bnr-news-card img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  body.bnr-index-page .bnr-news-card h3,
  body.tc-home-page .bnr-news-card h3 {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.25 !important;
  }

  body.bnr-index-page .bnr-highlight-footer,
  body.tc-home-page .bnr-highlight-footer {
    display: block !important;
    padding: 18px !important;
  }

  body.bnr-index-page .bnr-readmore,
  body.tc-home-page .bnr-readmore {
    margin-top: 18px !important;
    text-align: center;
  }

  body.bnr-index-page .bnr-readmore a,
  body.tc-home-page .bnr-readmore a {
    display: inline-flex;
    width: auto !important;
    max-width: 100%;
    padding: 14px 22px !important;
    font-size: 18px !important;
    white-space: normal !important;
  }

  /* What's Happening */
  body.bnr-index-page .bnr-happening .bnr-heading-row,
  body.tc-home-page .bnr-happening .bnr-heading-row {
    display: block !important;
  }

  body.bnr-index-page .bnr-happening .bnr-see-all,
  body.tc-home-page .bnr-happening .bnr-see-all {
    position: static !important;
    display: none !important;
  }

  body.bnr-index-page .bnr-event-grid,
  body.tc-home-page .bnr-event-grid {
    display: flex !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  body.bnr-index-page .bnr-event-grid > article,
  body.tc-home-page .bnr-event-grid > article {
    display: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  body.bnr-index-page .bnr-event-grid > article:first-child,
  body.tc-home-page .bnr-event-grid > article:first-child {
    display: block !important;
  }

  body.bnr-index-page .what_happening_card,
  body.tc-home-page .what_happening_card {
    width: 100% !important;
    min-height: 310px !important;
    height: auto !important;
    padding: 28px 24px !important;
  }

  body.bnr-index-page .what_happening_card time,
  body.tc-home-page .what_happening_card time {
    display: block;
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  body.bnr-index-page .what_happening_card h3,
  body.tc-home-page .what_happening_card h3 {
    margin-top: 22px !important;
    font-size: clamp(25px, 7vw, 34px) !important;
    line-height: 1.2 !important;
  }

  body.bnr-index-page .bnr-happening-actions,
  body.tc-home-page .bnr-happening-actions {
    position: static !important;
    display: block !important;
    width: 100% !important;
    margin-top: 18px !important;
    transform: none !important;
  }

  body.bnr-index-page .bnr-happening-actions .bnr-see-all,
  body.tc-home-page .bnr-happening-actions .bnr-see-all {
    display: inline-flex !important;
    position: static !important;
    transform: none !important;
  }

  /* CTA */
  body.bnr-index-page .bnr-cta,
  body.tc-home-page .bnr-cta {
    height: auto !important;
    min-height: 0 !important;
    padding: 54px 0 46px !important;
  }

  body.bnr-index-page .bnr-cta > .bnr-container,
  body.tc-home-page .bnr-cta > .bnr-container {
    text-align: center;
  }

  body.bnr-index-page .bnr-cta > .bnr-container > span,
  body.tc-home-page .bnr-cta > .bnr-container > span {
    display: block;
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.1 !important;
  }

  body.bnr-index-page .bnr-cta-actions,
  body.tc-home-page .bnr-cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 30px !important;
  }

  body.bnr-index-page .bnr-cta-actions > *,
  body.tc-home-page .bnr-cta-actions > *,
  body.bnr-index-page .bnr-cta-actions a,
  body.tc-home-page .bnr-cta-actions a {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.bnr-index-page .bnr-cta-actions a,
  body.tc-home-page .bnr-cta-actions a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 14px 18px !important;
    font-size: clamp(19px, 5vw, 25px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  body.bnr-index-page .bnr-cta-logo,
  body.tc-home-page .bnr-cta-logo {
    width: calc(100% - 56px) !important;
    max-width: 438px !important;
    height: auto !important;
    margin: 34px auto 0 !important;
  }

  body.bnr-index-page .bnr-cta-logo svg,
  body.tc-home-page .bnr-cta-logo svg {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  /* Footer content inserted by shared JS */
  body.bnr-index-page #footer,
  body.tc-home-page #footer,
  body.bnr-index-page .footerArea,
  body.tc-home-page .footerArea {
    width: 100%;
    max-width: 100%;
    text-align: center !important;
  }

  body.bnr-index-page #footer *,
  body.tc-home-page #footer * {
    max-width: 100%;
  }

  body.bnr-index-page #footer :is(p, div, address),
  body.tc-home-page #footer :is(p, div, address) {
    margin-inline: auto !important;
    text-align: center !important;
  }
}

/* Small phones */
@media screen and (max-width: 390px) {
  body.bnr-index-page .bnr-home .bnr-container,
  body.tc-home-page .bnr-home .bnr-container,
  body.bnr-index-page .bnr-cta > .bnr-container,
  body.tc-home-page .bnr-cta > .bnr-container {
    padding-inline: 20px !important;
  }

  body.bnr-index-page .bnr-hero-content,
  body.tc-home-page .bnr-hero-content {
    padding-inline: 20px !important;
  }

  body.bnr-index-page .bnr-what-item,
  body.tc-home-page .bnr-what-item,
  body.bnr-index-page .dev-item,
  body.tc-home-page .dev-item,
  body.bnr-index-page .bnr-connect-grid > a,
  body.tc-home-page .bnr-connect-grid > a {
    grid-template-columns: minmax(0, 1fr) 76px !important;
    padding: 18px !important;
  }

  body.bnr-index-page .bnr-what-item > span,
  body.tc-home-page .bnr-what-item > span,
  body.bnr-index-page .bnr-connect-grid > a > span.cbr,
  body.tc-home-page .bnr-connect-grid > a > span.cbr,
  body.bnr-index-page .bnr-what-item svg,
  body.tc-home-page .bnr-what-item svg,
  body.bnr-index-page .bnr-connect-grid > a svg,
  body.tc-home-page .bnr-connect-grid > a svg,
  body.bnr-index-page .dev-item svg,
  body.tc-home-page .dev-item svg {
    width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
  }
}

/* =========================================================
   Mobile slider flow correction — 2026-08-04 v2
   Keep What's Happening actions inside its own section and
   restore Impact at a Glance controls in EN / TC.
   ========================================================= */
@media screen and (max-width: 767px) {
  /* Impact at a Glance: override the legacy mobile rule that hides controls. */
  body.bnr-index-page .bnr-impact,
  body.tc-home-page .bnr-impact,
  body.bnr-index-page .bnr-impact .bnr-container,
  body.tc-home-page .bnr-impact .bnr-container,
  body.bnr-index-page .bnr-impact .bnr-stat-slider,
  body.tc-home-page .bnr-impact .bnr-stat-slider {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.bnr-index-page .bnr-impact .bnr-slider-nav.home-content-slider-control,
  body.tc-home-page .bnr-impact .bnr-slider-nav.home-content-slider-control,
  body.bnr-index-page .bnr-impact .bnr-slider-nav,
  body.tc-home-page .bnr-impact .bnr-slider-nav {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    height: auto !important;
    margin: 22px auto 34px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.bnr-index-page .bnr-impact .bnr-slider-nav button,
  body.tc-home-page .bnr-impact .bnr-slider-nav button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  body.bnr-index-page .bnr-impact .bnr-slider-lines,
  body.tc-home-page .bnr-impact .bnr-slider-lines,
  body.bnr-index-page .bnr-impact [data-bnr-slider-dots],
  body.tc-home-page .bnr-impact [data-bnr-slider-dots] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 48px !important;
    height: auto !important;
    gap: 8px !important;
  }

  /* What's Happening: make the controls and READ MORE part of normal flow. */
  body.bnr-index-page .bnr-happening,
  body.tc-home-page .bnr-happening,
  body.bnr-index-page .bnr-happening > .bnr-container,
  body.tc-home-page .bnr-happening > .bnr-container {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.bnr-index-page .bnr-happening > .bnr-container,
  body.tc-home-page .bnr-happening > .bnr-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 44px !important;
  }

  body.bnr-index-page .bnr-happening .bnr-heading-row,
  body.tc-home-page .bnr-happening .bnr-heading-row {
    order: 1;
  }

  body.bnr-index-page .bnr-happening .bnr-event-grid,
  body.tc-home-page .bnr-happening .bnr-event-grid {
    order: 2;
    flex: 0 0 auto !important;
  }

  body.bnr-index-page .bnr-happening .bnr-happening-controls,
  body.tc-home-page .bnr-happening .bnr-happening-controls {
    order: 3;
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin: 24px 0 0 !important;
    transform: none !important;
  }

  body.bnr-index-page .bnr-happening-actions,
  body.tc-home-page .bnr-happening-actions {
    order: 4;
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    clear: both !important;
    width: 100% !important;
    height: auto !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.bnr-index-page .bnr-happening-actions .bnr-see-all,
  body.tc-home-page .bnr-happening-actions .bnr-see-all,
  body.bnr-index-page .bnr-happening .bnr-happening-actions .bnr-see-all,
  body.tc-home-page .bnr-happening .bnr-happening-actions .bnr-see-all {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 14px 24px !important;
    transform: none !important;
    z-index: auto !important;
	order: 4;
    font-size: 18px !important;
  }

  /* Fallback when JS leaves READ MORE in the heading row. */
  body.bnr-index-page .bnr-happening .bnr-heading-row > .bnr-see-all,
  body.tc-home-page .bnr-happening .bnr-heading-row > .bnr-see-all {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    align-self: center !important;
    order: 5;
    width: auto !important;
    margin: 24px auto 0 !important;
    transform: none !important;
  }

  /* Prevent the following profile section from overlapping the action. */
  body.bnr-index-page .bnr-connect,
  body.tc-home-page .bnr-connect {
    position: relative !important;
    clear: both !important;
    margin-top: 0 !important;
  }
}


/* =========================================================
   Homepage mobile finishing corrections — 2026-08-04 v3
   Shared by EN / TC on Android Chrome, Android Firefox and
   iPhone Safari. Desktop and tablet rules are not changed.
   ========================================================= */
@media screen and (max-width: 767px) {
  /* Hero heading: preserve controlled line breaks and reduce overflow. */
  body.bnr-index-page .bnr-hero h1,
  body.tc-home-page .bnr-hero h1 {
    margin-bottom: 22px !important;
    font-size: clamp(38px, 10.2vw, 50px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
/*     word-break: keep-all !important; */
  }

  body.bnr-index-page .bnr-hero h1 br,
  body.tc-home-page .bnr-hero h1 br {
    display: block !important;
  }

  /* Keep the booklet compact and leave clear space before What We Do. */
  body.bnr-index-page .bnr-hero-content,
  body.tc-home-page .bnr-hero-content {
    padding-bottom: 78px !important;
  }

  body.bnr-index-page .bnr-hero-actions,
  body.tc-home-page .bnr-hero-actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  body.bnr-index-page .bnr-hero-actions a,
  body.tc-home-page .bnr-hero-actions a {
    min-height: 0 !important;
    padding: 13px 16px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  /* Get Involved buttons: same compact typography for EN and TC. */
  body.bnr-index-page .bnr-cta-actions a,
  body.tc-home-page .bnr-cta-actions a {
    min-height: 54px !important;
    padding: 11px 16px !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  body.bnr-index-page .bnr-cta-actions .bnr-diagonal-arrow,
  body.tc-home-page .bnr-cta-actions .bnr-diagonal-arrow {
    margin-left: 7px !important;
    font-size: 0.95em !important;
    line-height: 1 !important;
  }

  /* Footer WCAG badge: override the homepage-wide responsive image rule. */
  body.bnr-index-page #footer .w3c,
  body.tc-home-page #footer .w3c {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }

  body.bnr-index-page #footer .w3c a,
  body.tc-home-page #footer .w3c a {
    display: inline-flex !important;
    width: auto !important;
    max-width: none !important;
  }

  body.bnr-index-page #footer .w3c img,
  body.tc-home-page #footer .w3c img {
    display: block !important;
    width: auto !important;
    max-width: 88px !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

@media screen and (max-width: 390px) {
  body.bnr-index-page .bnr-hero h1,
  body.tc-home-page .bnr-hero h1 {
    font-size: 36px !important;
  }

  body.bnr-index-page .bnr-hero-actions a,
  body.tc-home-page .bnr-hero-actions a {
    font-size: 16px !important;
  }

  body.bnr-index-page .bnr-cta-actions a,
  body.tc-home-page .bnr-cta-actions a {
    font-size: 17px !important;
  }
}

/* =========================================================
   Homepage mobile functional corrections — 2026-08-04 v4
   EN / TC — Android Chrome, Android Firefox, iPhone Safari
   ========================================================= */
@media screen and (max-width: 767px) {
  /* Header: neutralise the legacy negative header margins that push the
     hamburger outside the viewport. */
  body.bnr-index-page .headerArea .headerTool,
  body.tc-home-page .headerArea .headerTool,
  body.bnr-index-page .headerArea .headerTool .container,
  body.tc-home-page .headerArea .headerTool .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.bnr-index-page .headerArea .headerTool .headerNav,
  body.tc-home-page .headerArea .headerTool .headerNav,
  body.bnr-index-page .headerTool .headerNav,
  body.tc-home-page .headerTool .headerNav {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.bnr-index-page .headerTool .myLogo,
  body.tc-home-page .headerTool .myLogo {
    min-width: 0 !important;
    max-width: calc(100% - 58px) !important;
    flex: 1 1 auto !important;
  }

  body.bnr-index-page .headerTool .myLogo > div,
  body.tc-home-page .headerTool .myLogo > div {
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 10px !important;
  }

  body.bnr-index-page .headerTool .mobileTool,
  body.tc-home-page .headerTool .mobileTool {
    position: relative !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    overflow: visible !important;
    z-index: 5 !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn,
  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    width: 44px !important;
    height: 44px !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    overflow: visible !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a::before,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a::before {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* What's Happening: a true one-card horizontal scroller. */
  body.bnr-index-page #whats-happening .bnr-event-grid,
  body.tc-home-page #whats-happening .bnr-event-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;
  }

  body.bnr-index-page #whats-happening .bnr-event-grid::-webkit-scrollbar,
  body.tc-home-page #whats-happening .bnr-event-grid::-webkit-scrollbar {
    display: none !important;
  }

  body.bnr-index-page #whats-happening .bnr-event-grid > article,
  body.tc-home-page #whats-happening .bnr-event-grid > article {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page #whats-happening .bnr-happening-actions,
  body.tc-home-page #whats-happening .bnr-happening-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  body.bnr-index-page #whats-happening .bnr-happening-controls,
  body.tc-home-page #whats-happening .bnr-happening-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 3 !important;
  }

  body.bnr-index-page #whats-happening .bnr-happening-controls button,
  body.tc-home-page #whats-happening .bnr-happening-controls button,
  body.bnr-index-page #whats-happening [data-bnr-slider-dots] span,
  body.tc-home-page #whats-happening [data-bnr-slider-dots] span {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

/* ===== Mobile correction: Highlights alignment + original-size hamburger ===== */
@media screen and (max-width: 767px) {
  /* Keep the hamburger at its original 28px visual size; only reserve safe space
     at the right edge so Android Chrome/Firefox and iPhone Safari do not crop it. */
  body.bnr-index-page .headerTool,
  body.tc-home-page .headerTool {
    box-sizing: border-box !important;
    max-width: 100vw !important;
    padding-right: 12px !important;
    overflow: visible !important;
  }

  body.bnr-index-page .headerTool .mobileTool,
  body.tc-home-page .headerTool .mobileTool {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn {
    position: relative !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px !important;
    margin: 0 !important;
    transform: none !important;
    box-sizing: content-box !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a::before,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a::before {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    background-size: 16px 16px !important;
    transform: none !important;
  }

  /* Highlights: page and footer share the exact same width and horizontal edge.
     Do not override the track transform because it is controlled by the slider JS. */
  body.bnr-index-page .bnr-highlight-slider,
  body.tc-home-page .bnr-highlight-slider,
  body.bnr-index-page .bnr-highlight-viewport,
  body.tc-home-page .bnr-highlight-viewport {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .bnr-highlight-track,
  body.tc-home-page .bnr-highlight-track {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body.bnr-index-page .bnr-highlight-page,
  body.tc-home-page .bnr-highlight-page {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .bnr-highlight-page .bnr-news-card,
  body.tc-home-page .bnr-highlight-page .bnr-news-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .bnr-highlight-page .bnr-news-card h3,
  body.tc-home-page .bnr-highlight-page .bnr-news-card h3 {
    min-height: 132px !important;
    display: flex !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .bnr-highlight-footer,
  body.tc-home-page .bnr-highlight-footer {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-width: 99%  !important;
    max-width: 99% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
}

/* ===== Mobile hamburger: formal rounded button (20% smaller) ===== */
@media screen and (max-width: 767px) {
  body.bnr-index-page .headerTool .mobileTool,
  body.tc-home-page .headerTool .mobileTool,
  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn,
  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn,
  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a::before,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a::before {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex: 0 0 22px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }
}

/* =========================================================
   Homepage mobile header final alignment — source(7)
   EN / TC — align logo and hamburger to 20px page inset,
   and reduce hamburger by about 10% from the current 36px size.
   ========================================================= */
@media screen and (max-width: 767px) {
  body.bnr-index-page .headerArea .headerArea2 .headerTool > .container,
  body.tc-home-page .headerArea .headerArea2 .headerTool > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .headerArea .headerArea2 .headerNav,
  body.tc-home-page .headerArea .headerArea2 .headerNav,
  body.bnr-index-page .headerTool .headerNav,
  body.tc-home-page .headerTool .headerNav {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .headerTool .myLogo,
  body.tc-home-page .headerTool .myLogo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 44px) !important;
    margin: 0 !important;
    padding-left: 0px;
  }

  body.bnr-index-page .headerTool .myLogo > div,
  body.tc-home-page .headerTool .myLogo > div {
    padding-left: 0 !important;
    padding-right: 8px !important;
  }

  body.bnr-index-page .headerTool .mobileTool,
  body.tc-home-page .headerTool .mobileTool,
  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn,
  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn,
  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
    transform: none !important;
  }

  body.bnr-index-page .headerTool .mobileTool .mobileMenuBtn > a::before,
  body.tc-home-page .headerTool .mobileTool .mobileMenuBtn > a::before {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex: 0 0 20px !important;
    background-size: 20px 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* =========================================================
   Impact at a Glance — one card per mobile slide
   EN / TC; desktop and tablet layout remain unchanged.
   Slider movement is controlled by en-index.js / tc-index.js.
   ========================================================= */
@media screen and (max-width: 767px) {
  body.bnr-index-page .bnr-impact .bnr-stat-slider,
  body.tc-home-page .bnr-impact .bnr-stat-slider,
  body.bnr-index-page .bnr-impact .bnr-stat-viewport,
  body.tc-home-page .bnr-impact .bnr-stat-viewport {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.bnr-index-page .bnr-impact .bnr-stat-viewport,
  body.tc-home-page .bnr-impact .bnr-stat-viewport {
    overflow: hidden !important;
  }

  body.bnr-index-page .bnr-impact .bnr-stat-track,
  body.tc-home-page .bnr-impact .bnr-stat-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    transition: transform 0.35s ease !important;
    will-change: transform;
  }

  body.bnr-index-page .bnr-impact .bnr-stat-panel,
  body.tc-home-page .bnr-impact .bnr-stat-panel {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card,
  body.tc-home-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card {
/*     display: flex !important; */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.bnr-index-page .bnr-impact .bnr-slider-nav,
  body.tc-home-page .bnr-impact .bnr-slider-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.bnr-index-page .bnr-impact .bnr-slider-nav button,
  body.tc-home-page .bnr-impact .bnr-slider-nav button,
  body.bnr-index-page .bnr-impact [data-bnr-slider-dots] > span,
  body.tc-home-page .bnr-impact [data-bnr-slider-dots] > span {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}


/* Cross-browser mobile normalisation: Firefox and iPhone Safari */
@media screen and (max-width: 767px) {
  body.bnr-index-page,
  body.tc-home-page {
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body.bnr-index-page .bnr-home,
  body.tc-home-page .bnr-home {
    display: block;
    overflow-x: clip;
  }

  @supports not (overflow: clip) {
    body.bnr-index-page .bnr-home,
    body.tc-home-page .bnr-home { overflow-x: hidden; }
  }

  body.bnr-index-page :where(.bnr-what-grid, .dev-grid, .bnr-connect-grid, .bnr-event-grid),
  body.tc-home-page :where(.bnr-what-grid, .dev-grid, .bnr-connect-grid, .bnr-event-grid) {
    grid-auto-columns: minmax(0, 1fr);
  }

  body.bnr-index-page :where(.bnr-stat-track, .bnr-highlight-track, .bnr-event-track),
  body.tc-home-page :where(.bnr-stat-track, .bnr-highlight-track, .bnr-event-track) {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }

  body.bnr-index-page :where(button, a),
  body.tc-home-page :where(button, a) {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  body.bnr-index-page img,
  body.tc-home-page img {
    height: auto;
  }
}


/* Firefox mobile alignment correction — 2026-08-05 */
@supports (-moz-appearance: none) {
  @media screen and (max-width: 767px) {
    body.bnr-index-page .bnr-home *,
    body.tc-home-page .bnr-home * {
      box-sizing: border-box;
    }

    body.bnr-index-page :where(.bnr-container, .bnr-stat-slider, .bnr-stat-viewport, .bnr-highlight-slider, .bnr-highlight-viewport, .bnr-event-grid),
    body.tc-home-page :where(.bnr-container, .bnr-stat-slider, .bnr-stat-viewport, .bnr-highlight-slider, .bnr-highlight-viewport, .bnr-event-grid) {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    body.bnr-index-page .bnr-impact .bnr-slider-nav,
    body.tc-home-page .bnr-impact .bnr-slider-nav {
      width: calc(100% - 16px) !important;
      max-width: calc(100% - 16px) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    body.bnr-index-page :where(.bnr-stat-track, .bnr-highlight-track, .bnr-event-grid),
    body.tc-home-page :where(.bnr-stat-track, .bnr-highlight-track, .bnr-event-grid) {
      scrollbar-width: none;
    }
  }
}

/* =========================================================
   Impact at a Glance — Firefox/mobile metric layout and colours
   Keep the large figure on the first line and its description below.
   Mobile JS converts every card into its own .bnr-stat-panel-mobile slide,
   so colours must be assigned by slide order rather than card nth-child.
   ========================================================= */
@media screen and (max-width: 767px) {
  html body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    min-height: 188px !important;
    padding: 22px 18px !important;
    overflow: hidden !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
    min-height: 188px !important;
    padding: 22px 18px !important;
    overflow: hidden !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card > .bnr-stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    width: 66px !important;
    height: 66px !important;
    margin: 0 !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card > .bnr-stat-icon svg {
    width: 66px !important;
    height: 66px !important;
    max-width: 66px !important;
    max-height: 66px !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card > strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card > strong .bnr-count {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(24px, 7vw, 31px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile > .bnr-stat-card > p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Restore the original per-card palette after mobile JS re-wrapping. */
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(1) > .bnr-stat-card > strong,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(1) > .bnr-stat-card > p,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(5) > .bnr-stat-card > strong,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(5) > .bnr-stat-card > p {
    color: #2f6cba !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(2) > .bnr-stat-card > strong,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(2) > .bnr-stat-card > p,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(6) > .bnr-stat-card > strong,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(6) > .bnr-stat-card > p {
    color: #174b34 !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(3) > .bnr-stat-card > strong,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(3) > .bnr-stat-card > p {
    color: #006b5f !important;
  }

  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(4) > .bnr-stat-card > strong,
  html[lang="en"] body.bnr-index-page .bnr-impact .bnr-stat-panel-mobile:nth-child(4) > .bnr-stat-card > p {
    color: #936d08 !important;
  }
}

/* ==========================================================
   Highlights slider rebuild — 2026-08-19
   Responsive visible-card count mirrors What's Happening:
   <=900px: 1 card, 901-1280px: 2 cards, >1280px: 4 cards.
   Card visual styling remains owned by existing .bnr-news-card rules.
   ========================================================== */
body.bnr-index-page #highlights .bnr-highlight-grid[data-bnr-match-happening],
body.tc-home-page #highlights .bnr-highlight-grid[data-bnr-match-happening] {
  --bnr-highlight-per-view: 4;
  display: flex !important;
  width: 100%;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d3e1e1;
  border-bottom: 0;
  background: transparent;
}

body.bnr-index-page #highlights .bnr-highlight-grid[data-bnr-match-happening]::-webkit-scrollbar,
body.tc-home-page #highlights .bnr-highlight-grid[data-bnr-match-happening]::-webkit-scrollbar {
  display: none;
}

body.bnr-index-page #highlights .bnr-highlight-grid[data-bnr-match-happening] > .bnr-news-card,
body.tc-home-page #highlights .bnr-highlight-grid[data-bnr-match-happening] > .bnr-news-card {
  display: block !important;
  flex: 0 0 calc(100% / var(--bnr-highlight-per-view)) !important;
  width: calc(100% / var(--bnr-highlight-per-view)) !important;
  max-width: calc(100% / var(--bnr-highlight-per-view)) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  scroll-snap-align: start;
}

@media screen and (min-width: 901px) and (max-width: 1280px) {
  body.bnr-index-page #highlights .bnr-highlight-grid[data-bnr-match-happening],
  body.tc-home-page #highlights .bnr-highlight-grid[data-bnr-match-happening] {
    --bnr-highlight-per-view: 2;
  }
}

@media screen and (max-width: 900px) {
  body.bnr-index-page #highlights .bnr-highlight-grid[data-bnr-match-happening],
  body.tc-home-page #highlights .bnr-highlight-grid[data-bnr-match-happening] {
    --bnr-highlight-per-view: 1;
  }
}

/* ==========================================================
   Font scaling correction — Development Areas + Highlights
   2026-08-19
   Keep scaling direction consistent: desktop > tablet > mobile.
   Layout / slider behaviour is intentionally untouched.
   ========================================================== */

/* Desktop */
@media screen and (min-width: 1025px) {
  body.bnr-index-page .bnr-development .dev-item :is(strong, span, p),
  body.tc-home-page .bnr-development .dev-item :is(strong, span, p) {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  body.bnr-index-page #highlights .bnr-news-card h3,
  body.tc-home-page #highlights .bnr-news-card h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  body.bnr-index-page .bnr-development .dev-item :is(strong, span, p),
  body.tc-home-page .bnr-development .dev-item :is(strong, span, p) {
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  body.bnr-index-page #highlights .bnr-news-card h3,
  body.tc-home-page #highlights .bnr-news-card h3 {
    font-size: 18px !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  body.bnr-index-page .bnr-development .dev-item :is(strong, span, p),
  body.tc-home-page .bnr-development .dev-item :is(strong, span, p) {
    font-size: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  body.bnr-index-page #highlights .bnr-news-card h3,
  body.tc-home-page #highlights .bnr-news-card h3 {
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}

/* ==========================================================
   Homepage mobile slider controls — 2026-09-25
   The generated indicators are buttons (not spans).  Reset their
   inherited desktop line width so all three controls stay compact.
   ========================================================== */
@media screen and (max-width: 767px) {
  body.bnr-index-page .bnr-impact .home-content-slider-control,
  body.bnr-index-page .bnr-highlights .home-content-slider-control,
  body.bnr-index-page .bnr-happening .home-content-slider-control,
  body.tc-home-page .bnr-impact .home-content-slider-control,
  body.tc-home-page .bnr-highlights .home-content-slider-control,
  body.tc-home-page .bnr-happening .home-content-slider-control {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 32px !important;
    align-items: center !important;
    column-gap: 6px !important;
    width: min(100%, 190px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.bnr-index-page .home-content-slider-control > button,
  body.tc-home-page .home-content-slider-control > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #07573f !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  body.bnr-index-page .home-content-slider-control > button[data-bnr-slider-prev],
  body.tc-home-page .home-content-slider-control > button[data-bnr-slider-prev] {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  body.bnr-index-page .home-content-slider-control > button[data-bnr-slider-next],
  body.tc-home-page .home-content-slider-control > button[data-bnr-slider-next] {
    grid-column: 3 !important;
    justify-self: end !important;
  }

  body.bnr-index-page .home-content-slider-control .bnr-slider-lines,
  body.tc-home-page .home-content-slider-control .bnr-slider-lines {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    grid-column: 2 !important;
  }

  body.bnr-index-page .bnr-impact .home-content-slider-control .bnr-slider-lines > :is(button, span),
  body.bnr-index-page .bnr-highlights .home-content-slider-control .bnr-slider-lines > :is(button, span),
  body.bnr-index-page .bnr-happening .home-content-slider-control .bnr-slider-lines > :is(button, span),
  body.tc-home-page .bnr-impact .home-content-slider-control .bnr-slider-lines > :is(button, span),
  body.tc-home-page .bnr-highlights .home-content-slider-control .bnr-slider-lines > :is(button, span),
  body.tc-home-page .bnr-happening .home-content-slider-control .bnr-slider-lines > :is(button, span) {
    display: block !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 3px !important;
    min-height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 1px !important;
    background: #78978e !important;
    box-shadow: none !important;
  }

  body.bnr-index-page .bnr-impact .home-content-slider-control .bnr-slider-lines > :is(button, span).is-active,
  body.bnr-index-page .bnr-impact .home-content-slider-control .bnr-slider-lines > :is(button, span)[aria-current="true"],
  body.bnr-index-page .bnr-highlights .home-content-slider-control .bnr-slider-lines > :is(button, span).is-active,
  body.bnr-index-page .bnr-highlights .home-content-slider-control .bnr-slider-lines > :is(button, span)[aria-current="true"],
  body.bnr-index-page .bnr-happening .home-content-slider-control .bnr-slider-lines > :is(button, span).is-active,
  body.bnr-index-page .bnr-happening .home-content-slider-control .bnr-slider-lines > :is(button, span)[aria-current="true"],
  body.tc-home-page .bnr-impact .home-content-slider-control .bnr-slider-lines > :is(button, span).is-active,
  body.tc-home-page .bnr-impact .home-content-slider-control .bnr-slider-lines > :is(button, span)[aria-current="true"],
  body.tc-home-page .bnr-highlights .home-content-slider-control .bnr-slider-lines > :is(button, span).is-active,
  body.tc-home-page .bnr-highlights .home-content-slider-control .bnr-slider-lines > :is(button, span)[aria-current="true"],
  body.tc-home-page .bnr-happening .home-content-slider-control .bnr-slider-lines > :is(button, span).is-active,
  body.tc-home-page .bnr-happening .home-content-slider-control .bnr-slider-lines > :is(button, span)[aria-current="true"] {
    background: #07573f !important;
  }

  body.bnr-index-page .bnr-happening-no-photos .what_happening_card h3,
  body.tc-home-page .bnr-happening-no-photos .what_happening_card h3 {
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.25 !important;
  }
}