/* ===== Extracted inline style block 1 | from index2_revised_v12.html ===== */

    /* ===== Original CSS block 1 ===== */
    /* sticky wrapper */
    #sideBanner {
      position: fixed;
      left: 0;
      top: 220px;
      z-index: 999;
      transition: 0.3s;
    }

    /* banner container */
    .bannerContainer {
      display: flex;
      align-items: stretch;
      background: #144c7c;
      border-radius: 0 12px 12px 0;
      overflow: hidden;
      box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25);
    }

    /* banner image */
    .bannerContainer img {
      width: 220px;
      display: block;
    }

    /* arrow bar */
    .arrowBar {
      z-index: 99;
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      cursor: pointer;
    }

    /* arrow */
    .arrowBar span {
      color: #1c6126;
      font-size: 1.75em;
      font-weight: 300;
    }

    /* collapse */
    #sideBanner.hide {
      transform: translateX(-220px);
    }

    /* ===== Reset ===== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
  font-family: var(--site-body-font-family);
      color: #222;
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    /* ===== Layout ===== */
    h2.carousel-wrapper-title {
      width: 1700px;
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 80px;
      text-transform: uppercase;
    }

    .section h2 {
      width: 100%;
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 20px;
      text-transform: uppercase;
    }

    .section.section_01 h2 {
      /* width: 85%; */
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 20px;
      text-transform: uppercase;
      /* display: inline-block; */
    }

    .section.section_01 .container {
      width: 100%;
      max-width: 1920px;
      margin: auto;
    }

    .section.section_01 .container .work-menu {
      width: 550px;
      padding-left: 130px
    }

    .section.section_02 .container {
      width: 90%;
      max-width: 1920px;
      margin-left: auto;
      margin-right: auto;
    }

    .section.section_03 .container {
      width: 90%;
      max-width: 1920px;
      margin: auto;
    }

    .section.section_04 .container {
      width: 90%;
      max-width: 1920px;
      margin: auto;
    }

    .section {
      padding: 60px 0;
    }

    .section.clear_area {
      padding: 60px 0;
    }

    .section.clear_area_2 {
      padding: 60px 0;
      background-image: url(../images/line_bg_2.jpg) !important;
    }

    h2 {
      margin-bottom: 24px;
      color: #0b2e59;
    }

    /* ===== Header (B&R style) ===== */
    .header-top {
      background: #1B6025;
      background: linear-gradient(90deg, #1B6025 0%, #88CB97 80%, #88CB97 100%);
      font-size: 0.8125em;
    }

    .header-top .container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 36px;
      padding-right: 100px
    }

    .header-top .container input {
      padding: 4px;
      border-radius: 2px;
      border: 1px solid lightgrey;
    }

    .header-top .container input .search__form a {
      display: inline-block;
      color: inherit;
      font-size: 0.9375em;
      vertical-align: middle;
      line-height: 22px;
      padding: 0 6px;
      background: #dcdcdc;
    }

    .header-top a {
      margin-right: 16px;
      color: #333;
    }

    .header-top a:last-child {
      margin-right: 0px;
    }

    .header-top a .ico.ico-search {
      line-height: inherit;
    }

    .header-top a .ico.ico-search:before {
      vertical-align: middle;
    }

    .ico-search:before {
      content: url("../images/search_btn.png");
    }
    .header-main {
      background: #fff;
      border-bottom: 1px solid #ddd;
      position: sticky;
      top: 0;
      z-index: 999;
    }

    .header-main .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 92px;
      margin-right: 100px
    }

    .logo {
      font-weight: bold;
      font-size: 1.25em;
      color: #b40000;
    }

    .nav a {
      margin-left: 28px;
      font-size: 1.125em;
      color: #222;
      font-weight: 700;
    }

    .nav {
      display: flex;
      align-items: center;
    }

    .nav-item {
      position: relative;
    }

    .nav-item>a {
      font-family: var(--site-heading-font-family);
      margin-left: 28px;
      font-size: 1.125em;
      font-weight: 700;
      color: #222;
      padding: 10px 0;
    }

    /* underline hover effect */
    .nav-item>a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 4px;
      width: 0;
      height: 2px;
      background: #0b2e59;
      transition: width .25s ease;
    }

    .nav-item:hover>a::after {
      width: 100%;
    }

    /* dropdown panel */
    .dropdown {
      position: absolute;
      top: 100%;
      left: 20px;
      min-width: 260px;
      background: #fff;
      border: 1px solid #e5e5e5;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
      padding: 12px 0;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: all .25s ease;
      z-index: 999;
    }

    .dropdown.long_version {
      width: 360px;
    }

    .dropdown.long_version.last {
      width: 360px;
      left: -110%
    }

    /* show on hover */
    .nav-item:hover .dropdown {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* dropdown links */
    .dropdown a {
      display: block;
      padding: 10px 20px;
      font-size: 0.9375em;
      font-weight: 500;
      color: #222;
      transition: background .2s ease, padding-left .2s ease;
      font-family: var(--site-body-font-family);
    }

    .dropdown a:hover {
      background: #a8e9f3;
      padding-left: 26px;
    }

    .dropdown-item.has-sub {
      position: relative;
    }

    .dropdown.last .sub-dropdown {
      left: auto;
      right: 100%;
    }

    /* ===== Hero ===== */
    .hero {
      /* height: 70vh;
      */background: url("https://via.placeholder.com/1600x900") center/cover;
    }

    /* ===== Hero ===== */
    .dev-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 64px;
    }

    .dev-item {
      min-height: 78px;
      display: grid;
      grid-template-columns: 56px 1fr;
      align-items: center;
      gap: 14px;
      padding: 12px 18px;
      border: 1px solid rgba(0, 74, 90, 0.15);
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.9);
      color: #234f35;
      font-size: 0.875em;
      line-height: 1.2;
      font-weight: 800;
    }

    .dev-item.featured {
      background: var(--deep-green);
      color: #fff;
    }

    .dev-icon {
      width: 44px;
      height: 44px;
      color: #23824f;
    }

    .featured .dev-icon {
      color: #fff;
    }

    /* ===== Work Section ===== */
    .work-wrapper {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 30px;
    }

    .work-menu {
      background: #1f4f8f;
      color: #fff;
      padding: 30px;
    }

    .work-menu li {
      font-size: 1.25em;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      /* Adds a 1px solid light gray line to the bottom of each list item */
      padding: 5px 0;
      /* Optional: Adds space between the text and the border/other items */
    }

    .work-menu li::before {
      content: '';
      /* Use an external file or a Data URI for the SVG */
      background-image: url('path/to/your/icon.svg');
      /* Or use a Data URI for inline SVG code: */
      /* background-image: url('data:image/svg+xml;utf8,<svg ...>'); */
      position: absolute;
      /* Position the icon within the li */
      left: 0;
      top: 50%;
      /* Helps with vertical alignment (needs further adjustment with transform) */
      transform: translateY(-50%);
      /* Fine-tunes vertical centering */
      width: 1em;
      /* Control the size of the SVG */
      height: 1em;
      background-size: cover;
      /* Ensures the SVG scales correctly */
      background-repeat: no-repeat;
    }

    .work-image {
      background: url("https://via.placeholder.com/900x600") center/cover;
      position: relative;
    }

    .work-cta {
      position: absolute;
      right: 20px;
      bottom: 20px;
      background: #b40000;
      color: #fff;
      padding: 16px 24px;
    }

    /* ===== Slider ===== */
    .slider {
      position: relative;
      overflow: hidden;
    }

    .slider-track {
      display: flex;
      transition: transform .4s ease;
    }

    .slide {
      /* width: 320px;
      */margin-right: 20px;
      background: #fff;
    }

    .slide img {
      width: 100%;
      object-fit: cover;
    }

    .slide-content {
      padding: 16px;
    }

    .slide-date {
      font-size: 0.75em;
      color: #777;
      margin-bottom: 6px;
    }

    .slide-title {
      font-weight: bold;
      margin-bottom: 8px;
    }

    .slide-desc {
      font-size: 0.875em;
      color: #555;
      margin-bottom: 12px;
    }

    .slide a {
      font-size: 0.875em;
      color: #b40000;
    }

    .slider-btn {
      position: absolute;
      top: 40%;
      background: #b40000;
      color: #fff;
      border: none;
      padding: 8px 12px;
      cursor: pointer;
    }

    .prev {
      left: 0;
    }

    .next {
      right: 0;
    }

    /* ===== Services ===== */
    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 20px;
    }

    .service-card {
      padding: 20px;
      padding-top: 0%;
      text-align: left;
    }

    /* ===== Tools ===== */
    .tools {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 20px;
    }

    .tool {
      padding: 20px;
      text-align: left;
      position: relative;
      font-size: 1.5em;
      font-weight: 500
    }

    .tool img {
      width: 60%;
      display: block;
      border-radius: 6px;
    }

    .tool::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background: #fff;
      border-radius: 2px;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #fff;
      font-size: 0.625em
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
      color: #fff;
      font-size: 0.625em;
      margin-top: 30px
    }

    /* ===== Footer (B&R style) ===== */
    footer {
      background: #283e4a;
      color: #ccc;
      font-size: 0.875em;
    }

    .footer-main {
      padding: 50px 0;
      background-color: #151c21
    }

    .footer-main .container {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.3fr 0.7fr 1.0fr 0.8fr;
      gap: 32px;
    }

    .footer-grid h4 {
      font-family: var(--site-heading-font-family);
      color: #00afe8;
      font-size: 1.0625em;
      font-weight: 700;
      line-height: 18px;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding-bottom: 10px
    }

    .footer-grid img {
      width: 15%;
    }

    .footer-grid a {
      font-family: var(--site-body-font-family);
      display: block;
      margin-bottom: 8px;
      color: #fff;
      background-image: linear-gradient(#fff, #fff);
      background-position: 0 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      transition: background-size 0.3s;
    }

    .footer-bottom {
      font-family: var(--site-body-font-family);
      border-top: 1px solid #444;
      padding: 20px 0;
      font-size: 0.8125em;
      color: #fff;
      text-align: center;
    }

    .footer-bottom.subscription {
      background-color: #35434d;
      display: block
    }

    .footer-bottom.subscription h2 {
      font-family: var(--site-heading-font-family);
      width: 100%;
      font-weight: bold;
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 0px;
      color: #fff !important;
    }

    .footer-bottom.subscription img {}

    /* sub-level wrapper */
    .footer-sub {
      margin-left: 14px;
      /* 縮排 */
      padding-left: 10px;
      border-left: 1px solid rgba(255, 255, 255, 0.25);
      /* 令層級清晰 */
      margin-bottom: 10px;
    }

    /* sub-level links 更細更輕，避免搶主項 */
    .footer-sub a {
      font-size: 0.8125em;
      margin-bottom: 6px;
      opacity: 0.9;
    }

    /* 避免 sub-level underline 動畫太搶（可選） */
    .footer-sub a {
      background-size: 0 1px;
    }

    .footer-sub a:hover {
      background-size: 100% 1px;
    }

    /* ===== Back to top ===== */
    #backToTop {
      position: fixed;
      right: 20px;
      bottom: 20px;
      background: #fff;
      color: #333;
      font-size: 0.75em;
      border: none;
      /* padding: 10px 14px;
      */display: none;
      cursor: pointer;
      padding: 20px;
      border-radius: 6px;
    }

    /* =========================
   HERO CAROUSEL (Swiper)
   - Keep index2 structure
   - CSI-style Banner 1/2
   - Banner 3 isolated iframe keeps index1 effects 100%
========================= */
    .hero {
      background: #fff;
    }

    #add_on {
      background-color: #c0cccc;
      padding: 40px 0;
      color: #fff;
    }

    #add_on .ihk-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }

    #add_on .hero-media {
      margin-left: auto;
      margin-right: auto;
      width: 90%;
      padding-left: 10px;
      padding-right: 10px;
    }

    .hero-inner {
      margin: auto;
      padding: 0 1px;
      /* padding-left: 70px; */
      position: relative;
    }

    /* ===== LEFT TEXT ===== */
    .hero-text {
      /* min-height: 280px; */
      /* position: relative; */
      /* top: -150px; */
      /* grid-area: stack; */
      position: absolute;
      left: 1.5rem;
      bottom: 16%;
      padding-left: 70px
    }

    .true_text {
      position: relative;
      z-index: 100;
      background: #75008A;
      background: linear-gradient(93deg, rgba(115, 148, 15, 1) 0%, rgba(0, 164, 109, 1) 14%, rgba(1, 60, 85, 1) 47%);
      -ms-background-clip: text;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      display: block;
      width: fit-content;
    }

    .hero-text {
      display: none
    }

    .hero-text .sub {
      letter-spacing: .25em;
      font-weight: 600;
      color: var(--green);
      margin-bottom: 20px;
    }

    .hero-title {
      width: 50rem;
    }

    .hero-title>span {
      display: block;
      font-size: clamp(2.625em, 6vw, 6em);
      font-weight: 800;
      line-height: 1.2;
      font-size: 6.4rem;
      max-width: 100%;
      font-family: var(--site-body-font-family);
      font-weight: 900;
      position: relative;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: rgb(255, 255, 255);
    }

    .hero-title-after-text {
      position: absolute;
      z-index: 10;
      top: 0;
      left: 0;
      text-shadow: 0 0 1.1rem #fff;
      display: block;
      width: fit-content;
    }

    /* fade animation */
    .fade {
      opacity: 0;
      transform: translateX(-730px);
    }

    .fade.is-in {
      animation: fadeInLeft 1.2s ease forwards;
    }

    @keyframes fadeInLeft {
      to {
        opacity: 1;
        transform: none;
      }
    }

    /* ===== RIGHT IMAGE ===== */
    .hero-media {
      /* position: relative; */
      /* overflow: hidden; */
      /* grid-area: stack; */
      display: grid;
      grid-template-areas: 'slide';
      margin-left: auto;
      width: 70%;
      padding-right: 100px
    }

    .hero-nav.hero-nav-line {
      background-color: #fff
    }

    .service-section.section_01 .hero-media {
      width: 100%;
      padding-right: 0px
    }

    #dd_on .ihk-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 32px;
    }

    .slide {
      /* position: absolute; */
      inset: 0;
      opacity: 0;
      transition: opacity .6s ease;
      grid-area: slide;
    }

    .slide.active {
      opacity: 1;
    }

    /* placeholder visual */
    .slide::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    /* ===== NAV ===== */
    .hero-nav {}

    .hero-nav button {
      border: 0;
      background: #000;
      color: #fff;
      padding: 8px 14px;
      cursor: pointer;
    }

    .hero-nav-line {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 1em;
      z-index: 130;
    }

    .hero-nav-line button {
      background: none;
      border: 0;
      cursor: pointer;
      font-size: 1.125em;
      padding: 4px;
      color: #000;
    }

    .hero-nav-line button:hover {
      opacity: .6;
    }

    /* progress line */
    .progress {
      position: relative;
      width: 160px;
      height: 2px;
      background: #e5e5e5;
      overflow: hidden;
    }

    .progress .bar {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0%;
      background: #000;
    }

    /* CSI-like layout */
    .csi-slide {
      position: relative;
      background-position: center;
      background-size: cover;
      color: #fff;
    }

    .csi-slide-1 {
      background-image: url(../images/carousel_1.jpg) !important
    }

    .csi-slide-2 {
      background-image: url(../images/carousel_2.jpg) !important
    }

    .csi-title.js-csi-title {
      color: #fff;
      /* White text */
      text-shadow: 0 0 15px #000, 0 0 15px #000;
      /* Subtle extra shadow for effect */
    }

    .csi-title.js-csi-title span {
      white-space: nowrap;
    }

    .csi-inner {
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .csi-text {
      max-width: 820px;
      padding-left: 40px;
    }

    .section.section_01 .csi-text .csi-title.js-csi-title {
      max-width: 90%;
    }

    /* Title: fade-in from OFF-SCREEN LEFT (outside viewport) */
    .csi-title {
      margin: 0;
      font-weight: 800;
      font-size: clamp(2.6rem, 5vw, 4.2rem);
      line-height: 1.05;
      letter-spacing: .01em;
      opacity: 0;
      transform: translateX(-120vw);
    }

    .csi-title.is-animate {
      animation: csiTitleIn .9s cubic-bezier(.2, .8, .2, 1) forwards;
    }

    @keyframes csiTitleIn {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Controls (CEDD style) */
    .swiper-control-wrap {
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 18px;
      z-index: 20;
    }

    .swiper-pagination {
      position: static;
    }

    .swiper-pagination-bullet {
      background: #fff;
      opacity: .55;
    }

    .swiper-pagination-bullet-active {
      opacity: 1;
    }

    .play-pause-wrap a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .9);
      padding: 6px 12px;
      font-size: 0.75em;
      background: #035530;
    }

    /* Slide 3 iframe */
    .index1-frame {
      width: 100%;
      height: 70vh;
      border: 0;
      display: block;
      background: transparent;
    }

    .service-section {
      background: linear-gradient(180deg, #0f2f6b, #123f7a);
      background: #820050;
      background: linear-gradient(96deg, rgba(130, 0, 80, 1) 0%, rgba(168, 59, 183, 1) 51%, rgba(49, 47, 134, 1) 100%);
      padding: 80px 0;
      color: #fff;
    }

    .section_03 {
      padding: 80px 0;
      color: #0b2e59;
      line-height: 30px;
      background: #FDE9D4;
      background: linear-gradient(93deg, rgba(253, 233, 212, 1) 0%, rgba(252, 224, 233, 1) 47%);
    }

    .section_03 .service-inner h2 {
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 20px;
      text-transform: uppercase;
      color: #0b2e59;
      line-height: 50px;
    }

    .section_03 .service-btn {
      color: #0b2e59;
    }

    .section_03 .service-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background: #0b2e59;
      border-radius: 2px;
    }

    .section_03 h2 {
      color: #fff;
    }

    .service-inner {
      max-width: 1700px;
      margin: auto;
      display: grid;
      grid-template-columns: 1.2fr 3fr;
      gap: 48px;
      align-items: start;
    }

    .section_03 .service-card:first-child img {
      height: 125px;
    }

    .section_01 .service-card .title {
      height: 105px;
      color: #fff
    }

    .section_03 .service-card .title {
      height: 55px;
      color: #0b2e59
    }

    .service-inner h2 {
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 20px;
      text-transform: uppercase;
      color: #FFF
    }

    /* LEFT */
    .service-left {
      padding-top: 0px;
    }

    .service-title {
      font-size: 1.75em;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 20px;
      text-transform: uppercase;
      color: #ffff
    }

    .service-title .icon {
      display: inline-flex;
      width: 36px;
      height: 36px;
      border: 2px solid #fff;
      border-radius: 6px;
      align-items: center;
      justify-content: center;
    }

    .service-desc {
      font-size: 1em;
      line-height: 1.8;
      opacity: 0.9;
      max-width: 360px;
    }

    /* RIGHT */
    .service-right {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .service-card {
      position: relative;
    }

    .service-card:hover {
      transform: scale(1.1);
      /* Enlarges the element to 150% of its original size */
      transition: all .25s ease;
    }

    .service-card img {
      height: 105px;
      display: block;
      border-radius: 6px;
      padding-top: 10px;
    }

    .service-btn {
      display: block;
      align-items: center;
      justify-content: space-between;
      border-radius: 4px;
      color: #fff;
      font-size: 0.9375em;
      transition: all .25s ease;
      text-align: left;
      font-size: 1.5em;
      color: #fff;
      line-height: 30px;
      min-height: 140px;
      font-weight: 600;
    }

    .service-section.section_03 .service-btn {
      min-height: 70px;
    }

    .service-btn a {
      position: absolute;
      top: 0px
    }

    .service-btn:hover {}

    /* RESPONSIVE */
    @media (max-width: 1200px) {
      .service-inner {
        grid-template-columns: 1fr;
      }

      .service-right {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ===== LAYOUT ===== */
    .mainArea3 {
      padding: 80px 0;
    }

    .section04 .container {
      width: 90%;
      max-width: 1920px;
      margin: auto;
    }

    .section04 .container h2 {
      font-size: 2.2em;
      margin-top: 0;
      margin-bottom: 20px;
      text-transform: uppercase;
    }

    .hl-flex {
      display: grid;
      grid-template-columns: fit-content(25%) 1fr;
      gap: 40px;
      align-items: start;
    }

    .hl-title {
      font-size: 2.25em;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    /* ===== SCROLL AREA ===== */
    .highlightsList {
      position: relative;
    }

    .hl-scroll {
      display: flex;
      gap: 32px;
      overflow-x: auto;
      padding-bottom: 40px;
      scroll-behavior: smooth;
      width: 75%;
    }

    .hl-scroll::-webkit-scrollbar {
      /*display: none;*/
    }

    /* ===== ITEM ===== */
    .hl-item {
      min-width: 420px;
    }

    .hl-cover img {
      width: 100%;
      display: block;
    }

    .hl-text {
      margin-top: 14px;
      font-size: 1.125em;
      font-weight: 600;
    }

    .hl-text a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .hl-text .ext {
      font-size: 1em;
    }

    /* ===== FAKE SCROLL BAR ===== */
    .hl-bar {
      /*position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #e5e5e5;*/
    }

    .hl-thumb {
      display: block;
      height: 100%;
      width: 120px;
      background: #000;
      transition: transform .2s linear;
    }

    .carousel-wrapper {
      width: 100%;
      max-width: 1700px;
      margin: 40px auto;
      position: relative;
      overflow: hidden;
      border: 1px solid #ddd;
    }

    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    .card {
      width: 25%;
      border-right: 1px solid #ddd;
      box-sizing: border-box;
      position: relative;
      text-align: center;
    }

    .card .logo img {
      width: 345px !important;
      padding-top: 33px
    }

    .card .logo {
      margin-top: 0px;
      margin-left: 0px;
    }

    .card .title {
      text-align: LEFT;
      margin-left: 20px;
    }

    .card:last-child {
      border-right: none;
    }

    .tag {
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      color: #fff;
      font-size: 0.875em;
      padding: 6px 14px;
      font-weight: bold;
    }

    .logo {
      margin-left: 100px
    }

    .logo img {
      max-width: 480px;
      height: auto;
    }

    .title {
      margin-top: 20px;
      font-size: 1.125em;
      color: #444;
    }

    .carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0;
      gap: 20px;
    }

    .arrow {
      font-size: 1.75em;
      cursor: pointer;
      user-select: none;
    }

    .dots {
      display: flex;
      gap: 10px;
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
    .dot {
      width: 30px;
      height: 4px;
      background: #ccc;
      border-radius: 0;
    }

    .swiper-horizontal>.swiper-pagination-bullets-active .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active,
    .dot.active {
      background: #000;
    }

    .read-more {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }

    .read-more a {
      border: 2px solid #be2390;
      padding: 10px 18px;
      text-decoration: none;
      color: #000;
      font-weight: bold;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .read-more a:hover {
      background: #be2390;
      color: #fff;
    }

    .wrap {
      max-width: 1700px;
      margin: 28px auto;
    }

    .list {
      border-top: 1px solid var(--line);
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 18px;
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
      align-items: start;
      border-bottom: 1px solid #ddd;
    }

    .row span {
      background: #000;
      color: #fff;
      font-size: 0.875em;
      padding: 6px 14px;
      font-weight: bold;
    }

    /* left block */
    .left {
      min-width: 0;
    }

    .status {
      display: inline-block;
      background: var(--badge);
      color: var(--badgeText);
      font-weight: 700;
      font-size: 0.875em;
      letter-spacing: .2px;
      padding: 6px 10px;
      line-height: 1;
      border-radius: 0;
      margin-bottom: 16px;
      background: #000;
      color: #fff;
      font-size: 0.875em;
      padding: 6px 14px;
      font-weight: bold;
    }

    .titleRow {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    .title {
      font-size: 1.625em;
      font-weight: 800;
      line-height: 1.2;
      margin: 0;
      word-break: break-word;
    }

    .ext {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      margin-top: 6px;
      color: var(--text);
      opacity: .9;
      text-decoration: none;
    }

    .ext:hover {
      opacity: 1
    }

    .meta {
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-size: 1em;
    }

    .pin {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      opacity: .9;
    }

    .venue {
      color: var(--text);
    }

    .venue .label {
      color: var(--muted);
    }

    /* right block */
    .right {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      justify-items: end;
      padding-top: 2px;
    }

    .col {
      text-align: right;
      min-width: 0;
    }

    .chip {
      display: inline-block;
      color: var(--badgeText);
      font-weight: 800;
      font-size: 0.8125em;
      letter-spacing: .2px;
      padding: 6px 10px;
      line-height: 1;
    }

    .date {
      margin-top: 16px;
      font-size: 1.125em;
      color: var(--text);
      white-space: nowrap;
    }

    /* responsive */
    @media (max-width: 980px) {
      .row {
        grid-template-columns: 1fr;
      }

      .right {
        justify-items: start;
        grid-template-columns: 1fr 1fr;
        padding-top: 14px;
      }

      .col {
        text-align: left;
      }

      .date {
        white-space: normal;
      }
    }

    .service-left {
      position: relative;
      /* 留位俾條線 + 文字唔貼線 */
    }

    .service-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      /* 線粗 */
      height: 100%;
      /* 跟足左欄高度 */
      background: #fff;
      /* B&R 主軸色 */
      border-radius: 2px;
      /* 可要可唔要 */
    }

    .adv-row.rhythm {
      text-align: left
    }

    .adv-row.rhythm .adv {
      text-align: left
    }

    /* Responsive */
    @media (max-width: 1024px) {
      .card {
        width: 50%;
      }
    }

    @media (max-width: 600px) {
      .card {
        width: 100%;
      }
    }

    @media (max-width: 640px) {
      .service-right {
        grid-template-columns: 1fr;
      }
    }

    /* Responsive */
    @media (max-width: 640px) {
      .csi-text {
        padding-left: 20px;
      }
    }

    /* ===== Original CSS block 2 ===== */
    :root {
      --border: #d9d9d9;
      --text: #111;
      --muted: #555;
      --bg: #fff;
      --chip: #fff;
      --shadow: 0 0 0 rgba(0, 0, 0, 0);
      --radius: 18px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
        font-family: var(--site-heading-font-family);
      background: #fff;
      color: var(--text);
    }

    .agenda-card {
      width: min(1700px, 100%);
      background-color: #F4F4F4;
      border: 2px solid var(--border);
      padding: 26px 26px 28px;
      position: relative;
      box-shadow: var(--shadow);
      margin-top: 20px;
      margin-bottom: 20px
    }

    .agenda-card h2 {
      font-size: 1.6667em;
      padding-top: 10px
    }

    .top-row {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      padding-right: 70px;
      /* leave room for star button */
      color: var(--muted);
      font-size: 0.9375em;
      font-weight: 600;
    }

    .top-item {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .duration {
      font-weight: 700;
      color: var(--muted);
    }

    .title {
      margin: 18px 0 16px;
      font-size: 1.375em;
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: -0.02em;
      width: 80%;
    }

    .meta {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-size: 1.125em;
      font-weight: 650;
      margin-bottom: 22px;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 22px;
      border: 2px solid #111;
      border-radius: 12px;
      font-weight: 800;
      letter-spacing: 0.02em;
      background: var(--chip);
      color: #111;
      cursor: pointer;
      user-select: none;
    }

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

    .ft-list>li {
      display: inline;
    }

    .ft-list>li:before {
      content: '|';
      margin: 0 .4em;
    }

    .ft-list>li:nth-child(1):before {
      content: unset;
      margin: 0 .4em;
    }

    .ft-list>li img {
      vertical-align: middle;
    }

    .chip:active {
      transform: translateY(1px);
    }

    .star-btn {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 46px;
      height: 46px;
      border: 2px solid #111;
      border-radius: 14px;
      background: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
    }

    .icon {
      width: 18px;
      height: 18px;
      display: inline-block;
    }

    .icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* make it look like screenshot spacing on smaller screens */
    @media (max-width: 640px) {
      body {
        padding: 16px;
      }

      .agenda-card {
        padding: 18px;
      }

      .title {
        font-size: 1.625em;
      }

      .meta {
        font-size: 1em;
      }
    }

    ul.adv-row {
      display: none;
    }

    .footer-main {}

    .dropdown-item {
      position: relative;
    }

    /* arrow hint */
    .dropdown-item.has-sub>a::after {
      content: "›";
      position: absolute;
      right: 18px;
      font-size: 1em;
      opacity: .6;
    }

    /* third level */
    .sub-dropdown {
      position: absolute;
      top: 0;
      left: 100%;
      min-width: 240px;
      background: #fff;
      border: 1px solid #e5e5e5;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
      padding: 10px 0;
      opacity: 0;
      transform: translateX(10px);
      pointer-events: none;
      transition: all .25s ease;
      z-index: 1000;
    }

    .dropdown-item.has-sub:hover .sub-dropdown {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .sub-dropdown a {
      display: block;
      padding: 10px 18px;
      font-size: 0.875em;
      white-space: nowrap;
    }

    .sub-dropdown a:hover {
      background: #a8e9f3;
    }

    /* What's Happening */#investhk-events-section {
      padding: 60px 0;
  font-family: var(--site-body-font-family);
    }

    #investhk-events-section .container {
      max-width: 1200px;
      margin: auto;
    }

    /* ===== heading ===== */
    #investhk-events-section .heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
    }

    #investhk-events-section h2 {
      font-size: 2.125em;
      font-weight: 700;
      color: #e1251b;
      letter-spacing: 1px;
    }

    #investhk-events-section .seeall {
      text-decoration: none;
      color: #e1251b;
      font-weight: 600;
    }

    /* ===== cards grid ===== */
    #investhk-events-section .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    /* ===== card ===== */
    #investhk-events-section .card {
      background: #0a2aa8;
      color: white;
      overflow: hidden;
      position: relative;
    }

    /* image */
    #investhk-events-section .thumb {
      height: 210px;
      background-size: cover;
      background-position: center;
    }

    /* content */
    #investhk-events-section .content {
      padding: 30px;
      min-height: 220px;
      position: relative;
    }

    /* red arrow */
    #investhk-events-section .content:before {
      content: "";
      position: absolute;
      top: 0;
      right: -20px;
      width: 160px;
      height: 100%;
      background: #e1251b;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      z-index: 1;
    }

    /* date */
    #investhk-events-section .date {
      font-size: 0.875em;
      opacity: .8;
      margin-bottom: 15px;
    }

    /* title */
    #investhk-events-section .title {
      font-size: 1.25em;
      font-weight: 600;
      line-height: 1.4;
      position: relative;
      z-index: 2;
    }

    /* tag */
    #investhk-events-section .tag {
      margin-top: 25px;
      display: inline-block;
      background: #e1251b;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.8125em;
    }

    /* icons */
    #investhk-events-section .icons {
      margin-top: 25px;
      font-size: 1.375em;
      position: relative;
      z-index: 2;
    }

    #investhk-events-section .icons span {
      margin-right: 14px;
    }

    /* responsive */
    @media(max-width:900px) {
      #investhk-events-section .cards {
        grid-template-columns: 1fr;
      }
    }

    /* ===== Original CSS block 3 ===== */
    /* Section wrapper */
    .two-items-flex {
      padding: 24px 0;
    }

    /* Optional: keep same max width like common containers */
    .two-items-flex__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
      display: flex;
      gap: 16px;
      align-items: stretch;
    }

    .two-items-flex__item {
      flex: 1 1 0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      gap: 10px;
      min-width: 0;
    }

    .two-items-flex__item img {
      width: 392px
    }

    .demo {
      display: block
    }

    .two-items-flex__item:nth-child(1) {
      text-align: right
    }

    .two-items-flex__title {
      margin: 0;
      font-size: 1.125em;
      line-height: 1.3;
    }

    .two-items-flex__desc {
      margin: 0;
      line-height: 1.6;
      color: #444;
    }

    .two-items-flex__btn {
      margin-top: auto;
      /* push button to bottom */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid #111;
      text-decoration: none;
      color: #111;
      font-weight: 600;
      width: fit-content;
    }

    .two-items-flex__btn:hover {
      background: #111;
      color: #fff;
    }

    /* Mobile: stack */
    @media (max-width: 768px) {
      .two-items-flex__inner {
        flex-direction: column;
      }
    }

    /* ===== Original CSS block 4 ===== */
    /* ===== B&R new index content ===== */
    :root {
      --bnr-navy: #003f52;
      --bnr-teal: #008c95;
      --bnr-mint: #c9fff1;
      --bnr-pale: #ddfff4;
      --bnr-green: #155c24;
      --bnr-orange: #f5a14b;
      --bnr-blue: #2c489f;
      --bnr-card: #ffffff;
      --bnr-shadow: 0 8px 22px rgba(0, 72, 72, .16);
    }

    .bnr-home {
  font-family: var(--site-body-font-family);
      color: #17383b;
      overflow: hidden;
      background: #fff;
    }

    .bnr-container {
      width: min(1680px, calc(100% - 120px));
      margin: 0 auto;
    }

    .cbr_svg {
      width: 60%;
      padding-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
    }

    .cbr_svg_special {
      width: 80%;
      padding-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
    }

    .bnr-section {
      padding: 54px 0;
    }

    .bnr-section h2,
    .bnr-cta h2 {
      margin: 0 0 28px;
      text-align: center;
      color: #016174;
      font-size: clamp(1.75em, 2.2vw, 2.625em);
      line-height: 1.15;
      font-weight: 900;
      letter-spacing: -2px;
      text-transform: none;
    }

    .bnr-section h2 span,
    .bnr-cta h2 span {
      color: #2e7d6b
    }

    .bnr-hero {
      position: relative;
      min-height: 620px;
      background: #074a57;
    }

    .bnr-hero-track {
      position: relative;
      min-height: 620px;
    }

    .bnr-hero-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .6s ease;
      background-image: var(--hero-bg), linear-gradient(110deg, #00434a 0%, #0b6a76 45%, #70a9b4 100%);
      background-size: cover;
      background-position: center;
    }

    .bnr-hero-slide.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    .bnr-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0, 67, 72, .9) 0%, rgba(0, 116, 128, .72) 42%, rgba(0, 67, 72, .08) 78%);
    }

    .bnr-hero-content {
      position: relative;
      z-index: 2;
      min-height: 620px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      padding-bottom: 42px;
    }

    .bnr-tags {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }

    .bnr-tags span {
      border: 1px solid rgba(189, 255, 197, .7);
      background: rgba(35, 116, 54, .76);
      color: #e7fff0;
      border-radius: 3px;
      padding: 6px 14px;
      font-size: 0.8125em;
      font-weight: 800;
      letter-spacing: .05em;
    }

    .bnr-hero h1,
    .bnr-hero .bnr-slide-heading {
      color: #fff;
      margin: 0;
      font-size: clamp(2.875em, 5.3vw, 5.75em);
      line-height: 1.1;
      font-weight: 900;
      letter-spacing: -.04em;
      max-width: 930px;
      text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
    }

    .bnr-hero-actions {
      display: flex;
      gap: 22px;
      flex-wrap: wrap;
      margin-top: 34px;
      align-items: center;
    }

    .bnr-hero-actions:before {
      content: "▶";
      color: #fff;
      font-size: 0.75em;
    }

    .bnr-hero-actions a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 8px 18px;
      border-radius: 4px;
      background: #fff;
      color: #31505a;
      font-size: 0.875em;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    }

    .bnr-hero-controls {
      position: absolute;
      left: 50%;
      bottom: 42px;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 18px;
      color: #fff;
    }

    .bnr-hero-controls button {
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 1.25em;
      line-height: 1;
      cursor: pointer;
      padding: 6px;
    }

    .bnr-hero-lines {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .bnr-hero-lines span {
      display: block;
      width: 42px;
      height: 3px;
      background: rgba(255, 255, 255, .55);
    }

    .bnr-hero-lines span.is-active {
      background: #ed8d35;
    }

    .wwd_svg {
      width: 90%;
      padding-top: 40px;
      padding-left: 15px;
      padding-right: 15px;
    }

    .bnr-what {
      background: #FFF;
      background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(161, 249, 255, 1) 100%);
      ;
      padding-top: 42px;
      padding-bottom: 58px;
    }

    .bnr-what-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border-left: 2px solid rgba(44, 72, 159, .7);
    }

    .bnr-what-item {
      min-height: 210px;
      padding: 0 26px 4px;
      border-right: 2px solid rgba(44, 72, 159, .7);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #263842;
      transition: transform .25s ease;
    }

    .bnr-what-item:hover {
      transform: translateY(-6px);
    }

    .bnr-what-item strong {
      font-size: clamp(1.25em, 1.6vw, 1.75em);
      line-height: 1.05;
      font-weight: 900;
    }

    .bnr-icon,
    .bnr-profile {
      display: block;
      height: 105px;
      background-repeat: no-repeat;
      background-position: left bottom;
      background-size: contain;
    }

    .bnr-icon-policy {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 73V45c0-10 14-10 14 0v22M111 73V45c0-10-14-10-14 0v22M33 67c8-6 16-9 32-9s24 3 32 9'/%3E%3Cpath d='M45 52c0-14 9-24 20-24s20 10 20 24'/%3E%3Ccircle cx='65' cy='45' r='13'/%3E%3Cpath d='M48 21l-5-6M65 15V6M82 21l5-6M25 89h26M79 89h26'/%3E%3C/g%3E%3Cpath d='M18 93h35M77 93h35' stroke='%23f5a14b' stroke-width='7'/%3E%3C/svg%3E");
    }

    .bnr-icon-summit {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='66' cy='50' r='34'/%3E%3Cpath d='M34 50h64M66 16c-13 15-13 53 0 68M66 16c13 15 13 53 0 68M52 54l-19-14 8-10 21 15M45 67l-24-18 7-10 25 19'/%3E%3Cpath d='M73 37h38M91 23v49M104 34v38'/%3E%3C/g%3E%3Cg stroke='%23f5a14b' stroke-width='3' fill='none'%3E%3Cpath d='M80 31l20-9M83 47l23 7M57 27l-15-10'/%3E%3Ccircle cx='100' cy='22' r='3' fill='%23f5a14b'/%3E%3Ccircle cx='106' cy='54' r='3' fill='%23f5a14b'/%3E%3Ccircle cx='42' cy='17' r='3' fill='%23f5a14b'/%3E%3C/g%3E%3C/svg%3E");
    }

    .bnr-icon-missions {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='66' cy='59' r='33'/%3E%3Cpath d='M31 58h70M66 27c-13 16-13 48 0 64M66 27c13 16 13 48 0 64'/%3E%3Cpath d='M54 22l33-13 10 6-25 19-6 22-9 3 1-20-20 1-2-7 20-10z'/%3E%3C/g%3E%3Cg stroke='%23f5a14b' stroke-width='3' fill='none'%3E%3Cpath d='M74 46c8 5 15 11 18 21M48 69c10 4 21 4 33 0'/%3E%3C/g%3E%3C/svg%3E");
    }

    .bnr-icon-capacity {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 50l22-10 22 10-22 10-22-10zM25 50v24l22 10 22-10V50M47 60v24M69 50l22-10 22 10-22 10-22-10zM69 50v24l22 10 22-10V50M91 60v24'/%3E%3Cpath d='M68 31c0-10 15-10 15 0v22M76 12v10M104 23l10-8'/%3E%3C/g%3E%3Cpath d='M102 27c0 0 3 9-1 16' fill='none' stroke='%23f5a14b' stroke-width='3'/%3E%3C/svg%3E");
    }

    .bnr-icon-project {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 79c4-21 18-30 36-30 18 0 31 9 36 30H19zM31 79v9h48M79 37h24v24H79zM91 26v46M80 49h22M65 48l16 8'/%3E%3Cpath d='M42 49l10-18h17l10 18'/%3E%3C/g%3E%3Cg stroke='%23f5a14b' stroke-width='3' fill='none'%3E%3Cpath d='M65 29V12h35M72 12h28M60 20h47'/%3E%3C/g%3E%3C/svg%3E");
    }

    .bnr-impact {
/*       background: linear-gradient(180deg, #e9fff3 0%, #c8f1d8 100%); */
	        background-color: #e3f2f2;
    }

    .bnr-impact-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr) 2fr;
      gap: 18px;
      align-items: stretch;
    }

    .bnr-stat-card {
      background: #fff;
      border: 1px solid rgba(16, 89, 90, .25);
      box-shadow: var(--bnr-shadow);
      border-radius: 10px;
      padding: 28px;
    }

    .bnr-ranking-card {
      border: 1px solid rgba(16, 89, 90, .25);
      box-shadow: var(--bnr-shadow);
      border-radius: 10px;
      padding: 28px;
    }

    .bnr-stat-card {
      min-height: 150px;
    }

    .bnr-stat-card strong {
      display: inline-block;
      color: #227861;
      font-size: 2em;
      font-weight: 900;
      margin-left: 12px;
    }

    .bnr-stat-card p {
      margin: 12px 0 0;
      color: #158462;
      font-weight: 800;
      font-size: 1.125em;
      line-height: 1.15;
    }

    .bnr-stat-card:nth-child(1) p {
      color: #3366b0
    }

    .bnr-stat-card:nth-child(4) p {
      color: #a27312
    }

    .bnr-stat-icon {
      font-size: 2.25em;
      color: #58aebb;
      vertical-align: middle;
    }

    .bnr-ranking-card {
      grid-column: 5;
      grid-row: 1 / span 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .bnr-ranking-card h3 {
      color: #167071;
      font-size: 1.625em;
      margin: 0 0 20px;
      border-bottom: 8px solid #25735b;
      padding-bottom: 12px;
      font-weight: 900;
    }

    .bnr-rank-row {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: center;
      padding: 10px 0;
    }

    .bnr-rank-row strong {
      display: block;
      color: #386c3c;
      font-size: 1.25em;
    }

    .bnr-rank-row span {
      display: block;
      color: #777;
      font-weight: 700;
    }

    .bnr-rank-row em {
      font-style: normal;
      color: #386c3c;
      font-size: 2.75em;
      font-weight: 900;
    }

    .bnr-development {
      background-image: url(../images/development_areas.jpg);
    }

    .bnr-development:before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-radial-gradient(circle at 30% 10%, rgba(142, 79, 180, .12) 0 3px, transparent 4px 14px);
      opacity: .75;
      pointer-events: none;
    }

    .bnr-development .bnr-container {
      position: relative;
      z-index: 1;
    }

    .bnr-dev-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-bottom: 48px;
    }

    .bnr-dev-tabs button {
      border: 1px solid rgba(18, 90, 73, .18);
      background: #fff;
      min-height: 66px;
      padding: 14px 18px;
      text-align: left;
      color: #215e43;
      font-weight: 800;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    }

    .bnr-dev-tabs button.is-active {
      background: #146529;
      color: #fff;
    }

    .bnr-dev-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .bnr-dev-cards article {
      background: #fff;
      border-top: 4px solid #078b8f;
      border-radius: 4px;
      box-shadow: 0 5px 18px rgba(0, 0, 0, .14);
      padding: 24px 26px;
      min-height: 150px;
    }

    .bnr-dev-cards h3 {
      margin: 0 0 12px;
      color: #407446;
      font-size: 1.375em;
    }

    .bnr-dev-cards p {
      margin: 0 0 18px;
      color: #334;
      line-height: 1.35;
    }

    .bnr-dev-cards a {
      color: #0d602e;
      font-weight: 900;
      font-size: 0.8125em;
      float: right;
    }

    .bnr-highlights {
      background: #FFF;
/*       background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(161, 249, 255, 1) 100%); */

	  background-color: #e3f2f2;
    }

    .bnr-card-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      background: #fff;
    }

    .bnr-news-card {
      position: relative;
      border-right: 1px solid #d9e5e5;
      min-height: 260px;
      background: #fff;
    }

    .bnr-news-card span {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      background: #111;
      color: #fff;
      padding: 8px 12px;
      font-size: 0.75em;
      font-weight: 900;
    }

    .bnr-news-card img {
      display: block;
      width: 100%;
      object-fit: cover;
      background: linear-gradient(135deg, #d0eff3, #2e8090);
    }

    .bnr-news-card h3 {
      font-size: 1em;
      line-height: 1.25;
      padding: 16px 18px;
      margin: 0;
      color: #222;
    }

    .bnr-readmore {
      text-align: right;
      margin-top: 20px;
    }

    .bnr-readmore a {
      display: inline-block;
      border: 2px solid #b52a86;
      color: #111;
      padding: 10px 18px;
      font-size: 0.8125em;
      font-weight: 900;
      background: #fff;
    }

    .bnr-happening {
      background: #E5FAEE;
      background: linear-gradient(180deg, rgba(229, 250, 238, 1) 1%, rgba(179, 235, 205, 1) 100%);
    }

    .bnr-event-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }

    .bnr-event-grid article {
      color: #fff;
      min-height: 300px;
      position: relative;
      overflow: hidden;
    }

    .bnr-connect {
      background: #FFF;
/*       background: linear-gradient(180deg, rgba(255, 255, 255, 1) 1%, rgba(161, 249, 255, 1) 100%); */

	  background-color: #e3f2f2;
    }

    .text-align:center;
    }

    .bnr-connect h2 {
      margin-bottom: 6px;
    }

    .bnr-connect>div>p {
      margin: 0 0 28px;
      color: #6c7c7c;
      font-size: 0.8125em;
    }

    .bnr-connect-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-left: 2px solid rgba(44, 72, 159, .62);
    }

    .bnr-connect-grid a {
      min-height: 220px;
      border-right: 2px solid rgba(44, 72, 159, .62);
      text-align: left;
      padding: 0 30px;
      color: #263842;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .bnr-connect-grid strong {
      font-size: 1.5em;
      line-height: 1.1;
      font-weight: 900;
    }

    .bnr-profile {
      height: 130px;
      background-size: contain;
    }

    .bnr-profile-business {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 110'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M35 96V33l35-18 35 18v63M35 48H18v48M105 58h16v38M50 47v8M65 39v8M80 47v8M50 68v8M65 60v8M80 68v8M8 96h114'/%3E%3C/g%3E%3C/svg%3E");
    }

    .bnr-profile-legal {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 110'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M65 24v65M32 36h66M39 36l-18 35h36L39 36zM92 36L74 71h36L92 36zM47 89c11 7 25 7 36 0'/%3E%3C/g%3E%3Cpath d='M25 84l25-7 8 10-24 16' fill='none' stroke='%23f5a14b' stroke-width='8'/%3E%3C/svg%3E");
    }

    .bnr-profile-researcher {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 110'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='18' y='24' width='70' height='52' rx='4'/%3E%3Cpath d='M30 64h48M36 56V43M48 56V36M60 56V47M72 56V31M18 85h78M92 76l24 24'/%3E%3Ccircle cx='88' cy='69' r='21'/%3E%3C/g%3E%3Cpath d='M82 69l7 7 15-19' fill='none' stroke='%23f5a14b' stroke-width='4'/%3E%3C/svg%3E");
    }

    .bnr-profile-student {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 110'%3E%3Cg fill='none' stroke='%230b7e8d' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 58v38M98 58v38M21 96c3-20 19-31 44-31s41 11 44 31M65 20l45 20-45 20-45-20 45-20zM43 48v18c10 10 34 10 44 0V48M105 42v25'/%3E%3C/g%3E%3Cpath d='M105 67l10 14' fill='none' stroke='%23f5a14b' stroke-width='4'/%3E%3C/svg%3E");
    }

    .bnr-cta {
      background: #145922;
      color: #fff;
      text-align: center;
      padding: 52px 0 60px;
    }

    .bnr-cta span {
      display: block;
      font-size: 0.6875em;
      letter-spacing: .12em;
      font-weight: 900;
      margin-bottom: 12px;
      opacity: .9;
    }

    .bnr-cta h2 {
      color: #fff;
      margin-bottom: 18px;
    }

    .bnr-subscribe {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .bnr-subscribe label {
      font-size: 1.375em;
      font-weight: 900;
    }

    .bnr-subscribe input {
      width: min(320px, 100%);
      height: 34px;
      border: 0;
      border-radius: 18px;
      padding: 0 18px;
    }

    .bnr-subscribe button {
      height: 34px;
      border: 0;
      border-radius: 18px;
      background: #bd268f;
      color: #fff;
      padding: 0 22px;
      font-weight: 900;
    }

    .bnr-cta-links {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .bnr-cta-links a {
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 4px;
      padding: 8px 18px;
      color: #fff;
      font-size: 0.8125em;
      font-weight: 800;
    }

    @media (max-width:1200px) {
      .bnr-container {
        width: min(100% - 48px, 1100px);
      }

      .bnr-what-grid,
      .bnr-card-row {
        grid-template-columns: repeat(3, 1fr);
      }

      .bnr-impact-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .bnr-ranking-card {
        grid-column: 1 / -1;
        grid-row: auto;
      }

      .bnr-dev-tabs,
      .bnr-event-grid,
      .bnr-connect-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .bnr-news-card {
        border-bottom: 1px solid #d9e5e5;
      }
    }

    @media (max-width:768px) {
      body {
        padding: 0 !important;
      }

      .bnr-container {
        width: calc(100% - 32px);
      }

      .bnr-section {
        padding: 40px 0;
      }

      .bnr-hero,
      .bnr-hero-track,
      .bnr-hero-content {
        min-height: 580px;
      }

      .bnr-hero-content {
        justify-content: flex-end;
        padding-bottom: 96px;
      }

      .bnr-hero h1,
    .bnr-hero .bnr-slide-heading {
        font-size: clamp(2.25em, 12vw, 3.625em);
      }

      .bnr-hero-overlay {
        background: linear-gradient(180deg, rgba(0, 67, 72, .32), rgba(0, 67, 72, .92));
      }

      .bnr-hero-actions {
        gap: 10px;
        margin-top: 22px;
      }

      .bnr-hero-actions:before {
        display: none;
      }

      .bnr-hero-actions a {
        width: 100%;
        justify-content: flex-start;
      }

      .bnr-hero-controls {
        bottom: 24px;
        width: 100%;
        justify-content: center;
      }

      .bnr-hero-lines span {
        width: 30px;
      }

      .bnr-what-grid,
      .bnr-impact-grid,
      .bnr-dev-tabs,
      .bnr-dev-cards,
      .bnr-card-row,
      .bnr-event-grid,
      .bnr-connect-grid {
        grid-template-columns: 1fr;
      }

      .bnr-what-grid,
      .bnr-connect-grid {
        border-left: 0;
        gap: 16px;
      }

      .bnr-what-item,
      .bnr-connect-grid a {
        border: 1px solid rgba(44, 72, 159, .35);
        background: rgba(255, 255, 255, .48);
        min-height: 170px;
        padding: 18px;
      }

      .bnr-icon {
        height: 92px;
      }

      .bnr-card-row {
        gap: 16px;
        background: transparent;
      }

      .bnr-news-card {
        border: 0;
        box-shadow: var(--bnr-shadow);
      }

      .bnr-event-grid {
        gap: 18px;
      }

      .bnr-ranking-card h3 {
        font-size: 1.375em;
      }

      .bnr-rank-row {
        align-items: flex-start;
      }

      .bnr-rank-row em {
        font-size: 2.125em;
      }

      .bnr-subscribe {
        align-items: stretch;
      }

      .bnr-subscribe label {
        width: 100%;
        font-size: 1.25em;
      }

      .bnr-subscribe input,
      .bnr-subscribe button {
        width: 100%;
        height: 42px;
      }
    }

    /* ===== Original CSS block 5 ===== */
    /* ===== Fix: content sliders for Impact left cards + Highlights ===== */
    .bnr-impact-main {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 34px;
      align-items: stretch;
    }

    .bnr-stat-slider {
      min-width: 0;
    }

    .bnr-stat-viewport {
      overflow: hidden;
    }

    .bnr-stat-track {
      display: flex;
      transition: transform .45s ease;
    }

    .bnr-stat-panel {
      flex: 0 0 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      padding: 0 2px;
    }

    .bnr-ranking-card {
      grid-column: auto !important;
      grid-row: auto !important;
    }

    .bnr-slider-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      margin-top: 24px;
      color: #154f3b;
      font-size: 1.25em;
      font-weight: 900;
    }

    .bnr-slider-nav button {
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      cursor: pointer;
      padding: 4px 8px;
      line-height: 1;
    }

    .bnr-slider-lines {
      display: flex;
      gap: 26px;
      align-items: center;
    }

    .bnr-slider-lines span {
      display: block;
      width: 58px;
      height: 3px;
      background: rgba(21, 79, 59, .35);
      transition: background .25s ease;
    }

    .bnr-slider-lines span.is-active {
      background: #154f3b;
    }

    .bnr-highlight-slider {
      position: relative;
      background: #fff;
      border: 1px solid #d3e1e1;
      overflow: hidden;
    }

    .bnr-highlight-viewport {
      overflow: hidden;
    }

    .bnr-highlight-track {
      display: flex;
      transition: transform .45s ease;
    }

    .bnr-highlight-page {
      flex: 0 0 100%;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      background: #fff;
    }

    .bnr-highlight-footer {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 18px;
      margin-top: 26px;
    }

    .bnr-highlight-footer .bnr-slider-nav {
      margin: 0;
      grid-column: 2;
    }

    .bnr-highlight-footer .bnr-readmore {
      margin: 0;
      text-align: right;
      grid-column: 3;
    }

    @media (max-width:1200px) {
      .bnr-impact-main {
        grid-template-columns: 1fr;
      }

      .bnr-highlight-page {
        grid-template-columns: repeat(3, 1fr);
      }

      .bnr-highlight-page .bnr-news-card:nth-child(n+4) {
        display: none;
      }
    }

    @media (max-width:768px) {
      .bnr-impact-main {
        grid-template-columns: 1fr;
      }

      .bnr-stat-panel {
        grid-template-columns: 1fr;
      }

      .bnr-highlight-page {
        grid-template-columns: 1fr;
        gap: 16px;
        background: transparent;
      }

      .bnr-highlight-page .bnr-news-card:nth-child(n+2) {
        display: none;
      }

      .bnr-highlight-slider {
        background: transparent;
        border: 0;
        overflow: visible;
      }

      .bnr-highlight-footer {
        grid-template-columns: 1fr;
      }

      .bnr-highlight-footer .bnr-slider-nav,
      .bnr-highlight-footer .bnr-readmore {
        grid-column: auto;
        text-align: center;
      }

      .bnr-highlight-footer .bnr-readmore a {
        display: block;
      }

      .bnr-slider-lines span {
        width: 38px;
      }
    }

    /* ===== Client content update: comments, dynamic development panels, no-photo events, figure animation ===== */
    .bnr-dev-panel {
      display: none;
    }

    .bnr-dev-panel.is-active {
      display: grid;
    }

    .bnr-stat-panel-compact {
      align-content: start;
    }

    .bnr-stat-panel-compact .bnr-stat-card {
      min-height: 182px;
    }

    .bnr-news-card a {
      display: block;
      height: 100%;
    }

    .bnr-heading-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 28px;
      position: relative;
      margin-bottom: 34px;
    }

    .bnr-heading-row h2 {
      margin: 0;
    }

    .bnr-see-all {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      border: 2px solid #b52a86;
      background: #fff;
      color: #111;
      padding: 9px 18px;
      font-weight: 900;
      font-size: 0.8125em;
    }

    .bnr-happening-no-photos .bnr-event-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 980px;
      margin: 0 auto;
    }

    .bnr-happening-no-photos .bnr-event-grid article {
      min-height: 190px;
    }

    .bnr-happening-no-photos .bnr-event-grid div {
      padding: 34px 36px;
    }

    .what_happening_photo {
      display: block;
      width: 391px;
      height: 224px;
      padding: 0px !important
    }

    .what_happening_card {
      display: block;
      width: 407px;
      height: 238px;
      background-image: url("../images/what_happening/what_happening_card.png")
    }

    .bnr-happening-no-photos .bnr-event-grid h3 {
      font-size: 1.375em;
      max-width: 78%;
    }

    @media(max-width:768px) {
      .bnr-heading-row {
        display: block;
        text-align: center;
      }

      .bnr-see-all {
        position: static;
        display: inline-block;
        transform: none;
        margin-top: 16px;
      }

      .bnr-happening-no-photos .bnr-event-grid {
        grid-template-columns: 1fr;
      }

      .bnr-dev-panel.is-active {
        grid-template-columns: 1fr;
      }
    }

    /* ======================================================================
   Consolidated client revision overrides — 2026-05-14
   Scope: Belt and Road homepage corrections only. Unspecified sections
   are intentionally preserved.
====================================================================== */
    /* 1) Remove global dark curved / diagonal cover overlay from the whole page */
    html,
    body,
    .bnr-home,
    main#bnr-main {
      background-color: #fff !important;
      background-image: none !important;
    }

    body::before,
    body::after,
    .bnr-home::before,
    .bnr-home::after,
    main#bnr-main::before,
    main#bnr-main::after {
      content: none !important;
      display: none !important;
      background: none !important;
      background-image: none !important;
    }

    /* Keep the Development Areas section artwork only, but remove extra pseudo overlay. */
    .bnr-development {
      position: relative;
      background-image: url(../images/development_areas.jpg) !important;
      background-size: cover !important;
      background-position: center top !important;
    }

    .bnr-development::before {
      content: none !important;
      display: none !important;
    }

    /* Shared section headline treatment */
    .bnr-section h2,
    .bnr-cta h2 {
        font-family: var(--site-heading-font-family);
      font-weight: 900;
      letter-spacing: -0.035em;
      line-height: 1.05;
      text-transform: none;
    }

    .bnr-section h2 {
      font-size: clamp(2.625em, 3.1vw, 4em);
      color: #00677a;
    }

    .bnr-section h2 span {
      color: #2b7b68;
    }

    /* 2) Hero under-section 1: What We Do typography and spacing */
    .bnr-what {
      padding-top: 46px !important;
      padding-bottom: 76px !important;
      background: linear-gradient(180deg, #effcff 0%, #98f7fa 100%) !important;
    }

    .bnr-what h2 {
      margin-bottom: 42px !important;
      font-size: clamp(2.875em, 3.4vw, 4.25em) !important;
      color: #00677a !important;
    }

    .bnr-what h2 span {
      color: #2b7b68 !important;
    }

    .bnr-what-grid {
      border-left: 3px solid rgba(44, 72, 159, .78) !important;
    }

    .bnr-what-item {
      min-height: 310px !important;
      padding: 0 34px 10px !important;
      border-right: 3px solid rgba(44, 72, 159, .78) !important;
      color: #333b40 !important;
    }

    .bnr-what-item strong {
      color: #333b40 !important;
      font-size: clamp(2em, 2.05vw, 2.75em) !important;
      line-height: 1.08 !important;
      font-weight: 800 !important;
      letter-spacing: -0.025em !important;
    }

    .bnr-what .wwd_svg {
      width: 88% !important;
      max-height: 210px !important;
      padding-top: 34px !important;
    }

    /* 3) Hero under-section 2: Impact at a Glance */
    .bnr-impact {
      padding-top: 58px !important;
      padding-bottom: 72px !important;
/*       background: linear-gradient(180deg, #e8fff3 0%, #b8f0d0 100%) !important; */
	        background-color: #e3f2f2;
    }

    .bnr-impact h2 {
      margin-bottom: 54px !important;
      font-size: clamp(3em, 3.25vw, 4.25em) !important;
      color: #00677a !important;
    }

    .bnr-impact h2::first-letter {
      color: inherit;
    }

    .bnr-impact-main {
      grid-template-columns: minmax(520px, .95fr) minmax(640px, 1.08fr) !important;
      gap: 80px !important;
      align-items: end !important;
    }

    .bnr-stat-slider {
      align-self: end !important;
    }

    .bnr-stat-panel {
      gap: 28px !important;
      align-items: stretch !important;
    }

    .bnr-stat-card {
      min-height: 210px !important;
      padding: 42px 38px 34px !important;
      border: 1px solid rgba(24, 93, 86, .18) !important;
      border-top-width: 7px !important;
      border-radius: 14px !important;
      box-shadow: 0 10px 22px rgba(0, 74, 72, .2) !important;
      display: grid !important;
      grid-template-columns: 110px 1fr !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      background: #fff !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(1) {
      border-top-color: #5aa2f2 !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(2) {
      border-top-color: #2e9d6b !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(3) {
      border-top-color: #60aaa0 !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(4) {
      border-top-color: #d6ab35 !important;
    }

    .bnr-stat-icon {
      grid-column: 1;
      grid-row: 1;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      font-size: 0 !important;
    }

    .bnr-stat-icon svg {
      width: 92px !important;
      height: auto !important;
    }

    .bnr-stat-card strong {
      grid-column: 2;
      grid-row: 1;
      margin: 0 !important;
      font-size: clamp(2.625em, 2.5vw, 3.625em) !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      color: #174b34 !important;
    }

    .bnr-stat-card p {
      grid-column: 1 / -1;
      grid-row: 2;
      margin: 28px 0 0 !important;
      font-size: clamp(1.5em, 1.45vw, 2.125em) !important;
      line-height: 1.15 !important;
      font-weight: 800 !important;
      letter-spacing: -0.015em !important;
      color: #174b34 !important;
    }

    .bnr-stat-card:nth-child(1) strong,
    .bnr-stat-card:nth-child(1) p {
      color: #2f6cba !important;
    }

    .bnr-stat-card:nth-child(3) strong,
    .bnr-stat-card:nth-child(3) p {
      color: #006b5f !important;
    }

    .bnr-stat-card:nth-child(4) strong,
    .bnr-stat-card:nth-child(4) p {
      color: #936d08 !important;
    }

    .bnr-ranking-card {
      min-height: 476px !important;
      padding: 56px 68px !important;
      border-radius: 14px !important;
      border: 1px solid rgba(24, 93, 86, .2) !important;
      box-shadow: 0 10px 24px rgba(0, 74, 72, .22) !important;
      background: rgba(228, 255, 238, .45) !important;
    }

    .bnr-ranking-card h3 {
      color: #0a6f82 !important;
      font-size: clamp(2.25em, 2.35vw, 3.25em) !important;
      line-height: 1.05 !important;
      font-weight: 900 !important;
      letter-spacing: -0.035em !important;
      margin: 0 0 28px !important;
      padding-bottom: 26px !important;
      border-bottom: 12px solid #217a55 !important;
    }

    .bnr-ranking-card h3 span,
    .bnr-ranking-card h3 b,
    .bnr-ranking-card h3 strong {
      color: #286f39 !important;
    }

    .bnr-rank-row {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      gap: 34px !important;
      align-items: center !important;
      padding: 22px 0 !important;
    }

    .bnr-rank-row strong {
      color: #2f7139 !important;
      font-size: clamp(1.75em, 1.85vw, 2.5em) !important;
      line-height: 1.08 !important;
      font-weight: 900 !important;
    }

    .bnr-rank-row span {
      color: #707070 !important;
      font-size: clamp(1.25em, 1.25vw, 1.75em) !important;
      line-height: 1.25 !important;
      font-weight: 700 !important;
    }

    .bnr-rank-row em {
      color: #2f7139 !important;
      font-size: clamp(3.625em, 3.65vw, 5.25em) !important;
      line-height: .9 !important;
      font-weight: 900 !important;
    }

    /* 4) Hero under-section 3: Development Areas card states */
    .bnr-development {
      padding-top: 58px !important;
      padding-bottom: 82px !important;
    }

    .bnr-development h2 {
      margin-bottom: 48px !important;
    }

    .bnr-dev-tabs {
      gap: 30px !important;
      margin-bottom: 72px !important;
    }

    .bnr-dev-tabs button {
      min-height: 96px !important;
      padding: 18px 30px !important;
      border: 1px solid rgba(27, 96, 37, .22) !important;
      border-radius: 5px !important;
      background: #fff !important;
      color: #1b6025 !important;
      font-weight: 900 !important;
      font-size: clamp(0.9375em, .9vw, 1.25em) !important;
      line-height: 1.08 !important;
      box-shadow: none !important;
      transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
    }

    .bnr-dev-tabs button svg,
    .bnr-dev-tabs button svg * {
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    .bnr-dev-tabs button:hover,
    .bnr-dev-tabs button:focus-visible,
    .bnr-dev-tabs button.is-active {
      background: #1b6025 !important;
      color: #fff !important;
      border-color: #1b6025 !important;
    }

    .bnr-dev-tabs button:hover,
    .bnr-dev-tabs button:focus-visible {
      transform: translateY(-2px);
    }

    .bnr-dev-cards {
      gap: 34px !important;
    }

    .bnr-dev-cards article {
      min-height: 210px !important;
      padding: 38px 42px !important;
      border-top: 6px solid #078b8f !important;
      border-radius: 10px !important;
      box-shadow: 0 10px 22px rgba(0, 0, 0, .13) !important;
      background: #fff !important;
    }

    .bnr-dev-cards h3 {
      color: #1b6025 !important;
      font-size: clamp(1.5625em, 1.45vw, 2.125em) !important;
      line-height: 1.25 !important;
      font-weight: 800 !important;
      margin-bottom: 24px !important;
    }

    .bnr-dev-cards p {
      color: #122 !important;
      font-size: clamp(1.0625em, 1vw, 1.375em) !important;
      line-height: 1.38 !important;
    }

    .bnr-dev-cards a {
      color: #006a35 !important;
      font-weight: 900 !important;
      font-size: 0.9375em !important;
    }

    /* 5) Hero under-section 4: Highlights category labels + white control area */
    .bnr-highlights {
      padding-top: 70px !important;
      padding-bottom: 76px !important;
/*       background: linear-gradient(180deg, #f2fcff 0%, #96f4f5 100%) !important; */

	  background-color: #e3f2f2;
    }

    .bnr-highlights h2 {
      color: #1b6025 !important;
      font-size: clamp(3.25em, 3.5vw, 4.75em) !important;
      margin-bottom: 76px !important;
    }

    .bnr-highlight-slider {
      background: #fff !important;
      border: 1px solid #d3e1e1 !important;
      border-bottom: 0 !important;
      overflow: visible !important;
    }

    .bnr-highlight-page {
      background: #fff !important;
      align-items: stretch !important;
    }

    .bnr-news-card {
      min-height: 390px !important;
      background: #fff !important;
      overflow: visible !important;
    }

    .bnr-news-card a {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      background: #fff !important;
    }

    .bnr-news-card a>span {
      position: static !important;
      top: auto !important;
      left: auto !important;
      z-index: auto !important;
      align-self: flex-start !important;
      display: inline-block !important;
      background: #000 !important;
      color: #fff !important;
      padding: 10px 18px !important;
      font-size: 0.9375em !important;
      line-height: 1 !important;
      font-weight: 900 !important;
    }

    .bnr-news-card img {
      width: 100% !important;
      height: 210px !important;
      object-fit: cover !important;
      display: block !important;
    }

    .bnr-news-card h3 {
      padding: 30px 26px 24px !important;
      font-size: clamp(1.5em, 1.3vw, 2em) !important;
      line-height: 1.12 !important;
      font-weight: 900 !important;
      color: #333 !important;
    }

    .bnr-highlight-footer {
      margin-top: 0 !important;
      padding: 54px 36px 38px !important;
      background: #fff !important;
      border: 1px solid #d3e1e1 !important;
      border-top: 0 !important;
    }

    .bnr-highlight-footer .bnr-slider-nav {
      color: #174b34 !important;
      font-size: 1.75em !important;
      gap: 34px !important;
    }

    .bnr-highlight-footer .bnr-slider-lines span {
      width: 70px !important;
      height: 4px !important;
      background: rgba(23, 75, 52, .35) !important;
    }

    .bnr-highlight-footer .bnr-slider-lines span.is-active {
      background: #174b34 !important;
    }

    .bnr-highlight-footer .bnr-readmore a {
      min-width: 188px !important;
      text-align: center !important;
      padding: 20px 26px !important;
      border: 3px solid #cf2b9a !important;
      background: #fff !important;
      color: #000 !important;
      font-size: 1.125em !important;
      font-weight: 900 !important;
    }

    /* 6) Hero under-section 6: Connecting subtitle centered */
    .bnr-connect {
/*       background: linear-gradient(180deg, #f2fcff 0%, #a1f9ff 100%) !important; */
	  background-color: #e3f2f2;
    }

    .bnr-connect h2 {
      margin-bottom: 18px !important;
    }

    .bnr-connect>.bnr-container>p {
      text-align: center !important;
      margin: 0 auto 42px !important;
      color: #5d7374 !important;
    }

    .bnr-connect-grid strong {
      font-size: clamp(1.625em, 1.7vw, 2.25em) !important;
      color: #263842 !important;
    }

    /* 7) Green CTA button colors + centered SVG graphic */
    .bnr-cta {
      background: linear-gradient(90deg, #145c24 0%, #437e52 100%) !important;
      padding: 74px 0 84px !important;
    }

    .bnr-cta>.bnr-container>span {
      color: #fff !important;
      font-size: 1.125em !important;
      margin-bottom: 26px !important;
    }

    .bnr-cta h2 {
      color: #fff !important;
      font-size: clamp(2.75em, 3.4vw, 4.5em) !important;
      margin-bottom: 34px !important;
    }

    .bnr-subscribe label {
      color: #fff !important;
      font-size: clamp(2em, 2.3vw, 3.25em) !important;
      line-height: 1.05 !important;
    }

    .bnr-subscribe input {
      width: min(500px, 100%) !important;
      height: 48px !important;
      border-radius: 25px !important;
      font-size: 1.0625em !important;
    }

    .bnr-subscribe button {
      height: 48px !important;
      min-width: 188px !important;
      border-radius: 25px !important;
      background: #bd238f !important;
      color: #fff !important;
      font-size: 1.125em !important;
    }

    .bnr-cta-links {
      margin-top: 36px !important;
      gap: 16px !important;
    }

    .bnr-cta-links a {
      min-width: 218px !important;
      padding: 18px 28px !important;
      border-radius: 14px !important;
      font-size: 1.125em !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      text-align: center !important;
    }

    .bnr-cta-links a:first-child {
      background: #fff !important;
      color: #243f38 !important;
      border: 2px solid #fff !important;
    }

    .bnr-cta-links a:nth-child(2) {
      background: #2A4B45 !important;
      color: #fff !important;
      border: 3px solid rgba(255, 255, 255, .9) !important;
    }

    .bnr-cta-logo {
      margin-top: 44px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }

    .bnr-cta-logo svg {
      width: min(438px, 88vw) !important;
      height: auto !important;
      display: block !important;
    }

    @media (max-width: 1200px) {
      .bnr-impact-main {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
      }

      .bnr-what-grid {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      .bnr-what-item {
        min-height: 260px !important;
      }

      .bnr-highlight-page {
        grid-template-columns: repeat(3, 1fr) !important;
      }

      .bnr-news-card:nth-child(n+4) {
        display: none !important;
      }
    }

    @media (max-width: 768px) {
      .bnr-section h2 {
        font-size: clamp(2.125em, 9vw, 2.875em) !important;
      }

      .bnr-what-grid,
      .bnr-dev-tabs,
      .bnr-dev-cards,
      .bnr-highlight-page,
      .bnr-connect-grid {
        grid-template-columns: 1fr !important;
      }

      .bnr-what-grid,
      .bnr-connect-grid {
        border-left: 0 !important;
      }

      .bnr-what-item,
      .bnr-connect-grid a {
        border: 1px solid rgba(44, 72, 159, .35) !important;
      }

      .bnr-stat-card {
        grid-template-columns: 82px 1fr !important;
        padding: 28px !important;
      }

      .bnr-stat-card p {
        font-size: 1.375em !important;
      }

      .bnr-ranking-card {
        padding: 34px 28px !important;
        min-height: auto !important;
      }

      .bnr-highlight-footer {
        grid-template-columns: 1fr !important;
      }

      .bnr-highlight-footer .bnr-slider-nav,
      .bnr-highlight-footer .bnr-readmore {
        grid-column: auto !important;
        text-align: center !important;
      }
    }

/* ===== Extracted inline style block 2 | from index2_revised_v12.html ===== */

    /* ===== Patch v2: Impact card alignment + Development Areas hover states ===== */
    .bnr-impact-main {
      grid-template-columns: minmax(650px, 0.95fr) minmax(760px, 1.05fr) !important;
      gap: 70px !important;
      align-items: start !important;
    }

    .bnr-stat-slider,
    .bnr-ranking-card {
      align-self: start !important;
    }

    .bnr-stat-viewport {
      overflow: hidden !important;
      width: 100% !important;
    }

    .bnr-stat-track {
      width: 100% !important;
    }

    .bnr-stat-panel {
      width: 100% !important;
      min-width: 100% !important;
      box-sizing: border-box !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 28px !important;
      padding: 0 !important;
    }

    .bnr-stat-card {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
      grid-template-columns: 100px minmax(0, 1fr) !important;
      padding: 42px 34px 34px !important;
    }

    .bnr-stat-icon {
      width: 90px !important;
      height: 90px !important;
    }

    .bnr-stat-icon svg {
      width: 86px !important;
      height: 86px !important;
      max-width: 86px !important;
      max-height: 86px !important;
      object-fit: contain !important;
    }

    .bnr-stat-card strong {
      white-space: nowrap !important;
      min-width: 0 !important;
    }

    .bnr-stat-card p {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    /* Development Areas actual card class in the current HTML is .dev-grid/.dev-item */
    .bnr-development .dev-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 30px !important;
      margin-bottom: 72px !important;
    }

    .bnr-development .dev-item {
      min-height: 96px !important;
      display: grid !important;
      grid-template-columns: 70px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 18px !important;
      padding: 18px 30px !important;
      border: 1px solid rgba(27, 96, 37, .22) !important;
      border-radius: 5px !important;
      background: #fff !important;
      color: #1b6025 !important;
      font-weight: 900 !important;
      font-size: clamp(0.9375em, .9vw, 1.25em) !important;
      line-height: 1.08 !important;
      box-shadow: none !important;
      cursor: pointer !important;
      transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
    }

    .bnr-development .dev-item svg {
      width: 62px !important;
      height: 62px !important;
      color: currentColor !important;
    }

    .bnr-development .dev-item svg *,
    .bnr-development .dev-item svg path,
    .bnr-development .dev-item svg rect,
    .bnr-development .dev-item svg circle,
    .bnr-development .dev-item svg polygon,
    .bnr-development .dev-item svg line,
    .bnr-development .dev-item svg polyline {
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    .bnr-development .dev-item span {
      color: currentColor !important;
    }

    .bnr-development .dev-item:hover,
    .bnr-development .dev-item:focus-visible,
    .bnr-development .dev-item.featured {
      background: #1b6025 !important;
      color: #fff !important;
      border-color: #1b6025 !important;
    }

    .bnr-development .dev-item:hover,
    .bnr-development .dev-item:focus-visible {
      transform: translateY(-2px) !important;
    }

    @media (max-width: 1200px) {
      .bnr-impact-main {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
      }

      .bnr-development .dev-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 768px) {
      .bnr-stat-panel {
        grid-template-columns: 1fr !important;
      }

      .bnr-stat-card {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        padding: 28px !important;
      }

      .bnr-stat-icon {
        width: 74px !important;
        height: 74px !important;
      }

      .bnr-stat-icon svg {
        width: 72px !important;
        height: 72px !important;
      }

      .bnr-development .dev-grid {
        grid-template-columns: 1fr !important;
      }
    }

/* ===== Extracted inline style block 3 | from index2_revised_v12.html ===== */

    /* ===== Patch v3: final corrections requested after visual check ===== */
    /* Impact at a Glance: force clean 2+2 equal card grid, equal SVG sizing, and top alignment with ranking panel */
    .bnr-impact .bnr-container {
      overflow: visible !important;
    }

    .bnr-impact-main {
      display: grid !important;
      grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.12fr) !important;
      column-gap: 78px !important;
      row-gap: 36px !important;
      align-items: start !important;
    }

    .bnr-stat-slider,
    .bnr-ranking-card {
      align-self: start !important;
      margin-top: 0 !important;
    }

    .bnr-stat-slider {
      width: 100% !important;
      min-width: 0 !important;
    }

    .bnr-stat-viewport {
      width: 100% !important;
      overflow: hidden !important;
    }

    .bnr-stat-track {
      width: 100% !important;
      display: flex !important;
    }

    .bnr-stat-panel {
      flex: 0 0 100% !important;
      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 30px !important;
      padding: 0 !important;
      box-sizing: border-box !important;
      align-items: stretch !important;
    }

    .bnr-stat-card {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      min-height: 220px !important;
      box-sizing: border-box !important;
      overflow: visible !important;
      display: grid !important;
      grid-template-columns: 92px minmax(0, 1fr) !important;
      grid-template-rows: auto 1fr !important;
      column-gap: 24px !important;
      row-gap: 22px !important;
      align-items: center !important;
      padding: 38px 30px 30px !important;
      border: 1px solid rgba(24, 93, 86, .18) !important;
      border-top-width: 7px !important;
      border-radius: 14px !important;
      background: #fff !important;
      box-shadow: 0 10px 22px rgba(0, 74, 72, .2) !important;
    }

    .bnr-stat-icon {
      grid-column: 1 !important;
      grid-row: 1 !important;
      width: 82px !important;
      height: 82px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 0 !important;
      line-height: 0 !important;
    }

    .bnr-stat-icon svg {
      display: block !important;
      width: 78px !important;
      height: 78px !important;
      max-width: 78px !important;
      max-height: 78px !important;
      object-fit: contain !important;
    }

    .bnr-stat-card strong {
      grid-column: 2 !important;
      grid-row: 1 !important;
      display: block !important;
      margin: 0 !important;
      min-width: 0 !important;
      max-width: 100% !important;
      white-space: nowrap !important;
      overflow: visible !important;
      font-size: clamp(2.125em, 2.05vw, 3.125em) !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      letter-spacing: -0.025em !important;
    }

    .bnr-stat-card p {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
      margin: 0 !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      font-size: clamp(1.375em, 1.35vw, 1.9375em) !important;
      line-height: 1.16 !important;
      font-weight: 800 !important;
      letter-spacing: -0.015em !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(4) strong {
      font-size: clamp(1.9375em, 1.85vw, 2.75em) !important;
      letter-spacing: -0.035em !important;
    }

    .bnr-ranking-card {
      min-height: 500px !important;
      padding: 56px 68px !important;
    }

    /* Development Areas: requested normal/hover state on the actual 8 cards (.dev-item). No card stays green by default. */
    .bnr-development .dev-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 30px !important;
      margin-bottom: 72px !important;
    }

    .bnr-development .dev-item,
    .bnr-development .dev-item.featured {
      min-height: 96px !important;
      display: grid !important;
      grid-template-columns: 70px minmax(0, 1fr) !important;
      align-items: center !important;
      gap: 18px !important;
      padding: 18px 30px !important;
      border: 1px solid rgba(27, 96, 37, .22) !important;
      border-radius: 5px !important;
      background: #fff !important;
      color: #1b6025 !important;
      font-weight: 900 !important;
      font-size: clamp(0.9375em, .9vw, 1.25em) !important;
      line-height: 1.08 !important;
      box-shadow: none !important;
      cursor: pointer !important;
      transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
    }

    .bnr-development .dev-item svg {
      width: 62px !important;
      height: 62px !important;
      color: currentColor !important;
    }

    .bnr-development .dev-item svg *,
    .bnr-development .dev-item svg path,
    .bnr-development .dev-item svg rect,
    .bnr-development .dev-item svg circle,
    .bnr-development .dev-item svg ellipse,
    .bnr-development .dev-item svg polygon,
    .bnr-development .dev-item svg line,
    .bnr-development .dev-item svg polyline {
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    .bnr-development .dev-item span {
      color: currentColor !important;
    }

    .bnr-development .dev-item:hover,
    .bnr-development .dev-item:focus-visible,
    .bnr-development .dev-item.featured:hover,
    .bnr-development .dev-item.featured:focus-visible {
      background: #1b6025 !important;
      color: #fff !important;
      border-color: #1b6025 !important;
      transform: translateY(-2px) !important;
    }

    @media (max-width: 1200px) {
      .bnr-impact-main {
        grid-template-columns: 1fr !important;
        gap: 42px !important;
      }

      .bnr-development .dev-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 768px) {
      .bnr-stat-panel {
        grid-template-columns: 1fr !important;
      }

      .bnr-stat-card {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        padding: 30px 24px 26px !important;
      }

      .bnr-stat-icon {
        width: 74px !important;
        height: 74px !important;
      }

      .bnr-stat-icon svg {
        width: 70px !important;
        height: 70px !important;
      }

      .bnr-development .dev-grid {
        grid-template-columns: 1fr !important;
      }
    }

/* ===== Extracted inline style block 4 | from index2_revised_v12.html ===== */

    /* ===== Patch v4: exact visual corrections after latest review ===== */
    html,
    body,
    .bnr-home,
    .bnr-home * {
     font-family: var(--site-body-font-family);
    }

    /* Overall section scale back to the supplied design proportions */
    .bnr-section h2 {
      font-size: clamp(2.375em, 2.65vw, 3.625em) !important;
      line-height: 1.05 !important;
      font-weight: 900 !important;
      letter-spacing: -0.035em !important;
    }

    .bnr-container {
      width: min(1680px, calc(100% - 180px)) !important;
    }

    /* Impact at a Glance: 2x2 cards fit equally and align with right panel top */
    .bnr-impact {
      padding-top: 50px !important;
      padding-bottom: 72px !important;
    }

    .bnr-impact h2 {
      font-size: clamp(2.625em, 2.9vw, 3.875em) !important;
      margin-bottom: 50px !important;
    }

    .bnr-impact-main {
      display: grid !important;
      grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.05fr) !important;
      gap: 56px !important;
      align-items: start !important;
    }

    .bnr-stat-slider,
    .bnr-ranking-card {
      align-self: start !important;
      margin-top: 0 !important;
    }

    .bnr-stat-viewport {
      overflow: hidden !important;
      width: 100% !important;
    }

    .bnr-stat-panel {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 26px !important;
      padding: 0 !important;
      width: 100% !important;
      min-width: 100% !important;
      box-sizing: border-box !important;
    }

    .bnr-stat-card {
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      min-height: 190px !important;
      padding: 30px 26px 28px !important;
      display: grid !important;
      grid-template-columns: 78px minmax(0, 1fr) !important;
      grid-template-rows: auto 1fr !important;
      column-gap: 18px !important;
      row-gap: 22px !important;
      align-items: center !important;
      overflow: hidden !important;
      border-radius: 12px !important;
      border-top-width: 6px !important;
    }

    .bnr-stat-icon {
      width: 70px !important;
      height: 70px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .bnr-stat-icon svg {
      width: 68px !important;
      height: 68px !important;
      max-width: 68px !important;
      max-height: 68px !important;
      object-fit: contain !important;
    }

    .bnr-stat-card strong {
      font-size: clamp(2.125em, 2.0vw, 3em) !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
      letter-spacing: -0.025em !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(4) strong {
      font-size: clamp(1.875em, 1.75vw, 2.625em) !important;
    }

    .bnr-stat-card p {
      grid-column: 1 / -1 !important;
      font-size: clamp(1.25em, 1.15vw, 1.6875em) !important;
      line-height: 1.14 !important;
      font-weight: 800 !important;
      margin: 0 !important;
      overflow: visible !important;
    }

    .bnr-slider-nav {
      margin-top: 24px !important;
    }

    .bnr-ranking-card {
      min-height: 452px !important;
      padding: 48px 58px !important;
      border-radius: 12px !important;
    }

    .bnr-ranking-card h3 {
      font-size: clamp(1.875em, 2.0vw, 2.75em) !important;
      margin-bottom: 26px !important;
      padding-bottom: 22px !important;
      border-bottom-width: 10px !important;
    }

    .bnr-rank-row {
      padding: 16px 0 !important;
      gap: 26px !important;
    }

    .bnr-rank-row strong {
      font-size: clamp(1.5em, 1.55vw, 2.125em) !important;
    }

    .bnr-rank-row span {
      font-size: clamp(1.0625em, 1.05vw, 1.4375em) !important;
    }

    .bnr-rank-row em {
      font-size: clamp(3.125em, 3.0vw, 4.375em) !important;
    }

    /* Development Areas: normal state and hover state exactly on the visible 8 cards */
    .bnr-development .dev-item,
    .bnr-development .dev-item.featured {
      background: #fff !important;
      color: #1b6025 !important;
      border-color: rgba(27, 96, 37, .22) !important;
    }

    .bnr-development .dev-item svg,
    .bnr-development .dev-item svg * {
      color: currentColor !important;
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    .bnr-development .dev-item:hover,
    .bnr-development .dev-item:focus-visible,
    .bnr-development .dev-item.featured:hover,
    .bnr-development .dev-item.featured:focus-visible {
      background: #1b6025 !important;
      color: #fff !important;
      border-color: #1b6025 !important;
    }

    /* Highlights: black tag floats above image; no white strip to the right of the tag */
    .bnr-highlights {
      padding-top: 62px !important;
      padding-bottom: 72px !important;
    }

    .bnr-highlights h2 {
      font-size: clamp(2.75em, 3.1vw, 4.125em) !important;
      margin-bottom: 96px !important;
    }

    .bnr-highlight-slider {
      background: transparent !important;
      border: 0 !important;
      overflow: visible !important;
    }

    .bnr-highlight-viewport,
    .bnr-highlight-track {
      overflow: visible !important;
    }

    .bnr-highlight-page {
      background: transparent !important;
      align-items: stretch !important;
      border: 1px solid #d3e1e1 !important;
      border-bottom: 0 !important;
    }

    .bnr-news-card {
      position: relative !important;
      min-height: 356px !important;
      background: transparent !important;
      overflow: visible !important;
      border-right: 1px solid #d9e5e5 !important;
    }

    .bnr-news-card a {
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      background: transparent !important;
    }

    .bnr-news-card a>span {
      position: absolute !important;
      top: -40px !important;
      left: 0 !important;
      z-index: 3 !important;
      display: inline-flex !important;
      align-items: center !important;
      height: 40px !important;
      width: auto !important;
      align-self: auto !important;
      background: #000 !important;
      color: #fff !important;
      padding: 0 18px !important;
      font-size: 0.9375em !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    .bnr-news-card img {
      display: block !important;
      width: 100% !important;
      height: 205px !important;
      object-fit: cover !important;
      background: transparent !important;
    }

    .bnr-news-card h3 {
      background: #fff !important;
      flex: 1 1 auto !important;
      padding: 28px 24px 24px !important;
      font-size: clamp(1.3125em, 1.18vw, 1.75em) !important;
      line-height: 1.12 !important;
      font-weight: 900 !important;
      color: #333 !important;
    }

    .bnr-highlight-footer {
      background: #fff !important;
      border: 1px solid #d3e1e1 !important;
      border-top: 0 !important;
      margin-top: 0 !important;
      padding: 44px 34px 36px !important;
    }

    .bnr-highlight-footer .bnr-readmore a {
      font-size: 1em !important;
      padding: 16px 24px !important;
    }

    /* Keep responsive layout clean */
    @media (max-width: 1200px) {
      .bnr-container {
        width: min(100% - 60px, 1100px) !important;
      }

      .bnr-impact-main {
        grid-template-columns: 1fr !important;
        gap: 44px !important;
      }
    }

    @media (max-width: 768px) {
      .bnr-container {
        width: calc(100% - 32px) !important;
      }

      .bnr-stat-panel {
        grid-template-columns: 1fr !important;
      }

      .bnr-highlight-page {
        grid-template-columns: 1fr !important;
        gap: 54px !important;
        border: 0 !important;
      }

      .bnr-news-card {
        border-right: 0 !important;
      }
    }

/* ===== Extracted inline style block 5 | id=bnr-final-reference-pass | from index2_revised_v12.html ===== */

    :root {
      --ref-teal: #006d80;
      --ref-green: #1b6025;
      --ref-charcoal: #34393b;
      --ref-footer-bottom: #294450;
      --ref-shadow: 0 9px 18px rgba(0, 80, 70, .22);
    }

    html,
    body,
    .bnr-home,
    .bnr-home * {
        font-family: var(--site-heading-font-family);
    }

    body {
      margin: 0 !important;
      color: #222;
      background: #fff !important;
    }

    .bnr-container {
      width: min(1680px, calc(100% - 240px)) !important;
      margin: 0 auto !important;
    }

    .bnr-section h2,
    .bnr-cta h2 {
        font-family: var(--site-heading-font-family);
      font-weight: 800 !important;
      letter-spacing: -.035em !important;
      line-height: 1.04 !important;
      text-transform: none !important;
    }

    .header-top {
      height: 34px !important;
      background: linear-gradient(90deg, #1b6025 0%, #86c994 100%) !important;
      font-size: 0.8125em !important;
    }

    .header-top .container {
      height: 34px !important;
      padding-right: 95px !important;
    }

    .header-main {
      position: relative !important;
      top: auto !important;
      height: 86px !important;
      background: #fff !important;
      border-bottom: 0 !important;
      z-index: 20 !important;
    }

    .header-main .container {
      height: 86px !important;
      margin: 0 auto !important;
      width: min(1720px, calc(100% - 200px)) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }

    .logo {
      margin-left: 0 !important;
    }

    .logo img {
      max-width: 480px !important;
      width: 480px !important;
      height: auto !important;
      display: block !important;
    }

    .nav a,
    .nav-item>a {
      font-size: 1.125em !important;
      line-height: 1 !important;
      font-weight: 500 !important;
      color: #111 !important;
      margin-left: 34px !important;
      padding: 0 !important;
    }

    .bnr-hero,
    .bnr-hero-track,
    .bnr-hero-content {
      min-height: 714px !important;
    }

    .bnr-hero-slide {
      background-size: cover !important;
      background-position: center center !important;
    }

    .bnr-hero-overlay {
      background: linear-gradient(90deg, rgba(0, 69, 72, .98) 0%, rgba(0, 103, 112, .84) 34%, rgba(0, 130, 145, .45) 54%, rgba(0, 80, 90, .02) 78%) !important;
    }

    .bnr-hero-content {
      justify-content: center !important;
      align-items: flex-start !important;
      padding-bottom: 0 !important;
    }

    .bnr-tags {
      gap: 18px !important;
      margin: 0 0 42px !important;
    }

    .bnr-tags span {
      height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      border: 1px solid rgba(223, 255, 224, .9) !important;
      background: #185f2a !important;
      color: #fff !important;
      border-radius: 5px !important;
      padding: 0 28px !important;
      font-size: 1em !important;
      font-weight: 800 !important;
      letter-spacing: .02em !important;
    }

    .bnr-hero h1,
    .bnr-hero .bnr-slide-heading {
      max-width: 900px !important;
      margin: 0 !important;
      color: #fff !important;
      font-size: 4.75em !important;
      line-height: 1.105 !important;
      font-weight: 900 !important;
      letter-spacing: -.045em !important;
      text-shadow: none !important;
    }

    .bnr-hero-actions {
      gap: 26px !important;
      margin-top: 36px !important;
      align-items: center !important;
    }

    .bnr-hero-actions:before {
      content: "▶" !important;
      color: #fff !important;
      font-size: 0.875em !important;
      margin-right: 0 !important;
    }

    .bnr-hero-actions a {
      height: 46px !important;
      min-height: 46px !important;
      padding: 0 25px !important;
      border-radius: 6px !important;
      background: #e9fbf3 !important;
      color: #1c3130 !important;
      font-size: 0.9375em !important;
      font-weight: 500 !important;
      box-shadow: none !important;
    }

    .bnr-hero-controls {
      display: none !important;
    }

    .bnr-what {
/*       background: linear-gradient(180deg, #effcff 0%, #95f6fb 100%) !important; */

	  background: #f5faf8 !important;
      padding: 40px 0 76px !important;
    }

    .bnr-what h2 {
      font-size: 3.125em !important;
      margin: 0 0 34px !important;
/*       color: var(--ref-teal) !important; */
	  color: var(--bro-navy) !important;
      text-align: center !important;
    }

    .bnr-what h2 span {
/*       color: #2b7b68 !important; */
	  color: var(--bro-navy) !important;
    }

    .bnr-what-grid {
      display: grid !important;
      grid-template-columns: repeat(5, 1fr) !important;
      border-left: 3px solid rgba(35, 79, 128, .86) !important;
    }

    .bnr-what-item {
      min-height: 315px !important;
      padding: 0 24px 10px !important;
      border-right: 3px solid rgba(35, 79, 128, .86) !important;
      color: var(--ref-charcoal) !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      background: transparent !important;
    }

    .bnr-what-item strong {
      font-size: 2em !important;
      line-height: 1.08 !important;
      font-weight: 800 !important;
      letter-spacing: -.025em !important;
      color: var(--ref-charcoal) !important;
    }

    .bnr-what .wwd_svg {
      width: 88% !important;
      max-width: 215px !important;
      height: auto !important;
      max-height: 215px !important;
      margin: 0 auto !important;
      display: block !important;
      padding: 18px 0 0 !important;
    }

    .bnr-impact {
/*       background: linear-gradient(180deg, #b9efcf 100%, #eafdf3 0%) !important; */
      background-color: #e3f2f2;
      padding: 58px 0 78px !important;
    }

    .bnr-impact h2 {
      font-size: 3.375em !important;
      margin: 0 0 44px !important;
      text-align: center !important;
      background: linear-gradient(90deg, var(--ref-teal) 0 28%, var(--ref-green) 28% 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent !important;
    }

    .bnr-impact-main {
      display: grid !important;
      grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr) !important;
      gap: 52px !important;
      align-items: start !important;
    }

    .bnr-stat-panel {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 24px !important;
      padding: 0 !important;
    }

    .bnr-stat-card {
      min-height: 238px !important;
      border-radius: 10px !important;
      background: #fff !important;
      border: 0 !important;
      border-top: 6px solid #5aa2f2 !important;
      box-shadow: var(--ref-shadow) !important;
      padding: 35px 26px 27px !important;
      display: grid !important;
      grid-template-columns: 100px 1fr !important;
      grid-template-rows: auto 1fr !important;
      column-gap: 22px !important;
      row-gap: 26px !important;
      align-items: center !important;
      overflow: visible !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(1) {
      border-top-color: #5aa2f2 !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(2) {
      border-top-color: #2e9d6b !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(3) {
      border-top-color: #60aaa0 !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(4) {
      border-top-color: #d6ab35 !important;
    }

    .bnr-stat-icon {
      width: 96px !important;
      height: 96px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      grid-column: 1 !important;
      grid-row: 1 !important;
    }

    .bnr-stat-icon svg {
      width: 90px !important;
      height: 90px !important;
      max-width: 90px !important;
      max-height: 90px !important;
      object-fit: contain !important;
    }

    .bnr-stat-card strong {
      grid-column: 2 !important;
      grid-row: 1 !important;
      margin: 0 !important;
      font-size: 2.875em !important;
      line-height: 1 !important;
      font-weight: 800 !important;
      letter-spacing: -.025em !important;
      white-space: nowrap !important;
      color: #184a32 !important;
    }

    .bnr-stat-card p {
      grid-column: 1/-1 !important;
      grid-row: 2 !important;
      margin: 0 !important;
      font-size: 1.75em !important;
      line-height: 1.18 !important;
      font-weight: 800 !important;
      letter-spacing: -.015em !important;
      color: #184a32 !important;
    }

    .bnr-stat-card:nth-child(1) strong,
    .bnr-stat-card:nth-child(1) p {
      color: #2f6cba !important;
    }

    .bnr-stat-card:nth-child(3) strong,
    .bnr-stat-card:nth-child(3) p {
      color: #006b5f !important;
    }

    .bnr-stat-card:nth-child(4) strong,
    .bnr-stat-card:nth-child(4) p {
      color: #936d08 !important;
    }

    .bnr-slider-nav {
      margin-top: 26px !important;
      gap: 34px !important;
      color: #174b34 !important;
      font-size: 1.375em !important;
      font-weight: 700 !important;
    }

    .bnr-slider-lines {
      gap: 26px !important;
    }

    .bnr-slider-lines span {
      width: 50px !important;
      height: 3px !important;
      background: rgba(23, 75, 52, .38) !important;
    }

    .bnr-slider-lines span.is-active {
      background: #174b34 !important;
    }

    .bnr-ranking-card {
      min-height: 506px !important;
      border-radius: 10px !important;
      border: 0 !important;
      background: rgba(221, 255, 235, .55) !important;
      box-shadow: var(--ref-shadow) !important;
      padding: 45px 44px 34px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
    }

    .bnr-ranking-card h3 {
      font-size: 2.25em !important;
      line-height: 1.08 !important;
      font-weight: 900 !important;
      letter-spacing: -.03em !important;
      margin: 0 0 22px !important;
      padding: 0 0 24px !important;
      border-bottom: 12px solid #25735b !important;
      color: var(--ref-teal) !important;
    }

    .bnr-ranking-card h3 span,
    .bnr-ranking-card h3 strong {
      color: #286f39 !important;
    }

    .bnr-rank-row {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
      gap: 30px !important;
      align-items: center !important;
      padding: 18px 0 !important;
    }

    .bnr-rank-row strong {
      font-size: 1.875em !important;
      line-height: 1.1 !important;
      font-weight: 800 !important;
      color: #2f7139 !important;
    }

    .bnr-rank-row span {
      font-size: 1.5em !important;
      line-height: 1.22 !important;
      font-weight: 500 !important;
      color: #6b6f6f !important;
    }

    .bnr-rank-row em {
      font-size: 4em !important;
      line-height: .9 !important;
      font-weight: 900 !important;
      color: #2f7139 !important;
    }

    .bnr-development {
      position: relative !important;
      background: #fff url(../images/development_areas.jpg) center top/cover no-repeat !important;
      padding: 54px 0 64px !important;
    }

    .bnr-development::before {
      content: none !important;
      display: none !important;
    }

    .bnr-development h2 {
      font-size: 3.25em !important;
      margin: 0 0 25px !important;
      text-align: center !important;
/*       color: var(--ref-green) !important; */

	  color: var(--bro-navy) !important;
    }

    .bnr-development .dev-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 18px 20px !important;
      margin: 0 0 68px !important;
    }

    .bnr-development .dev-item {
      min-height: 104px !important;
      display: grid !important;
      grid-template-columns: 76px 1fr !important;
      gap: 18px !important;
      align-items: center !important;
      padding: 18px 26px !important;
      border: 1px solid rgba(27, 96, 37, .20) !important;
      border-radius: 7px !important;
      background: #fff !important;
      color: var(--ref-green) !important;
      box-shadow: none !important;
      font-size: 0.9375em !important;
      line-height: 1.14 !important;
      font-weight: 800 !important;
      cursor: pointer !important;
      transition: all .25s ease !important;
    }

    .bnr-development .dev-item svg {
      width: 66px !important;
      height: 66px !important;
      color: currentColor !important;
    }

    .bnr-development .dev-item span {
      font-size: 0.9375em !important;
      line-height: 1.15 !important;
      font-weight: 800 !important;
      color: currentColor !important;
    }

    .bnr-development .dev-item svg,
    .bnr-development .dev-item svg * {
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    .bnr-development .dev-item.featured,
    .bnr-development .dev-item:hover,
    .bnr-development .dev-item:focus-visible {
      background: var(--ref-green) !important;
      color: #fff !important;
      border-color: var(--ref-green) !important;
    }

    .bnr-dev-panel.is-active {
      display: grid !important;
    }

    .bnr-dev-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 28px !important;
    }

    .bnr-dev-cards article {
      min-height: 200px !important;
      background: #fff !important;
      border-top: 5px solid #078b8f !important;
      border-radius: 9px !important;
      box-shadow: 0 10px 20px rgba(0, 0, 0, .18) !important;
      padding: 26px 24px 24px !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .bnr-dev-cards h3 {
      font-size: 1.75em !important;
      line-height: 1.17 !important;
      font-weight: 800 !important;
      color: #4d7040 !important;
      margin: 0 0 28px !important;
      letter-spacing: -.02em !important;
    }

    .bnr-dev-cards p {
      font-size: 1.125em !important;
      line-height: 1.34 !important;
      font-weight: 400 !important;
      color: #5c5824 !important;
      margin: 0 !important;
    }

    .bnr-dev-cards a {
      margin-top: auto !important;
      align-self: flex-end !important;
      float: none !important;
      color: #18755e !important;
      font-size: 0.875em !important;
      font-weight: 800 !important;
    }
    .bnr-dev-cards a:hover {
	  color: #c72691 !important;
    }
    .bnr-highlights {
/*       background: linear-gradient(180deg, #f3fcff 0%, #96f6f6 100%) !important; */
	  background-color: #e3f2f2;
      padding: 55px 0 70px !important;
    }

    .bnr-highlights h2 {
      font-size: 3.375em !important;
      margin: 0 0 92px !important;
      text-align: center !important;
/*       color: var(--ref-green) !important; */
	  color: var(--bro-navy) !important;
    }

    .bnr-highlight-slider {
      background: transparent !important;
      border: 0 !important;
      overflow: visible !important;
      margin: 0 !important;
    }

    .bnr-highlight-viewport {
      overflow: hidden !important;
    }

    .bnr-highlight-track {
      display: flex !important;
      transition: transform .45s ease !important;
      overflow: visible !important;
    }

    .bnr-highlight-page {
      flex: 0 0 100% !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      background: #fff !important;
      border: 1px solid #d8e2e1 !important;
      border-bottom: 0 !important;
      align-items: stretch !important;
    }

    .bnr-news-card {
      position: relative !important;
      min-height: 357px !important;
      background: #fff !important;
      border-right: 1px solid #d8e2e1 !important;
      overflow: visible !important;
    }

    .bnr-news-card:last-child {
      border-right: 0 !important;
    }

    .bnr-news-card a {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      background: #fff !important;
      color: inherit !important;
    }

    .bnr-news-card a>span {
      position: absolute !important;
      top: -38px !important;
      left: 0 !important;
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      background: #000 !important;
      color: #fff !important;
      padding: 0 16px !important;
      font-size: 0.9375em !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
      z-index: 2 !important;
    }

    .bnr-news-card img {
      width: 100% !important;
      height: 194px !important;
      display: block !important;
      object-fit: cover !important;
    }

    .bnr-news-card h3 {
      flex: 1 !important;
      background: #fff !important;
      padding: 28px 20px 18px !important;
      margin: 0 !important;
      font-size: 1.375em !important;
      line-height: 1.12 !important;
      font-weight: 800 !important;
      letter-spacing: -.025em !important;
      color: var(--ref-charcoal) !important;
    }

    .bnr-highlight-footer {
      background: #fff !important;
      border: 1px solid #d8e2e1 !important;
      border-top: 0 !important;
      margin-top: 0 !important;
      padding: 35px 24px 24px !important;
      display: grid !important;
      grid-template-columns: 1fr auto 1fr !important;
      align-items: center !important;
    }

    .bnr-highlight-footer .bnr-slider-nav {
      grid-column: 2 !important;
      margin: 0 !important;
      font-size: 1.5em !important;
      gap: 36px !important;
    }

    .bnr-highlight-footer .bnr-slider-lines span {
      width: 50px !important;
      height: 4px !important;
    }

    .bnr-highlight-footer .bnr-readmore {
      grid-column: 3 !important;
      text-align: right !important;
      margin: 0 !important;
    }

    .bnr-highlight-footer .bnr-readmore a {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 162px !important;
      height: 52px !important;
      padding: 0 18px !important;
      border: 3px solid #c72691 !important;
      background: #fff !important;
      color: #000 !important;
      font-size: 1em !important;
      font-weight: 900 !important;
    }

    .bnr-happening {
      background: linear-gradient(180deg, #e6fbef 0%, #b7efcf 100%) !important;
      padding: 47px 0 72px !important;
    }

    .bnr-heading-row {
      display: block !important;
      position: relative !important;
      margin: 0 0 48px !important;
      text-align: center !important;
    }

    .bnr-happening h2 {
      font-size: 3.375em !important;
      margin: 0 !important;
      text-align: center !important;
      color: var(--ref-teal) !important;
    }

    .bnr-happening h2 span {
      color: #2b7b68 !important;
    }

    .bnr-see-all {
      display: none !important;
    }

    .bnr-happening-no-photos .bnr-event-grid {
      display: flex;
      flex-wrap: wrap;

      gap: 34px;
      justify-content: center;
      max-width: none;
      margin: 0 auto ;
    }

    .bnr-event-grid article {
      width: calc(392px - 17px);
      min-height: auto !important;
      background: transparent !important;
      overflow: visible !important;
      color: #fff !important;
    }
    .bnr-event-grid article:hover {
	  transform: translateY(-6px);
	  transition: transform .25s ease;
    }

    .what_happening_photo {
      display: none !important;
      /*width: 392px !important;*/
      height: 180px !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    .what_happening_photo img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }

    .what_happening_card {
      height: 240px !important;
      background-image: url("../images/what_happening/what_happening_card.png") !important;
      background-size: 100% 100% !important;
      background-repeat: no-repeat !important;
      padding: 33px 28px !important;
      box-sizing: border-box !important;
    }

    .what_happening_card time {
      display: block !important;
      font-size: 1em !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
      color: #98bed2 !important;
      margin: 0 0 20px !important;
    }

    .what_happening_card h3 {
      font-size: 1.4375em !important;
      line-height: 1.32 !important;
      font-weight: 800 !important;
      color: #fff !important;
      margin: 0 !important;
      max-width: 82% !important;
    }

    .what_happening_card p {
      font-size: 1.25em !important;
      margin: 28px 0 0 !important;
      color: #fff !important;
	    display: flex;
  align-items: center;   /* 垂直置中 */
  gap: 10px;             /* icon 之間距離 */
  margin: 0;             /* 移除 p 預設上下 margin */
  line-height: 1;
    }
	.bnr-section.bnr-connect .bnr-connect-grid > a {
  font-size: 27px !important;
  line-height: 1.3;
      font-weight: 200 !important;
}

    .bnr-connect {
/*       background: linear-gradient(180deg, #f1fcff 0%, #98f6fb 100%) !important; */

	  background-color: #e3f2f2;
      padding: 60px 0 64px !important;
    }

    .bnr-connect h2 {
      font-size: 3.375em !important;
      margin: 0 0 16px !important;
      text-align: center !important;
/*       color: var(--ref-teal) !important; */
	  color: var(--bro-navy) !important;
    }

    .bnr-connect h2 span {
/*       color: #2b7b68 !important; */
	  color: var(--bro-navy) !important;
    }

    .bnr-connect>.bnr-container>p {
      font-size: 1.0625em !important;
      line-height: 1.3 !important;
      font-weight: 400 !important;
      color: #536166 !important;
      text-align: center !important;
      margin: 0 0 24px !important;
    }

    .bnr-connect-grid {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      border-left: 3px solid rgba(35, 79, 128, .86) !important;
    }

    .bnr-connect-grid a {
      min-height: 285px !important;
      border-right: 3px solid rgba(35, 79, 128, .86) !important;
      text-align: left !important;
      padding: 0 30px !important;
      color: var(--ref-charcoal) !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      background: transparent !important;
    }
    .bnr-connect-grid a:hover {
	transform: translateY(-6px);
	transition: transform .25s ease;
    }
    .bnr-connect-grid strong {
      font-size: 21px !important;
      line-height: 1.08 !important;
      font-weight: 700 !important;
      letter-spacing: -.025em !important;
      color: var(--ref-charcoal) !important;
    }

    .bnr-connect .cbr_svg {
      width: 78% !important;
      max-width: 215px !important;
      height: auto !important;
      display: block !important;
      margin: 0 auto !important;
      padding: 18px 0 0 !important;
    }

    .bnr-cta {
      background: linear-gradient(90deg, #145c24 0%, #3f7b4f 100%) !important;
      color: #fff !important;
      text-align: center !important;
      padding: 52px 0 68px !important;
    }

    .bnr-cta>.bnr-container>span {
      display: block !important;
      color: #fff !important;
      font-size: 1.75em !important;
      line-height: 1 !important;
      font-weight: 800 !important;
      letter-spacing: .08em !important;
      margin: 0 0 24px !important;
	  text-align: center
    }

    .bnr-cta h2 {
      font-size: 3.125em !important;
      line-height: 1.05 !important;
      color: #fff !important;
      margin: 0 0 28px !important;
    }

    .bnr-subscribe {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 24px !important;
      flex-wrap: nowrap !important;
      margin: 0 !important;
    }

    .bnr-subscribe label {
      font-size: 2.375em !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      color: #fff !important;
      margin: 0 !important;
    }

    .bnr-subscribe input {
      width: 390px !important;
      height: 42px !important;
      border: 0 !important;
      border-radius: 24px !important;
      background: #fff !important;
      padding: 0 128px 0 28px !important;
      font-size: 0.9375em !important;
    }

    .bnr-subscribe button {
      height: 42px !important;
      min-width: 144px !important;
      border: 0 !important;
      border-radius: 24px !important;
      background: #bd238f !important;
      color: #fff !important;
      padding: 0 26px !important;
      font-size: 0.9375em !important;
      font-weight: 500 !important;
      margin-left: -150px !important;
      position: relative !important;
    }

    .bnr-cta-links {
      margin: 30px 0 0 !important;
      display: flex !important;
      justify-content: center !important;
      gap: 12px !important;
    }

    .bnr-cta-links a {
      min-width: 178px !important;
      height: 48px !important;
      border-radius: 12px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 20px !important;
      font-size: 1em !important;
      line-height: 1 !important;
      font-weight: 100 !important;
    }

    .bnr-cta-links a:first-child {
	  background: #4f625e !important;
      color: #fff !important;
      border: 2px solid #fff !important;

    }

    .bnr-cta-links a:nth-child(2) {
      background: rgba(42, 75, 69, .35) !important;
      color: #fff !important;
      border: 3px solid rgba(255, 255, 255, .9) !important;
    }

    .bnr-cta-logo {
      margin-top: 28px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }

    .bnr-cta-logo svg {
      width: 438px !important;
      max-width: 80vw !important;
      height: auto !important;
      display: block !important;
    }

    footer {
      background: var(--ref-footer-bottom) !important;
      color: #fff !important;
      font-size: 0.875em !important;
    }

    .footer-main {
      background: #121b20 !important;
      padding: 50px 0 66px !important;
    }

    .footer-main .container {
      width: min(1720px, calc(100% - 190px)) !important;
      margin: 0 auto !important;
    }

    .footer-grid {
      display: grid !important;
      grid-template-columns: 1.65fr 1.05fr 1.35fr .8fr 1.05fr .85fr !important;
      gap: 42px !important;
    }

    .footer-grid h4 {
      font-size: 1.125em !important;
      line-height: 1.1 !important;
      font-weight: 800 !important;
      letter-spacing: 1.1px !important;
      color: #00afe8 !important;
      text-transform: uppercase !important;
      margin: 0 0 18px !important;
      padding: 0 !important;
    }

    .footer-grid a {
      font-size: 0.875em !important;
      line-height: 1.45 !important;
      font-weight: 400 !important;
      color: #fff !important;
      margin: 0 0 13px !important;
      background-image: none !important;
    }

    .footer-sub {
      margin-left: 14px !important;
      padding-left: 14px !important;
      border-left: 1px solid rgba(255, 255, 255, .35) !important;
      margin-bottom: 12px !important;
    }

    .footer-sub a {
      font-size: 0.8125em !important;
      margin-bottom: 8px !important;
      opacity: .95 !important;
    }

    .footer-grid img {
      width: 28px !important;
      height: auto !important;
    }

    .footer-bottom.subscription {
      background: #294450 !important;
      padding: 22px 0 38px !important;
      color: #fff !important;
      text-align: center !important;
    }

    .footer-bottom.subscription p,
    .footer-bottom p {
      font-size: 0.8125em !important;
      line-height: 1.4 !important;
      color: #fff !important;
      margin: 0 0 22px !important;
    }

    .footer-bottom .ft-list,
    .footer-bottom.subscription .ft-list {
      font-size: 0.8125em !important;
      color: #fff !important;
    }

    #backToTop {
      right: 20px !important;
      bottom: 18px !important;
      width: 56px !important;
      height: 56px !important;
      border-radius: 8px !important;
      background: #fff !important;
      color: #1e3540 !important;
      padding: 0 !important;
      font-size: 0.875em !important;
      display: block !important;
    }

    #sideBanner {
      top: 220px !important;
      z-index: 9999 !important;
    }

    #sideBanner.hide {
      transform: translateX(-220px) !important;
    }

    .arrowBar span {
      color: #1c6126 !important;
    }

    @media(max-width:1400px) {
      .bnr-container {
        width: min(1200px, calc(100% - 90px)) !important;
      }

      .bnr-hero h1,
    .bnr-hero .bnr-slide-heading {
        font-size: 3.875em !important;
      }

      .bnr-what-item strong,
      .bnr-connect-grid strong {
/*         font-size: 1.5625em !important; */
      }

      .bnr-stat-card {
        min-height: 190px !important;
        grid-template-columns: 72px 1fr !important;
        padding: 26px 22px !important;
      }

      .bnr-stat-icon,
      .bnr-stat-icon svg {
        width: 64px !important;
        height: 64px !important;
      }

      .bnr-stat-card strong {
        font-size: 2.125em !important;
      }

      .bnr-stat-card p {
        font-size: 1.25em !important;
      }

      .bnr-ranking-card h3 {
        font-size: 1.625em !important;
      }

      .bnr-rank-row strong {
        font-size: 1.3125em !important;
      }

      .bnr-rank-row span {
        font-size: 1em !important;
      }

      .bnr-rank-row em {
        font-size: 2.75em !important;
      }

      .bnr-news-card h3 {
        font-size: 1em !important;
      }
    }

    @media(max-width:900px) {
      .bnr-container {
        width: calc(100% - 32px) !important;
      }

      .bnr-what-grid,
      .bnr-connect-grid {
        grid-template-columns: 1fr !important;
        border-left: 0 !important;
        gap: 18px !important;
      }

      .bnr-what-item,
      .bnr-connect-grid a {
        border: 1px solid rgba(35, 79, 128, .35) !important;
        padding: 20px !important;
      }

      .bnr-impact-main,
      .bnr-dev-cards {
        grid-template-columns: 1fr !important;
      }

      .bnr-stat-panel,
      .bnr-development .dev-grid,
      .bnr-highlight-page,
      .bnr-happening-no-photos .bnr-event-grid {
        grid-template-columns: 1fr !important;
      }

      .what_happening_photo,
      .what_happening_card {
        width: 100% !important;
      }

      .bnr-subscribe {
        flex-direction: column !important;
        gap: 14px !important;
      }

      .bnr-subscribe button {
        margin-left: 0 !important;
      }

      .footer-grid {
        grid-template-columns: 1fr !important;
      }
    }

/* ===== Extracted inline style block 6 | id=bnr-v8-wcag22-fixes | from index2_revised_v12.html ===== */

    /* ======================================================================
   B&R homepage v8 correction pass + WCAG 2.2 usability/accessibility fixes
   - Typography/spacing corrections from supplied screenshots
   - Visible focus, adequate target sizes, contrast-aware button states
====================================================================== */
    :root {
      --bnr-focus: #003f6b;
      --bnr-blue-text: #00677a;
      --bnr-green-text: #1b6025;
      --bnr-charcoal: #34393b;
      --bnr-olive: #4d7040;
      --bnr-portal-bg: #344d48;
      --bnr-portal-bg-hover: #203a34;
    }

    /* WCAG 2.2: clear keyboard focus, not colour-only, sufficient thickness */
    .bnr-home a:focus-visible,
    .bnr-home button:focus-visible,
    .header-top a:focus-visible,
    .header-main a:focus-visible,
    .bnr-subscribe input:focus-visible,
    .bnr-subscribe button:focus-visible,
    .bnr-cta-links a:focus-visible,
    #backToTop:focus-visible,
    #toggle:focus-visible {
      outline: 3px solid var(--bnr-focus) !important;
      outline-offset: 4px !important;
      box-shadow: none !important;
    }

    .bnr-home a,
    .bnr-home button,
    .bnr-subscribe input {
      -webkit-tap-highlight-color: rgba(255, 191, 71, .35);
    }

    .bnr-slider-nav button,
    .bnr-hero-controls button,
    .bnr-subscribe button,
    .bnr-cta-links a,
    .bnr-readmore a,
    .bnr-see-all {
      min-width: 44px !important;
      min-height: 44px !important;
    }

    /* What We Do: item heading weight correction */
    .bnr-what-item strong {
      font-weight: 700 !important;
      color: var(--bnr-charcoal) !important;
      letter-spacing: .015em !important;
    }

    /* Impact: explicit two-colour heading and lighter-but-bold typography */
    .bnr-impact h2 {
      background: none !important;
      color: inherit !important;
      -webkit-text-fill-color: initial !important;
    }

    .bnr-impact h2 .impact-blue {
/*       color: var(--bnr-blue-text) !important; */
	  color: var(--bro-navy) !important;
    }

    .bnr-impact h2 .impact-green {
/*       color: var(--bnr-green-text) !important; */
	  color: var(--bro-navy) !important;
    }

    .bnr-impact-main {
      align-items: start !important;
    }

    .bnr-stat-viewport {
      height: 506px !important;
      overflow: hidden !important;
    }

    .bnr-stat-panel {
      height: 506px !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: repeat(2, 1fr) !important;
      gap: 24px !important;
    }

    .bnr-stat-card {
      min-height: 0 !important;
      height: 100% !important;
      align-content: center !important;
    }

    .bnr-stat-card strong,
    .bnr-stat-card p,
    .bnr-ranking-card h3,
    .bnr-rank-row strong,
    .bnr-rank-row span,
    .bnr-rank-row em {
      font-weight: 700 !important;
    }

    .bnr-stat-card strong {
      font-size: 2.875em !important;
    }

    .bnr-stat-card p {
      font-size: 1.3em !important;
      line-height: 1.18 !important;
    }

    .bnr-stat-panel .bnr-stat-card:nth-child(1) p::first-line,
    .bnr-stat-panel .bnr-stat-card:nth-child(2) p::first-line,
    .bnr-stat-panel .bnr-stat-card:nth-child(3) p::first-line,
    .bnr-stat-panel .bnr-stat-card:nth-child(4) p::first-line {
      line-height: 1.18 !important;
    }

3    .bnr-ranking-card {
      min-height: 478px !important;
    }

    .bnr-ranking-card h3 {
      font-weight: 800 !important;
    }

    .bnr-rank-row em {
      font-weight: 800 !important;
    }

    /* Development Areas: upper labels normal grey; active/hover white on green */
    .bnr-development .dev-item {
      color: var(--bnr-charcoal) !important;
    }

    .bnr-development .dev-item svg,
    .bnr-development .dev-item svg * {
      color: var(--bnr-green-text) !important;
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    .bnr-development .dev-item span {
      color: var(--bnr-charcoal) !important;
      font-weight: 700 !important;
    }

    .bnr-development .dev-item.featured,
    .bnr-development .dev-item:hover,
    .bnr-development .dev-item:focus-visible {
      background: var(--bnr-green-text) !important;
      color: #fff !important;
      border-color: var(--bnr-green-text) !important;
    }

    .bnr-development .dev-item.featured span,
    .bnr-development .dev-item:hover span,
    .bnr-development .dev-item:focus-visible span,
    .bnr-development .dev-item.featured svg,
    .bnr-development .dev-item:hover svg,
    .bnr-development .dev-item:focus-visible svg,
    .bnr-development .dev-item.featured svg *,
    .bnr-development .dev-item:hover svg *,
    .bnr-development .dev-item:focus-visible svg * {
      color: #fff !important;
      fill: currentColor !important;
      stroke: currentColor !important;
    }

    .bnr-dev-cards article {
      position: relative !important;
      border-top: 0 !important;
      overflow: hidden !important;
    }
    .bnr-dev-cards article:hover {
	  transform: translateY(-6px);
	  transition: transform .25s ease;
    }
    .bnr-dev-cards article::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
	  background: linear-gradient(90deg, var(--bro-green), var(--bro-teal));
      border-radius: 9px 9px 0 0;
    }

    .bnr-dev-cards h3 {
      color: var(--bnr-olive) !important;
      font-weight: 700 !important;
      font-size: 1.75em !important;
      line-height: 1.18 !important;
    }

    /* Highlights: keep category labels visible above images, never behind photos */
    .bnr-highlight-viewport,
    .bnr-highlight-track,
    .bnr-highlight-slider {
      overflow: visible !important;
    }

    .bnr-news-card {
      overflow: visible !important;
      background: #fff !important;
    }

    .bnr-news-card a {
      overflow: visible !important;
      position: relative !important;
    }

    .bnr-news-card a>span {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      z-index: 5 !important;
      align-self: flex-start !important;
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      background: #000 !important;
      color: #fff !important;
      margin: 0 !important;
      transform: none !important;
    }

    .bnr-news-card img {
      position: relative !important;
      z-index: 1 !important;
    }

    .bnr-news-card h3 {
      position: relative !important;
      z-index: 1 !important;
    }

    /* What's Happening: visible READ MORE shortcut matching Highlights */
    .bnr-happening .bnr-heading-row {
      position: relative !important;
    }

    .bnr-happening .bnr-see-all {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: absolute !important;
      right: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      min-width: 162px !important;
      height: 52px !important;
      padding: 0 18px !important;
      border: 3px solid #c72691 !important;
      background: #fff !important;
      color: #000 !important;
      font-size: 1em !important;
      line-height: 1 !important;
      font-weight: 800 !important;
      text-decoration: none !important;
    }

    .bnr-happening .bnr-see-all:hover {
      background: #c72691 !important;
      color: #fff !important;
    }

    /* CTA: grey portal button, diagonal arrow, hover state and contrast-safe text */
    .bnr-cta-links a:nth-child(2) {
      background: var(--bnr-portal-bg) !important;
      color: #fff !important;
      border: 2px solid rgba(255, 255, 255, .88) !important;
    }

    .bnr-cta-links a:nth-child(2):hover {
      background: var(--bnr-portal-bg-hover) !important;
      color: #fff !important;
      border-color: #fff !important;
      transform: translateY(-1px);
    }

    .bnr-cta-links a:first-child:hover {
      background: #f0f4f2 !important;
      color: #1f342f !important;
      border-color: #fff !important;
      transform: translateY(-1px);
    }

    .bnr-diagonal-arrow {
      display: inline-block;
      margin-left: .35em;
      font-size: .92em;
      line-height: 1;
      transform: translateY(-1px);
    }

    .bnr-subscribe input {
      color: #111 !important;
    }

    .bnr-subscribe input::placeholder {
      color: #6b6b6b !important;
      opacity: 1 !important;
    }

    @media(max-width:1400px) {

      .bnr-stat-viewport,
      .bnr-stat-panel,
      .bnr-ranking-card {
        height: auto !important;
        min-height: auto !important;
      }

      .bnr-stat-card {
        min-height: 190px !important;
      }

      .bnr-happening .bnr-see-all {
        position: static !important;
        transform: none !important;
        margin-top: 20px !important;
      }
    }

    @media(max-width:900px) {

      .bnr-stat-viewport,
      .bnr-stat-panel {
        height: auto !important;
      }

      .bnr-stat-panel {
        grid-template-rows: auto !important;
      }

      .bnr-highlight-page {
        gap: 18px !important;
      }

      .bnr-news-card a>span {
        position: relative !important;
        top: auto !important;
      }

      .bnr-cta-links {
        flex-direction: column !important;
        align-items: center !important;
      }

      .bnr-cta-links a {
        width: min(100%, 320px) !important;
      }
    }

/* ===== Extracted inline style block 7 | id=bnr-v9-wcag-layout-fix | from index2_revised_v12.html ===== */

    /* ===== v9 correction patch: restore original hero slider controls + fix Highlights peek layout ===== */
    /* WCAG 2.2 visible focus baseline */
    .bnr-home a:focus-visible,
    .bnr-home button:focus-visible,
    .header-top a:focus-visible,
    .header-main a:focus-visible,
    #backToTop:focus-visible,
    #toggle:focus-visible {
      outline: 3px solid #003f6b !important;
      outline-offset: 3px !important;
      box-shadow: none !important;
    }

    /* Hero: keep 3-banner slider from index2.html and restore visible controls */
    .bnr-hero,
    .bnr-hero-track,
    .bnr-hero-content {
      min-height: 820px !important;
    }

    .bnr-hero-slide {
      background-size: cover !important;
      background-position: center center !important;
    }

    .bnr-hero-overlay {
      background: linear-gradient(90deg, rgba(0, 67, 72, .90) 0%, rgba(0, 116, 128, .72) 42%, rgba(0, 67, 72, .08) 78%) !important;
    }

    .bnr-hero-content {
      justify-content: center !important;
      align-items: flex-start !important;
      padding-bottom: 42px !important;
    }

    .bnr-tags {
      gap: 14px !important;
      margin-bottom: 28px !important;
    }

    .bnr-tags span {
	height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid rgba(189, 255, 197, .78) !important;
    background: rgba(35, 116, 54, .76) !important;
    color: #fff !important;
    border-radius: 3px !important;
    padding: 14px 14px !important;
    font-size: 1.0625em !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    }

    .bnr-hero h1,
    .bnr-hero .bnr-slide-heading {
    max-width: 1230px !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 65px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: -.04em !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .28) !important;
    }

    .bnr-hero-actions {
      display: flex !important;
      gap: 22px !important;
      flex-wrap: wrap !important;
      margin-top: 34px !important;
      align-items: center !important;
    }

    .bnr-hero-actions:before {
      content: "▶" !important;
      color: #fff !important;
      font-size: 0.75em !important;
	  display:none
    }

    .bnr-hero-actions a {
      min-height: 44px !important;
      height: auto !important;
      padding: 8px 18px !important;
      border-radius: 4px !important;
      background: #fff !important;
      color: #24454b !important;
      font-size: 0.875em !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
    }

    .bnr-hero-actions a:hover,
    .bnr-hero-actions a:focus-visible {
      background: #e9fbf3 !important;
      color: #102e32 !important;
    }

    .bnr-hero-controls {
      position: absolute !important;
      left: 50% !important;
      bottom: 12px !important;
      transform: translateX(-50%) !important;
      z-index: 4 !important;
      display: flex !important;
      align-items: center !important;
      gap: 18px !important;
      color: #fff !important;
    }

    .bnr-hero-controls button {
      min-width: 44px !important;
      min-height: 44px !important;
      border: 0 !important;
      background: transparent !important;
      color: #fff !important;
      font-size: 1.25em !important;
      line-height: 1 !important;
      cursor: pointer !important;
      padding: 6px !important;
    }

    .bnr-hero-lines {
      display: flex !important;
      gap: 12px !important;
      align-items: center !important;
    }

    .bnr-hero-lines span {
      display: block !important;
      width: 42px !important;
      height: 3px !important;
      background: rgba(255, 255, 255, .62) !important;
    }

    .bnr-hero-lines span.is-active {
      background: #ed8d35 !important;
    }

    /* Highlights: label area must show the section background, not a white strip */
    .bnr-highlights {
      overflow: hidden !important;
/*       background: linear-gradient(180deg, #f3fcff 0%, #96f6f6 100%) !important; */
	  background-color: #e3f2f2;
    }

    .bnr-highlights .bnr-container {
      overflow: visible !important;
    }

    .bnr-highlight-slider {
      background: transparent !important;
      border: 0 !important;
      overflow: visible !important;
      margin: 0 !important;
    }

    .bnr-highlight-viewport {
      overflow: hidden !important;
      width: 100% !important;
      padding-top: 40px !important;
      /* space for black category labels */
      margin-top: -40px !important;
    }

    .bnr-highlight-track {
      display: flex !important;
      overflow: visible !important;
      transition: transform .45s ease !important;
      will-change: transform !important;
    }

    .bnr-highlight-page {
      flex: 0 0 calc(100% - 120px) !important;
      /* show a small part of next page on the right */
      min-width: calc(100% - 120px) !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      background: transparent !important;
      border: 0 !important;
      align-items: stretch !important;
    }

    .bnr-news-card {
      position: relative !important;
      min-height: 357px !important;
      background: transparent !important;
      border-right: 1px solid #d8e2e1 !important;
      overflow: visible !important;
    }

    .bnr-news-card a {
      position: relative !important;
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      background: transparent !important;
      color: inherit !important;
    }

    .bnr-news-card a>span {
      position: absolute !important;
      top: -38px !important;
      left: 0 !important;
      z-index: 5 !important;
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      width: auto !important;
      max-width: calc(100% - 12px) !important;
      background: #000 !important;
      color: #fff !important;
      padding: 0 16px !important;
      font-size: 0.9375em !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    .bnr-news-card img {
      width: 100% !important;
      height: 194px !important;
      display: block !important;
      object-fit: cover !important;
      background: transparent !important;
    }

    .bnr-news-card h3 {
      flex: 1 1 auto !important;
      background: #fff !important;
      padding: 28px 20px 18px !important;
      margin: 0 !important;
      font-size: 1.375em !important;
      line-height: 1.12 !important;
      font-weight: 800 !important;
      letter-spacing: -.025em !important;
      color: #34393b !important;
    }

    .bnr-highlight-footer {
      width: calc(100% - 120px) !important;
      background: #fff !important;
      border: 0 !important;
      margin-top: 0 !important;
      padding: 35px 24px 24px !important;
      display: grid !important;
      grid-template-columns: 1fr auto 1fr !important;
      align-items: center !important;
    }

    .bnr-highlight-footer .bnr-slider-nav button {
      min-width: 44px !important;
      min-height: 44px !important;
    }

    .bnr-highlight-footer .bnr-readmore a,
    .bnr-happening .bnr-readmore a {
      min-height: 44px !important;
    }

    .bnr-highlight-footer .bnr-readmore a:hover,
    .bnr-highlight-footer .bnr-readmore a:focus-visible,
    .bnr-happening .bnr-readmore a:hover,
    .bnr-happening .bnr-readmore a:focus-visible {
      background: #c72691 !important;
      color: #fff !important;
	  transform: translateY(-6px);
	  transition: transform .25s ease;
    }

    /* CTA button: grey background + hover state + diagonal arrow */
    .bnr-cta-links a:nth-child(2) {
      background: #4f625e !important;
      color: #fff !important;
      border: 2px solid rgba(255, 255, 255, .92) !important;
    }

    .bnr-cta-links a:nth-child(2)::after {
      content: "↗" !important;
      display: inline-block !important;
      margin-left: .45em !important;
      transform: translateY(-1px) !important;
    }

    .bnr-cta-links a:nth-child(2):hover,
    .bnr-cta-links a:nth-child(2):focus-visible {
      background: #fff !important;
      color: #1b4f2a !important;
      border-color: #fff !important;
    }

    /* Responsive */
    @media (max-width: 1200px) {

      .bnr-highlight-page,
      .bnr-highlight-footer {
        width: auto !important;
      }

      .bnr-highlight-page {
        flex-basis: calc(100% - 70px) !important;
        min-width: calc(100% - 70px) !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      .bnr-news-card:nth-child(n+4) {
        display: none !important;
      }

      .bnr-highlight-footer {
        width: calc(100% - 70px) !important;
      }
    }

    @media (max-width: 768px) {

      .bnr-hero,
      .bnr-hero-track,
      .bnr-hero-content {
        min-height: 580px !important;
      }

      .bnr-hero-content {
        justify-content: flex-end !important;
        padding-bottom: 96px !important;
      }

      .bnr-hero-actions a {
        width: 100% !important;
        justify-content: flex-start !important;
      }

      .bnr-hero-actions:before {
        display: none !important;
      }

      .bnr-hero-controls {
        bottom: 24px !important;
        width: 100% !important;
        justify-content: center !important;
      }

      .bnr-highlight-page {
        flex-basis: 100% !important;
        min-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 54px !important;
      }

      .bnr-highlight-footer {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        text-align: center !important;
      }

      .bnr-highlight-footer .bnr-slider-nav,
      .bnr-highlight-footer .bnr-readmore {
        grid-column: auto !important;
        text-align: center !important;
      }

      .bnr-news-card:nth-child(n+2) {
        display: none !important;
      }
    }

/* ===== Extracted inline style block 8 | id=bnr-v10-corrections | from index2_revised_v12.html ===== */

    /* ===== Patch v10: user review corrections ===== */
    /* Hero: keep original 3-banner slider controls visible and usable */
    .bnr-hero-controls {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
	  margin-top: 10px
    }

    /* Highlights: labels float above images; the area to the right of each black label shows section background, not white. Keep a preview of page 2 on the right. */
    .bnr-highlights,
    .bnr-highlights .bnr-container,
    .bnr-highlight-slider,
    .bnr-highlight-track {
      overflow: visible !important;
    }

    .bnr-highlight-viewport {
      overflow: hidden !important;
      width: 100% !important;
      padding-top: 40px !important;
      margin-top: -40px !important;
    }

    .bnr-highlight-page {
      flex: 0 0 calc(100% - 120px) !important;
      min-width: calc(100% - 120px) !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      background: transparent !important;
      border: 0 !important;
      align-items: stretch !important;
    }

    .bnr-news-card,
    .bnr-news-card a {
      background: transparent !important;
      overflow: visible !important;
    }

    .bnr-news-card a>span {
      position: absolute !important;
      top: -38px !important;
      left: 0 !important;
      z-index: 10 !important;
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      width: auto !important;
      background: #000 !important;
      color: #fff !important;
      padding: 0 16px !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }

    .bnr-news-card img,
    .bnr-news-card h3 {
      background: #fff !important;
    }

    .bnr-highlight-footer {
      width: calc(100% - 120px) !important;
      background: #fff !important;
    }

    /* What's Happening: top image block and bottom colour card align on the right edge. */
    .bnr-happening-no-photos .bnr-event-grid article {
      /*width: 392px !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;*/
    }

    .bnr-happening-no-photos .what_happening_photo,
    .bnr-happening-no-photos .what_happening_card {
      /*width: 100% !important;
      max-width: 392px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box !important;*/
    }

    .bnr-happening-no-photos .what_happening_photo {
      display: none !important;
      height: 224px !important;
      padding: 0 !important;
      overflow: hidden !important;
      width: 100%;
    }

    .bnr-happening-no-photos .what_happening_photo img {
      display: none !important;
      width: 96.5% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    .bnr-happening-no-photos .what_happening_card {
      display: block !important;
      height: 240px !important;
      background-size: 100% 100% !important;
      background-repeat: no-repeat !important;
    }

    /* CTA: only one diagonal arrow, and the arrow follows the same font size as the button text. */
    .bnr-cta-links a:nth-child(2)::after {
      content: none !important;
      display: none !important;
    }

    .bnr-diagonal-arrow {
      font-size: 1em !important;
      line-height: 1 !important;
      font-weight: inherit !important;
      margin-left: .35em !important;
      transform: none !important;
      vertical-align: baseline !important;
    }

    @media(max-width:1200px) {

      .bnr-highlight-page,
      .bnr-highlight-footer {
        width: auto !important;
        flex-basis: calc(100% - 70px) !important;
        min-width: calc(100% - 70px) !important;
      }

      .bnr-highlight-footer {
        width: calc(100% - 70px) !important;
      }
    }

    @media(max-width:900px) {

      .bnr-highlight-page,
      .bnr-highlight-footer {
        flex-basis: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
      }

      .bnr-happening-no-photos .bnr-event-grid article {
        width: 100% !important;
      }

      .bnr-happening-no-photos .what_happening_photo,
      .bnr-happening-no-photos .what_happening_card {
        max-width: 100% !important;
      }
    }

/* ===== Extracted inline style block 9 | id=bnr-v11-final-corrections | from index2_revised_v12.html ===== */

    /* ===== Patch v11: final user review corrections ===== */
    /* Impact: right ranking #1 should be bold but not ultra-heavy */
    .bnr-impact .bnr-rank-row em {
      font-weight: 600 !important;
      letter-spacing: -0.02em !important;
    }

    /* Highlights: remove wrong right-side clipped preview; show exactly 5 full cards in the main group */
    .bnr-highlights,
    .bnr-highlights .bnr-container,
    .bnr-highlight-slider,
    .bnr-highlight-track {
      overflow: visible !important;
    }

    .bnr-highlight-viewport {
      overflow: hidden !important;
      width: 100% !important;
      padding-top: 40px !important;
      margin-top: -40px !important;
    }

    .bnr-highlight-page {
      flex: 0 0 100% !important;
      min-width: 100% !important;
      width: 100% !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      background: transparent !important;
      border: 0 !important;
      align-items: stretch !important;
    }
	.bnr-news-card:hover {
	  transform: translateY(-6px);
	  transition: transform .25s ease;
    }

    .bnr-news-card {
      min-height: 257px !important;
      background: transparent !important;
      overflow: visible !important;
    }

    .bnr-news-card a {
      background: transparent !important;
      overflow: visible !important;
    }

    .bnr-news-card a>span {
      position: absolute !important;
      top: -38px !important;
      left: 0 !important;
      z-index: 20 !important;
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      width: auto !important;
      max-width: calc(100% - 12px) !important;
      background: #000 !important;
      color: #fff !important;
      padding: 0 16px !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }

	  .bnr-news-card a>span.access.externalText {
      display: none !important;
    }

    .bnr-news-card img {
      background: #fff !important;
    }

    .bnr-news-card h3 {
      background: #fff !important;
    }

    .bnr-highlight-footer {
      width: 100% !important;
      background: #fff !important;
      border: 0 !important;
      margin-top: 0 !important;
    }

    /* What's Happening: match provided reference layout */
    .bnr-happening {
      background: linear-gradient(180deg, #e6fbef 0%, #b7efcf 100%) !important;
      padding: 47px 0 72px !important;
    }

    .bnr-happening .bnr-container {
      position: relative !important;
    }

    .bnr-happening .bnr-heading-row {
      position: static !important;
      display: block !important;
      text-align: center !important;
      margin: 0 0 35px !important;
    }

    .bnr-happening h2 {
      font-size: 3.375em !important;
      line-height: 1.05 !important;
      margin: 0 !important;
      text-align: center !important;
/*       color: #006d80 !important; */
	  color: var(--bro-navy) !important;
      font-weight: 900 !important;
    }

    .bnr-happening h2 span {
/*       color: #2b7b68 !important; */
	  color: var(--bro-navy) !important;
    }

    .bnr-happening .bnr-see-all {
      display: inline-flex !important;
      position: absolute !important;
      right: 20px !important;
      top: 380px !important;
      transform: none !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 164px !important;
      min-height: 52px !important;
      padding: 0 18px !important;
      border: 3px solid #c72691 !important;
      background: #fff !important;
      color: #000 !important;
      font-size: 1em !important;
      line-height: 1 !important;
      font-weight: 900 !important;
      text-decoration: none !important;
      z-index: 3 !important;
    }

    .bnr-happening .bnr-see-all:hover,
    .bnr-happening .bnr-see-all:focus-visible {
      background: #c72691 !important;
      color: #fff !important;
	  transform: translateY(-6px)!important;
	  transition: transform .25s ease!important;
    }

    /*
.bnr-happening-no-photos .bnr-event-grid{
  display:grid !important;
  grid-template-columns:repeat(2,392px) !important;
  gap:50px !important;
  justify-content:center !important;
  align-items:start !important;
  max-width:none !important;
  margin:0 auto !important;
}
.bnr-happening-no-photos .bnr-event-grid article{
  width:392px !important;
  max-width:392px !important;
  min-height:auto !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
.bnr-happening-no-photos .what_happening_photo,
.bnr-happening-no-photos .what_happening_card{
  width:392px !important;
  max-width:392px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.bnr-happening-no-photos .what_happening_photo{
  height:224px !important;
  padding:0 !important;
  overflow:hidden !important;
  display:block !important;
}
.bnr-happening-no-photos .what_happening_photo img{
  display:block !important;
  width:378px !important;
  height:224px !important;
  object-fit:cover !important;
}*/
    .bnr-happening-no-photos .what_happening_card {
      width: 100%;
      height: 240px !important;
      padding: 33px 28px !important;
      background-image: url("../images/what_happening/what_happening_card.png") !important;
      background-size: 100% 100% !important;
      background-repeat: no-repeat !important;

    }

    .bnr-happening-no-photos .what_happening_card time {
      display: block !important;
      margin: 0 0 20px !important;
      color: #98bed2 !important;
      font-size: 1em !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
    }

    .bnr-happening-no-photos .what_happening_card h3 {
	max-width: 82% !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.125em !important;
    line-height: 1.32 !important;
    font-weight: 500 !important;
    }

    .bnr-happening-no-photos .what_happening_card p {
      margin: 6px 0 0 !important;
      color: #fff !important;
      font-size: 1.25em !important;
    }

    /* CTA: ensure the diagonal arrow is exactly the same size as the text */
    .bnr-cta-links a:nth-child(2)::after {
      content: none !important;
      display: none !important;
    }

    .bnr-diagonal-arrow {
      font-size: 1em !important;
      line-height: 1 !important;
      font-weight: inherit !important;
      margin-left: .35em !important;
      vertical-align: baseline !important;
      transform: none !important;
    }

    @media(max-width:1400px) {
      .bnr-happening .bnr-see-all {
        right: 16px !important;
      }
    }

    @media(max-width:1200px) {
      .bnr-highlight-page {
        flex-basis: 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      }

      .bnr-highlight-footer {
        width: 100% !important;
      }

      .bnr-news-card:nth-child(n+4) {
        display: none !important;
      }

      .bnr-happening .bnr-see-all {
        position: static !important;
        margin: 28px auto 0 !important;
        transform: none !important;
      }
    }

    @media(max-width:900px) {
      .bnr-highlight-page {
        grid-template-columns: 1fr !important;
        gap: 54px !important;
      }

      .bnr-news-card:nth-child(n+2) {
        display: none !important;
      }

      .bnr-happening-no-photos .bnr-event-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
      }

      .bnr-happening-no-photos .bnr-event-grid article,
      .bnr-happening-no-photos .what_happening_photo,
      .bnr-happening-no-photos .what_happening_card {
        width: 100% !important;
        max-width: 100% !important;
      }
    }

/* ===== Extracted inline style block 10 | id=bnr-v12-arrow-alignment-fix | from index2_revised_v12.html ===== */

    /* v12: CTA portal diagonal arrow baseline fix — keep arrow same size as text and align vertically with label */
    .bnr-cta-links a:nth-child(2) {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: .38em !important;
      line-height: 1 !important;
    }

    .bnr-cta-links a:nth-child(2)::after {
      content: none !important;
      display: none !important;
    }

    .bnr-cta-links a:nth-child(2) .bnr-diagonal-arrow {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
      font-size: 1em !important;
      line-height: 1 !important;
      font-weight: inherit !important;
      margin-left: 0 !important;
      position: relative !important;
      top: .44em !important;
      transform: none !important;
      vertical-align: middle !important;
    }

/* Impact at a Glance: restored text reveal and count animation hooks (safe add-on, no layout rewrite) */
.bnr-ranking-card h3,
.bnr-ranking-card .bnr-rank-row {
  opacity: 0;
  transform: translateY(1em);
}
.bnr-ranking-card.is-impact-revealed h3,
.bnr-ranking-card.is-impact-revealed .bnr-rank-row {
  animation: bnrImpactTextReveal 0.72s ease forwards;
}
.bnr-ranking-card.is-impact-revealed .bnr-rank-row:nth-of-type(1) { animation-delay: 0.12s; }
.bnr-ranking-card.is-impact-revealed .bnr-rank-row:nth-of-type(2) { animation-delay: 0.24s; }
.bnr-ranking-card.is-impact-revealed .bnr-rank-row:nth-of-type(3) { animation-delay: 0.36s; }
@keyframes bnrImpactTextReveal {
  from { opacity: 0; transform: translateY(1em); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Responsive width rationalisation patch | www9 =====
   Fixes intermediate/tablet widths where desktop grids were still forced
   into too narrow columns, causing cropped text/cards in Impact,
   Development Areas, Highlights, What's Happening, Connecting and What We Do.
====================================================================== */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.bnr-home,
.bnr-home * {
  box-sizing: border-box;
}

.bnr-container {
  max-width: 1680px !important;
  width: min(1680px, calc(100% - 96px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.bnr-what-grid,
.bnr-connect-grid,
.bnr-development .dev-grid,
.bnr-impact-main,
.bnr-stat-panel,
.bnr-dev-cards,
.bnr-happening-no-photos .bnr-event-grid {
  min-width: 0 !important;
}

.bnr-what-item,
.bnr-connect-grid a,
.bnr-development .dev-item,
.bnr-stat-card,
.bnr-ranking-card,
.bnr-dev-cards article,
.bnr-news-card,
.bnr-happening-no-photos .bnr-event-grid article {
  min-width: 0 !important;
}

.bnr-what-item strong,
.bnr-connect-grid strong,
.bnr-development .dev-item span,
.bnr-stat-card p,
.bnr-ranking-card h3,
.bnr-rank-row strong,
.bnr-rank-row span,
.bnr-news-card h3,
.bnr-happening-no-photos .what_happening_card h3 {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 1280px) {
  .bnr-container {
    width: calc(100% - 64px) !important;
  }

  .bnr-what-grid,
  .bnr-connect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-left: 0 !important;
    gap: 22px !important;
  }

  .bnr-what-item,
  .bnr-connect-grid a {
    min-height: 250px !important;
    border: 1px solid rgba(35, 79, 128, .30) !important;
    padding: 26px 28px !important;
  }

/*   .bnr-what-item:last-child,
  .bnr-connect-grid a:last-child {
    grid-column: 1 / -1 !important;
  } */

  .bnr-impact-main {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .bnr-stat-slider,
  .bnr-ranking-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bnr-stat-viewport,
  .bnr-stat-panel,
  .bnr-ranking-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .bnr-stat-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  .bnr-stat-card {
    min-height: 190px !important;
    height: auto !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    padding: 24px !important;
    column-gap: 18px !important;
    row-gap: 18px !important;
  }

  .bnr-stat-icon,
  .bnr-stat-icon svg {
    width: 70px !important;
    height: 70px !important;
    max-width: 70px !important;
    max-height: 70px !important;
  }

  .bnr-stat-card strong {
    font-size: clamp(1.95em, 4.2vw, 2.65em) !important;
    white-space: nowrap !important;
  }

  .bnr-stat-card p {
    font-size: clamp(1.18em, 2.6vw, 1.45em) !important;
  }

  .bnr-ranking-card {
    padding: 36px 38px 30px !important;
  }

  .bnr-ranking-card h3 {
    font-size: clamp(1.75em, 4vw, 2.25em) !important;
  }

  .bnr-rank-row {
    gap: 18px !important;
  }

  .bnr-rank-row em {
    font-size: clamp(2.6em, 7vw, 3.8em) !important;
  }

  .bnr-development .dev-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .bnr-development .dev-item {
    min-height: 108px !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    padding: 18px 22px !important;
  }

  .bnr-development .dev-item svg {
    width: 62px !important;
    height: 62px !important;
  }

  .bnr-dev-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bnr-highlight-page {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .bnr-news-card:nth-child(n+4) {
    display: none !important;
  }

  .bnr-happening-no-photos .bnr-event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  .bnr-happening .bnr-see-all {
    position: static !important;
    transform: none !important;
    margin: 26px auto 0 !important;
  }
}

/* Accessibility: keep What's Happening event-card text readable on the dark green artwork. */
body.bnr-index-page .bnr-happening-no-photos .what_happening_card time,
body.tc-home-page .bnr-happening-no-photos .what_happening_card time,
body.bnr-index-page .bnr-happening-no-photos .what_happening_card h3,
body.tc-home-page .bnr-happening-no-photos .what_happening_card h3,
body.bnr-index-page .bnr-happening-no-photos .what_happening_card p,
body.tc-home-page .bnr-happening-no-photos .what_happening_card p {
  color: #fff !important;
}

@media (max-width: 900px) {
  .bnr-container {
    width: calc(100% - 40px) !important;
  }

  .bnr-section h2,
  .bnr-what h2,
  .bnr-impact h2,
  .bnr-development h2,
  .bnr-highlights h2,
  .bnr-happening h2,
  .bnr-connect h2 {
    font-size: clamp(2.35em, 8vw, 3.2em) !important;
    line-height: 1.08 !important;
  }

  .bnr-what-grid,
  .bnr-connect-grid,
  .bnr-development .dev-grid,
  .bnr-dev-cards,
  .bnr-happening-no-photos .bnr-event-grid {
    grid-template-columns: 1fr !important;
  }

  .bnr-what-item:last-child,
  .bnr-connect-grid a:last-child {
    grid-column: auto !important;
  }

  .bnr-what-item,
  .bnr-connect-grid a {
    min-height: 230px !important;
  }

  .bnr-what-item strong,
  .bnr-connect-grid strong {
    font-size: 1.5em !important;
  }

  .bnr-development .dev-item {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    min-height: 102px !important;
  }

  .bnr-development .dev-item span {
    font-size: 1em !important;
    line-height: 1.18 !important;
  }

  .bnr-highlight-page {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .bnr-news-card:nth-child(n+2) {
    display: none !important;
  }

  .bnr-news-card {
    min-height: auto !important;
  }

  .bnr-news-card img {
    height: 210px !important;
    object-fit: cover !important;
  }

  .bnr-news-card h3 {
    min-height: 112px !important;
  }

  .bnr-happening-no-photos .what_happening_card {
    height: auto !important;
    min-height: 210px !important;
    background-size: cover !important;
  }
}

@media (max-width: 640px) {
  .bnr-container {
    width: calc(100% - 28px) !important;
  }

  .bnr-hero,
  .bnr-hero-track,
  .bnr-hero-content {
    min-height: 620px !important;
  }

  .bnr-hero h1,
    .bnr-hero .bnr-slide-heading {
    font-size: clamp(2.1em, 11vw, 3.2em) !important;
  }

  .bnr-tags span {
    font-size: .82em !important;
    padding: 10px 10px !important;
  }

  .bnr-stat-panel {
    grid-template-columns: 1fr !important;
  }

  .bnr-stat-card {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    min-height: 170px !important;
    padding: 22px 20px !important;
  }

  .bnr-stat-card strong {
    font-size: 2em !important;
  }

  .bnr-stat-card p {
    font-size: 1.18em !important;
  }

  .bnr-ranking-card {
    padding: 28px 22px 24px !important;
  }

  .bnr-rank-row {
    grid-template-columns: 1fr auto !important;
    padding: 14px 0 !important;
  }

  .bnr-rank-row strong {
    font-size: 1.2em !important;
  }

  .bnr-rank-row span {
    font-size: .95em !important;
  }

  .bnr-rank-row em {
    font-size: 2.4em !important;
  }

  .bnr-dev-cards article {
    min-height: 0 !important;
  }

  .bnr-subscribe {
    width: 100% !important;
  }

  .bnr-subscribe input,
  .bnr-subscribe button,
  .bnr-cta-links a {
    width: 100% !important;
  }
}

/* =========================================================
   Final responsive correction: Highlights must show every
   item within the active page instead of hiding later cards.
   ========================================================= */
@media (max-width: 1280px) {
  .bnr-highlights .bnr-highlight-page {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    align-items: stretch !important;
  }

  .bnr-highlights .bnr-news-card,
  .bnr-highlights .bnr-news-card:nth-child(n),
  .bnr-highlights .bnr-news-card:nth-child(n+2),
  .bnr-highlights .bnr-news-card:nth-child(n+4) {
    display: block !important;
  }

  .bnr-highlights .bnr-news-card a {
    height: 100% !important;
  }
}

@media (max-width: 900px) {
  .bnr-highlights .bnr-highlight-page {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .bnr-highlights .bnr-news-card,
  .bnr-highlights .bnr-news-card:nth-child(n),
  .bnr-highlights .bnr-news-card:nth-child(n+2),
  .bnr-highlights .bnr-news-card:nth-child(n+4) {
    display: block !important;
  }

  .bnr-highlights .bnr-news-card img {
    height: clamp(180px, 42vw, 260px) !important;
  }

  .bnr-highlights .bnr-news-card h3 {
    min-height: 0 !important;
    padding-bottom: 28px !important;
  }
}

@media (max-width: 640px) {
  .bnr-highlights .bnr-highlight-footer {
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
  }
}

/* ===== 2026-06-01 restore index spacing/footer alignment patch ===== */
body.bnr-index-page .mainArea.mainAreaMC.content_bg.full {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.bnr-index-page .mainbanner {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.bnr-index-page .bodyArea {
  padding-top: 0 !important;
}

body.bnr-index-page .bnr-home {
  margin-top: 0 !important;
}

/* Footer menu must use the same wide centred content band, but the columns start from the left. */
.footerArea1 .container {
  width: min(1720px, calc(100% - 84px)) !important;
  max-width: 1720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.footerArea1 .footerMenu .footerMenuParent,
.footerArea .footerMenu .footerMenuParent {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 48px !important;
}

.footerArea1 .footerMenu .footerMenuParent > div,
.footerArea .footerMenu .footerMenuParent > div {
  min-width: 0 !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: 1 1 0 !important;
}

.footerArea1 .footerMenu .footerMenuParent > div:first-child,
.footerArea .footerMenu .footerMenuParent > div:first-child {
  flex: 1.75 1 0 !important;
}

.footerArea1 .footerMenu .footerMenuParent > div:nth-child(3),
.footerArea .footerMenu .footerMenuParent > div:nth-child(3) {
  flex: 1.55 1 0 !important;
}

.footerArea1 .footerMenu .footerMenuParent > div:last-child,
.footerArea .footerMenu .footerMenuParent > div:last-child {
  flex: .55 1 0 !important;
}

.footerArea1 .footerMenuArea,
.footerArea1.active_footerMenu .footerMenuArea {
  width: 100% !important;
}

@media (max-width: 1024px) {
  .footerArea1 .container {
    width: min(100% - 40px, 1720px) !important;
  }
  .footerArea1 .footerMenu .footerMenuParent,
  .footerArea .footerMenu .footerMenuParent {
    gap: 28px !important;
  }
  .footerArea1 .footerMenu .footerMenuParent > div,
  .footerArea .footerMenu .footerMenuParent > div {
    flex: 1 1 45% !important;
  }
}

@media (max-width: 640px) {
  .footerArea1 .container {
    width: calc(100% - 32px) !important;
  }
  .footerArea1 .footerMenu .footerMenuParent > div,
  .footerArea .footerMenu .footerMenuParent > div {
    flex: 1 1 100% !important;
  }
}

/* =========================================================
   Client screenshots 2026-06-12: front page responsive fixes
   Scope: Connecting to the Belt and Road + Highlights only.
   ========================================================= */

/* Connecting to the Belt and Road: force 2 x 2 layout for tablet and mobile. */
@media (max-width: 1024px) {
  .bnr-connect .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .bnr-connect .bnr-connect-grid a,
  .bnr-connect .bnr-connect-grid a:last-child {
    grid-column: auto !important;
    min-height: clamp(150px, 28vw, 230px) !important;
    padding: 18px 18px 16px !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
  }

  .bnr-connect .bnr-connect-grid strong {
    width: 100% !important;
    font-size: clamp(.92em, 2.6vw, 1.2em) !important;
    line-height: 1.15 !important;
  }

  .bnr-connect .cbr_svg {
    width: clamp(86px, 18vw, 150px) !important;
    height: auto !important;
    max-height: 62% !important;
    margin: 8px auto 0 !important;
  }
}

@media (max-width: 560px) {
  .bnr-connect .bnr-container {
    width: calc(100% - 24px) !important;
  }

  .bnr-connect h2 {
    font-size: clamp(1.55em, 7vw, 2.2em) !important;
    line-height: 1.05 !important;
  }

  .bnr-connect .bnr-connect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .bnr-connect .bnr-connect-grid a,
  .bnr-connect .bnr-connect-grid a:last-child {
    grid-column: auto !important;
    min-height: clamp(132px, 42vw, 178px) !important;
    padding: 12px 10px !important;
  }

  .bnr-connect .bnr-connect-grid strong {
    font-size: .82em !important;
  }

  .bnr-connect .cbr_svg {
    width: clamp(78px, 30vw, 118px) !important;
  }
}

/* Highlights: keep the active card/page centred and prevent image cropping on narrow screens. */
@media (max-width: 900px) {
  .bnr-highlights .bnr-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .bnr-highlights .bnr-highlight-slider,
  .bnr-highlights .bnr-highlight-viewport,
  .bnr-highlights .bnr-highlight-track,
  .bnr-highlights .bnr-highlight-page,
  .bnr-highlights .bnr-highlight-footer {
    max-width: min(420px, calc(100vw - 40px)) !important;
  }

  .bnr-highlights .bnr-highlight-slider,
  .bnr-highlights .bnr-highlight-viewport {
    width: min(420px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .bnr-highlights .bnr-highlight-track {
    align-items: stretch !important;
  }

  .bnr-highlights .bnr-highlight-page {
    flex: 0 0 min(420px, calc(100vw - 40px)) !important;
    min-width: min(420px, calc(100vw - 40px)) !important;
    width: min(420px, calc(100vw - 40px)) !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    gap: 0 !important;
    margin: 0 auto !important;
  }

  .bnr-highlights .bnr-news-card,
  .bnr-highlights .bnr-news-card:nth-child(n),
  .bnr-highlights .bnr-news-card:nth-child(n+2),
  .bnr-highlights .bnr-news-card:nth-child(n+4) {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .bnr-highlights .bnr-news-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #eafbfd !important;
  }

  .bnr-highlights .bnr-news-card a > span {
    top: 0 !important;
    left: 0 !important;
    height: 28px !important;
    padding: 0 10px !important;
    font-size: .72em !important;
    line-height: 1 !important;
    max-width: 82% !important;
    z-index: 6 !important;
  }

  .bnr-highlights .bnr-news-card h3 {
    min-height: 0 !important;
    padding: 12px 14px 14px !important;
    font-size: .95em !important;
    line-height: 1.22 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .bnr-highlights .bnr-highlight-footer {
    width: min(420px, calc(100vw - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 520px) {
  .bnr-highlights .bnr-highlight-slider,
  .bnr-highlights .bnr-highlight-viewport,
  .bnr-highlights .bnr-highlight-track,
  .bnr-highlights .bnr-highlight-page,
  .bnr-highlights .bnr-highlight-footer {
    max-width: calc(100vw - 28px) !important;
  }

  .bnr-highlights .bnr-highlight-slider,
  .bnr-highlights .bnr-highlight-viewport,
  .bnr-highlights .bnr-highlight-page,
  .bnr-highlights .bnr-highlight-footer {
    width: calc(100vw - 28px) !important;
    min-width: calc(100vw - 28px) !important;
  }
}

/* FINAL CLIENT FIX 2026-06-15: What's Happening = 4 cards per page, 2-page horizontal slider, controls match reference. */
.bnr-happening-no-photos .bnr-event-grid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 102px) / 4) !important;
  grid-template-columns: none !important;
  grid-template-rows: 1fr !important;
  gap: 34px !important;
  justify-content: start !important;
  align-items: stretch !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.bnr-happening-no-photos .bnr-event-grid::-webkit-scrollbar {
  display: none !important;
}
.bnr-happening-no-photos .bnr-event-grid article {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.bnr-happening-no-photos .what_happening_card {
  width: 100% !important;
  max-width: none !important;
}
.bnr-happening-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  margin-top: 34px !important;
  position: relative !important;
}
.bnr-happening-controls.home-content-slider-control,
.bnr-happening-controls {

  align-items: center !important;
  justify-content: center !important;
  gap: 30px !important;
  margin: 0 !important;
  margin-top: 20px !important;
  color: #064a31 !important;

}
.bnr-happening-controls button {
  border: 0 !important;
  background: transparent !important;
    color: inherit;
    font: inherit;
  font-size: 1.5em !important;
  line-height: 1 !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 6px !important;
  cursor: pointer !important;

}
.bnr-happening-controls button:hover,
.bnr-happening-controls button:focus-visible {
  color: #0d6b49 !important;
  transform: none !important;
}
.bnr-happening-controls .bnr-slider-lines {
  display: inline-flex !important;
  align-items: center !important;
  gap: 26px !important;
}
.bnr-happening-controls .bnr-slider-lines span {
  display: block !important;
    width: 50px !important;
    height: 3px !important;
    background: rgba(23, 75, 52, .38) !important;
}
.bnr-happening-controls .bnr-slider-lines span.is-active {
  background: #064a31 !important;
}
.bnr-happening .bnr-see-all {

}
.bnr-happening-actions .bnr-see-all {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}
@media (max-width: 1280px) {
  .bnr-happening-no-photos .bnr-event-grid {
    grid-auto-columns: calc((100% - 28px) / 2) !important;
    gap: 28px !important;
  }
}
@media (max-width: 900px) {
  .bnr-happening-no-photos .bnr-event-grid {
    grid-auto-columns: 100% !important;
    gap: 22px !important;
  }
  .bnr-happening-actions {
    flex-direction: column !important;
    gap: 18px !important;
  }
  .bnr-happening-controls .bnr-slider-lines span {
    width: 54px !important;
  }
}

/* FINAL CLIENT FIX 2026-06-15 v2: What's Happening controls/read more match Highlights footer size and right alignment. */
.bnr-happening-actions {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 0 !important;
  margin-top: 34px !important;
  position: relative !important;
}
.bnr-happening-actions .bnr-happening-controls.home-content-slider-control,
.bnr-happening-actions .bnr-happening-controls {
  grid-column: 2 !important;
  justify-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 36px !important;
  margin: 0 !important;
}
.bnr-happening-actions .bnr-happening-controls button {
  font-size: 1.5em !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
}
.bnr-happening-actions .bnr-happening-controls .bnr-slider-lines {
  gap: 26px !important;
}
.bnr-happening-actions .bnr-happening-controls .bnr-slider-lines span {
  width: 50px !important;
  height: 4px !important;
}
.bnr-happening-actions .bnr-see-all,
.bnr-happening .bnr-happening-actions .bnr-see-all {
  grid-column: 3 !important;
  justify-self: end !important;
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 162px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  border: 3px solid #c72691 !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 1em !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  margin: 0 !important;
  margin-right: 14px !important;
}
.bnr-happening-actions .bnr-see-all:hover,
.bnr-happening-actions .bnr-see-all:focus-visible {
  background: #c72691 !important;
  color: #fff !important;
  transform: translateY(-6px) !important;
  transition: transform .25s ease !important;
}
@media (max-width: 900px) {
  .bnr-happening-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: center !important;
  }
  .bnr-happening-actions .bnr-see-all,
  .bnr-happening .bnr-happening-actions .bnr-see-all {
    justify-self: center !important;
  }
}

/* FINAL CLIENT FIX 2026-06-15 v3: add inner-page style colour bar above homepage section titles. */
body.bnr-index-page .bnr-section h2,
body.bnr-index-page .bnr-impact h2{
  position:relative !important;
}
body.bnr-index-page .bnr-section h2::before,
body.bnr-index-page .bnr-impact h2::before{
  content:"";
  display:block;
  width:76px;
  height:6px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--bro-green), var(--bro-teal));
  margin:0 0 10px;
}
/* Centered homepage titles keep the colour bar centred like the inner-page style reference. */
body.bnr-index-page .bnr-highlights h2::before,
body.bnr-index-page .bnr-happening h2::before,
body.bnr-index-page .bnr-connect h2::before{
  margin-left:auto;
  margin-right:auto;
}
/* Left-aligned homepage titles keep the bar aligned with the title text. */
body.bnr-index-page .bnr-what h2::before,
body.bnr-index-page .bnr-development h2::before,
body.bnr-index-page .bnr-impact h2::before{
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 900px){
  body.bnr-index-page .bnr-section h2::before,
  body.bnr-index-page .bnr-impact h2::before{
    width:68px;
    height:5px;
    margin-bottom:16px;
  }
}

/* === 2026-06-18: Impact at a Glance card shadow crop fix ===
   Keep the 2x2 stat cards' white card shadow visible inside the slider. */
.indexVersion .bnr-stat-slider,
.indexVersion .bnr-stat-viewport,
.indexVersion .bnr-stat-track,
.indexVersion .bnr-stat-panel {
  overflow: visible !important;
}
.indexVersion .bnr-stat-viewport {
  padding: 10px !important;
  margin: -10px !important;
  width: calc(100% + 20px) !important;
  box-sizing: border-box !important;
}
.indexVersion .bnr-stat-panel {
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* === FINAL CLIENT PATCH 2026-06-18: header/hero, impact layout and vision title fixes === */
/* Keep homepage hero tags (# SUPER CONNECTOR / # SUPER VALUE-ADDER) visible when the header is present/sticky. */
body.bnr-index-page .bnr-hero-content{
  box-sizing:border-box !important;
  justify-content:flex-start !important;
  padding-top:clamp(120px, 9.5vh, 156px) !important;
  padding-bottom:48px !important;
}
body.bnr-index-page .bnr-tags{
  position:relative !important;
  z-index:3 !important;
  margin-top:0 !important;
  margin-bottom:28px !important;
}
body.bnr-index-page .bnr-hero h1,
body.bnr-index-page .bnr-hero .bnr-slide-heading{
  position:relative !important;
  z-index:2 !important;
}

/* Impact at a Glance: preserve two independent columns; do not let the stat slider overlap the Global Standing panel. */
body.bnr-index-page .bnr-impact .bnr-container{
  overflow:visible !important;
}
body.bnr-index-page .bnr-impact-main{
  width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.04fr) !important;
  column-gap:56px !important;
  row-gap:36px !important;
  align-items:start !important;
}
body.bnr-index-page .bnr-stat-slider,
body.bnr-index-page .bnr-ranking-card{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  align-self:start !important;
  margin-top:0 !important;
  position:relative !important;
}
body.bnr-index-page .bnr-stat-slider{
  z-index:1 !important;
  overflow:visible !important;
}
body.bnr-index-page .bnr-ranking-card{
  z-index:2 !important;
}
body.bnr-index-page .bnr-stat-viewport{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding:10px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
body.bnr-index-page .bnr-stat-track{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  box-sizing:border-box !important;
}
body.bnr-index-page .bnr-stat-panel{
  flex:0 0 100% !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:24px !important;
  padding:0 !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
body.bnr-index-page .bnr-stat-card{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
@media (max-width:1200px){
  body.bnr-index-page .bnr-impact-main{
    grid-template-columns:1fr !important;
    column-gap:0 !important;
  }
}
@media (max-width:900px){
  body.bnr-index-page .bnr-hero-content{
    padding-top:96px !important;
  }
  body.bnr-index-page .bnr-stat-panel{
    grid-template-columns:1fr !important;
  }
}

/* Vision and Actions: keep selected issuer name on one line. */
.br-nowrap{
  white-space:nowrap !important;
}
@media (max-width:640px){
  .br-nowrap{
    white-space:normal !important;
  }
}

/* === FINAL HOTFIX 2026-06-18 v2: homepage hero tags + Impact layout ===
   1) Keep # SUPER CONNECTOR / # SUPER VALUE-ADDER below the real header, not hidden behind it.
   2) Keep Impact stats and Global Standing as two separate columns.
   3) Give the 2x2 white cards internal shadow-safe padding, without widening the left column. */
body.bnr-index-page .bnr-hero-content{
  padding-top:clamp(150px, 12vh, 190px) !important;
  padding-bottom:56px !important;
  justify-content:flex-start !important;
  box-sizing:border-box !important;

}
body.bnr-index-page .bnr-tags{
  margin-top:0 !important;
  margin-bottom:34px !important;
  position:relative !important;
  z-index:5 !important;
}
body.bnr-index-page .bnr-hero h1,
body.bnr-index-page .bnr-hero .bnr-slide-heading{
  margin-top:0 !important;
  position:relative !important;
  z-index:4 !important;
}

body.bnr-index-page .bnr-impact-main{
  display:grid !important;
  grid-template-columns:minmax(0, 0.96fr) minmax(0, 1fr) !important;
  gap:36px !important;
  align-items:start !important;
  overflow:visible !important;
}
body.bnr-index-page .bnr-stat-slider{
  grid-column:1 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  position:relative !important;
  z-index:1 !important;
}
body.bnr-index-page .bnr-ranking-card{
  grid-column:2 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:10px 0 0 !important;
  position:relative !important;
  z-index:1 !important;
  box-sizing:border-box !important;
}
body.bnr-index-page .bnr-stat-viewport{
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
body.bnr-index-page .bnr-stat-track{
  display:flex !important;
  width:100% !important;
  max-width:none !important;
  gap:0 !important;
  box-sizing:border-box !important;
}
body.bnr-index-page .bnr-stat-panel{
  flex:0 0 100% !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:24px !important;
  padding:12px !important;
  margin:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
body.bnr-index-page .bnr-stat-card{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media (max-width:1200px){
  body.bnr-index-page .bnr-impact-main{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  body.bnr-index-page .bnr-stat-slider,
  body.bnr-index-page .bnr-ranking-card{
    grid-column:1 !important;
  }
}
@media (max-width:900px){
  body.bnr-index-page .bnr-hero-content{
    padding-top:120px !important;

  }
  body.bnr-index-page .bnr-tags{
    margin-bottom:24px !important;
  }
  body.bnr-index-page .bnr-stat-panel{
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:10px !important;
  }
}

/* ===== 2026-06-18 customer fixes: homepage font, subscribe CTA, mobile spacing ===== */
.bnr-index-page,
.bnr-index-page .bnr-home,
.bnr-index-page .bnr-home *{
    font-family: var(--site-body-font-family);
}
.bnr-hero-slide{
    background-image: url(../images/banner/hero_hongkong_01.jpg);
}

.bnr-index-page .bnr-home h1,
.bnr-index-page .bnr-home h2,
.bnr-index-page .bnr-home h3{
  letter-spacing: 0 !important;
}
.bnr-index-page .bnr-home h2,
.bnr-index-page .bnr-cta h2{
  font-family: var(--site-heading-font-family);
  font-size:38px!important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
}
.bnr-index-page h2.carousel-wrapper-title,
.bnr-index-page .bnr-section-title,
.bnr-index-page .what_happening_title,
.bnr-index-page .bnr-dev h2,
.bnr-index-page .bnr-profile h2{
  font-size: clamp(1.75em, 2.3vw, 2.45em) !important;
  line-height: 1.22 !important;
}
.bnr-subscribe-linkwrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  gap:0!important;
  flex-wrap:wrap!important;
  margin:0!important;
}
.bnr-subscribe-btn,
.bnr-subscribe-linkwrap .bnr-subscribe-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  min-width:260px!important;
  padding:0 34px!important;
  border:0!important;
  border-radius:999px!important;
  background:#d82b91!important;
  color:#fff!important;
  font-size:1.05em!important;
  font-weight:700!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:0 10px 22px rgba(95,0,62,.22)!important;
}
.bnr-subscribe-btn:hover,
.bnr-subscribe-btn:focus{
  background:#bd238f!important;
  color:#fff!important;
  text-decoration:none!important;
}
@media(max-width:1024px){
  .bnr-index-page .bnr-container,
  .bnr-index-page .contentArea,
  .bnr-index-page .ias_conetnt,
  .bnr-index-page .mainContent,
  .bnr-index-page section[class^="bnr-"]{
/*     padding-left:max(20px, env(safe-area-inset-left))!important;
    padding-right:max(20px, env(safe-area-inset-right))!important; */
  }
  .bnr-index-page #sideBanner{display:block!important;}
}
@media(max-width:767px){
  .bnr-subscribe-btn,
  .bnr-subscribe-linkwrap .bnr-subscribe-btn{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
  }
}

/* client fix 20260618-2 */
.brx-table td.brx-category,
.brx-table td[data-label="Category"],
.press-table td.brx-category { text-align:left!important; }
@media(max-width:1024px){
  .bnr-index-page #sideBanner{display:block!important;}
  #sideBanner{display:block!important;}
  #sideBanner.hide{transform:translateX(calc(100% - 22px));}
}

/* ===== Migrated from en/index.html inline <style> blocks (20260618) ===== */
.bnr-happening-controls{display:flex;justify-content:center;gap:.75rem;margin-top:1rem;}

/* Development Areas local tab enhancement: added only for the 8 tabs / panels. */
.bnr-development .dev-item.is-active {
  background: var(--ref-green) !important;
  color: #fff !important;
  border-color: var(--ref-green) !important;
}
.bnr-development .dev-item.is-active span,
.bnr-development .dev-item.is-active svg,
.bnr-development .dev-item.is-active svg * {
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Development Areas local carousel/card size refinement.
   Scope is limited to this section; external CSS/JS files are untouched. */
.bnr-development .bnr-dev-panel {
  display: none !important;
}
.bnr-development .bnr-dev-panel.is-active {
  display: block !important;
  position: relative;
}
.bnr-development .dev-slider-viewport {
  overflow: hidden;
  width: 100%;
  padding: 0.25rem 0 0.5rem;
}
.bnr-development .dev-slider-track {
  display: flex;
  gap: 1.25rem;
  align-items: stretch;
  transition: transform 0.35s ease;
  will-change: transform;
  margin: 6px;
}
.bnr-development .dev-slider-track article {
  flex: 0 0 calc((100% - 2.5rem) / 3);
  min-width: 0;
}
.bnr-development .bnr-dev-panel article {
  padding: 1.45rem 1.35rem 1.35rem !important;
}
.bnr-development .bnr-dev-panel article {
  display: flex !important;
  flex-direction: column !important;
}
.bnr-development .bnr-dev-panel article h3 {
  font-size: 1.18rem !important;
  line-height: 1.18 !important;
  min-height: 4.18rem !important;
  margin-bottom: 0.65rem !important;
}
.bnr-development .bnr-dev-panel article p {
  font-size: 0.95rem !important;
  line-height: 1.42 !important;
  margin-top: 0 !important;
}
.bnr-development .bnr-dev-panel article a {
  margin-top: auto !important;
}
.bnr-development .bnr-dev-panel article a {
  font-size: 0.9rem !important;
}
.bnr-development .dev-slide-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.55rem;
  margin-top: 1.35rem;
}
.bnr-development .dev-slide-btn {
  position: static !important;
  z-index: 5;
  width: auto;
  height: auto;
  min-width: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ref-green);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transform: none !important;
}
.bnr-development .dev-slide-btn:hover,
.bnr-development .dev-slide-btn:focus-visible {
  background: transparent;
  color: #008c83;
  outline: 2px solid #008c83;
  outline-offset: 4px;
}
.bnr-development .dev-slide-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.05rem;
  margin-top: 0;
}
.bnr-development .dev-slide-dot {
  width: 2.9rem;
  height: 0.18rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #b8cbc3;
  cursor: pointer;
}
.bnr-development .dev-slide-dot.is-active {
  background: var(--ref-green);
  transform: none;
}
.bnr-development .bnr-dev-panel:not(.has-dev-slider) .dev-slide-controls,
.bnr-development .bnr-dev-panel:not(.has-dev-slider) .dev-slide-btn,
.bnr-development .bnr-dev-panel:not(.has-dev-slider) .dev-slide-dots {
  display: none !important;
}
@media (max-width: 1180px) {
  .bnr-development .dev-slider-track article { flex-basis: calc((100% - 2.5rem) / 3); }
}
@media (max-width: 820px) {
  .bnr-development .dev-slider-track article { flex-basis: calc((100% - 1.25rem) / 2); }
}
@media (max-width: 560px) {
  .bnr-development .dev-slider-track article { flex-basis: 100%; }
}
/* ===== End migrated inline styles ===== */

/* === 20260702 English index: Impact at a Glance client comment fix === */
.indexVersion .bnr-impact h2,
.indexVersion .bnr-ranking-card h3 {
  font-family: var(--site-body-font-family);
}

.indexVersion .bnr-impact h2 {
  font-size: clamp(2.05em, 2.15vw, 2.85em) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  margin-bottom: 28px !important;
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .bnr-impact h2 .impact-blue,
.indexVersion .bnr-impact h2 .impact-green {
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .bnr-impact-main {
  grid-template-columns: minmax(470px, .95fr) minmax(520px, 1.05fr) !important;
  gap: 42px !important;
  align-items: stretch !important;
}

.indexVersion .bnr-stat-panel {
  gap: 20px !important;
}

.indexVersion .bnr-stat-card {
  min-height: 155px !important;
  padding: 26px 26px 22px !important;
  grid-template-columns: 42px 1fr !important;
  border-top-width: 5px !important;
  border-radius: 8px !important;
}

.indexVersion .bnr-stat-icon svg {
  width: 62px !important;
}

.indexVersion .bnr-stat-card strong {
  font-size: clamp(1.85em, 1.75vw, 2.25em) !important;
  line-height: 1 !important;
}

.indexVersion .bnr-stat-card p {
  margin-top: 16px !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
}

.indexVersion .bnr-ranking-card {
  min-height: 330px !important;
  padding: 34px 42px !important;
  border-radius: 8px !important;
  background: rgba(228, 255, 238, .55) !important;
}

.indexVersion .bnr-ranking-card h3 {
  color: #0a6f82 !important;
  font-size: clamp(1.45em, 1.55vw, 2.05em) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  margin: 0 0 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 0 !important;
  position: relative !important;
}

.indexVersion .bnr-ranking-card h3::after {
  content: "" !important;
  display: block !important;
  height: 5px !important;
  width: 100% !important;
  margin-top: 14px !important;
  background: linear-gradient(90deg, #0b8f91 0%, #1d7a5a 56%, #e0b84f 100%) !important;
  border-radius: 99px !important;
}

.indexVersion .bnr-rank-row {
  gap: 20px !important;
  padding: 10px 0 !important;
}

.indexVersion .bnr-rank-row strong {
  font-size: clamp(1.05em, 1.05vw, 1.35em) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

.indexVersion .bnr-rank-row span {
  font-size: clamp(.84em, .82vw, 1em) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  padding-top: 5px
}

.indexVersion .bnr-rank-row em {
  font-size: clamp(2.05em, 2.1vw, 2.75em) !important;
  line-height: .95 !important;
  font-weight: 800 !important;
}

@media (max-width: 1100px) {
  .indexVersion .bnr-impact-main {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* === 20260702 English index: Highlights client comment fix === */
.indexVersion .bnr-highlights h2 {
  font-family: var(--site-body-font-family);
  font-size: clamp(2.05em, 2.15vw, 2.85em) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .bnr-highlights h2 span {
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .bnr-news-card h3 {
  font-family: var(--site-body-font-family);
font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #1f2f3a !important;
  padding: 14px 14px 16px !important;
}

.indexVersion .bnr-news-card span {
  font-size: .68em !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

.indexVersion .bnr-news-card img {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
}

/* === 20260702 English index: Ready to participate CTA client comment fix === */
.indexVersion .bnr-cta h2 {
  font-family: var(--site-body-font-family);
  font-size: clamp(2.05em, 2.15vw, 2.85em) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

/* === 20260702 English index: Development Areas client comment fix === */
.indexVersion .bnr-development h2 {
  font-family: var(--site-body-font-family);
  font-size: clamp(2.05em, 2.15vw, 2.85em) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .bnr-development .dev-grid {
  margin-bottom: 0 !important;
}

.indexVersion .bnr-development .dev-item {
  text-decoration: none !important;
  cursor: pointer !important;
}

.indexVersion .bnr-development .dev-item:hover,
.indexVersion .bnr-development .dev-item:focus-visible {
  background: #1b6025 !important;
  color: #fff !important;
  border-color: #1b6025 !important;
  transform: translateY(-2px);
  outline: none !important;
}

.indexVersion .bnr-development .dev-item:hover svg,
.indexVersion .bnr-development .dev-item:hover svg *,
.indexVersion .bnr-development .dev-item:focus-visible svg,
.indexVersion .bnr-development .dev-item:focus-visible svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* === 20260702 English index: What We Do client comment fix === */
.indexVersion .bnr-what h2 {
  font-family: var(--site-body-font-family);
  font-size: clamp(2.05em, 2.15vw, 2.85em) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: var(--bro-navy, #003c64) !important;
  margin-bottom: 28px !important;
}

.indexVersion .bnr-what h2 span {
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .bnr-what-item {
  min-height: 210px !important;
  padding: 0 22px 8px !important;
}

.indexVersion .bnr-what-item strong {
  font-family: var(--site-body-font-family);
  font-size: 21px !important;
  line-height: 2.12 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.indexVersion .bnr-what .wwd_svg {
  width: 62% !important;
  max-height: 135px !important;
  padding-top: 20px !important;
}

/* === 20260702 English index: What's Happening client comment fix === */
.indexVersion .bnr-happening h2 {
  font-family: var(--site-body-font-family);
  font-size: clamp(2.05em, 2.15vw, 2.85em) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .bnr-happening h2 span {
  color: var(--bro-navy, #003c64) !important;
}

.indexVersion .what_happening_card {
  position: relative !important;
}

.indexVersion .bnr-calendar-icon {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  margin-top: 10px !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: .86em !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.indexVersion .bnr-calendar-icon span {
  width: 1.05em !important;
  height: 1.05em !important;
  display: inline-block !important;
  background: currentColor !important;
  -webkit-mask: url("../images/icon/icon_calendar.svg") center / contain no-repeat !important;
  mask: url("../images/icon/icon_calendar.svg") center / contain no-repeat !important;
}

.indexVersion .bnr-calendar-icon em {
  font-style: normal !important;
}

/* === 20260702 English index: What's Happening calendar icon only === */
.indexVersion .bnr-calendar-icon {
  width: 1.15em !important;
  height: 1.15em !important;
  margin-top: 10px !important;
  padding: 0 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.indexVersion .bnr-calendar-icon span {
  width: 1.15em !important;
  height: 1.15em !important;
}

.indexVersion .bnr-calendar-icon em {
  display: none !important;
}

/* === 20260702 English index: Impact icon visual equal size === */
.indexVersion .bnr-impact .bnr-stat-icon {
  width: 56px !important;
  height: 66px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.indexVersion .bnr-impact .bnr-stat-icon svg {
  width: 66px !important;
  height: 66px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  transform-origin: center center !important;
}

/* Match all icons visually to the 4th card: Hong Kong trade with B&R economies (2024) */
.indexVersion .bnr-impact .bnr-stat-panel .bnr-stat-card:nth-child(1) .bnr-stat-icon svg {
  transform: scale(1.28) !important;
}

.indexVersion .bnr-impact .bnr-stat-panel .bnr-stat-card:nth-child(2) .bnr-stat-icon svg {
  transform: scale(1.24) !important;
}

.indexVersion .bnr-impact .bnr-stat-panel .bnr-stat-card:nth-child(3) .bnr-stat-icon svg {
  transform: scale(.82) !important;
}

.indexVersion .bnr-impact .bnr-stat-panel .bnr-stat-card:nth-child(4) .bnr-stat-icon svg {
  transform: scale(1) !important;
}

/* === 20260703 TC homepage alignment cleanup === */
html[lang="zh-HK"] .bnr-index-page .bnr-what h2,
html[lang="zh-HK"] .bnr-index-page .bnr-impact h2,
html[lang="zh-HK"] .bnr-index-page .bnr-development h2,
html[lang="zh-HK"] .bnr-index-page .bnr-highlights h2,
html[lang="zh-HK"] .bnr-index-page .bnr-happening h2,
html[lang="zh-HK"] .bnr-index-page .bnr-profiles h2,
html[lang="zh-HK"] .bnr-index-page .bnr-cta h2 {
  font-family: var(--site-body-font-family);
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

html[lang="zh-HK"] .bnr-index-page .bnr-what-item strong {
  font-family: var(--site-body-font-family);
  font-size: clamp(.92em, .9vw, 1.15em) !important;
  line-height: 1.18 !important;
  min-height: 2.4em;
  white-space: normal !important;
}

html[lang="zh-HK"] .bnr-index-page .bnr-what .wwd_svg {
  width: 58% !important;
  max-height: 128px !important;
}

html[lang="zh-HK"] .bnr-index-page .bnr-development .dev-grid {
  margin-bottom: 0 !important;
}

html[lang="zh-HK"] .bnr-index-page .bnr-development .dev-item {
  min-height: 62px !important;
  align-items: center !important;
  text-decoration: none !important;
}

html[lang="zh-HK"] .bnr-index-page .bnr-development .dev-item strong,
html[lang="zh-HK"] .bnr-index-page .bnr-development .dev-item span:not(.dev-icon) {
  font-family: var(--site-body-font-family);
  font-size: .95em !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
}

html[lang="zh-HK"] .bnr-index-page .bnr-highlights .bnr-card-title,
html[lang="zh-HK"] .bnr-index-page .bnr-highlights .title,
html[lang="zh-HK"] .bnr-index-page .bnr-happening .bnr-event-title {
  font-family: var(--site-body-font-family);
  line-height: 1.35 !important;
}

html[lang="zh-HK"] .bnr-index-page .bnr-cta .bnr-cta-actions a {
    font-family: var(--site-body-font-family);
}

/* === 20260703 TC homepage final alignment fix === */
html:lang(zh-HK) .indexVersion .bnr-development .dev-grid,
body:has(.bnr-home) .indexVersion .bnr-development .dev-grid {
  align-items: stretch;
}

html:lang(zh-HK) .indexVersion .bnr-development .dev-item {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  min-height: 112px !important;
  padding: 20px 28px !important;
  font-size: clamp(1.02em, .95vw, 1.18em) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  text-align: left !important;
  color: #263238 !important;
}

html:lang(zh-HK) .indexVersion .bnr-development .dev-item svg {
  flex: 0 0 70px !important;
  width: 70px !important;
  height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;
}

html:lang(zh-HK) .indexVersion .bnr-cta {
  overflow: visible !important;
  padding-top: clamp(70px, 5vw, 96px) !important;
  padding-bottom: clamp(70px, 5vw, 96px) !important;
}

html:lang(zh-HK) .indexVersion .bnr-cta h2 {
  line-height: 1.2 !important;
  margin-top: 16px !important;
  margin-bottom: 28px !important;
  overflow: visible !important;
}

html:lang(zh-HK) .indexVersion .bnr-cta-links {
  margin-top: 28px !important;
}

html:lang(zh-HK) .indexVersion .bnr-cta-logo {
  margin-top: 28px !important;
}

@media (max-width: 767px) {
  html:lang(zh-HK) .indexVersion .bnr-development .dev-item {
    min-height: 86px !important;
    padding: 16px 18px !important;
    gap: 14px !important;
  }
  html:lang(zh-HK) .indexVersion .bnr-development .dev-item svg {
    flex-basis: 52px !important;
    width: 52px !important;
    height: 52px !important;
  }
}

/* === 20260707 h2 font/apostrophe spacing client fix ===
   Keep all homepage h2 headings and nested span text in the same font family. */
.indexVersion .bnr-home h2,
.indexVersion .bnr-home h2 span,
.indexVersion .bnr-section h2,
.indexVersion .bnr-section h2 span,
.indexVersion .bnr-cta h2,
.indexVersion .bnr-cta h2 span {
  letter-spacing: 0 !important;
  font-family: var(--site-heading-font-family);
  font-size:38px;
  font-weight: 800 !important;
}

html[lang="zh-hk"] .indexVersion .bnr-home h2,
html[lang="zh-hk"] .indexVersion .bnr-home h2 span,
html[lang="zh-HK"] .indexVersion .bnr-home h2,
html[lang="zh-HK"] .indexVersion .bnr-home h2 span,
html[lang="zh-cn"] .indexVersion .bnr-home h2,
html[lang="zh-cn"] .indexVersion .bnr-home h2 span,
html[lang="zh-CN"] .indexVersion .bnr-home h2,
html[lang="zh-CN"] .indexVersion .bnr-home h2 span {
    font-family: var(--site-body-font-family);

}
/* === 20260707 English homepage h2 font stack update === */
html[lang="en"] .indexVersion .bnr-home h2,
html[lang="en"] .indexVersion .bnr-home h2 span,
html[lang="en"] .indexVersion .bnr-section h2,
html[lang="en"] .indexVersion .bnr-section h2 span,
html[lang="en"] .indexVersion .bnr-cta h2,
html[lang="en"] .indexVersion .bnr-cta h2 span {

  letter-spacing: 0 !important;
}

/* === 20260707 English homepage h2 font-size unification ===
   Unify homepage section titles: What We Do, Impact at a Glance,
   Development Areas, Highlights, What's Happening, Connecting to the Belt and Road,
   and Ready to Participate in the Belt and Road. */
html[lang="en"] .indexVersion .bnr-what h2,
html[lang="en"] .indexVersion .bnr-what h2 span,
html[lang="en"] .indexVersion .bnr-impact h2,
html[lang="en"] .indexVersion .bnr-impact h2 span,
html[lang="en"] .indexVersion .bnr-development h2,
html[lang="en"] .indexVersion .bnr-development h2 span,
html[lang="en"] .indexVersion .bnr-highlights h2,
html[lang="en"] .indexVersion .bnr-highlights h2 span,
html[lang="en"] .indexVersion .bnr-happening h2,
html[lang="en"] .indexVersion .bnr-happening h2 span,
html[lang="en"] .indexVersion .bnr-profiles h2,
html[lang="en"] .indexVersion .bnr-profiles h2 span,
html[lang="en"] .indexVersion .bnr-cta h2,
html[lang="en"] .indexVersion .bnr-cta h2 span {

  line-height: 1.12 !important;
  font-family: var(--site-heading-font-family);
  font-size:38px!important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Client updates 2026-07: English homepage typography */
html[lang="en"] .bnr-hero h1,
html[lang="en"] .bnr-tags,

html[lang="en"] .bnr-hero-actions a {   font-family: var(--site-body-font-family); font-weight: 700; }
html[lang="en"] .bnr-hero h1 { font-size: clamp(38px, 4.15vw, 66px); line-height: 1.02; max-width: 900px; }
html[lang="en"] .bnr-hero-actions a { white-space: nowrap; }
html[lang="en"] .bnr-what-item > strong,
html[lang="en"] .bnr-standing-item,
html[lang="en"] .bnr-news-card h3,
html[lang="en"] .bnr-connect-grid strong,

html[lang="en"] .bnr-cta-links a {   font-family: var(--site-body-font-family); }

html[lang="en"] .bnr-what-item > strong {  font-size: clamp(12px, 1vw, 17px); }
@media (max-width: 767px) { html[lang="en"] .bnr-what-item > strong { white-space: normal; } }

/* 2026-07-15 TC homepage client updates */
body.bnr-index-page .bnr-what-grid .bnr-what-item > strong {

}
body.bnr-index-page .bnr-stat-card strong {
  font-size: 17px;
  line-height: 1.25;
}

body.bnr-index-page .bnr-stat-card strong .bnr-count,
body.bnr-index-page .bnr-stat-card > strong > .bnr-count {
  font-size: 33px;
}
body.bnr-index-page .bnr-stat-card p {
  font-size: 17px;
  line-height: 1.25;
}

/* 2026-07-15 TC homepage: keep all five "我們的工作" labels on one line */
html[lang="zh-HK"] body.bnr-index-page .bnr-what-grid .bnr-what-item > strong {
  white-space: nowrap !important;
  min-height: 0 !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ===== TC homepage: isolated Impact card typography ===== */
/* TC-only structure. Card colours, borders, icons and dimensions continue to use the shared English layout. */

body.tc-home-page .bnr-cta>.bnr-container>span {

}

body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-metric {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.08em;
  min-width: 0;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-number {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 33px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
}

body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-text {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-label {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
}

/* Reuse the original card text colours exactly. */
body.tc-home-page .bnr-impact .tc-impact-card--1 .tc-impact-metric,
body.tc-home-page .bnr-impact .tc-impact-card--1 .tc-impact-label {
  color: #2f6cba;
}

body.tc-home-page .bnr-impact .tc-impact-card--2 .tc-impact-metric,
body.tc-home-page .bnr-impact .tc-impact-card--2 .tc-impact-label {
  color: #174b34;
}

body.tc-home-page .bnr-impact .tc-impact-card--3 .tc-impact-metric,
body.tc-home-page .bnr-impact .tc-impact-card--3 .tc-impact-label {
  color: #006b5f;
}

body.tc-home-page .bnr-impact .tc-impact-card--4 .tc-impact-metric,
body.tc-home-page .bnr-impact .tc-impact-card--4 .tc-impact-label {
  color: #936d08;
}

@media (max-width: 768px) {
  body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-metric {
    flex-wrap: wrap;
    line-height: 1.15;
    white-space: normal;
  }

  body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-label {
    margin-top: 14px;
  }
}

/* 2026-07-16 TC homepage: preserve English colour mapping for the final two Impact cards. */
body.tc-home-page .bnr-impact .tc-impact-card--5 .tc-impact-metric,
body.tc-home-page .bnr-impact .tc-impact-card--5 .tc-impact-label {
  color: #2f6cba;
}

body.tc-home-page .bnr-impact .tc-impact-card--6 .tc-impact-metric,
body.tc-home-page .bnr-impact .tc-impact-card--6 .tc-impact-label {
  color: #174b34;
}

/* === 2026-07-29 Homepage mobile width and card spacing correction === */
@media (max-width: 767px) {
  /* Use the mobile viewport more effectively across all homepage sections. */
  body.bnr-index-page .bnr-container,
  body.tc-home-page .bnr-container,
  .indexVersion .bnr-container {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.bnr-index-page .bnr-section,
  body.tc-home-page .bnr-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The floating desktop side banner must not occupy mobile space. */
  .bannerContainer,
  #sideBanner,
  #sideBanner .bannerContainer {
    display: none !important;
  }

  /* What We Do: one wide, compact card per row. */
  .bnr-what-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .bnr-what-item {
    width: 100% !important;
    min-height: 132px !important;
    height: auto !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    align-items: center !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .bnr-what-item > strong {
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bnr-what-item .wwd,
  .bnr-what-item > span {
    width: 86px !important;
    height: 86px !important;
    margin: 0 !important;
    justify-self: end !important;
  }

  .bnr-what-item .wwd_svg,
  .bnr-what-item svg {
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
  }

  /* Impact at a Glance: prevent the cards and ranking text becoming a narrow strip. */
  .bnr-impact {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .bnr-impact h2 {
    margin-bottom: 28px !important;
  }

  .bnr-impact-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .bnr-stat-slider,
  .bnr-stat-viewport,
  .bnr-stat-track,
  .bnr-stat-panel,
  .bnr-ranking-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bnr-stat-panel {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .bnr-stat-card {
    min-height: 150px !important;
    height: auto !important;
    padding: 20px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    overflow: visible !important;
  }

  .bnr-stat-icon,
  .bnr-stat-icon svg {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }

  body.bnr-index-page .bnr-stat-card strong,
  body.bnr-index-page .bnr-stat-card strong .bnr-count,
  body.bnr-index-page .bnr-stat-card > strong > .bnr-count,
  body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-number,
  .bnr-count {
    font-size: 25px !important;
    white-space: normal !important;
  }

  .bnr-stat-card p,
  body.tc-home-page .bnr-impact .tc-impact-card .tc-impact-label {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bnr-ranking-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 24px 20px !important;
  }

  .bnr-rank-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding: 14px 0 !important;
  }

  .bnr-rank-row strong,
  .bnr-rank-row span {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Development Areas: a full-width compact single-column list. */
  .bnr-development {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .bnr-development .dev-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .bnr-development .dev-item,
  .bnr-development .dev-item.featured,
  html:lang(zh-HK) .indexVersion .bnr-development .dev-item {
    width: 100% !important;
    min-height: 126px !important;
    height: auto !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    align-items: center !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bnr-development .dev-item svg,
  html:lang(zh-HK) .indexVersion .bnr-development .dev-item svg {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
  }

  /* Highlights: one wide item, without desktop fixed heights or large empty gaps. */
  .bnr-highlights {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .bnr-highlights h2 {
    margin-bottom: 48px !important;
  }

  .bnr-highlight-slider,
  .bnr-highlight-viewport,
  .bnr-highlight-track,
  .bnr-highlight-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .bnr-highlight-page {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .bnr-highlight-page .bnr-news-card {
    display: none !important;
  }

  .bnr-highlight-page .bnr-news-card:first-child {
    display: block !important;
  }

  .bnr-news-card {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .bnr-news-card a {
    height: auto !important;
  }

  .bnr-news-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }

  .bnr-news-card h3 {
    min-height: 0 !important;
    padding: 20px 16px !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bnr-highlight-footer {
    padding: 20px 12px 18px !important;
  }

  /* What's Happening: one wide card and compact vertical spacing. */
  .bnr-happening {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .bnr-happening h2 {
    margin-bottom: 28px !important;
  }

  .bnr-happening-no-photos .bnr-event-grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 100% !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    scroll-snap-type: x mandatory !important;
  }

  .bnr-happening-no-photos .bnr-event-grid article {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
  }

  .bnr-happening-no-photos .bnr-event-grid article > a,
  .what_happening_card {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
  }

  .what_happening_card {
    padding: 28px 28px 24px !important;
  }

  .what_happening_card h3 {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
    font-size: 20px !important;
    line-height: 1.28 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .bnr-happening-actions {
    margin-top: 16px !important;
    gap: 18px !important;
  }

  /* All homepage slider controls use one compact, single-line dot row. */
  .home-content-slider-control,
  .bnr-happening-controls,
  .bnr-highlight-footer .bnr-slider-nav,
  .dev-slide-controls {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .bnr-slider-lines,
  .dev-slide-dots {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .bnr-slider-lines span,
  .bnr-highlight-footer .bnr-slider-lines span,
  .dev-slide-dot {
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
  }

  .bnr-slider-lines span.is-active,
  .bnr-highlight-footer .bnr-slider-lines span.is-active,
  .dev-slide-dot.is-active,
  .dev-slide-dot[aria-selected="true"] {
    transform: none !important;
  }

  .home-content-slider-control > button,
  .bnr-happening-controls > button,
  .dev-slide-controls > button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: center !important;
  }

  /* Select Profile: one compact full-width card per row. */
  .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .bnr-connect-grid > a {
    width: 100% !important;
    min-height: 132px !important;
    height: auto !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 92px !important;
    align-items: center !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .bnr-connect-grid > a .cbr,
  .bnr-connect-grid > a svg {
    width: 86px !important;
    height: 86px !important;
    max-width: 86px !important;
    max-height: 86px !important;
    margin: 0 !important;
    justify-self: end !important;
  }
}

/* =========================================================
   Homepage mobile final alignment update (2026-07-29)
   - Profile cards: 1 x 4
   - Impact / Highlights / What's Happening controls unified
   ========================================================= */
@media (max-width: 767px) {
  /* Select Profile: force four cards into one vertical column. */
  body .indexVersion .bnr-connect .bnr-connect-grid,
  body .bnr-home .bnr-connect .bnr-connect-grid,
  body .bnr-connect .bnr-container .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    width: 100% !important;
    max-width: none !important;
    gap: 12px !important;
  }

  body .indexVersion .bnr-connect .bnr-connect-grid > a,
  body .bnr-home .bnr-connect .bnr-connect-grid > a,
  body .bnr-connect .bnr-container .bnr-connect-grid > a {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* One visual language for all three homepage slider controls. */
  body .bnr-impact .home-content-slider-control,
  body .bnr-highlights .home-content-slider-control,
  body .bnr-happening .home-content-slider-control {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 36px !important;
    align-items: center !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 240px !important;
    min-height: 40px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body .bnr-impact .bnr-slider-lines,
  body .bnr-highlights .bnr-slider-lines,
  body .bnr-happening .bnr-slider-lines {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body .bnr-impact .bnr-slider-lines > span,
  body .bnr-highlights .bnr-slider-lines > span,
  body .bnr-happening .bnr-slider-lines > span {
    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #b8c9c4 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body .bnr-impact .bnr-slider-lines > span.is-active,
  body .bnr-highlights .bnr-slider-lines > span.is-active,
  body .bnr-happening .bnr-slider-lines > span.is-active {
    background: #07573f !important;
    opacity: 1 !important;
    transform: none !important;
  }

/* Accessible native-button slider dots; matches the existing span appearance. */
body .bnr-slider-lines > button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  flex: 0 0 8px !important;
  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #b8c9c4 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
body .bnr-slider-lines > button.is-active {
  background: #07573f !important;
}

  body .bnr-impact .home-content-slider-control > button,
  body .bnr-highlights .home-content-slider-control > button,
  body .bnr-happening .home-content-slider-control > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #07573f !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   Homepage mobile card alignment refinement (2026-07-29 v2)
   - Highlights equal left/right margin
   - What We Do and Select Profile share one balanced card layout
   - Slider indicators keep compact, consistent spacing
   ========================================================= */
@media (max-width: 767px) {
  /* Highlights: equal visual margin on both sides. */
  body .bnr-highlights .bnr-container,
  body .bnr-highlights .bnr-highlight-slider,
  body .bnr-highlights .bnr-highlight-viewport,
  body .bnr-highlights .bnr-highlight-track,
  body .bnr-highlights .bnr-highlight-page {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  body .bnr-highlights .bnr-highlight-page {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body .bnr-highlights .bnr-news-card,
  body .bnr-highlights .bnr-news-card:first-child {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove the old large-gap rule and keep all slider dots compact. */
  body .bnr-happening-actions .bnr-happening-controls .bnr-slider-lines,
  body .bnr-happening .bnr-slider-lines,
  body .bnr-highlights .bnr-slider-lines,
  body .bnr-impact .bnr-slider-lines {
    gap: 7px !important;
  }

  /* What We Do + Select Profile: same mobile card structure. */
  body .bnr-what-grid,
  body .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body .bnr-what-grid > .bnr-what-item,
  body .bnr-connect-grid > a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 104px !important;
    align-items: center !important;
    column-gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 132px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 20px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  body .bnr-what-grid > .bnr-what-item > strong,
  body .bnr-connect-grid > a {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  body .bnr-what-grid > .bnr-what-item > strong {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    z-index: 1 !important;
  }

  body .bnr-what-grid > .bnr-what-item > span,
  body .bnr-connect-grid > a > .cbr,
  body .bnr-connect-grid > a > span {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 104px !important;
    height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important;
    align-self: center !important;
    transform: none !important;
  }

  body .bnr-what-grid > .bnr-what-item svg,
  body .bnr-connect-grid > a svg,
  body .bnr-connect-grid > a .cbr_svg,
  body .bnr-connect-grid > a .wwd_svg {
    display: block !important;
    width: 94px !important;
    height: 94px !important;
    max-width: 94px !important;
    max-height: 94px !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Keep long labels readable without oversized text or overlap. */
  body .bnr-what-grid > .bnr-what-item > strong,
  body .bnr-connect-grid > a {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

@media (max-width: 390px) {
  body .bnr-what-grid > .bnr-what-item,
  body .bnr-connect-grid > a {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    column-gap: 12px !important;
    padding: 16px !important;
  }

  body .bnr-what-grid > .bnr-what-item > strong,
  body .bnr-connect-grid > a {
    font-size: 20px !important;
  }

  body .bnr-what-grid > .bnr-what-item > span,
  body .bnr-connect-grid > a > .cbr,
  body .bnr-connect-grid > a > span {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    max-height: 88px !important;
  }

  body .bnr-what-grid > .bnr-what-item svg,
  body .bnr-connect-grid > a svg {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }
}

/* =========================================================
   Homepage mobile card alignment correction (2026-07-29 v3)
   Corrects the previous grid treatment that clipped headings
   and pushed card labels outside the viewport.
   ========================================================= */
@media (max-width: 767px) {
  /* Keep both sections inside the same readable mobile width. */
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body .bnr-what h2,
  body .bnr-connect h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    overflow: visible !important;
  }

  body .bnr-what-grid,
  body .bnr-connect-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Shared mobile card layout: label on left, icon on right. */
  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 132px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 20px 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: left !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .bnr-what-grid > a.bnr-what-item > strong {
    position: static !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: calc(100% - 94px) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr {
    position: static !important;
    display: flex !important;
    flex: 0 0 76px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg,
  body .bnr-connect-grid > a svg.cbr_svg,
  body .bnr-what-grid > a svg.wwd_svg {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 28px) !important;
  }

  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    min-height: 122px !important;
    gap: 14px !important;
    padding: 18px !important;
    font-size: 18px !important;
  }

  body .bnr-what-grid > a.bnr-what-item > strong {
    max-width: calc(100% - 82px) !important;
    font-size: 18px !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr {
    flex-basis: 68px !important;
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
  }

  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }
}

/* =========================================================
   Homepage mobile cards — match Development Areas (2026-07-29 v4)
   What We Do + Select Profile use the same compact card pattern.
   ========================================================= */
@media (max-width: 767px) {
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body .bnr-what-grid,
  body .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 126px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    text-align: left !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  body .bnr-what-grid > a.bnr-what-item > strong {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg,
  body .bnr-connect-grid > a svg.cbr_svg,
  body .bnr-what-grid > a svg.wwd_svg {
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 28px) !important;
  }

  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    grid-template-columns: minmax(0, 1fr) 78px !important;
    min-height: 120px !important;
    gap: 12px !important;
    padding: 15px 18px !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr,
  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg {
    width: 74px !important;
    height: 74px !important;
    max-width: 74px !important;
    max-height: 74px !important;
  }
}

/* =========================================================
   Homepage mobile cards — exact Development Areas sizing (2026-07-29 v5)
   Re-do: What We Do + Select Profile use the same card width,
   height, spacing, typography and icon scale as Development Areas.
   ========================================================= */
@media (max-width: 767px) {
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 72px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .bnr-what-grid,
  body .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 126px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    text-align: left !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  body .bnr-what-grid > a.bnr-what-item > strong,
  body .bnr-connect-grid > a > strong,
  body .bnr-connect-grid > a:not(:has(> strong)) {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  body .bnr-what-grid > a.bnr-what-item > strong,
  body .bnr-connect-grid > a > strong {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  body .bnr-connect-grid > a:not(:has(> strong)) {
    color: inherit !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg,
  body .bnr-connect-grid > a svg.cbr_svg,
  body .bnr-what-grid > a svg.wwd_svg {
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 56px) !important;
  }
}

/* =========================================================
   Homepage mobile cards — exact user-specified sizing (2026-07-29 v6)
   What We Do + Select Profile aligned to Development Areas.
   ========================================================= */
@media (max-width: 767px) {
  body .bnr-what-grid,
  body .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    width: 100% !important;
    min-height: 126px !important;
    height: auto !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    align-items: center !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    white-space: normal !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
  }

  body .bnr-what-grid > a.bnr-what-item > strong,
  body .bnr-connect-grid > a > strong {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg,
  body .bnr-connect-grid > a svg.cbr_svg,
  body .bnr-what-grid > a svg.wwd_svg {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* Keep the exact same sizing on narrow mobile screens. */
@media (max-width: 390px) {
  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    min-height: 126px !important;
    padding: 16px 20px !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    gap: 14px !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr,
  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg {
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
  }
}

/* =========================================================
   Homepage mobile cards — final text/icon alignment fix (2026-07-29 v7)
   What We Do + Select Profile use the same Development Areas card geometry.
   ========================================================= */
@media (max-width: 767px) {
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 64px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body .bnr-what-grid,
  body .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .bnr-what-grid > a.bnr-what-item,
  body .bnr-connect-grid > a {
    width: 100% !important;
    min-height: 126px !important;
    height: auto !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    align-items: center !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: hidden !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
  }

  body .bnr-what-grid > a.bnr-what-item > strong,
  body .bnr-connect-grid > a > strong {
    position: static !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .bnr-what-grid > a.bnr-what-item > span,
  body .bnr-connect-grid > a > span.cbr {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .bnr-what-grid > a.bnr-what-item svg,
  body .bnr-connect-grid > a svg,
  body .bnr-connect-grid > a svg.cbr_svg,
  body .bnr-what-grid > a svg.wwd_svg {
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 390px) {
  body .bnr-what .bnr-container,
  body .bnr-connect .bnr-container {
    width: calc(100% - 64px) !important;
  }
}

/* =========================================================
   Select Profile mobile card grid correction (2026-07-29 v8)
   Remove the accidental 2x2 grid / excess card height.
   ========================================================= */
@media (max-width: 767px) {
  body .bnr-connect-grid > a,
  body .bnr-connect-grid > a.externalUrl {
    width: 100% !important;
    min-height: 126px !important;
    height: 126px !important;
    max-height: 126px !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  body .bnr-connect-grid > a > strong,
  body .bnr-connect-grid > a.externalUrl > strong {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .bnr-connect-grid > a > span.cbr,
  body .bnr-connect-grid > a.externalUrl > span.cbr {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .bnr-connect-grid > a > span.cbr > svg,
  body .bnr-connect-grid > a.externalUrl > span.cbr > svg,
  body .bnr-connect-grid > a > svg.cbr_svg {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* =========================================================
   Select Profile mobile — corrected final alignment (2026-07-29 v9)
   The English labels are explicit <strong> grid items, matching TC.
   ========================================================= */
@media (max-width: 767px) {
  body .bnr-connect .bnr-container {
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  body .bnr-connect-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .bnr-connect-grid > a,
  body .bnr-connect-grid > a.externalUrl {
    position: relative !important;
    width: 100% !important;
    min-height: 126px !important;
    height: 126px !important;
    max-height: 126px !important;
    padding: 16px 20px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 90px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-align: left !important;
    border-radius: 8px !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
  }

  body .bnr-connect-grid > a > strong,
  body .bnr-connect-grid > a.externalUrl > strong {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: inherit !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  body .bnr-connect-grid > a > span.cbr,
  body .bnr-connect-grid > a.externalUrl > span.cbr {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .bnr-connect-grid > a > span.cbr > svg,
  body .bnr-connect-grid > a.externalUrl > span.cbr > svg,
  body .bnr-connect-grid > a > svg.cbr_svg {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }
}

/* =========================================================
   Homepage mobile final corrections — 2026-07-29
   1) Impact long value stays inside card
   2) Highlights shows one card per slide
   3) What We Do / Select Profile match Development Areas geometry
   ========================================================= */
@media (max-width: 767px) {
  /* Match the horizontal card width used by Development Areas. */
  body.bnr-index-page .bnr-what .bnr-container,
  body.bnr-index-page .bnr-connect .bnr-container,
  body.tc-home-page .bnr-what .bnr-container,
  body.tc-home-page .bnr-connect .bnr-container {
    width: calc(100% - 64px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Shared compact card geometry. Flex is used deliberately to override
     legacy grid rows/absolute positioning inside these two sections. */
  body.bnr-index-page .bnr-what-grid,
  body.bnr-index-page .bnr-connect-grid,
  body.tc-home-page .bnr-what-grid,
  body.tc-home-page .bnr-connect-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.bnr-index-page .bnr-what-item,
  body.bnr-index-page .bnr-connect-grid > a,
  body.bnr-index-page .bnr-connect-grid > a.externalUrl,
  body.tc-home-page .bnr-what-item,
  body.tc-home-page .bnr-connect-grid > a,
  body.tc-home-page .bnr-connect-grid > a.externalUrl {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  body.bnr-index-page .bnr-what-item > strong,
  body.bnr-index-page .bnr-connect-grid > a > strong,
  body.bnr-index-page .bnr-connect-grid > a.externalUrl > strong,
  body.tc-home-page .bnr-what-item > strong,
  body.tc-home-page .bnr-connect-grid > a > strong,
  body.tc-home-page .bnr-connect-grid > a.externalUrl > strong {
    position: static !important;
    inset: auto !important;
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    align-self: center !important;
    font-size: 1em !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
  }

  body.bnr-index-page .bnr-what-item > span,
  body.bnr-index-page .bnr-what-item .wwd,
  body.bnr-index-page .bnr-connect-grid > a > span.cbr,
  body.bnr-index-page .bnr-connect-grid > a.externalUrl > span.cbr,
  body.tc-home-page .bnr-what-item > span,
  body.tc-home-page .bnr-what-item .wwd,
  body.tc-home-page .bnr-connect-grid > a > span.cbr,
  body.tc-home-page .bnr-connect-grid > a.externalUrl > span.cbr {
    position: static !important;
    inset: auto !important;
    order: 2 !important;
    flex: 0 0 82px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    align-self: center !important;
  }

  body.bnr-index-page .bnr-what-item svg,
  body.bnr-index-page .bnr-connect-grid > a svg,
  body.tc-home-page .bnr-what-item svg,
  body.tc-home-page .bnr-connect-grid > a svg {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Long English metric must remain inside its card. */
  html[lang="en"] body.bnr-index-page .bnr-stat-card strong,
  html[lang="en"] body.bnr-index-page .bnr-stat-card strong .bnr-count,
  html[lang="en"] body.bnr-index-page .bnr-stat-card > strong > .bnr-count {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* Highlights: exactly one full-width card per mobile slide. */
  body.bnr-index-page .bnr-highlights .bnr-highlight-viewport,
  body.tc-home-page .bnr-highlights .bnr-highlight-viewport {
    overflow: hidden !important;
    width: 100% !important;
  }

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

  body.bnr-index-page .bnr-highlights .bnr-highlight-page,
  body.tc-home-page .bnr-highlights .bnr-highlight-page {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    display: block !important;
  }

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

/* =========================================================
   Homepage mobile verified corrections — 2026-07-29
   Highlights: one item per page.
   Select Profile: same card geometry as What We Do / Development Areas.
   ========================================================= */
@media (max-width: 767px) {
  body.bnr-index-page .bnr-connect .bnr-container {
    width: calc(100% - 64px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.bnr-index-page .bnr-connect-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.bnr-index-page .bnr-connect-grid > a,
  body.bnr-index-page .bnr-connect-grid > a.externalUrl {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 82px !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    width: 100% !important;
    height: 126px !important;
    min-height: 126px !important;
    max-height: 126px !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    column-gap: 14px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    text-align: left !important;
  }

  body.bnr-index-page .bnr-connect-grid > a > strong,
  body.bnr-index-page .bnr-connect-grid > a.externalUrl > strong {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    font-size: 16px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
  }

  body.bnr-index-page .bnr-connect-grid > a > span.cbr,
  body.bnr-index-page .bnr-connect-grid > a.externalUrl > span.cbr {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body.bnr-index-page .bnr-connect-grid > a > span.cbr > svg,
  body.bnr-index-page .bnr-connect-grid > a.externalUrl > span.cbr > svg,
  body.bnr-index-page .bnr-connect-grid > a > svg.cbr_svg {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    max-width: 82px !important;
    max-height: 82px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.bnr-index-page .bnr-highlights .bnr-highlight-viewport {
    width: 100% !important;
    overflow: hidden !important;
  }

  body.bnr-index-page .bnr-highlights .bnr-highlight-track {
    display: flex !important;
    width: auto !important;
    align-items: stretch !important;
  }

  body.bnr-index-page .bnr-highlights .bnr-highlight-page {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  body.bnr-index-page .bnr-highlights .bnr-highlight-page > .bnr-news-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* =========================================================
   Homepage mobile bottom navigation flow fix (2026-07-30)
   Keep the Back to Top control floating without reserving
   document-flow space between Get Involved and the footer.
   ========================================================= */
@media screen and (max-width: 767px) {
  body.bnr-index-page .btmNav.myFL.myflex.flexRight,
  body.bnr-index-page .btmNav.myFL.myflex.flexRight.active {
    position: fixed !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    top: auto !important;
    display: flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    z-index: 60 !important;
  }

  body.bnr-index-page .btmNav.myFL.myflex.flexRight > * {
    margin: 0 !important;
  }

  body.bnr-index-page .pageBottom {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.bnr-index-page .footerArea,
  body.bnr-index-page #footer {
    clear: both !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   Homepage responsive hero banner artwork (2026-07-30)
   Desktop/tablet retain the approved landscape banner.
   Mobile uses a separately cropped portrait asset to avoid
   unfavourable cover cropping of the Victoria Harbour image.
   ========================================================= */
@media screen and (max-width: 767px) {
  body.bnr-index-page .bnr-hero-slide {
    background-image: url("../images/banner/hero_hongkong_01_mobile.jpg") !important;
    background-position: center center !important;
    background-size: cover !important;
  }
}

/* =========================================================
   Homepage mobile Get Involved button side spacing (2026-07-30)
   Keep the three CTA buttons away from the viewport edges.
   Tablet and desktop layouts remain unchanged.
   ========================================================= */
@media screen and (max-width: 767px) {
  body.bnr-index-page .bnr-cta .bnr-subscribe-linkwrap,
  body.bnr-index-page .bnr-cta .bnr-cta-links {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.bnr-index-page .bnr-cta .bnr-subscribe-btn,
  body.bnr-index-page .bnr-cta .bnr-cta-links a {
    width: calc(100% - 48px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   Homepage mobile slider final correction — 2026-07-30
   Impact: static all-items view, no slider indicator.
   Highlights / What's Happening: one item per mobile page.
   ========================================================= */
@media screen and (max-width: 767px) {
  /* Impact at a Glance is not a mobile carousel. */
  body.bnr-index-page .bnr-impact .home-content-slider-control,
  body.tc-home-page .bnr-impact .home-content-slider-control,
  body.bnr-index-page .bnr-impact .bnr-slider-nav,
  body.tc-home-page .bnr-impact .bnr-slider-nav,
  body.bnr-index-page .bnr-impact .bnr-slider-lines,
  body.tc-home-page .bnr-impact .bnr-slider-lines {
    display: none !important;
  }

  /* Highlights: one page/card at a time. */
  body.bnr-index-page .bnr-highlights .bnr-highlight-viewport,
  body.tc-home-page .bnr-highlights .bnr-highlight-viewport {
    width: 100% !important;
    overflow: hidden !important;
  }

  body.bnr-index-page .bnr-highlights .bnr-highlight-track,
  body.tc-home-page .bnr-highlights .bnr-highlight-track {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    transition: transform .35s ease !important;
    will-change: transform;
  }

  body.bnr-index-page .bnr-highlights .bnr-highlight-page,
  body.tc-home-page .bnr-highlights .bnr-highlight-page {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

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

  /* What's Happening: one card per viewport with reliable native scrolling. */
  body.bnr-index-page .bnr-happening-no-photos .bnr-event-grid,
  body.tc-home-page .bnr-happening-no-photos .bnr-event-grid {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  body.bnr-index-page .bnr-happening-no-photos .bnr-event-grid > article,
  body.tc-home-page .bnr-happening-no-photos .bnr-event-grid > article {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   Homepage Get Involved CTA alignment — 2026-08-03
   Keep Subscribe and the related action links on one row on
   desktop/tablet. Mobile retains the approved stacked layout.
   ========================================================= */
body.bnr-index-page .bnr-cta .bnr-cta-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 14px !important;
  width: 100% !important;
}

body.bnr-index-page .bnr-cta .bnr-cta-actions .bnr-subscribe-linkwrap {
  width: auto !important;
  flex: 0 0 auto !important;
}

body.bnr-index-page .bnr-cta .bnr-cta-actions .bnr-cta-links {
  margin: 0 !important;
  flex-wrap: nowrap !important;
}

@media screen and (max-width: 767px) {
  body.bnr-index-page .bnr-cta .bnr-cta-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }

  body.bnr-index-page .bnr-cta .bnr-cta-actions .bnr-subscribe-linkwrap,
  body.bnr-index-page .bnr-cta .bnr-cta-actions .bnr-cta-links {
    width: 100% !important;
  }
}

/* =========================================================
   Homepage bilingual mobile vertical alignment — 2026-08-03
   Keep Highlights and What's Happening READ MORE buttons at
   the same vertical position in the English and TC versions.
   ========================================================= */
@media screen and (max-width: 767px) {
  /* Reserve the same title area even when TC uses one line and EN uses two. */
  body.bnr-index-page .bnr-highlights .bnr-news-card h3,
  body.tc-home-page .bnr-highlights .bnr-news-card h3 {
    min-height: 50px !important;
    display: flex !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
  }

  /* Keep every event card at one common height regardless of language length. */
  body.bnr-index-page .bnr-happening-no-photos .what_happening_card,
  body.tc-home-page .bnr-happening-no-photos .what_happening_card {
    height: 240px !important;
    min-height: 240px !important;
    padding: 28px 28px 24px !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 {
    min-height: 52px !important;
    margin-top: 18px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
  }
}

/* Homepage What's Happening READ MORE: force left offset on tablet/mobile — 2026-08-03 */
@media screen and (max-width: 1280px) {
  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: relative !important; */
    left: -24px !important;
    margin-right: 20px !important;
  }
}

/* =========================================================
   Homepage section H2 unification — 2026-08-03
   Applies the same typography and bottom spacing whether the
   heading text is direct text or split across nested spans.
   ========================================================= */
.indexVersion .bnr-home .bnr-section h2,
.indexVersion .bnr-home .bnr-cta h2 {
  font-family: var(--site-heading-font-family) !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 25px !important;
}

.indexVersion .bnr-home .bnr-section h2 span,
.indexVersion .bnr-home .bnr-cta h2 span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Highlights previously used a separate 92px H2 margin. */
.indexVersion .bnr-home .bnr-highlights h2 {
  margin: 0 0 55px !important;
}

/* What's Happening stores the H2 inside a heading-row wrapper.
   Remove the wrapper's extra bottom margin so spacing is controlled
   by the unified H2 margin only. */
.indexVersion .bnr-home .bnr-happening .bnr-heading-row {
  margin-bottom: 0 !important;
}

/* Keep the approved smaller responsive headings on mobile. */
@media screen and (max-width: 767px) {
  .indexVersion .bnr-home .bnr-section h2,
  .indexVersion .bnr-home .bnr-cta h2 {
    font-size: clamp(1.75em, 7vw, 2.2em) !important;
    margin-bottom: 20px !important;
  }
}

/* =========================================================
   Android Firefox homepage mobile compatibility — 2026-08-04
   Keep Firefox aligned with the approved Android Chrome layout.
   Firefox-only; Chrome, Safari, tablet and desktop are unchanged.
   ========================================================= */
@supports (-moz-appearance: none) {
  @media screen and (max-width: 767px) {
    html {
      font-size: 16px !important;
      -moz-text-size-adjust: none !important;
      text-size-adjust: none !important;
    }

    body.bnr-index-page,
    body.tc-home-page {
      font-size: 15px !important;
      line-height: 1.4 !important;
      overflow-x: hidden !important;
    }

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

    body.bnr-index-page .bnr-container,
    body.tc-home-page .bnr-container {
      width: calc(100% - 56px) !important;
      max-width: none !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
    }

    /* 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: 610px !important;
      height: auto !important;
    }

    body.bnr-index-page .bnr-hero-content,
    body.tc-home-page .bnr-hero-content {
      padding-top: 62px !important;
      padding-bottom: 48px !important;
    }

    body.bnr-index-page .bnr-hero h1,
    body.tc-home-page .bnr-hero h1 {
      width: 100% !important;
      max-width: 100% !important;
      margin: 28px 0 30px !important;
      font-size: 38px !important;
      line-height: 1.08 !important;
      letter-spacing: 0 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
    }

    body.bnr-index-page .bnr-hero-tags,
    body.tc-home-page .bnr-hero-tags {
      width: 100% !important;
      gap: 14px !important;
    }

    body.bnr-index-page .bnr-hero-tags span,
    body.tc-home-page .bnr-hero-tags span {
      width: auto !important;
      max-width: 100% !important;
      padding: 12px 14px !important;
      font-size: 16px !important;
      line-height: 1.2 !important;
      white-space: normal !important;
    }

    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;
      box-sizing: border-box !important;
    }

    body.bnr-index-page .bnr-hero-actions a,
    body.tc-home-page .bnr-hero-actions a {
      padding: 16px 18px !important;
      font-size: 16px !important;
      line-height: 1.25 !important;
      white-space: normal !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    /* Shared section headings and spacing */
    body.bnr-index-page .bnr-section,
    body.tc-home-page .bnr-section {
      padding-top: 42px !important;
      padding-bottom: 42px !important;
      overflow: hidden !important;
    }

    body.bnr-index-page .bnr-section h2,
    body.tc-home-page .bnr-section h2,
    body.bnr-index-page .bnr-cta h2,
    body.tc-home-page .bnr-cta h2 {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 0 24px !important;
      font-size: 30px !important;
      line-height: 1.12 !important;
      text-align: center !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
    }

    /* What We Do / Development Areas / Select Profile */
    body.bnr-index-page .bnr-what-grid,
    body.tc-home-page .bnr-what-grid,
    body.bnr-index-page .bnr-development .dev-grid,
    body.tc-home-page .bnr-development .dev-grid,
    body.bnr-index-page .bnr-connect-grid,
    body.tc-home-page .bnr-connect-grid {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 12px !important;
      width: 100% !important;
    }

    body.bnr-index-page .bnr-what-item,
    body.tc-home-page .bnr-what-item,
    body.bnr-index-page .bnr-development .dev-item,
    body.tc-home-page .bnr-development .dev-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) 82px !important;
      align-items: center !important;
      gap: 14px !important;
      width: 100% !important;
      min-height: 112px !important;
      height: auto !important;
      padding: 15px 18px !important;
      box-sizing: border-box !important;
    }

    body.bnr-index-page .bnr-what-item strong,
    body.tc-home-page .bnr-what-item strong,
    body.bnr-index-page .bnr-development .dev-item span,
    body.tc-home-page .bnr-development .dev-item span,
    body.bnr-index-page .bnr-connect-grid > a strong,
    body.tc-home-page .bnr-connect-grid > a strong {
      width: 100% !important;
      font-size: 17px !important;
      line-height: 1.2 !important;
      white-space: normal !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
    }

    body.bnr-index-page .bnr-what-item svg,
    body.tc-home-page .bnr-what-item svg,
    body.bnr-index-page .bnr-development .dev-item svg,
    body.tc-home-page .bnr-development .dev-item svg,
    body.bnr-index-page .bnr-connect-grid > a svg,
    body.tc-home-page .bnr-connect-grid > a svg {
      width: 74px !important;
      height: 74px !important;
      max-width: 74px !important;
      max-height: 74px !important;
      justify-self: end !important;
    }

    /* Impact */
    body.bnr-index-page .bnr-impact-main,
    body.tc-home-page .bnr-impact-main,
    body.bnr-index-page .bnr-stat-panel,
    body.tc-home-page .bnr-stat-panel {
      width: 100% !important;
      grid-template-columns: minmax(0, 1fr) !important;
    }

    body.bnr-index-page .bnr-stat-card,
    body.tc-home-page .bnr-stat-card {
      grid-template-columns: 66px minmax(0, 1fr) !important;
      min-height: 132px !important;
      padding: 18px !important;
      gap: 12px 14px !important;
      overflow: hidden !important;
    }

    body.bnr-index-page .bnr-stat-icon,
    body.tc-home-page .bnr-stat-icon,
    body.bnr-index-page .bnr-stat-icon svg,
    body.tc-home-page .bnr-stat-icon svg {
      width: 60px !important;
      height: 60px !important;
      max-width: 60px !important;
      max-height: 60px !important;
    }

    body.bnr-index-page .bnr-stat-card strong,
    body.tc-home-page .bnr-stat-card strong,
    body.bnr-index-page .bnr-count,
    body.tc-home-page .bnr-count {
      font-size: 23px !important;
      line-height: 1.1 !important;
      white-space: normal !important;
    }

    body.bnr-index-page .bnr-stat-card p,
    body.tc-home-page .bnr-stat-card p {
      font-size: 15px !important;
      line-height: 1.25 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }

    body.bnr-index-page .bnr-ranking-card,
    body.tc-home-page .bnr-ranking-card {
      width: 100% !important;
      padding: 22px 18px !important;
      overflow: hidden !important;
    }

    body.bnr-index-page .bnr-ranking-card h3,
    body.tc-home-page .bnr-ranking-card h3 {
      font-size: 24px !important;
      line-height: 1.15 !important;
    }

    body.bnr-index-page .bnr-rank-row,
    body.tc-home-page .bnr-rank-row {
      grid-template-columns: minmax(0, 1fr) 54px !important;
      gap: 12px !important;
    }

    body.bnr-index-page .bnr-rank-row strong,
    body.tc-home-page .bnr-rank-row strong,
    body.bnr-index-page .bnr-rank-row span,
    body.tc-home-page .bnr-rank-row span {
      font-size: 15px !important;
      line-height: 1.22 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
    }

    body.bnr-index-page .bnr-rank-row .rank,
    body.tc-home-page .bnr-rank-row .rank,
    body.bnr-index-page .bnr-rank-row b,
    body.tc-home-page .bnr-rank-row b {
      font-size: 36px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
    }

    /* Highlights and What's Happening */
    body.bnr-index-page .bnr-news-card h3,
    body.tc-home-page .bnr-news-card h3,
    body.bnr-index-page .what_happening_card h3,
    body.tc-home-page .what_happening_card h3 {
      font-size: 17px !important;
      line-height: 1.28 !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
    }

    body.bnr-index-page .bnr-highlight-footer,
    body.tc-home-page .bnr-highlight-footer {
      width: 100% !important;
      margin: 0 !important;
      padding: 18px 12px !important;
      box-sizing: border-box !important;
    }

    body.bnr-index-page .what_happening_card,
    body.tc-home-page .what_happening_card {
      min-height: 220px !important;
      height: auto !important;
      padding: 24px 22px 20px !important;
    }

    body.bnr-index-page .bnr-happening-no-photos .what_happening_card time,
    body.tc-home-page .bnr-happening-no-photos .what_happening_card time,
    body.bnr-index-page .bnr-happening-no-photos .what_happening_card h3,
    body.tc-home-page .bnr-happening-no-photos .what_happening_card h3,
    body.bnr-index-page .bnr-happening-no-photos .what_happening_card p,
    body.tc-home-page .bnr-happening-no-photos .what_happening_card p {
      color: #fff !important;
    }

    body.bnr-index-page .bnr-see-all,
    body.tc-home-page .bnr-see-all,
    body.bnr-index-page .bnr-highlight-footer .bnr-read-more,
    body.tc-home-page .bnr-highlight-footer .bnr-read-more {
      max-width: 220px !important;
      min-height: 48px !important;
      padding: 12px 18px !important;
      font-size: 16px !important;
      line-height: 1.15 !important;
      box-sizing: border-box !important;
    }

    /* CTA and footer */
    body.bnr-index-page .bnr-cta,
    body.tc-home-page .bnr-cta {
      padding: 44px 0 !important;
    }

    body.bnr-index-page .bnr-cta .bnr-subscribe-btn,
    body.tc-home-page .bnr-cta .bnr-subscribe-btn,
    body.bnr-index-page .bnr-cta .bnr-cta-links a,
    body.tc-home-page .bnr-cta .bnr-cta-links a {
      width: 100% !important;
      max-width: 100% !important;
      min-height: 54px !important;
      padding: 13px 18px !important;
      font-size: 18px !important;
      line-height: 1.18 !important;
      white-space: normal !important;
      box-sizing: border-box !important;
    }

    body.bnr-index-page .footerArea,
    body.tc-home-page .footerArea,
    body.bnr-index-page .footerArea *,
    body.tc-home-page .footerArea * {
      overflow-wrap: normal !important;
      word-break: normal !important;
      hyphens: none !important;
    }

    body.bnr-index-page .footerArea,
    body.tc-home-page .footerArea {
      font-size: 14px !important;
      text-align: center !important;
    }
  }
}

/* Accessibility overrides for homepage contrast. Keep these last so earlier client patches cannot restore low-contrast colours. */
body.bnr-index-page .bnr-impact .bnr-stat-card p,
body.bnr-index-page .bnr-impact .bnr-stat-card .tc-impact-label,
body.bnr-index-page .bnr-impact .bnr-stat-card .tc-impact-text {
  color: #174b34 !important;
}

body.bnr-index-page .bnr-impact .bnr-stat-card:nth-child(1) p,
body.bnr-index-page .bnr-impact .tc-impact-card--1 .tc-impact-label,
body.bnr-index-page .bnr-impact .tc-impact-card--1 .tc-impact-text {
  color: #2f6cba !important;
}

body.bnr-index-page .bnr-impact .bnr-stat-card:nth-child(3) p,
body.bnr-index-page .bnr-impact .tc-impact-card--3 .tc-impact-label,
body.bnr-index-page .bnr-impact .tc-impact-card--3 .tc-impact-text {
  color: #006b5f !important;
}

body.bnr-index-page .bnr-impact .bnr-stat-card:nth-child(4) p,
body.bnr-index-page .bnr-impact .tc-impact-card--4 .tc-impact-label,
body.bnr-index-page .bnr-impact .tc-impact-card--4 .tc-impact-text {
  color: #936d08 !important;
}

body.bnr-index-page .bnr-happening-no-photos .what_happening_card time,
body.bnr-index-page .bnr-happening-no-photos .what_happening_card h3,
body.bnr-index-page .bnr-happening-no-photos .what_happening_card p {
  color: #fff !important;
}

/* Homepage cards must be reachable and have one high-contrast focus indicator. */
body.bnr-index-page .bnr-impact .bnr-stat-card:focus-visible,
body.tc-home-page .bnr-impact .bnr-stat-card:focus-visible,
body.sc-home-page .bnr-impact .bnr-stat-card:focus-visible,
body.bnr-index-page .bnr-highlights .bnr-news-card > a:focus-visible,
body.tc-home-page .bnr-highlights .bnr-news-card > a:focus-visible,
body.sc-home-page .bnr-highlights .bnr-news-card > a:focus-visible {
  outline: 3px solid #003f6b !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

body.bnr-index-page .bnr-happening-no-photos .bnr-event-grid article > a,
body.tc-home-page .bnr-happening-no-photos .bnr-event-grid article > a,
body.sc-home-page .bnr-happening-no-photos .bnr-event-grid article > a {
  display: block !important;
  height: 100% !important;
}

body.bnr-index-page .bnr-happening-no-photos .bnr-event-grid article > a:focus-visible,
body.tc-home-page .bnr-happening-no-photos .bnr-event-grid article > a:focus-visible,
body.sc-home-page .bnr-happening-no-photos .bnr-event-grid article > a:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 3px #003f6b !important;
}

/* Hero booklet is on a dark image background and uses the approved yellow frame. */
body.bnr-index-page .bnr-hero-actions > a:focus-visible,
body.tc-home-page .bnr-hero-actions > a:focus-visible,
body.sc-home-page .bnr-hero-actions > a:focus-visible {
  outline: 3px solid #ffbf47 !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Pale green ranking panel: use dark text colours with at least 3:1 contrast. */
body.bnr-index-page .bnr-ranking-card h3,
body.tc-home-page .bnr-ranking-card h3,
body.sc-home-page .bnr-ranking-card h3 { color: #075c70 !important; }
body.bnr-index-page .bnr-rank-row strong,
body.bnr-index-page .bnr-rank-row .rank,
body.bnr-index-page .bnr-rank-row b,
body.tc-home-page .bnr-rank-row strong,
body.tc-home-page .bnr-rank-row .rank,
body.tc-home-page .bnr-rank-row b,
body.sc-home-page .bnr-rank-row strong,
body.sc-home-page .bnr-rank-row .rank,
body.sc-home-page .bnr-rank-row b { color: #276f3a !important; }
body.bnr-index-page .bnr-rank-row span,
body.tc-home-page .bnr-rank-row span,
body.sc-home-page .bnr-rank-row span { color: #4d4d4d !important; }


/* Use the same complete outer keyboard-focus frame on every homepage carousel arrow. */
body .bnr-impact .home-content-slider-control > button:focus,
body .bnr-impact .home-content-slider-control > button:focus-visible,
body .bnr-highlights .home-content-slider-control > button:focus,
body .bnr-highlights .home-content-slider-control > button:focus-visible,
body .bnr-happening .home-content-slider-control > button:focus,
body .bnr-happening .home-content-slider-control > button:focus-visible {
  outline: 3px solid #003f6b !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Keep the Impact slider wrapper open so the arrow's outer focus frame is not cut off.
   The nested stat viewport keeps its own overflow clipping for the sliding cards. */
body .bnr-impact .bnr-stat-slider {
  overflow: visible !important;
}