/* =========================================================
   Southern Steel Berhad - Frontend custom styles
   ========================================================= */
/* =========================================================
   GENERAL
   Base font, and footer pinned to the page bottom.
   ========================================================= */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
.main-content, .main-wrapper, #app {
    flex: 1;
}
.footer {
    margin-top: auto;
}
/* =========================================================
   OUTLINE WHEN CLICK DISABLED
   Removes the focus outline after a mouse click.
   ========================================================= */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* =========================================================
   CAROUSEL / HEADER BANNER            (GWK 8-7-2026)
   Home / page header banner slider sizing.
   ========================================================= */
#carousel-header {
    width: 100%;
    margin: 0;
    padding: 0;
}
#carousel-header .carousel-inner, #carousel-header .item {
    width: 100%;
    height: auto !important;
    margin: 0;
    padding: 0;
}
#carousel-header .carousel-inner.height-200, #carousel-header .item.height-200 {
    height: auto !important;
}
#carousel-header .item img, #carousel-header .header-banner-img {
    width: 100%;
    aspect-ratio: 7 / 1;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.fr-navbar {
    position: relative;
    z-index: 10050;
}
#carousel-header .carousel-control, #home-carousel-header .carousel-control {
    z-index: 5;
}
/* =========================================================
   CAROUSEL CONTROLS FIX
   Prev / next arrow position and look.
   ========================================================= */
#carousel-header .carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 100%;
    background: none;
    opacity: 1;
    z-index: 5;
}
#carousel-header .carousel-control.left {
    left: 0;
}
#carousel-header .carousel-control.right {
    right: 0;
}
#carousel-header .carousel-control .fas {
    font-size: 28px;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Home banner 1400 x 400 (product page keeps 7:1) */
#carousel-header.home-banner .carousel-inner,
#carousel-header.home-banner .carousel-inner > .item {
    height: auto !important;
}
#carousel-header.home-banner .carousel-inner > .item > img,
#carousel-header.home-banner .item img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1400 / 400 !important;
    object-fit: cover;
    object-position: center center;
}
/* =========================================================
   CAROUSEL INDICATORS (round dots)
   Slider dots.
   ========================================================= */
#carousel-header .carousel-indicators {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    z-index: 6;
}
#carousel-header .carousel-indicators li {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: transparent;
    text-indent: 0;
    cursor: pointer;
    transition: all .25s ease;
}
#carousel-header .carousel-indicators li.active {
    width: 12px;
    height: 12px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
}
/* =========================================================
   NAVBAR (base)                       (GWK 3-7-2026)
   Base top menu bar (all screen sizes).
   ========================================================= */
.navbar {
    margin-bottom: 0 !important;
}
.fr-navbar {
    min-height: 76px;
}
.fr-navbar .fr-container-fluid {
    width: 100%;
    padding-left: 18px;
    padding-right: 10px;
}
.fr-navbar-header .fr-navbar-brand {
    height: 76px;
    padding: 0 10px;
    margin-left: 0;
    display: flex;
    align-items: center;
}
.fr-navbar-header .fr-navbar-brand img {
    max-height: 62px;
    max-width: 210px;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    transform: translateY(-3px);
}
.fr-navbar-nav > li {
    width: auto;
    min-width: 85px;
    margin-right: 0;
    flex: 0 0 auto;
}
.fr-navbar-nav > li > a {
    width: 100%;
    height: 70px;
    min-height: 70px;
    line-height: 1.15;
    font-size: 13px;
    font-weight: 400 !important;
    padding: 0 15px;
    white-space: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}
.fr-navbar-nav > li > a, .fr-navbar-nav > li > a:visited, .fr-navbar-nav > li > a:hover, .fr-navbar-nav > li > a:focus {
    color: #666 !important;
    text-decoration: none;
}
.navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li > a:hover, .navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li > a:focus, .navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li:hover > a, .navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li.open > a {
    width: 100%;
    height: 70px;
    background-color: #e7e7e7;
    color: #555;
    cursor: pointer;
}
.fr-navbar-nav .dropdown-toggle::after {
    display: none !important;
}
/* Tab Font Size */
.nav-tabs > li > a {
    font-size: 15px !important;
}
/* =========================================================
   DROPDOWN MENUS (base)
   Base look of the menu dropdowns.
   ========================================================= */
.dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
}
.dropdown-menu li {
    position: relative;
    margin: 0;
    padding: 0;
}
.dropdown-menu li a {
    min-height: 46px;
    line-height: normal;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 400 !important;
    transition: all .2s ease;
}
.dropdown-menu li:hover > a {
    background-color: #f5f7fa;
    color: #242376;
}
.dropdown-menu .dropdown-submenu:hover > a {
    background-color: #e7e7e7;
    color: #555;
}
/* =========================================================
   CALLOUT / SECTION HEADINGS (home)
   Section titles on the home page.
   ========================================================= */
.bg-callout {
    background: #242376;
}
.bg-callout h3 {
    margin: 0;
    color: #fff;
    line-height: 58px;
}
.products-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}
/* =========================================================
   GENERIC CALLOUT BUTTON (home)
   Standard button used on the home page.
   ========================================================= */
.btn-callout {
    background: #fff !important;
    color: #242376 !important;
    border: 1px solid #fff !important;
    padding: 12px 30px !important;
    font-size: 18px !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 15px;
}
.btn-callout:hover {
    background: #f5f5f5 !important;
    color: #242376 !important;
}
/* =========================================================
   PRODUCT CARDS (home)
   Product cards on the home page.
   ========================================================= */
#home-product-intro .product-link, #product-intro .product-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
#home-product-intro .product-link:hover, #home-product-intro .product-link:focus,
#product-intro .product-link:hover, #product-intro .product-link:focus {
    color: inherit;
    text-decoration: none;
}
/* Start added by CMH on 23-9-2026 */
/* Product card hover (home + /product page). */
.product-widget {
    transition: transform .25s ease, box-shadow .25s ease;
}
.product-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .16);
}
.product-widget .title {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease;
}
.product-widget .title-arrow {
    display: inline-flex;
    align-items: center;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition: width .25s ease, opacity .25s ease, transform .25s ease;
}
.product-widget:hover .title-arrow {
    width: 18px;
    opacity: 1;
    transform: translateX(0);
    margin-left: 6px;
}
.product-widget:hover .title {
    background-color: #17174d !important;
}
/* End added by CMH on 23-9-2026 */
/* =========================================================
   CAREER BANNER (home)
   "Join us" banner on the home page.
   ========================================================= */
.career-section {
    background-color: #2f3093 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.career-wrapper {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.career-wrapper h3 {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}
.career-wrapper .career-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 115px;
    min-height: 48px;
    margin: 0 !important;
    padding: 8px 20px !important;
    background-color: #ffffff !important;
    color: #242376 !important;
    border: 1px solid #ffffff !important;
    border-radius: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.career-wrapper .career-btn:hover, .career-wrapper .career-btn:focus {
    background-color: #f2f2f2 !important;
    color: #242376 !important;
    text-decoration: none !important;
}

/* =========================================================
   LATEST NEWS (home)
   Latest news block on the home page.
   ========================================================= */
#home-latest-news ul.list-inline {
    width: 100%;
    margin: 0;
    padding: 0;
}
#home-latest-news ul.list-inline > li {
    float: left;
}
#home-latest-news::after {
    content: "";
    display: table;
    clear: both;
}
#home-latest-news .text-uppercase {
    width: 100%;
    display: block;
    margin-bottom: 30px;
}
/* ---------- Read More button - premium fill-slide ---------- */
#home-latest-news .btn-callout {
    position: relative;
    display: inline-block;
    margin: 0 !important;
    padding: 14px 42px !important;
    background: #ffffff !important;
    color: #242376 !important;
    border: 2px solid #242376 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    text-decoration: none !important;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(36, 35, 118, 0.15);
    transition: color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
/* Navy fill that slides in from the left */
#home-latest-news .btn-callout::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #242376 0%, #3a39a0 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
    z-index: -1;
}
#home-latest-news .btn-callout:hover, #home-latest-news .btn-callout:focus {
    color: #ffffff !important;
    border-color: #242376 !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(36, 35, 118, 0.35);
}
#home-latest-news .btn-callout:hover::before, #home-latest-news .btn-callout:focus::before {
    transform: scaleX(1);
}
/* Arrow slides right on hover */
#home-latest-news .btn-callout::after {
    content: " \2192";
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.35s ease;
}
#home-latest-news .btn-callout:hover::after {
    transform: translateX(6px);
}
#home-latest-news h3, .front-end-title {
    font-weight: 500;
    color: #292f73;
}
/* =========================================================
   COMPANY DETAIL PAGE
   Company detail page layout.
   ========================================================= */
.company-details-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.product-list {
    display: flex;
    flex-wrap: wrap;
}
.product-list a {
    margin: 5px;
    margin-top: 20px;
}
/* =========================================================
   PRODUCT
   Product page basics.
   ========================================================= */
.product-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}
/* =========================================================
   PRODUCT LIST
   Product listing grid and filter.
   ========================================================= */
.product-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #242376;
}
.product-description {
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.4;
    color: #555;
    margin-bottom: 15px;
}
.product-card {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 3px 12px rgba(0,0,0,.05);
    transition: all .25s ease;
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.product-content .dl-horizontal {
    margin-bottom: 8px;
}
.product-content dt {
    font-size: 14px;
    width: 120px;
    font-weight: 700;
    color: #242376;
}
.product-content dd {
    font-size: 14px;
    margin-left: 140px;
    color: #555;
}
.product-content-wrapper {
    border-left: 1px solid #f0f0f0;
    padding-left: 35px;
}
.product-content dl:last-child {
    margin-bottom: 25px;
}
#product-detail-wrapper .gallery a {
    display: block;
    width: 100%;
}
#product-detail-wrapper .product-thumb-img-big {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
}
#product-detail-wrapper > .product-card > .row {
    display: flex;
    align-items: flex-start;
}
#product-detail-wrapper .gallery {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#product-detail-wrapper .gallery[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#product-detail-wrapper .gallery .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
#product-detail-wrapper .gallery figure {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
}
.product-type-select-pending {
    visibility: hidden;
}
#search-filter-wrapper .product-type-filter-wrapper {
    min-width: 380px;
    width: auto;
    margin-left: auto;
}
#search-filter-wrapper .product-type-filter-wrapper .select2-container {
    width: 100% !important;
}
/* =========================================================
   Product Search Bar
   Search box above the product list.
   ========================================================= */
#search-filter-wrapper {
    margin-top: 15px;
    margin-bottom: 25px;
}
#searchAjax {
    height: 48px;
    border: 1px solid #d9d9d9;
    border-right: 0;
    font-size: 15px;
    box-shadow: none;
}
#searchAjax:focus {
    border-color: #242376;
    box-shadow: 0 0 0 3px rgba(36,35,118,.08);
}
#search-val {
    height: 48px;
    width: 50px;
    background: #242376;
    border-color: #242376;
    color: #fff;
}
#search-val:hover {
    background: #1a1a60;
    border-color: #1a1a60;
}
/* =========================================================
   Product Type Select2
   Product type dropdown (Select2).
   ========================================================= */
.select2-container--bootstrap .select2-selection {
    height: 48px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
}
.select2-container--bootstrap .select2-results__option {
    font-size: 15px;
    line-height: 1.5;
    padding: 12px 15px;
}
.select2-container--bootstrap .select2-selection__rendered {
    line-height: 46px !important;
    font-size: 15px;
    color: #444;
}
.select2-container--bootstrap .select2-selection__arrow {
    height: 46px !important;
}
.select2-container--bootstrap.select2-container--focus .select2-selection {
    border-color: #242376 !important;
    box-shadow: 0 0 0 3px rgba(36,35,118,.08) !important;
}
/* Show all product types without scroll */
.select2-container--bootstrap .select2-results > .select2-results__options {
    max-height: none !important;
    overflow-y: visible !important;
}

/* =========================================================
   Page Loader
   Full-screen loader: spinner, success tick, countdown.
   ========================================================= */
.ssb-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}
.ssb-page-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* swallows every click on the page */
    cursor: wait;
}
.ssb-page-loader-box {
    /* Start added by CMH on 28-9-2026 - fixed width so the card
       does not jump in size when the text swaps */
    width: 340px;
    max-width: calc(100% - 32px);
    /* End added by CMH on 28-9-2026 */
    padding: 34px 40px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(36, 35, 118, .18);
}

/* Start added by CMH on 28-9-2026 */
/* ---------- Spinner (SVG ring that becomes a tick) ---------- */
.ssb-page-loader-spinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 18px;
}
.ssb-page-loader-spinner svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ssb-loader-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: ssbLoaderSpin .8s linear infinite;
}
.ssb-loader-track,
.ssb-loader-ring {
    fill: none;
    stroke-width: 4;
}
.ssb-loader-track {
    stroke: #e4e7f2;
    transition: fill .3s ease .45s, stroke .3s ease .45s;
}
.ssb-loader-ring {
    stroke: #242376;
    stroke-linecap: round;
    /* circumference of r=23 is ~145 - show a quarter arc */
    stroke-dasharray: 145;
    stroke-dashoffset: 108;
    transition: stroke-dashoffset .5s cubic-bezier(.65, 0, .35, 1),
                stroke .35s ease;
}
.ssb-loader-check {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36; /* hidden until success */
    transition: stroke-dashoffset .35s cubic-bezier(.65, 0, .35, 1) .65s;
}
.ssb-loader-cross {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-dasharray: 43;
    stroke-dashoffset: 43; /* hidden until fail - draws both strokes in turn */
    transition: stroke-dashoffset .4s cubic-bezier(.65, 0, .35, 1) .6s;
}
/* End added by CMH on 28-9-2026 */

@keyframes ssbLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}
.ssb-page-loader-text {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #242376;
}
.ssb-page-loader-sub {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #8a91a4;
}

/* Start added by CMH on 28-9-2026 */
/* ---------- Loading / success text (stacked, cross-fade) ---------- */
.ssb-loader-states {
    display: grid;
}
.ssb-loader-state {
    grid-area: 1 / 1;
    transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.ssb-loader-state--success {
    opacity: 0;
    transform: translateY(12px);
}

/* ---------- Redirect countdown (collapsed until success) ---------- */
.ssb-loader-redirect {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1) .8s,
                opacity .3s ease .9s;
}
.ssb-loader-redirect-inner {
    overflow: hidden;
    min-height: 0;
}
.ssb-loader-redirect-text {
    margin: 18px 0 10px;
    padding-top: 16px;
    border-top: 1px solid #eef0f6;
    font-size: 13px;
    color: #6b7280;
}
.ssb-loader-count {
    display: inline-block;
    min-width: 14px;
    font-weight: 700;
    color: #242376;
    font-variant-numeric: tabular-nums;
}
.ssb-loader-count.is-tick {
    animation: ssbCountTick .35s ease;
}
.ssb-loader-progress {
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 4px;
    background: #e4e7f2;
    overflow: hidden;
}
.ssb-loader-progress span {
    display: block;
    height: 100%;
    background: #1f9d55;
    border-radius: 4px;
    transform-origin: left center;
}
.ssb-loader-go {
    font-size: 12.5px;
    font-weight: 600;
    color: #242376;
    text-decoration: underline;
}
.ssb-loader-go:hover,
.ssb-loader-go:focus {
    color: #1f9d55;
}

/* ---------- SUCCESS STATE ---------- */
.ssb-page-loader.is-success.is-visible,
.ssb-page-loader.is-fail.is-visible {
    cursor: default;
}
/* stop spinning - JS froze the current angle inline */
.ssb-page-loader.is-success .ssb-loader-spin,
.ssb-page-loader.is-fail .ssb-loader-spin {
    animation: none;
}
/* 1) ring closes into a full green circle */
.ssb-page-loader.is-success .ssb-loader-ring {
    stroke-dashoffset: 0;
    stroke: #1f9d55;
}
/* 2) circle floods green behind the tick */
.ssb-page-loader.is-success .ssb-loader-track {
    fill: #1f9d55;
    stroke: #1f9d55;
}
/* 3) tick draws itself in */
.ssb-page-loader.is-success .ssb-loader-check {
    stroke-dashoffset: 0;
}
/* 4) small pop once the tick lands */
.ssb-page-loader.is-success .ssb-page-loader-spinner svg {
    animation: ssbLoaderPop .45s cubic-bezier(.34, 1.56, .64, 1) .6s both;
}
/* 5) old text lifts up and fades out */
.ssb-page-loader.is-success .ssb-loader-state--loading,
.ssb-page-loader.is-fail .ssb-loader-state--loading {
    opacity: 0;
    transform: translateY(-12px);
    transition-delay: .15s;
}
/* 6) new text rises in */
.ssb-page-loader.is-success .ssb-loader-state--success,
.ssb-page-loader.is-fail .ssb-loader-state--success {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .4s;
}
/* 7) countdown area opens */
.ssb-page-loader.is-success .ssb-loader-redirect {
    grid-template-rows: 1fr;
    opacity: 1;
}
/* 8) progress bar drains across the countdown (duration set by JS) */
.ssb-page-loader.is-counting .ssb-loader-progress span {
    animation-name: ssbLoaderDrain;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* ---------- FAIL STATE ---------- */
/* 1) ring closes into a full red circle */
.ssb-page-loader.is-fail .ssb-loader-ring {
    stroke-dashoffset: 0;
    stroke: #e53935;
}
/* 2) circle floods red behind the cross */
.ssb-page-loader.is-fail .ssb-loader-track {
    fill: #e53935;
    stroke: #e53935;
}
/* 3) cross draws itself in (first stroke, then second) */
.ssb-page-loader.is-fail .ssb-loader-cross {
    stroke-dashoffset: 0;
}
/* 4) the whole card gives a short "no" shake */
.ssb-page-loader.is-fail .ssb-page-loader-box {
    animation: ssbLoaderShake .5s cubic-bezier(.36, .07, .19, .97) .75s both;
}
.ssb-page-loader.is-fail .ssb-loader-success-title {
    color: #c0392b;
}
/* 5) Try Again button area opens */
.ssb-loader-actions {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s cubic-bezier(.22, 1, .36, 1) .8s,
                opacity .3s ease .9s;
}
.ssb-loader-actions-inner {
    overflow: hidden;
    min-height: 0;
}
.ssb-page-loader.is-fail .ssb-loader-actions {
    grid-template-rows: 1fr;
    opacity: 1;
}
.ssb-loader-retry {
    margin-top: 20px;
    min-width: 120px;
    height: 38px;
    padding: 0 22px;
    background: #242376;
    border: 1px solid #242376;
    border-radius: 8px;
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.ssb-loader-retry:hover,
.ssb-loader-retry:focus {
    background: #191858;
    border-color: #191858;
    transform: translateY(-1px);
}
.ssb-loader-retry:focus-visible {
    outline: 3px solid rgba(36, 35, 118, .25);
    outline-offset: 2px;
}

/* used by JS while resetting the card - no animated "rewind" */
.ssb-page-loader.no-anim,
.ssb-page-loader.no-anim * {
    transition: none !important;
    animation-delay: 0s !important;
}

@keyframes ssbLoaderShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(2px); }
}
@keyframes ssbLoaderPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.14); }
    100% { transform: scale(1); }
}
@keyframes ssbLoaderDrain {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@keyframes ssbCountTick {
    0%   { transform: scale(1.4); color: #1f9d55; }
    100% { transform: scale(1);   color: #242376; }
}
/* End added by CMH on 28-9-2026 */

/* Lock the page behind the overlay */
body.ssb-loader-open {
    overflow: hidden;
}

/* =========================================================
   Error Overlay (matches .ssb-page-loader look & feel)
   Full-screen error popout (same look as the page loader).
   ========================================================= */
.ssb-error-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}
.ssb-error-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.ssb-error-box {
    max-width: 320px;
    padding: 32px 32px 26px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(36, 35, 118, .18);
}
.ssb-error-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fdecea;
    border: 1px solid #f8cfc9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ssb-error-icon i {
    font-size: 17px;
    color: #e53935;
}
.ssb-error-text {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: #242376;
}
.ssb-error-sub {
    margin: 0 0 20px;
    font-size: 10px;
    line-height: 1.5;
    color: #8a91a4;
}
.ssb-error-btn {
    min-width: 96px;
    height: 34px;
    padding: 0 18px;
    background: #242376;
    border: 1px solid #242376;
    border-radius: 7px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.ssb-error-btn:hover {
    background: #191858;
    border-color: #191858;
    transform: translateY(-1px);
}
/* Lock the page behind the overlay, same as the page loader */
body.ssb-error-open {
    overflow: hidden;
}


/* =========================================================
   Inline field validation states
   Red / green field states on forms.
   ========================================================= */
.form-control.is-invalid,
.file-upload.is-invalid {
    border-color: #e53935 !important;
    box-shadow: 0 0 0 3px rgba(229, 57, 53, .10) !important;
}
.invalid-feedback {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    color: #e53935;
}

/* =========================================================
   PORTFOLIO
   Portfolio tabs, cards and image popup.
   ========================================================= */
.portfolio-tab-content > .tab-pane.active, .portfolio-tab-content > .tab-pane.show.active {
    display: block !important;
    opacity: 1 !important;
}
.portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
    transition: transform .35s ease, box-shadow .35s ease;
}
.portfolio-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(41,47,115,.20);
}
.portfolio-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
}
.portfolio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.portfolio-image:hover img {
    transform: scale(1.05);
}
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.55);
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}
.portfolio-info {
    padding: 20px;
}
.portfolio-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.portfolio-content {
    font-size: 16px;
    color: #fff;
}
.btn-maximize {
    margin-top: 10px;
    color: #fff;
    background-color: #292f73;
    border: none;
}
.btn-maximize:hover, .btn-maximize:focus {
    background-color: #1f255e;
    color: #fff;
}
#portfolioModal.show .modal-dialog {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Premium Backdrop */
#portfolioModal {
    background: rgba(0,0,0,.55);
}

.modal {
z-index: 99999 !important;
}
 
.modal-backdrop {
z-index: 99998 !important;
}

#portfolioModal .modal-dialog {
    width: 95%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0 auto;
    opacity: 0;
    transform: scale(.96);
    transition: all .3s ease;
}
/* Premium Glass Card */
#portfolioModal .modal-content {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}
/* Image Area */
#portfolioModal .modal-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
/* Image */
#portfolioModal .modal-image {
    display: block;
    max-width: 75vw;
    max-height: 75vh;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.20);
    transition: opacity .3s ease, transform .3s ease;
}
.portfolio-image-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0;
}
/* Elegant Close Button */
.portfolio-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(5px);
    color: #fff;
    font-size: 14px;
    z-index: 9999;
    transition: all .25s ease;
}
.portfolio-close:hover {
    background: #292f73;
    color: #fff;
}
/* Portfolio Tab Animation */
.portfolio-tab-content {
    overflow: hidden;
}
/* Tab panel animation */
.portfolio-pane.active {
    animation: portfolioPaneFade .5s ease forwards;
}
/* Individual card animation */
.portfolio-pane.active .col-md-3 {
    opacity: 0;
    transform: translateY(20px);
    animation: portfolioCardIn .6s ease forwards;
}
/* Stagger effect */
.portfolio-pane.active .col-md-3:nth-child(1) {
    animation-delay: .05s;
}
.portfolio-pane.active .col-md-3:nth-child(2) {
    animation-delay: .10s;
}
.portfolio-pane.active .col-md-3:nth-child(3) {
    animation-delay: .15s;
}
.portfolio-pane.active .col-md-3:nth-child(4) {
    animation-delay: .20s;
}
.portfolio-pane.active .col-md-3:nth-child(5) {
    animation-delay: .25s;
}
.portfolio-pane.active .col-md-3:nth-child(6) {
    animation-delay: .30s;
}
.portfolio-pane.active .col-md-3:nth-child(7) {
    animation-delay: .35s;
}
.portfolio-pane.active .col-md-3:nth-child(8) {
    animation-delay: .40s;
}
@keyframes portfolioPaneFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes portfolioCardIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* =========================================================
   QUALITY CERTIFICATE
   Quality certificate page.
   ========================================================= */
.table-ssg th {
    color: #ffffff !important;
    background-color: #242376 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border-color: rgba(255,255, 255 ,0.25) !important;
}
table.table-ssg thead > tr {
    background-color: #242376 !important;
}
.table-ssg td, .table-ssg td strong {
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
/* =========================================================
   QUALITY CERTIFICATE GALLERY
   Certificate gallery, with phone auto-scroll row.
   ========================================================= */
.my-gallery .row {
    margin-left: -15px;
    /* GWK 10-6-2026 */
    margin-right: -15px;
    /* GWK 10-6-2026 */
}

.my-gallery .col-md-2, .my-gallery .col-sm-3, .my-gallery .col-6 {
    padding-left: 15px;
    /* GWK 10-6-2026 */
    padding-right: 15px;
    /* GWK 10-6-2026 */
    margin-bottom: 15px;
}

.my-gallery img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: default;
}

.my-gallery img:focus,
.my-gallery img:active,
.my-gallery img:hover {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

#quality-certificate {
    padding-top: 25px;
}
.my-gallery img.width-100-percent {
    display: block;
    height: 120px;
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}

/* Start added by CMH on 23-9-2026 */
/* Certificates: mobile shows one swipeable, auto-scrolling row instead
   of the wrapping grid (Our Certifications + Product Standards). Moved
   by JS using transform, not native scroll, so auto-scroll works on iOS. */
.cert-marquee-wrap {
    overflow: hidden;
    touch-action: pan-y;
    margin-top: 8px;
    /* breaks out of the Bootstrap .container's side padding so the
       strip reaches the true left/right screen edges */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.cert-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    will-change: transform;
}
.cert-marquee-item {
    flex: 0 0 auto;
    width: 110px;
    margin: 0 18px;
}
.cert-marquee-item img {
    width: 100%;
    height: auto;
    display: block;
}
/* End added by CMH on 23-9-2026 */

/* Start added by CMH on 23-9-2026 */
/* =========================================================
   QUALITY ACHIEVEMENT — mobile card view
   Quality achievement table; phones show cards.
   ========================================================= */
.quality-mobile-wrap {
    margin-top: 8px;
    margin-bottom: 32px;
}
.quality-mobile-section {
    background: #EDEFF7;
    border-radius: 18px;
    padding: 20px 16px 22px;
    margin-bottom: 24px;
}
.quality-mobile-section:last-child {
    margin-bottom: 0;
}
.quality-mobile-company {
    margin-bottom: 14px;
}
.quality-mobile-company-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8A91A4;
    margin-bottom: 4px;
}
.quality-mobile-company-name {
    font-size: 18px;
    font-weight: 800;
    color: #1E2138;
    line-height: 1.3;
}
.quality-mobile-carousel {
    display: flex;
    overflow: hidden;
    border-radius: 12px;
}
.quality-mobile-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #DCDFEA;
    border-radius: 12px;
    padding: 20px;
}
/* Arrow, counter, arrow — below the card, only when >1 card */
.quality-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
}
.quality-mobile-arrow {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #DCDFEA;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .10);
    cursor: pointer;
}
.quality-mobile-arrow:disabled {
    /* visibility, not display: none, so the counter doesn't shift */
    visibility: hidden;
}
.quality-mobile-counter {
    font-size: 12.5px;
    font-weight: 700;
    color: #8A91A4;
    letter-spacing: .02em;
}
.quality-mobile-counter [data-quality-counter-current] {
    color: #242376;
}
.quality-mobile-block {
    padding-top: 14px;
    border-top: 1px solid #E4E6ED;
}
.quality-mobile-block:first-child {
    padding-top: 0;
    border-top: 0;
}
.quality-mobile-block + .quality-mobile-block {
    margin-top: 14px;
}
.quality-mobile-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8A91A4;
    margin-bottom: 4px;
}
.quality-mobile-value {
    font-size: 14px;
    font-weight: 400;
    color: #1E2138;
    line-height: 1.55;
}
.quality-mobile-value--title {
    font-size: 16px;
    font-weight: 700;
    color: #242376;
}
.quality-mobile-list {
    display: flex;
    flex-direction: column;
}
.quality-mobile-list-item {
    padding: 10px 0;
    border-bottom: 1px solid #EEF0F5;
}
.quality-mobile-list-item:first-child {
    padding-top: 0;
}
.quality-mobile-list-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.quality-mobile-list-text {
    font-size: 14px;
    font-weight: 600;
    color: #1E2138;
    line-height: 1.4;
}
/* End added by CMH on 23-9-2026 */
/* Start added by CMH on 23-9-2026 */
/* =========================================================
   PRODUCT STANDARDS — mobile card view
   Product standards table; phones show cards.
   ========================================================= */
.product-mobile-wrap {
    margin-top: 8px;
    margin-bottom: 32px;
}
.product-mobile-section {
    background: #EDEFF7;
    border-radius: 18px;
    padding: 20px 16px 22px;
    margin-bottom: 24px;
}
.product-mobile-section:last-child {
    margin-bottom: 0;
}
.product-mobile-company {
    margin-bottom: 14px;
}
.product-mobile-company-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8A91A4;
    margin-bottom: 4px;
}
.product-mobile-company-name {
    font-size: 18px;
    font-weight: 800;
    color: #1E2138;
    line-height: 1.3;
}
.product-mobile-carousel {
    display: flex;
    overflow: hidden;
    border-radius: 12px;
}
.product-mobile-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #DCDFEA;
    border-radius: 12px;
    padding: 20px;
}
/* Arrow, counter, arrow — below the card */
.product-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
}
.product-mobile-arrow {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #DCDFEA;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .10);
    cursor: pointer;
}
.product-mobile-arrow:disabled {
    /* visibility, not display: none, so the counter doesn't shift */
    visibility: hidden;
}
.product-mobile-block {
    padding-top: 14px;
    border-top: 1px solid #E4E6ED;
}
.product-mobile-block:first-child {
    padding-top: 0;
    border-top: 0;
}
.product-mobile-block + .product-mobile-block {
    margin-top: 14px;
}
.product-mobile-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8A91A4;
    margin-bottom: 4px;
}
.product-mobile-value {
    font-size: 14px;
    font-weight: 400;
    color: #1E2138;
    line-height: 1.55;
}
.product-mobile-value--title {
    font-size: 16px;
    font-weight: 700;
    color: #242376;
}
.product-mobile-counter {
    font-size: 12.5px;
    font-weight: 700;
    color: #8A91A4;
    letter-spacing: .02em;
}
.product-mobile-counter [data-product-counter-current] {
    color: #242376;
}
/* End added by CMH on 23-9-2026 */
/* =========================================================
   SUSTAINABILITY PAGE
   Sustainability page text and tables.
   ========================================================= */
.description-content {
    margin-top: 20px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.description-content table {
    width: 100% !important;
    table-layout: fixed;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
.description-content td {
    word-break: break-word;
    max-width: 100%;
}
/* Start added by CMH on 23-9-2026 */
/* Images in rich-text content stack on their own line with the text
   below, instead of floating left with text wrapped beside them. */
.description-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    float: none;
    margin: 0 0 15px;
}
/* End added by CMH on 23-9-2026 */
.description-content iframe {
    max-width: 100% !important;
}

  .tab-pane { display: none !important; }
  .tab-pane.active { display: block !important; }

  /* CMH 29-9-2026: job descriptions (Careers > Current Vacancies) are left
     out of this lock so they show exactly what was typed in the CMS editor */
  .description-content:not(#career-wrapper .description-content), 
  .description-content:not(#career-wrapper .description-content) * { 
    font-size: 15px !important; 
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif !important;
  }

  .description-content b, .description-content strong { font-weight: bold !important; }
  .description-content i, .description-content em { font-style: italic !important; }

  .news-pdf-view {
    width: 150px;
    min-width: 150px;
    display: inline-block;
    vertical-align: top;
  }
  .news-pdf-view .text-word-break {
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
  }

.wyswyg-content {
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
}
/* =========================================================
   CAREER
   Careers page (vacancy list, descriptions).
   ========================================================= */
#career-wrapper > div:first-child {
    background: #f8f9fb;
    border: 1px solid #e5e7ef;
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
}
.job-positions-tabs .card-title, #job-positions-tabs-clone .card-title {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #242376;
}
.job-positions-tabs small, #job-positions-tabs-clone small {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}
.panel-ssg .card-header a, .panel-ssg .card-header a:hover, .panel-ssg .card-header a:focus, .panel-ssg .card-header a:active {
    text-decoration: none !important;
}
.panel-ssg .card-title {
    transition: transform .25s ease, color .25s ease;
}
.panel-ssg .card-header:hover .card-title {
    transform: translateY(-1px);
    color: #3b4ab8;
}
/* Start added by CMH on 18-9-2026 */
/* =========================================================
   YEAR ARCHIVE ACCORDION (General Meeting, Annual Reports,
   Quarterly Reports) — ledger-style redesign
   ========================================================= */
#accordion .card.panel-ssg {
    background: transparent;
    border: 1px solid rgba(36, 35, 118, 0);
    border-radius: 6px;
    box-shadow: none;
    border-top: 1px solid #E4E6ED;
    border-bottom: 1px solid #E4E6ED;
    transition: background-color .2s ease, border-color .2s ease;
}
#accordion .card.panel-ssg:hover {
    background-color: #FAFAFC;
    border-color: #242376;
}
#accordion .card-header {
    background: transparent;
    border: none;
    padding: 0;
}
#accordion .card-header a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 20px 24px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1E2138;
}
#accordion .card-header a:hover {
    color: #242376;
}
#accordion .card-header a::after {
    content: "\25BE";
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 16px;
    border: 1px solid #D9DCE6;
    border-radius: 50%;
    color: #6B7280;
    font-size: 12px;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
#accordion .card.panel-ssg:hover .card-header a::after {
    background-color: #242376;
    border-color: #242376;
    color: #ffffff;
}
#accordion .card.panel-ssg:has(.collapse.in) .card-header a::after {
    transform: rotate(180deg);
}
#accordion .card-body {
    padding: 4px 24px 28px;
}

#career-wrapper #accordion .panel-collapse.collapse.in {
    display: block;
}

#career-wrapper #accordion .card-header a .card-title {
    flex: 1;
    margin-left: 44px;
}

#career-wrapper #accordion .panel-collapse .card-body {
    background: #ffffff;
    border-radius: 6px;
    margin: 0 20px 16px;
    padding: 30px 35px;
}

#career-wrapper #accordion .panel-collapse .card-body .description-content {
    margin-top: 0;
    text-align: left;
}

/* =========================================================
   YEAR ARCHIVE — "Select Year" dropdown redesign
   Used on: General Meeting, Annual Reports, Quarterly Reports
   Position/scroll-cap behavior unchanged — visual only.
   ========================================================= */
#general-meeting-dropdown, #annual-report-dropdown, #announcement-dropdown, #product-type-selection, #jobFilter, #citiesFilter {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #242376;
    background-color: #ffffff;
    border: 1.5px solid #242376;
    border-radius: 6px;
    transition: background-color .2s ease, color .2s ease;
}
.dropdown.float-right {
    margin-bottom: 16px;
}
#general-meeting-dropdown:hover, #annual-report-dropdown:hover, #announcement-dropdown:hover, #product-type-selection:hover, #jobFilter:hover, #citiesFilter:hover,  #general-meeting-dropdown:focus, #annual-report-dropdown:focus, #announcement-dropdown:focus, #product-type-selection:focus, #jobFilter:focus, #citiesFilter:focus {
    background-color: #242376;
    color: #ffffff;
}
#general-meeting-dropdown + .dropdown-menu, #annual-report-dropdown + .dropdown-menu, #announcement-dropdown + .dropdown-menu, #product-type-selection + .dropdown-menu, #jobFilter + .dropdown-menu, #citiesFilter + .dropdown-menu {
    right: 0;
    left: auto !important;
    margin-top: 0 !important;
    min-width: 220px;
    padding: 8px 0;
    border: 1px solid #E4E6ED;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(30, 33, 56, 0.12);
    /* Animation setup */
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    pointer-events: none;
}
#general-meeting-dropdown + .dropdown-menu.show, #annual-report-dropdown + .dropdown-menu.show, #announcement-dropdown + .dropdown-menu.show, #product-type-selection + .dropdown-menu.show, #jobFilter + .dropdown-menu.show, #citiesFilter + .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
#general-meeting-dropdown + .dropdown-menu .dropdown-item, #annual-report-dropdown + .dropdown-menu .dropdown-item, #announcement-dropdown + .dropdown-menu .dropdown-item, #product-type-selection + .dropdown-menu .dropdown-item, #jobFilter + .dropdown-menu .dropdown-item, #citiesFilter + .dropdown-menu .dropdown-item {
    padding: 10px 20px;
    font-size: 15px;
    color: #1E2138;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
#general-meeting-dropdown + .dropdown-menu .dropdown-item:hover, #annual-report-dropdown + .dropdown-menu .dropdown-item:hover, #announcement-dropdown + .dropdown-menu .dropdown-item:hover, #product-type-selection + .dropdown-menu .dropdown-item:hover, #jobFilter + .dropdown-menu .dropdown-item:hover, #citiesFilter + .dropdown-menu .dropdown-item:hover {
    background-color: #F4F5F9;
    border-left-color: #242376;
    color: #242376;
}

#general-meeting-dropdown + .dropdown-menu,
#annual-report-dropdown + .dropdown-menu,
#announcement-dropdown + .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

/* Start added by CMH on 22-9-2026 */
#jobFilter, #citiesFilter {
    width: 100%;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 40px !important;
}
#jobFilter::after, #citiesFilter::after {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
/* End added by CMH on 22-9-2026 */

/* Start added by CMH on 22-9-2026, extended 23-9-2026 */
/* These dropdowns open on hover only, click does nothing. */
@media (min-width: 768px) {
  #jobFilter, #citiesFilter, #product-type-selection,
  #general-meeting-dropdown, #annual-report-dropdown, #announcement-dropdown {
    pointer-events: none;
  }
  .dropdown:has(#jobFilter):hover #jobFilter,
  .dropdown:has(#citiesFilter):hover #citiesFilter,
  .dropdown:has(#product-type-selection):hover #product-type-selection,
  .dropdown:has(#general-meeting-dropdown):hover #general-meeting-dropdown,
  .dropdown:has(#annual-report-dropdown):hover #annual-report-dropdown,
  .dropdown:has(#announcement-dropdown):hover #announcement-dropdown {
    background-color: #242376;
    color: #ffffff;
  }
  .dropdown:has(#jobFilter):hover .dropdown-menu,
  .dropdown:has(#citiesFilter):hover .dropdown-menu,
  .dropdown:has(#product-type-selection):hover .dropdown-menu,
  .dropdown:has(#general-meeting-dropdown):hover .dropdown-menu,
  .dropdown:has(#annual-report-dropdown):hover .dropdown-menu,
  .dropdown:has(#announcement-dropdown):hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* End added by CMH on 22-9-2026, extended 23-9-2026 */

#accordion {
    min-height: 320px;
    border-bottom: 1px solid #E4E6ED;
}
/* End added by CMH on 18-9-2026 */
/* Start added by CMH on 22-9-2026 */
/* Career page reuses #accordion's id; remove the shared min-height so
   it doesn't leave a blank gap under a short job list. */
#career-wrapper #accordion {
    min-height: 0;
}
/* End added by CMH on 22-9-2026 */
.career-filter, .cities-filter {
    visibility: hidden;
}
.select2-hidden-accessible {
    visibility: hidden !important;
}
.select2-container {
    visibility: visible !important;
}

/* =========================================================
   IR CONTACT
   Investor relations contact cards.
   ========================================================= */
#ir-contact-wrapper {
    max-width: 900px;
    margin: 25px auto 40px;
}

.ir-contact-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ir-contact-header {
    background: linear-gradient(135deg, #242376, #3b37b3);
    color: #ffffff;
    padding: 22px 30px;
    font-size: 24px;
    font-weight: 600;
}

.ir-contact-header i {
    margin-right: 8px;
}

.ir-contact-body {
    padding: 35px;
}

.ir-contact-intro {
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 25px;
}

.ir-company-name {
    color: #242376;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 18px;
}

.ir-address {
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 25px;
}

.ir-contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 15px;
}

.ir-label {
    width: 120px;
    font-weight: 600;
    color: #242376;
}

.ir-label i {
    width: 18px;
}

.ir-value {
    color: #555555;
}

.ir-value a {
    color: #242376;
    font-weight: 600;
    text-decoration: none;
}

.ir-value a:hover {
    text-decoration: underline;
}

/* =========================================================
   APPLY JOB
   Job application form and upload box.
   ========================================================= */
.apply-job-page {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #dfe3eb;
    box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 12px 30px rgba(36,35,118,.08);
    margin-top: 20px;
}
.apply-job-page .control-label {
    font-weight: 600;
    color: #242376;
}
.apply-job-page .form-control {
    border-radius: 8px;
    border: 1px solid #d9d9d9;
    box-shadow: none;
    min-height: 46px;
}
.apply-job-page .form-control:focus {
    border-color: #242376;
    box-shadow: 0 0 0 3px rgba(36,35,118,.10);
}
#position {
    background: #f4f6fb;
    color: #242376;
    font-weight: 600;
}
#message {
    min-height: 120px;
    resize: vertical;
}
.file-upload {
    position: relative;
    min-height: 120px;
    border: 2px dashed #c8cfdb;
    border-radius: 12px;
    background: #fafbff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all .25s ease;
}
.file-upload:hover {
    border-color: #242376;
    background: #f4f6fb;
}
.file-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-upload-text {
    font-size: 16px;
    color: #555;
    max-width: 100%;
    word-break: break-word;
}
.file-upload-icon {
    font-size: 36px;
    color: #242376;
    margin-top: 10px;
}
.file-upload-hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #8a93a5;
    letter-spacing: .2px;
}
.file-upload.has-file {
    border-style: solid;
    border-color: #242376;
    background: #f4f6fb;
}
.uploaded-file-icon {
    display: block;
    font-size: 40px;
    color: #dc3545;
    margin-bottom: 10px;
}
.uploaded-file-name {
    display: block;
    color: #242376;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
    margin-bottom: 4px;
}
.uploaded-file-status {
    display: block;
    color: #777;
    font-size: 12px;
}
#submitBtn {
    min-width: 180px;
    height: 48px;
    border-radius: 8px;
    background: #242376;
    border-color: #242376;
    font-size: 16px;
    font-weight: 600;
    transition: all .25s ease;
}
#submitBtn:hover {
    background: #1c1d66;
    border-color: #1c1d66;
    transform: translateY(-1px);
}
#apply-job-form {
    width: 100%;
    max-width: 900px;
    margin: 20px auto 40px;
}
/* White card + shadow */
#apply-job-form .form-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
/* Blue gradient header */
#apply-job-form .form-header {
    background: linear-gradient(135deg, #242376, #3b37b3);
    color: #ffffff;
    padding: 22px 30px;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
#apply-job-form .form-header i {
    margin-right: 6px;
}
/* Body */
#apply-job-form .form-body {
    padding: 35px;
}
/* Intro line */
#apply-job-form .apply-intro {
    margin: 0 0 20px;
    font-size: 14px;
    color: #6b7280;
}
/* Form fields */
#apply-job-form .form-group {
    margin-bottom: 1.5rem;
}
#apply-job-form .form-group label {
    display: block;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 8px;
}
#apply-job-form .form-control {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #d7dce4;
    box-shadow: none;
    transition: all 0.2s ease;
}
#apply-job-form textarea.form-control {
    height: auto;
    min-height: 120px;
    resize: vertical;
}
#apply-job-form .form-control:focus {
    border-color: #242376;
    box-shadow: 0 0 0 0.15rem rgba(36, 35, 118, 0.15);
}
/* Submit button */
#apply-job-form .btn-primary {
    background: #242376;
    border-color: #242376;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 600;
    min-width: 220px;
    height: auto;
    transition: all .25s ease;
}
#apply-job-form .btn-primary:hover {
    background: #191858;
    border-color: #191858;
    transform: translateY(-1px);
}
#apply-job-form .text-danger {
    color: #dc3545 !important;
}
/* Drag-over highlight (your JS toggles .dragover) */
#apply-job-form .file-upload.dragover {
    border-color: #242376;
    background: #eef0fb;
}

/* Start added by CMH on 25-9-2026 */

@media (max-width: 400px) {
    #apply-job-form .form-group,
    #contact-us-form .form-group,
    #data-privacy-form .form-group {
        overflow: hidden;
    }
    #apply-job-form .g-recaptcha,
    #contact-us-form .g-recaptcha,
    #data-privacy-form .g-recaptcha {
        transform: scale(0.68);
        transform-origin: 0 0;
        width: 207px; 
    }
}
/* End added by CMH on 25-9-2026 */

/* Apply Now */
/* ---------- Apply Now button - clean & simple ---------- */
.career-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 30px;
    background: #242376;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease;
}
.career-apply-btn:hover, .career-apply-btn:focus {
    background: #191858;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
/* =========================================================
   LOCATION PAGE
   Locations page cards and maps.
   ========================================================= */
.location-page {
    padding-bottom: 50px;
}
#company-detail-wrapper {
    margin-bottom: 30px;
}
.location-card {
    margin: 0 0 25px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.location-card:hover {
    transform: translateY(-4px);
    border-color: #d9ddf8;
    box-shadow: 0 12px 28px rgba(36,35,118,.12);
}
.location-card:hover .front-end-title {
    color: #1f255e;
}
/* Fix inner row */
.location-card .col-md-4 .row {
    margin: 0;
}
/* Image column */
.location-card .col-md-4 {
    padding: 12px;
}
/* Content column */
.location-card .col-md-8 {
    padding: 22px 28px;
}
/* Map image */
.location-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center center;
    display: block;
    border-radius: 8px;
    transition: transform .3s ease;
}
.location-card:hover img {
    transform: scale(1.02);
}
/* Company title */
.location-card .front-end-title {
    margin: 0 0 15px;
    font-size: 22px;
    font-weight: 600;
    color: #242376;
    line-height: 1.3;
}
/* Contact info */
.company-contact-info {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}
.company-contact-info strong {
    color: #242376;
    font-weight: 600;
}
/* Start added by CMH on 25-9-2026 */
/* Locations page now reuses the IR Contact card classes */
#company-detail-wrapper.location-ir-list {
    max-width: 900px;
    margin: 25px auto 40px;
}
.location-ir-card {
    margin-bottom: 25px;
}
.location-ir-card:last-child {
    margin-bottom: 0;
}
/* Header is an h3 (one heading per company) - reset heading defaults so
   it matches the IR header div exactly. */
.location-ir-header {
    margin: 0;
    line-height: 1.5;
}
.location-ir-body {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.location-ir-map {
    flex: 0 0 300px;
    display: block;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    overflow: hidden;
}
.location-ir-map img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center center;
}
.location-ir-info {
    flex: 1 1 auto;
    min-width: 0;
}
.location-ir-info .ir-label {
    flex-shrink: 0;
}
.location-ir-info .ir-value {
    min-width: 0;
    overflow-wrap: anywhere;
}
.location-ir-info .ir-contact-item:last-child {
    margin-bottom: 0;
}
/* Tablet and below: map sits above the details instead of beside them,
   so the details keep the full card width (same as the IR card). */
@media (max-width: 991.98px) {
    .location-ir-body {
        flex-direction: column;
        gap: 24px;
    }
    .location-ir-map {
        flex: none;
        width: 100%;
    }
}
@media (max-width: 767.98px) {
    .location-ir-body {
        gap: 20px;
    }
    .location-ir-map img {
        height: 180px;
    }
}
/* End added by CMH on 25-9-2026 */
.product-list a.btn-secondary {
    margin: 4px !important;
    display: inline-flex;
    align-items: center;
    padding: 6px 16px !important;
    background: #ffffff !important;
    color: #242376 !important;
    border: 1px solid #242376 !important;
    border-radius: 30px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all .25s ease;
}
.product-list a.btn-secondary:hover, .product-list a.btn-secondary:focus {
    background: #242376 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
.company-contact-info a:hover, .company-contact-info a:focus {
    color: #191858;
    border-bottom-color: #191858;
}
/* =========================================================
   Contact Us (Inquiry)
   Enquiry form.
   ========================================================= */
/* Country dropdown: restore scroll (global product-filter rule removes it) */
.select2-container--bootstrap .country-select2-dropdown .select2-results > .select2-results__options {
    max-height: 240px !important;
    overflow-y: auto !important;
}
#enquiry-inquiry-form {
    width: 100%;
    max-width: 900px;
    margin: 20px auto 40px;
}
/* White card + shadow */
#enquiry-inquiry-form .form-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
/* Blue gradient header */
#enquiry-inquiry-form .form-header {
    background: linear-gradient(135deg, #242376, #3b37b3);
    color: #ffffff;
    padding: 22px 30px;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
#enquiry-inquiry-form .form-header i {
    margin-right: 6px;
}
/* Body */
#enquiry-inquiry-form .form-body {
    padding: 35px;
}
/* Form fields */
#enquiry-inquiry-form .form-group {
    margin-bottom: 1.5rem;
}
#enquiry-inquiry-form .form-group label {
    display: block;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 8px;
}
#enquiry-inquiry-form .form-control {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #d7dce4;
    box-shadow: none;
    transition: all 0.2s ease;
}
#enquiry-inquiry-form textarea.form-control {
    height: auto;
    min-height: 180px;
    resize: vertical;
}
#enquiry-inquiry-form .form-control:focus {
    border-color: #242376;
    box-shadow: 0 0 0 0.15rem rgba(36, 35, 118, 0.15);
}

/* Country select2 */
#enquiry-inquiry-form .select2-container--bootstrap .select2-selection {
    border-radius: 8px !important;
}

#enquiry-inquiry-form .select2-container {
    width: 100% !important;
}
/* -----------------------------------------------------------
   COUNTRY DROPDOWN SCROLL FIX                    <Added by TYQ>
   The global rule for the product filter removes the scroll:
       .select2-container--bootstrap .select2-results > .select2-results__options {
           max-height: none !important; overflow-y: visible !important;
       }
   Because we render this dropdown INSIDE #enquiry-inquiry-form
   (via dropdownParent in JS), the #id selector below has higher
   specificity and re-adds the scroll + height limit. The product
   filter page is untouched.
   ----------------------------------------------------------- */
#enquiry-inquiry-form .select2-results > .select2-results__options {
    max-height: 240px !important;
    overflow-y: auto !important;
}
/* Submit button */
#enquiry-inquiry-form .btn-primary {
    background: #242376;
    border-color: #242376;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 600;
    min-width: 220px;
}
#enquiry-inquiry-form .btn-primary:hover {
    background: #191858;
    border-color: #191858;
}
#enquiry-inquiry-form .text-danger {
    color: #dc3545 !important;
}
/* Products checkbox grid */
#enquiry-inquiry-form .products-checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    margin-top: 6px;
}
#enquiry-inquiry-form .products-checkbox-group .checkbox {
    margin: 0;
}
/* =========================================================
   PREMIUM CUSTOM CHECKBOXES                       <Added by TYQ>
   Navy gradient fill + white tick, matching header/button.
   Applies to product checkboxes AND the consent checkbox.
   ========================================================= */
/* Label = flex row so box + text align nicely */
#enquiry-inquiry-form .products-checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    font-weight: 400;
    color: #555;
    cursor: pointer;
    border: 1px solid #e6ebf2;
    border-radius: 8px;
    background: #fafbff;
    transition: all .2s ease;
}
#enquiry-inquiry-form .products-checkbox-group label:hover {
    border-color: #c3c8ec;
    background: #f4f6ff;
}
/* Highlight the whole pill when its box is checked */
#enquiry-inquiry-form .products-checkbox-group label:has(input:checked) {
    color: #242376;
    border-color: #c3c8ec;
    background: #f4f6ff;
}
/* The custom box (product + consent) */
#enquiry-inquiry-form .products-checkbox-group input[type="checkbox"], #enquiry-inquiry-form .consent-box input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
    border: 2px solid #c8cfdb;
    border-radius: 6px;
    background: #ffffff;
    position: relative;
    cursor: pointer;
    transition: all .2s ease;
}
#enquiry-inquiry-form .products-checkbox-group input[type="checkbox"]:hover, #enquiry-inquiry-form .consent-box input[type="checkbox"]:hover {
    border-color: #242376;
}
/* Checked state - gradient fill */
#enquiry-inquiry-form .products-checkbox-group input[type="checkbox"]:checked, #enquiry-inquiry-form .consent-box input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #242376, #3b37b3);
    border-color: #242376;
}
/* White tick mark */
#enquiry-inquiry-form .products-checkbox-group input[type="checkbox"]:checked::after, #enquiry-inquiry-form .consent-box input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* Focus ring */
#enquiry-inquiry-form .products-checkbox-group input[type="checkbox"]:focus, #enquiry-inquiry-form .consent-box input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 35, 118, .15);
}
/* =========================================================
   CONSENT BLOCK                                   <Added by TYQ>
   Consent tick box and text under forms.
   ========================================================= */
#enquiry-inquiry-form .consent-box {
    padding: 16px 18px;
    background: #fafbff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
}
/* First line: checkbox + confirm text.
   align-items:flex-start + line-height:20px makes the 20px box
   sit exactly level with the first text line (no floating). */
#enquiry-inquiry-form .consent-box .consent-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    cursor: pointer;
}
#enquiry-inquiry-form .consent-box .consent-confirm span {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    /* match the 20px checkbox height */
    color: #343a40;
}
#enquiry-inquiry-form .consent-box .consent-confirm a {
    color: #242376;
    font-weight: 600;
    text-decoration: underline;
}
/* Consent paragraph - indent to line up under the text, not the box */
#enquiry-inquiry-form .consent-box .consent-text {
    margin: 0;
    padding-left: 30px;
    /* 20px box + 10px gap */
    font-size: 13px;
    line-height: 1.7;
    color: #6b7280;
}
/* =========================================================
	   DATA PRIVACY
   Data privacy page.
	========================================================= */
.privacy-intro {
    color: #555;
    line-height: 1.8;
    margin: 15px 0 10px;
}
#privacy-inquiry-form {
    width: 100%;
    max-width: 900px;
    margin: 20px auto 40px;
}
#privacy-inquiry-form .form-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
#privacy-inquiry-form .form-header {
    background: linear-gradient(135deg, #242376, #3b37b3);
    color: #ffffff;
    padding: 22px 30px;
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
#privacy-inquiry-form .form-header i {
    margin-right: 6px;
}
#privacy-inquiry-form .form-body {
    padding: 35px;
}
#privacy-inquiry-form .form-group {
    margin-bottom: 1.5rem;
}
#privacy-inquiry-form .form-group label {
    display: block;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 8px;
}
#privacy-inquiry-form .form-control {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #d7dce4;
    box-shadow: none;
    transition: all 0.2s ease;
}
#privacy-inquiry-form textarea.form-control {
    height: auto;
    min-height: 180px;
    resize: vertical;
}
#privacy-inquiry-form .form-control:focus {
    border-color: #242376;
    box-shadow: 0 0 0 0.15rem rgba(36, 35, 118, 0.15);
}
/* Select2 - match product filter look */
#privacy-inquiry-form .select2-container--bootstrap .select2-selection {
    border-radius: 8px !important;
}
#privacy-inquiry-form .select2-container {
    width: 100% !important;
}
#privacy-inquiry-form .btn-primary {
    background: #242376;
    border-color: #242376;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 600;
    min-width: 220px;
}
#privacy-inquiry-form .btn-primary:hover {
    background: #191858;
    border-color: #191858;
}
#privacy-inquiry-form .text-danger {
    color: #dc3545 !important;
}
.privacy-intro-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 900px;
    margin: 18px auto 24px;
    padding: 18px 22px;
    background: #f4f6ff;
    border: 1px solid #e6ebf2;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(36, 35, 118, .06);
}
.privacy-intro-card .privacy-intro-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #242376, #3b37b3);
    color: #ffffff;
    font-size: 18px;
}
.privacy-intro-card .privacy-intro-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: #4a5060;
}
.privacy-intro-card .privacy-intro-text a {
    color: #242376;
    font-weight: 600;
    text-decoration: underline;
}
.privacy-intro-card .privacy-intro-text a:hover {
    color: #191858;
}
.privacy-intro-card .privacy-intro-text strong {
    color: #242376;
}

/* =========================================================
   LOGIN PAGE
   Login form card.
   ========================================================= */
#ssb-login-form {
    width: 100%;
    max-width: 520px;
    margin: 40px auto 60px;
}

#ssb-login-form .login-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e6ebf2;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

#ssb-login-form .login-header {
    background: linear-gradient(135deg, #242376, #3b37b3);
    color: #ffffff;
    padding: 22px 30px;
    font-size: 24px;
    font-weight: 600;
}

#ssb-login-form .login-header i {
    margin-right: 8px;
}

#ssb-login-form .login-body {
    padding: 35px;
}

#ssb-login-form .login-intro {
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 25px;
}

#ssb-login-form .form-group {
    margin-bottom: 20px;
}

#ssb-login-form label {
    display: block;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 8px;
}

#ssb-login-form .form-control {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #d7dce4;
    box-shadow: none;
    transition: all 0.2s ease;
}

#ssb-login-form .form-control:focus {
    border-color: #242376;
    box-shadow: 0 0 0 0.15rem rgba(36, 35, 118, 0.15);
}

#ssb-login-form .login-remember {
    margin-bottom: 20px;
}

#ssb-login-form .login-recaptcha {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
}

#ssb-login-form .login-btn {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    background: #242376;
    border-color: #242376;
    font-size: 15px;
    font-weight: 600;
    transition: all .25s ease;
}

#ssb-login-form .login-btn:hover {
    background: #191858;
    border-color: #191858;
    transform: translateY(-1px);
}

/* =========================================================
   FOOTER TEXT (match original Bootstrap 3 look)
   Footer padding and text.
   ========================================================= */
.footer {
    padding-top: 25px;
    padding-bottom: 25px;
}
.footer p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #ffffff;
    text-align: left;
}
.footer p small {
    font-size: 15px;
}
.footer a {
    color: #ffffff;
    text-decoration: none;
}
.footer a:hover, .footer a:focus {
    color: #d7d9ff;
    text-decoration: underline;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    /* CMH 28-9-2026: spin moved from .ssb-page-loader-spinner to .ssb-loader-spin */
    .ssb-loader-spin {
        animation-duration: 2s;
    }
    .ssb-page-loader {
        transition: none;
    }
    .ssb-error-overlay {
        transition: none;
    }
    /* Start added by CMH on 28-9-2026 - success state appears instantly */
    .ssb-page-loader *,
    .ssb-page-loader .ssb-loader-state,
    .ssb-page-loader .ssb-loader-redirect {
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    .ssb-page-loader.is-success .ssb-page-loader-spinner svg,
    .ssb-page-loader.is-fail .ssb-page-loader-box,
    .ssb-loader-count.is-tick {
        animation: none;
    }
    /* End added by CMH on 28-9-2026 */
}


  /* =========================================================
     DESKTOP NAVBAR (min-width: 992px)   (GWK 3-7-2026)
     CMH 30-9-2026: was 768px. The menu markup is Bootstrap 4
     "navbar-expand-lg", which only lays the menu out in a row from
     992px; between 768 and 991 the menu stretched to ~2000px tall.
     Tablets 768-991 now get the phone (hamburger) menu.
     ========================================================= */
  @media (min-width: 992px) {
    .fr-navbar .fr-container-fluid {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .fr-navbar-header {
        float: none;
        flex: 0 0 auto;
    }
    .fr-navbar .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        padding-left: 0;
        padding-right: 0;
        border-top: 0;
        box-shadow: none;
    }
    .fr-navbar-nav.ml-auto {
        float: none !important;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        flex: 0 1 auto;
        margin-left: auto;
        margin-right: 0;
    }
    .fr-navbar-nav > li {
        position: relative;
        float: none;
    }
    /* First-level dropdown extends toward the left */
    .fr-navbar-nav > li > .dropdown-menu {
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        margin-top: 0 !important;
        width: max-content;
        min-width: 260px;
        max-width: 500px;
        padding: 8px 0;
        background-color: #ffffff;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        overflow: visible;
        /* Animation setup */
        display: block !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px) !important;
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
        pointer-events: none;
    }
    /* Open state (hover or .open/.show class) */
    .fr-navbar-nav > li:hover > .dropdown-menu, .fr-navbar-nav > li.open > .dropdown-menu, .fr-navbar-nav > li.show > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) !important;
        pointer-events: auto;
    }
    .fr-navbar-nav > li > .dropdown-menu > li {
        position: relative;
    }
    .fr-navbar-nav .dropdown-menu li a {
        min-height: 46px;
        display: flex;
        align-items: center;
        padding: 12px 18px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 400 !important;
        color: #555555;
        text-align: left;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    /* Nested dropdown opens toward the right */
    .fr-navbar-nav > li > .dropdown-menu > li > .dropdown-submenu {
        position: absolute;
        top: 0 !important;
        left: calc(100% - 1px) !important;
        right: auto !important;
        width: 260px;
        min-width: 260px;
        margin-left: 0;
        margin-right: 0;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
        z-index: 9999;
        /* Animation setup */
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateX(8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
        pointer-events: none;
    }
    .fr-navbar-nav > li > .dropdown-menu > li:hover > .dropdown-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
    }
    .fr-navbar-nav .dropdown-menu li:hover > a {
        background-color: #f5f7fa;
        color: #242376;
    }
}
  /* =========================================================
     TABLET NAVBAR (992px - 1199px)      (GWK 3-7-2026)
     CMH 30-9-2026: was 768px - 1199px (see DESKTOP NAVBAR note)
     ========================================================= */
  @media (max-width: 1199px) and (min-width: 992px) {
    .fr-navbar-nav > li {
        width: auto;
        min-width: 75px;
        flex-basis: auto;
    }
    .fr-navbar-nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
    .fr-navbar-header .fr-navbar-brand img {
        max-width: 195px;
    }
}

/* Start added by CMH on 30-9-2026 */
/* Desktop menu fits 992-1279px screens. */
@media (min-width: 992px) and (max-width: 1279.98px) {
    /* no minimum width at 992px, growing to the normal 85px at 1280px */
    .fr-navbar .fr-navbar-nav > li {
        min-width: clamp(0px, calc((100vw - 1180px) * 0.85), 85px);
    }
    /* space left/right of each item: 5px at 992px -> 15px at 1280px */
    .fr-navbar .fr-navbar-nav > li > a {
        padding-left: clamp(5px, calc(5px + (100vw - 992px) * 0.034), 15px);
        padding-right: clamp(5px, calc(5px + (100vw - 992px) * 0.034), 15px);
    }
    /* logo: 165px wide at 992px -> the normal 210px at 1280px */
    .fr-navbar-header .fr-navbar-brand img {
        max-width: clamp(165px, calc(165px + (100vw - 992px) * 0.156), 210px);
    }
}
/* End added by CMH on 30-9-2026 */

  /* Start added by CMH on 30-9-2026 */
  /* =========================================================
     NAVBAR - PHONE + SMALL TABLET (max-width: 991.98px)
     The same rules that were inside the phone block below (moved
     here unchanged, only the width limit is new) so tablets from
     768 to 991px get the phone hamburger menu too.
     ========================================================= */
  @media (max-width: 991.98px) {
      /* ---------- Navbar phone + small tablet ---------- */
      .fr-navbar {
          min-height: 76px;
      }
      .fr-navbar .fr-container-fluid {
          padding-left: 12px;
          padding-right: 12px;
      }
      .fr-navbar-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex: 1 1 100%;
      }
      .fr-navbar-header .fr-navbar-brand {
          height: 76px;
          padding: 0;
          margin-left: 10px;
          margin-right: 0;
          order: 1;
      }
      .fr-navbar-header .fr-navbar-brand img {
          max-height: 52px;
          max-width: 170px;
          transform: translateY(-2px);
      }
      .fr-navbar-toggler {
          order: 2;
          margin-top: 15px;
          margin-bottom: 20px;
          margin-left: auto;
      }
      .fr-navbar-toggler {
          transition: all .25s ease;
          border: 2px solid #292f73;
          border-radius: 8px;
          background: #ffffff;
      }
      .fr-navbar-toggler:hover, .fr-navbar-toggler:focus {
          background: rgba(41,47,115,.06);
      }
      .fr-navbar-toggler:not(.collapsed) {
          background: #292f73;
          border-color: #292f73;
          box-shadow: 0 4px 12px rgba(41,47,115,.20);
      }
      .fr-navbar-toggler:not(.collapsed) .navbar-toggler-icon {
          filter: brightness(0) invert(1);
      }
      .fr-navbar .navbar-collapse {
          width: 100%;
          padding-left: 0;
          padding-right: 0;
          margin-left: 0;
          margin-right: 0;
          border-top: 1px solid #e7e7e7;
          box-shadow: none;
      }
      .fr-navbar-nav.ml-auto {
          width: 100%;
          display: block;
          margin: 0;
      }
      .fr-navbar-nav > li {
          width: 100%;
          flex: none;
          margin-right: 0;
      }
      .fr-navbar-nav > li > a {
          width: 100%;
          height: auto;
          min-height: 44px;
          line-height: 1.3;
          justify-content: center;
          text-align: center;
          padding: 12px 22px;
          white-space: normal;
      }
      .navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li > a:hover, .navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li > a:focus, .navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li:hover > a, .navbar.navbar-expand-lg.navbar-light.bg-light .fr-navbar-nav > li.open > a {
          width: 100%;
          height: auto;
          min-height: 44px;
          background-color: #e7e7e7;
          color: #555;
      }
      .fr-navbar-nav .dropdown-menu {
          position: static;
          float: none;
          width: 100%;
          margin: 0;
          padding: 0;
          border: 0;
          box-shadow: none;
          margin-top: 0;
          min-width: 250px;
          /* Animation setup - both open AND close */
          display: block !important;
          overflow: hidden;
          max-height: 0;
          opacity: 0;
          transition: max-height 0.35s ease, opacity 0.3s ease;
      }
      /* Open state - slides down smoothly */
      .fr-navbar-nav > li.open > .dropdown-menu, .fr-navbar-nav > li.show > .dropdown-menu {
          max-height: 1000px;
          /* large enough for the full menu */
          opacity: 1;
      }
      .fr-navbar-nav .dropdown-menu li a {
          height: auto;
          line-height: 1.3;
          padding: 10px 34px;
          white-space: normal;
      }
      .fr-navbar-nav .dropdown-menu .dropdown-submenu {
          position: static !important;
          width: 100%;
          margin-left: 0;
          /* Animation setup - replaces display:none */
          display: block;
          overflow: hidden;
          max-height: 0;
          opacity: 0;
          transition: max-height 0.35s ease, opacity 0.3s ease;
      }
      .fr-navbar-nav .dropdown-menu .dropdown-submenu.mobile-open {
          max-height: 600px;
          /* large enough for the tallest submenu */
          opacity: 1;
      }
      .fr-navbar-nav .dropdown-menu .dropdown-submenu li a {
          width: calc(100% - 28px);
          margin-left: 28px;
          padding-left: 20px;
          text-align: left;
      }
  }

  /* The page also loads Bootstrap 3, which from 768px forces the
     menu open (display:block !important) and floats the items side
     by side. Undo that between 768 and 991 so the hamburger works
     the same as on phones. */
  @media (min-width: 768px) and (max-width: 991.98px) {
      .fr-navbar .navbar-collapse.collapse:not(.show):not(.in) {
          display: none !important;
      }
      .fr-navbar .fr-container-fluid {
          flex-wrap: wrap;
      }
      .fr-navbar-header {
          float: none;
      }
      /* Bootstrap 3 also moves the logo 15px left and drops the header's
         side margins from 768px - put back the phone spacing */
      .fr-navbar .fr-container-fluid > .fr-navbar-header {
          margin-left: -15px;
          margin-right: -15px;
          padding-top: 25px;       /* the old theme file uses 22px here for 768-991 */
      }
      .fr-navbar > .fr-container-fluid .fr-navbar-header .fr-navbar-brand {
          margin-left: 10px;
      }
      .fr-navbar-nav.ml-auto,
      .fr-navbar-nav > li {
          float: none !important;
      }
  }
  /* End added by CMH on 30-9-2026 */
  /* =========================================================
     MOBILE (max-width: 767.98px)
     Combined: navbar mobile + home page mobile
     ========================================================= */
@media (max-width: 767.98px) {
    /* CMH 30-9-2026: navbar rules moved to "NAVBAR - PHONE + SMALL TABLET" above */
    /* Tab Design */
    .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        /* Start added by CMH on 25-9-2026 */
        border-bottom: none;
        background-image: linear-gradient(#ddd, #ddd);
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: 100% 1px;
        background-attachment: local;
        /* End added by CMH on 25-9-2026 */
    }
    .nav-tabs > li {
        float: none;
        /* Start added by CMH on 25-9-2026 */
        display: block;
        flex: 0 0 auto;
        margin: 0;
        /* End added by CMH on 25-9-2026 */
    }
    .nav-tabs > li > a {
        white-space: nowrap;
    }
    /* Start added by CMH on 25-9-2026 */
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        background-color: #fff;
    }
    /* End added by CMH on 25-9-2026 */
/* Start added by CMH on 18-9-2026 */
    /* =========================================================
       BOARD COMMITTEES — MOBILE REDESIGN
       Simple full-width expand/collapse list below the tab bar.
       Desktop keeps Bootstrap's normal dropdown, untouched.
       ========================================================= */
    .board-committees-menu {
      position: static !important;
      float: none !important;
      display: none;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      border-top: 1px solid #E4E6ED;
      box-shadow: none;
      background: #ffffff;
    }

    .board-committees-menu.mobile-open {
      display: block;
    }

    .board-committees-menu li {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .board-committees-menu li a {
      display: block;
      padding: 14px 18px;
      font-size: 14px;
      color: #1E2138;
      border-bottom: 1px solid #E4E6ED;
      white-space: normal;
      word-wrap: break-word;
      -webkit-tap-highlight-color: transparent;
    }

    .board-committees-menu li a.active {
      background-color: #337ab7;
      color: #ffffff;
    }
    /* End added by CMH on 18-9-2026 */
    /* CMH 30-9-2026: navbar dropdown rules moved to "NAVBAR - PHONE + SMALL TABLET" above */
    /* Page Loader */
    .ssb-page-loader-box {
        max-width: 84%;
        padding: 26px 24px;
    }
    .ssb-page-loader-spinner {
        width: 38px;
        height: 38px;
        margin-bottom: 14px;
    }
    .ssb-page-loader-text {
        font-size: 15px;
    }
    .ssb-page-loader-sub {
        font-size: 12px;
    }
    /* ---------- Home: Product grid 2 per row ---------- */
    #home-product-intro {
        padding: 15px 0;
    }
    #home-product-intro .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    #home-product-intro .row-centered {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: -5px;
        margin-right: -5px;
    }
    #home-product-intro .product-column {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px;
    }
    #home-product-intro .product-widget {
        width: 100%;
        margin: 0;
    }
    #home-product-intro .product-widget .photo {
        width: 100%;
        height: 125px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #home-product-intro .product-widget .title {
        height: 50px !important;
        padding: 6px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    /* ---------- Home: Career banner stacks ---------- */
    .career-wrapper {
        flex-direction: column;
        gap: 12px;
        padding: 10px 0;
    }
    .career-wrapper h3 {
        font-size: 20px !important;
        text-align: center;
    }
    .career-wrapper .career-btn {
        min-width: 105px;
        min-height: 44px;
        font-size: 16px !important;
    }
    /* ---------- Home: Latest news stacks ---------- */
    #home-latest-news .row {
        display: block;
    }
    #home-latest-news .latest-news-content {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    #home-latest-news .btn-callout {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-left: 0 !important;
        padding: 12px 15px !important;
        font-size: 15px !important;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
        box-sizing: border-box;
    }
    #home-latest-news {
        display: block;
        margin-bottom: 0;
        padding-bottom: 30px;
    }
    #home-latest-news .col-12.text-center {
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 20px;
        margin-bottom: 0;
    }
    /* Company */
    .company-details-container .front-end-title {
        display: inline-block;
        min-width: 320px; /* roughly matches "Southern Steel Pipe Sdn Bhddd" at your current font-size/weight */
    }
    /* ---------- Product: Product grid 2 per row ---------- */
    #product-intro {
        padding: 15px 0;
    }
    #product-intro .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    #product-intro .row-centered {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: -5px;
        margin-right: -5px;
    }
    #product-intro .product-column {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 10px;
    }
    #product-intro .product-widget {
        width: 100%;
        margin: 0;
    }
    #product-intro .product-widget .photo {
        width: 100%;
        height: 125px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #product-intro .product-widget .title {
        height: 50px !important;
        padding: 6px 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
    /* ---------- Product List ---------- */
    .product-content-wrapper {
        border-left: 0;
        padding-left: 0;
        padding-top: 20px;
    }
    .product-content dt, .product-content dd {
        display: block;
        width: 100%;
        margin-left: 0;
    }
    .product-content dt {
        margin-bottom: 3px;
    }
    .product-content dd {
        margin-bottom: 12px;
    }
    .product-title {
        font-size: 18px;
    }
    #product-detail-wrapper .gallery {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #product-detail-wrapper .gallery .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #product-detail-wrapper .gallery figure {
        display: flex;
        width: 100%;
        margin: 0 auto;
        justify-content: center;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #product-detail-wrapper .gallery a {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    #product-detail-wrapper .product-thumb-img-big {
        width: 100%;
        height: 220px !important;
        object-fit: cover;
        object-position: center center;
    }
    /* Portfolio */
    .portfolio-tab-content .col-md-3 {
        width: 50%;
        float: left;
        padding-left: 5px;
        padding-right: 5px;
    }
    .portfolio-title {
        font-size: 16px;
    }
    #search-filter-wrapper > .col-md-4, #search-filter-wrapper > .col-md-8 {
        width: 100%;
    }
    #search-filter-wrapper > .col-md-8 {
        margin-top: 12px;
    }
    #search-filter-wrapper .form-group {
        margin-bottom: 0;
    }
    #search-filter-wrapper .product-type-filter-wrapper, #search-filter-wrapper .col-md-4.float-right {
        width: 100%;
        margin-top: 10px;
        padding-left: 0;
        padding-right: 0;
    }
    #search-filter-wrapper {
        margin-bottom: 20px;
    }
    #searchAjax, #search-val, .select2-container--bootstrap .select2-selection {
        height: 48px !important;
    }
    #search-filter-wrapper .input-group {
        width: 100%;
        display: table;
    }
    #search-filter-wrapper .input-group-btn {
        width: 1%;
        white-space: nowrap;
    }
    #searchAjax {
        width: 100% !important;
    }
    #search-val {
        width: 46px !important;
        min-width: 46px !important;
        padding: 0 !important;
    }
    .select2-container--bootstrap {
        width: 100% !important;
    }
    .select2-container--bootstrap .select2-selection {
        height: 48px !important;
        border-radius: 0 !important;
    }
    .select2-container--bootstrap .select2-selection__rendered {
        padding-left: 15px !important;
        padding-right: 35px !important;
        font-size: 15px;
    }
    #search-filter-wrapper .form-group.col-md-4.float-right {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* CONTACT US (INQUIRY) */
    #enquiry-inquiry-form .form-header {
        font-size: 20px;
        padding: 18px 20px;
    }
    #enquiry-inquiry-form .form-body {
        padding: 20px;
    }
    #enquiry-inquiry-form .products-checkbox-group {
        grid-template-columns: 1fr;
    }
    #enquiry-inquiry-form .consent-box .consent-text {
        padding-left: 0;
    }
    #enquiry-inquiry-form .btn-primary {
        width: 100%;
        min-width: auto;
    }
    #enquiry-inquiry-form .text-right {
        text-align: center !important;
    }
    /* LOCATION */
    .location-card .col-md-4, .location-card .col-md-8 {
        padding: 15px;
    }
    /* COMPANY DETAIL PAGE — product tags slightly bigger on mobile */
    .product-list a.btn-secondary {
        padding: 8px 18px !important;
        font-size: 12.5px !important;
    }
    .product-list {
        margin-top: 12px !important; /* <Added by TYQ> gap between title and pill(s) when stacked on mobile */
    }
    .location-card img {
        height: 200px;
    }
    .location-card .front-end-title {
        font-size: 20px;
    }
    .company-contact-info {
        font-size: 14px;
    }
    /* QUALITY ACHIEVEMENT */
    .table-ssg th {
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 400 !important;
    }
    .table-ssg td, .table-ssg td strong {
        color: #000000 !important;
        font-size: 8px !important;
        font-weight: 400 !important;
    }
    .table-ssg {
        table-layout: fixed;
        width: 100% !important;
    }
    .table-ssg th, .table-ssg td {
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal !important;
    }
    /* UPLOADED DESCRIPTION */
    .description-content {
        font-size: 12px;
    }
    .description-content {
        font-size: 12px;
        line-height: 1.8;
    }
    .description-content:not(#career-wrapper .description-content) p { /* CMH 29-9-2026: not on job descriptions */
        margin-bottom: 15px;
        line-height: 1.8 !important;
    }
    .description-content img {
        max-width: 100% !important;
        height: auto !important;
    }
    .description-content:not(#career-wrapper .description-content) p[style*="text-align: center"] span { /* CMH 29-9-2026: not on job descriptions */
        font-size: 26px !important;
        line-height: 1.3 !important;
    }
    /* Start added by CMH on 18-9-2026 */
    /* Fix <b>/<strong> being overridden by font-weight:300 (same as .description-content) */
    .wyswyg-content b, .wyswyg-content strong {
        font-weight: bold !important;
    }
    /* End added by CMH on 18-9-2026 */
    /* APPLY JOB */
    .apply-job-page {
        margin: 10px !important;
        padding: 15px !important;
        width: auto !important;
        max-width: none !important;
    }
    .file-upload {
        min-height: 100px;
    }
    .file-upload-text {
        font-size: 13px;
    }
    .file-upload-icon {
        font-size: 28px;
    }
    .file-upload-hint {
        font-size: 11px;
        margin-top: 4px;
    }
    .uploaded-file-icon {
        font-size: 28px;
    }
    .uploaded-file-name {
        font-size: 11px;
        line-height: 1.4;
    }
    .uploaded-file-status {
        font-size: 10px;
    }
    #apply-job-form {
        padding: 0 15px;
    }
    #apply-job-form .form-header {
        font-size: 20px;
        padding: 18px 20px;
    }
    #apply-job-form .form-body {
        padding: 20px;
    }
    #apply-job-form .btn-primary {
        width: 100%;
        min-width: auto;
    }
    #apply-job-form .text-right {
        text-align: center !important;
    }
    /* Career - Apply Now  */
    .career-apply-btn {
        width: 80%;
        justify-content: center;
    }
    /* ---------- Apply Job: full-width submit on mobile ---------- */
    .apply-job-page #submitBtn {
        width: 100%;
        min-width: auto;
    }
    .apply-job-page .col-12.text-right {
        text-align: center !important;
    }
    /* Data Privacy */
    #privacy-inquiry-form .form-header {
        font-size: 20px;
        padding: 18px 20px;
    }
    #privacy-inquiry-form .form-body {
        padding: 20px;
    }
    #privacy-inquiry-form .btn-primary {
        width: 100%;
        min-width: auto;
    }
    #privacy-inquiry-form .text-right {
        text-align: center !important;
    }
    .privacy-intro-card {
        padding: 14px 16px;
        gap: 10px;
    }
    .privacy-intro-card .privacy-intro-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .privacy-intro-card .privacy-intro-text {
        font-size: 13px;
    }
    .privacy-intro {
        max-width: 900px;
        margin: 6px auto 22px;
        color: #555;
        font-size: 15px;
        line-height: 1.8;
    }
    .privacy-intro a {
        color: #242376;
        font-weight: 600;
        text-decoration: underline;
    }
    .privacy-intro a:hover {
        color: #191858;
    }
    .privacy-intro strong {
        color: #242376;
        font-weight: 600;
    }

    /* IR Contact */
    .ir-contact-header {
        font-size: 20px;
        padding: 18px 20px;
    }

    .ir-contact-body {
        padding: 20px;
    }

    .ir-company-name {
        font-size: 20px;
    }

    .ir-contact-item {
        display: block;
    }

    .ir-label {
        display: block;
        width: 100%;
        margin-bottom: 4px;
    }

    /* Login */
    #ssb-login-form {
        padding: 0 15px;
        margin-top: 20px;
    }

    #ssb-login-form .login-header {
        font-size: 20px;
        padding: 18px 20px;
    }

    #ssb-login-form .login-body {
        padding: 20px;
    }

    #ssb-login-form .login-btn {
        width: 100%;
        min-width: auto;
    }

    /* Error Overlay */
    .ssb-error-box {
        max-width: 84%;
        padding: 26px 22px 22px;
    }
    .ssb-error-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 12px;
    }
    .ssb-error-icon i {
        font-size: 15px;
    }
    .ssb-error-text {
        font-size: 11px;
    }
    .ssb-error-sub {
        font-size: 10px;
    }
    .ssb-error-btn {
        min-width: 88px;
        height: 32px;
        font-size: 12.5px;
    }

    /* ---------- Footer ---------- */
    .footer {
        clear: both !important;
        margin-top: 0 !important;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .footer p {
        font-size: 13px;
        line-height: 1.6;
    }
    .footer p small {
        font-size: 12px;
    }
    .my-gallery .col-6 {
        /* width: 45%; */
        /* GWK 10-6-2026 */
        width: 40%;
        /* GWK 10-6-2026 */
    }
    .table-ssg th:first-child {
        white-space: nowrap;
        min-width: 90px;
    }
}

@media (max-width: 480px) {
    .my-gallery .col-6 {
        width: 50%;
    }
}

@media (max-width: 400px) {
    .g-recaptcha {
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* Start added by CMH on 18-9-2026 */
/* =========================================================
   PRODUCT TYPE SELECT2 - match "Select Year" button/dropdown style
   Scoped via dropdownCssClass so other Select2 instances sitewide
   (Contact Us, Apply Job, etc.) are unaffected.
   ========================================================= */
#product-type-selection + .select2-container--bootstrap .select2-selection {
    padding: 12px 24px !important;
    height: auto !important;
    font-size: 15px;
    font-weight: 600;
    color: #242376 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #242376 !important;
    border-radius: 6px !important;
}
#product-type-selection + .select2-container--bootstrap .select2-selection__rendered {
    padding: 0 !important;
    line-height: normal !important;
    color: #242376 !important;
}
.select2-dropdown.product-type-select-dropdown {
    border: 1px solid #E4E6ED;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(30, 33, 56, 0.12);
    overflow: hidden;
}
.select2-dropdown.product-type-select-dropdown .select2-results__option {
    padding: 10px 20px;
    font-size: 15px;
    color: #1E2138 !important;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.select2-dropdown.product-type-select-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: #F4F5F9 !important;
    border-left-color: #242376 !important;
    color: #242376 !important;
}
/* End added by CMH on 18-9-2026 */

/* Start added by CMH on 21-9-2026 */
@media (min-width: 768px) {
  .nav-tabs .board-committees-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    pointer-events: none;
  }
  .nav-tabs .board-committees-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* End added by CMH on 21-9-2026 */

/* Start added by CMH on 23-9-2026 */
/* Tab row scrolls sideways instead of wrapping (desktop only).
   Arrow buttons fade in/out when there's more to scroll. */
.sustain-tabs-arrow {
  display: none;
}
@media (min-width: 768px) {
  .sustain-tabs-wrap {
    display: flex;
    align-items: center;
  }
  .sustain-tabs-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sustain-tabs-scroll::-webkit-scrollbar {
    display: none;
  }
  /* Start added by CMH on 25-9-2026 */

  .sustain-tabs-scroll .nav-tabs {
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }
  /* End added by CMH on 25-9-2026 */
  .sustain-tabs-scroll .nav-tabs > li {
    float: none;
    flex: 0 0 auto;
  }
  .sustain-tabs-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #DCDFEA;
    border-radius: 50%;
    background: #fff;
    color: #242376;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .10);
    opacity: 0;
    transform: scale(.75);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .sustain-tabs-arrow[data-tabs-arrow="prev"] {
    margin-right: 10px;
  }
  .sustain-tabs-arrow[data-tabs-arrow="next"] {
    margin-left: 10px;
  }
  .sustain-tabs-arrow svg {
    width: 14px;
    height: 14px;
  }
  .sustain-tabs-arrow:hover {
    background: #242376;
    border-color: #242376;
    color: #fff;
  }
  .sustain-tabs-wrap.has-overflow .sustain-tabs-arrow:enabled {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
}
/* End added by CMH on 23-9-2026 */

/* Start added by CMH on 22-9-2026 */
@media (max-width: 767.98px) {
  /* =========================================================
     CAREER — Current Vacancies mobile layout
   Vacancy list on phones.
     ========================================================= */
  #career-wrapper .input-group {
    width: 100%;
    display: table;
  }
  #career-wrapper .input-group-btn {
    width: 1%;
    white-space: nowrap;
  }

  /* Stack Search/Positions/Locations full-width instead of side-by-side */
  #career-wrapper .form-horizontal.col-md-6 {
    margin-top: 12px;
  }
  #career-wrapper .form-horizontal .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
  }
  #career-wrapper .form-horizontal .form-group .col-md-5 {
    width: 100%;
    flex: 1 1 auto;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }

  /* Position/Location menu matches its button's width, not the shared 220px */
  #jobFilter + .dropdown-menu,
  #citiesFilter + .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: auto;
    min-width: 0 !important;
  }

  /* Let long option text wrap instead of overflowing */
  #jobFilter + .dropdown-menu .dropdown-item,
  #citiesFilter + .dropdown-menu .dropdown-item {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Only one of Position/Location dropdown open at a time (mobile only) */
  #career-wrapper .form-group:has(.career-position-filter .dropdown-menu.show) .career-city-filter .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #career-wrapper .form-group:has(.career-city-filter .dropdown-menu.show) .career-position-filter .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #career-wrapper .select2-container--bootstrap {
    width: 100% !important;
    max-width: 100%;
  }
  #career-wrapper .select2-container--bootstrap .select2-selection {
    overflow: hidden; /* CMH 22-9-2026: no min-width floor */
  }

  .col-md-12:has(#career-wrapper) {
    padding-left: 8px;
    padding-right: 8px;
  }

  .career-page-tab-content.padding-15 {
    padding: 8px;
  }
  #career-wrapper > div:first-child {
    padding: 12px;
  }

/* Left-align job title so it doesn't misalign with the chevron when it wraps */
  #career-wrapper #accordion .card-header a .card-title {
    text-align: left;
    margin-left: 0;
  }

  /* Start changed by CMH on 29-9-2026 - job description on phones */
  .container:has(#career-wrapper) {
    padding-left: 10px;
    padding-right: 10px;
  }
  .col-md-12:has(#career-wrapper) {
    padding-left: 0;
    padding-right: 0;
  }
  .career-page-tab-content.padding-15:has(#career-wrapper) {
    padding: 8px 0;
  }
  #career-wrapper > div:first-child {
    padding: 12px 10px;
  }
  #career-wrapper #accordion .panel-collapse .card-body {
    margin: 0 0 12px;
    padding: 16px 14px 16px 18px;   /* a little more on the left so list bullets never clip */
  }
  #career-wrapper #accordion .description-content {
    zoom: 0.88;
    line-height: 1.55;              /* only a default - the editor sets no line height */
  }
  #career-wrapper #accordion .description-content ul,
  #career-wrapper #accordion .description-content ol {
    padding-left: 1.25em;           /* pasted lists come with padding 0 - keep bullets inside the card */
  }
  /* End changed by CMH on 29-9-2026 */
}

/* End added by CMH on 22-9-2026 */

/* Start added by CMH on 25-9-2026 */
/* Career page "No Vacancy Found" text sits on center */
#error-ajax .row {
    margin-left: 0;
    margin-right: 0;
    justify-content: center;
}
/* End added by CMH on 25-9-2026 */

/* Start added by CMH on 25-9-2026 */
/* Our Certifications / Product Standards - desktop table redesign */
.quality-panel,
.product-panel {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(20, 23, 50, .06);
  overflow: hidden;
  margin-bottom: 24px;
}

.quality-panel-head,
.product-panel-head {
  background: #242376;
  color: #ffffff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quality-panel-name,
.product-panel-name {
  font-size: 16px;
  font-weight: 700;
}

.quality-panel-badge,
.product-panel-badge {
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, .16);
  padding: 5px 12px;
  border-radius: 999px;
  flex: none;
  margin-left: 16px;
  white-space: nowrap;
}

.quality-panel-table,
.product-panel-table {
  width: 100%;

  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  border: 1px solid #C7CCDA;

  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Start added by CMH on 25-9-2026 */
/* Column divider lines, painted ONCE as a background on the table
   itself rather than as a border/box-shadow on individual cells.*/
.quality-panel-table {
  background:
    linear-gradient(
      to right,
      transparent 0, transparent calc(34% - 1px),
      #C7CCDA calc(34% - 1px), #C7CCDA 34%,
      transparent 34%, transparent calc(58% - 1px),
      #C7CCDA calc(58% - 1px), #C7CCDA 58%,
      transparent 58%
    ),
    #ffffff;
}
.product-panel-table {
  background:
    linear-gradient(
      to right,
      transparent 0, transparent calc(58% - 1px),
      #C7CCDA calc(58% - 1px), #C7CCDA 58%,
      transparent 58%, transparent calc(83% - 1px),
      #C7CCDA calc(83% - 1px), #C7CCDA 83%,
      transparent 83%
    ),
    #ffffff;
}
/* End added by CMH on 25-9-2026 */

.quality-panel-table th,
.product-panel-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #8A91A4;
  padding: 12px 24px 10px;
  border-bottom: 1px solid #C7CCDA;
  /* No background here (was #ffffff) - left transparent on purpose so
     the table's own background (white + the gradient divider lines
     above) shows through the header row too, keeping the divider
     unbroken from the header all the way to the last row. */
}

.quality-panel-table td,
.product-panel-table td {
  padding: 14px 24px;
  vertical-align: top;
  border-top: 1px solid #C7CCDA;
  color: #1E2138;
  line-height: 1.55;
}

.quality-panel-table tr:first-child td,
.product-panel-table tr:first-child td {
  border-top: 0;
}

/* Lets a panel's table scroll sideways instead of squeezing/breaking
   its columns if it ever runs out of room - safety net for narrower
   desktop/laptop widths, not just a fixed 1200px design. */
.quality-panel-table-scroll,
.product-panel-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Laptop (~992-1199px): a little less breathing room than the full
   1200px+ desktop design, table itself is otherwise unchanged. */
@media (max-width: 1199px) {
  .quality-panel-head,
  .product-panel-head {
    padding: 16px 20px;
  }
  .quality-panel-table th,
  .product-panel-table th,
  .quality-panel-table td,
  .product-panel-table td {
    padding: 13px 20px;
  }
}

/* Tablet (768-991px, the narrow end of Bootstrap's d-md-block range -
   anything under 768px is the separate mobile carousel view and is
   untouched by any of this). Header wraps instead of overflowing on
   long company names, and cell padding/font tighten up a bit. */
@media (max-width: 991px) {
  .quality-panel-head,
  .product-panel-head {
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
  }
  .quality-panel-badge,
  .product-panel-badge {
    margin-left: 0;
  }
  .quality-panel-name,
  .product-panel-name {
    font-size: 15px;
  }
  .quality-panel-table th,
  .product-panel-table th {
    font-size: 11px;
    padding: 10px 16px 8px;
  }
  .quality-panel-table td,
  .product-panel-table td {
    padding: 11px 16px;
    font-size: 13px;
  }
}
/* End added by CMH on 25-9-2026 */

/* Start added by CMH on 30-9-2026 */
/* =========================================================
   CAREERS > Current Vacancies - Positions / Locations dropdowns
   Positions / Locations dropdowns fit the screen.
   ========================================================= */
#jobFilter + .dropdown-menu,
#citiesFilter + .dropdown-menu {
    max-height: min(360px, 60vh);
    overflow-y: auto;
    overscroll-behavior: contain;   /* scrolling the list does not scroll the page */
}

#career-wrapper > div:first-child {
    transition: min-height .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    #career-wrapper > div:first-child {
        transition: none;
    }
}
/* End added by CMH on 30-9-2026 */

/* Start added by CMH on 5-10-2026 */
/* Phone overflow fixes and responsive content images. */
@media (max-width: 767.98px) {
    /* Company detail: the title was forced to 320px wide, which is wider than
       the card on a 320px phone and made the whole page scroll sideways */
    .company-details-container .front-end-title {
        min-width: min(320px, 100%);
        max-width: 100%;
    }
    /* Careers / Apply Job: the row's -15px side margins stuck out past the
       10px container padding used on phones */
    .container:has(#career-wrapper) > .row {
        margin-left: 0;
        margin-right: 0;
    }
}
/* Pictures typed into the CMS editor (some carry a fixed width/height) must
   never be wider than the page, at any screen width */
.wyswyg-content img,
.description-content img,
.portfolio-content img,
.product-description img {
    max-width: 100% !important;
    height: auto !important;
}
/* End added by CMH on 5-10-2026 */

/* Start added by CMH on 6-10-2026 */
/* =========================================================
   PHONE TAB BAR - Sustainability sub pages + Portfolio
   (below 768px only; tablet / laptop / desktop unchanged)
   - tabs are rounded "chips" on one line: the open tab is solid
     navy, the others white with a navy label
   - no finger drag; the round arrows move it one tab per press
     (custom-ssb-frontend.js section 9)
   - the arrows float over the ends of the row on a soft white fade,
     and disappear when there is nothing more on that side, so the
     row never has an empty gap
   ========================================================= */
@media (max-width: 767.98px) {
  .sustain-tabs-wrap {
    position: relative;
    margin: 4px 0 18px;
  }
  .sustain-tabs-scroll {
    overflow: hidden;            /* no finger drag - arrows only */
  }
  .sustain-tabs-scroll .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 2px 0;
    overflow: visible;           /* the wrapper moves now, not the list */
    border: 0;
    background: none;            /* drop the old underline */
  }
  .sustain-tabs-scroll .nav-tabs > li {
    display: flex;
    flex: 0 0 auto;
    float: none;
    margin: 0;
    /* a long name never gets wider than the space between the arrows -
       it goes onto a 2nd line instead (120px = arrows + page margins) */
    max-width: min(calc(100vw - 120px), 420px);
  }
  .sustain-tabs-scroll .nav-tabs > li > a,
  .sustain-tabs-scroll .nav-tabs > li > a:hover,
  .sustain-tabs-scroll .nav-tabs > li > a:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid #DCDFEA;
    border-radius: 12px;
    background: #fff;
    color: #242376;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .sustain-tabs-scroll .nav-tabs > li.active > a,
  .sustain-tabs-scroll .nav-tabs > li.active > a:hover,
  .sustain-tabs-scroll .nav-tabs > li.active > a:focus {
    background: #242376;
    border-color: #242376;
    color: #fff;
    box-shadow: 0 4px 10px rgba(36, 35, 118, .22);
  }

  /* round arrows, floating over the ends of the row */
  .sustain-tabs-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    padding: 0;
    border: 1px solid #DCDFEA;
    border-radius: 50%;
    background: #fff;
    color: #242376;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .14);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .sustain-tabs-arrow[data-tabs-arrow="prev"] {
    left: 0;
  }
  .sustain-tabs-arrow[data-tabs-arrow="next"] {
    right: 0;
  }
  .sustain-tabs-arrow svg {
    width: 15px;
    height: 15px;
  }
  .sustain-tabs-wrap.has-overflow .sustain-tabs-arrow:enabled {
    visibility: visible;
    opacity: 1;
  }
  .sustain-tabs-arrow:active {
    background: #242376;
    border-color: #242376;
    color: #fff;
  }

  /* soft white fade behind each arrow, so a half-hidden tab fades out
     instead of being cut with a hard edge */
  .sustain-tabs-wrap::before,
  .sustain-tabs-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .sustain-tabs-wrap::before {
    left: 0;
    width: 44px;                 /* arrow (34px) + gap - the next tab starts here */
    background: linear-gradient(to right, #fff 80%, rgba(255, 255, 255, 0));
  }
  .sustain-tabs-wrap::after {
    right: 0;
    background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0));
  }
  .sustain-tabs-wrap.has-overflow:has([data-tabs-arrow="prev"]:enabled)::before,
  .sustain-tabs-wrap.has-overflow:has([data-tabs-arrow="next"]:enabled)::after {
    opacity: 1;
  }
}
/* End added by CMH on 6-10-2026 */

/* Start added by CMH on 6-10-2026 */
/* CMS login error popout. */
/* The red-cross popout can also show the 3 second countdown bar
   (used by the CMS login page). The bar is red to match. */
.ssb-page-loader.is-fail.ssb-fail-countdown .ssb-loader-redirect {
    grid-template-rows: 1fr;
    opacity: 1;
}
.ssb-page-loader.is-fail .ssb-loader-progress span {
    background: #e53935;
}
.ssb-page-loader.ssb-fail-countdown .ssb-loader-go {
    display: none;               /* the OK button does the same job */
}
.ssb-page-loader.ssb-fail-countdown .ssb-loader-retry {
    margin-top: 6px;
}
/* End added by CMH on 6-10-2026 */