/* ==========================================================================
   NRL DESIGN THEME — nrl-design.css
   Ported from the "NRL Corporate Website" design (styles.css) to the
   ASP.NET Razor Pages markup. Loaded AFTER main.css / styles.css / gigw.css
   so it wins the cascade. No dependency changes: Bootstrap/UX4G grid &
   utilities, Swiper, AOS, GLightbox, PureCounter, FontAwesome, Bootstrap
   Icons and jQuery are all the ones already shipped in wwwroot.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOCAL POPPINS (woff2) — replaces the Google Fonts @import (GIGW: no 3rd-party
   font calls, CSP friendly). Only the weights the design uses are shipped.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-Italic.woff2') format('woff2');
}

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

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

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

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/poppins/Poppins-Black.woff2') format('woff2');
}

/* ==========================================================================
   2. MAIN BRAND HEADER & NAVIGATION — mapped to Razor DOM
      #header.header > .navheader > .logo-wrapperbox + .headermenus
      .headermenus > .header-wrapper (utility strip) + nav#navmenu
   ========================================================================== */
#header.header {
    background: #FFFFFF;
    color: var(--text-main);
    box-shadow: var(--shadow-soft-card);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0;
    transition: none !important;
}

    #header.header.fixed,
    .scrolled #header.header {
        position: sticky;
        box-shadow: var(--shadow-soft-card);
    }

#header .navheader {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    margin: 0;
    max-width: 100%;
}

#header .logo-wrapperbox {
    flex: 0 0 auto;
}

    #header .logo-wrapperbox .logo-img {
        margin: 0;
        display: flex;
        align-items: center;
        padding: 8px 5px;
    }

        #header .logo-wrapperbox .logo-img img {
            height: 76px;
            width: auto;
            max-width: 380px;
            object-fit: contain;
            display: block;
            transition: transform 0.25s ease;
        }

            #header .logo-wrapperbox .logo-img img:hover {
                transform: scale(1.02);
            }

#header .headermenus {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    flex: 1 1 auto;
    width: auto;
    padding: 0 0 8px 0;
    min-width: 0;
}

/* DIAGONALLY CUT BLUE UTILITY STRIP */
#header .header-wrapper {
    width: auto;
    background: var(--nrl-deep-navy);
    color: #FFFFFF;
    padding: 6px 20px 6px 36px;
    margin: 0;
    border: 0;
    border-bottom: 2.5px solid var(--nrl-orange);
    clip-path: polygon(28px 0, 100% 0, 100% 100%, 0% 100%);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-subtle);
    /* font-size: 0.82rem; */
}

#header .topnav-list {
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    list-style: none;
}

    #header .topnav-list li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #header .topnav-list a,
    #header .topnav-list a:visited {
        color: #FFFFFF;
        text-decoration: none;
        /* font-weight: 700; */
        /* font-size: 0.8rem; */
        transition: color 0.2s ease;
    }

        #header .topnav-list a:hover,
        #header .topnav-list a:focus-visible {
            color: var(--nrl-yellow);
        }

    #header .topnav-list .accessibility-btn,
    #header .topnav-list li button {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
        /* font-weight: 700; */
        font-size: 0.75rem;
        padding: 3px 12px !important;
        border-radius: var(--radius-pill);
        cursor: pointer;
        transition: background 0.2s ease;
        box-shadow: none;
        margin: 0;
    }

        #header .topnav-list li button:hover,
        #header .topnav-list li button[aria-pressed="true"] {
            background: var(--nrl-orange);
        }

#header .accdiv {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
}

/* Theme (contrast) switches */
#header .theme-change {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    height: auto;
    padding: 3px 8px;
}

    #header .theme-change ul {
        padding: 0;
        margin: 0;
        gap: 6px;
        list-style: none;
    }

        #header .theme-change ul li {
            margin: 0;
        }

            #header .theme-change ul li .theme-item {
                height: 14px;
                width: 22px;
                border: 1px solid rgba(255, 255, 255, 0.7);
                border-radius: 3px;
                overflow: hidden;
                cursor: pointer;
            }

                #header .theme-change ul li .theme-item.active {
                    outline: 2px solid var(--nrl-yellow);
                    outline-offset: 1px;
                }

/* Font resizer A- A A+ */
#header .font-adjust {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    padding: 4px 4px;
    line-height: 1;
}

    #header .font-adjust ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

        #header .font-adjust ul li + li {
            margin-left: 0;
        }

        #header .font-adjust ul li a,
        #header .font-adjust ul li button {
            display: inline-block;
            background: transparent;
            border: none;
            color: #FFFFFF;
            /* font-weight: 700; */
            padding: 2px 8px;
            font-size: 0.75rem;
            border-radius: var(--radius-pill);
            text-decoration: none;
            transition: all 0.2s ease;
        }

            #header .font-adjust ul li a:hover,
            #header .font-adjust ul li button:hover,
            #header .font-adjust ul li button:focus-visible,
            #header .font-adjust ul li button#fontReset {
                background: var(--nrl-orange);
                color: #FFFFFF;
            }

/* Language switch */
#header .news-lang {
    padding: 0;
}

    #header .news-lang ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #header .news-lang li.dropdown.lang-dropdown a,
    #header .news-lang a#lang {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 3px 12px;
        margin: 0;
        border-radius: var(--radius-pill);
        font-size: 0.75rem;
        /* font-weight: 700; */
        color: #FFFFFF;
        text-decoration: none;
    }

        #header .news-lang a#lang::before {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            content: "\f0ac";
            font-size: 0.8rem;
        }

        #header .news-lang a#lang:hover {
            background: var(--nrl-orange);
        }

/* MAIN NAVIGATION BAR (desktop ≥ 1200px) */
#navmenu.navmenu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    width: auto;
    padding-right: 10px;
    z-index: 1200;
}

#navmenu > ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    position: static;
    inset: auto;
    box-shadow: none;
    overflow: visible;
    border-radius: 0;
}

#navmenu li {
    position: relative;
}

#navmenu > ul > li + li {
    margin-left: 0;
}

#navmenu > ul > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: var(--nrl-navy);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    width: auto;
}

    #navmenu > ul > li > a::before {
        display: none;
    }

    #navmenu > ul > li > a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: var(--nrl-orange);
        border-radius: 2px;
        transform: translateX(-50%);
        transition: width 0.25s ease;
    }

    #navmenu > ul > li > a:hover,
    #navmenu > ul > li > a:focus-visible,
    #navmenu > ul > li.active > a,
    #navmenu > ul > li.current > a {
        color: var(--nrl-orange);
        background: #FDF2EF;
        box-shadow: none;
    }

        #navmenu > ul > li > a:hover::after,
        #navmenu > ul > li.active > a::after,
        #navmenu > ul > li.current > a::after {
            width: 50%;
        }

#navmenu a span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
}

#navmenu a i.toggle-dropdown,
#navmenu a i.toggle-dropdown::before {
    background: transparent !important;
    color: inherit !important;
    font-size: 0.65rem;
    opacity: 0.8;
    margin-left: 2px;
    padding: 0;
    border-radius: 0;
    line-height: 1;
    transform: none;
    rotate: 0deg;
}

/* Dropdown panel */
#navmenu li.dropdown > ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    min-width: 280px;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-top: 3.5px solid var(--nrl-orange);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 12px 36px rgba(0, 37, 89, 0.18);
    list-style: none;
    padding: 8px;
    margin: 2px 0 0 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    opacity: 1;
    visibility: visible;
    z-index: 2000;
    border-radius: var(--radius-md);
    overflow: visible;
    transition: none;
}

    #navmenu li.dropdown > ul::before {
        content: '';
        position: absolute;
        top: -15px;
        left: 0;
        right: 0;
        height: 20px;
        background: transparent;
    }

    #navmenu li.dropdown > ul.dropdown-active,
    #navmenu li.dropdown.active > ul {
        display: flex;
        animation: floatDown 0.2s ease;
    }

@media (min-width: 1200px) and (hover: hover) {
    #navmenu li.dropdown:hover > ul {
        display: flex;
        animation: floatDown 0.2s ease;
    }
}

/* Long lists: scroll instead of overflowing viewport */
#navmenu li.dropdown.scrl > ul,
#navmenu > ul > li.dropdown > ul {
    max-height: 75vh;
    overflow-y: auto;
}

    #navmenu > ul > li.dropdown > ul:has(li.dropdown) {
        overflow: visible;
        max-height: none;
    }

/* Right-align the last two top-level dropdowns so they never clip */
#navmenu > ul > li.dropdown:last-child > ul,
#navmenu > ul > li.dropdown:nth-last-child(2) > ul {
    left: auto;
    right: 0;
}

#navmenu li.dropdown > ul li {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    margin: 0 0 2px 0;
}

    #navmenu li.dropdown > ul li:last-child {
        margin-bottom: 0;
    }

    #navmenu li.dropdown > ul li + li {
        padding-top: 0;
        border-top: 0;
    }

#navmenu li.dropdown > ul a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    padding: 8px 12px;
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 0.81rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    white-space: normal;
    text-transform: none;
}

    #navmenu li.dropdown > ul a::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f105";
        font-size: 0.75rem;
        color: var(--text-muted);
        position: static;
        width: auto;
        height: auto;
        background: transparent;
    }

    #navmenu li.dropdown > ul a:hover,
    #navmenu li.dropdown > ul a:focus-visible,
    #navmenu li.dropdown > ul li:hover > a {
        background: #FDF2EF;
        color: var(--nrl-orange);
        padding-left: 16px;
    }

/* Nested (3rd level) submenu */
#navmenu li.dropdown > ul li.dropdown > a > span {
    flex: 1 1 auto;
    justify-content: space-between;
}

#navmenu li.dropdown > ul li.dropdown > a i.toggle-dropdown {
    margin-left: auto;
    rotate: -90deg;
    transition: transform 0.2s ease, color 0.2s ease;
}

#navmenu li.dropdown > ul li.dropdown > ul {
    top: -4px;
    left: 98%;
    right: auto;
    min-width: 275px;
    width: 275px;
    border-top: 1px solid var(--border-subtle);
    border-left: 4px solid var(--nrl-orange);
    box-shadow: 0 14px 40px rgba(0, 37, 89, 0.22);
    z-index: 3500;
    background: #FFFFFF;
}

#navmenu > ul > li.dropdown:nth-last-child(-n+4) li.dropdown > ul {
    left: auto;
    right: 98%;
    border-left: 1px solid var(--border-subtle);
    border-right: 4px solid var(--nrl-orange);
}

#navmenu li.dropdown > ul li.dropdown::after {
    content: '';
    position: absolute;
    top: 0;
    right: -14px;
    width: 18px;
    height: 100%;
}

#navmenu li.dropdown > ul li.dropdown > ul a {
    color: var(--nrl-navy);
    font-size: 0.82rem;
}

/* Search trigger + mobile icons (right of nav) */
#navmenu .search-formbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

    #navmenu .search-formbox .form-wrapper {
        border: none;
        width: auto;
        padding: 0;
        margin: 0;
    }

        #navmenu .search-formbox .form-wrapper button {
            background: var(--nrl-navy);
            color: #FFFFFF !important;
            border: none;
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: var(--radius-pill);
            cursor: pointer;
            font-size: 0.95rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

            #navmenu .search-formbox .form-wrapper button:hover,
            #navmenu .search-formbox .form-wrapper button:focus-visible {
                background: var(--nrl-orange);
                transform: scale(1.05);
            }

            #navmenu .search-formbox .form-wrapper button i {
                background: transparent;
                color: inherit;
                margin: 0;
            }

#navmenu .mobile-nav-toggle,
#navmenu .btnaccessblity {
    color: var(--nrl-navy);
    font-size: 28px;
    line-height: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

@media (min-width: 1200px) {
    #navmenu .logo-img {
        display: none;
    }
}

/* Header hover state from main.js — keep white */
#header.header.header-hover {
    background: #FFFFFF;
}

/* --------------------------------------------------------------------------
   HEADER — TABLET / MOBILE (< 1200px): reuse main.js .mobile-nav-active
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    #header .navheader {
        padding: 0 !important;
        gap: 0;
        flex-direction: column;
        align-items: stretch;
    }

    #header .logo-wrapperbox {
        display: none !important;
    }

    #header .headermenus {
        flex-direction: column-reverse;
        align-items: stretch;
        width: 100%;
        padding: 0;
        gap: 0;
    }

    /* Row 1 (visually): logo + search + burger */
    #navmenu.navmenu {
        position: static;
        width: 100%;
        justify-content: space-between;
        padding: 8px 16px;
        gap: 10px;
    }

    #navmenu .logo-img {
        display: block;
        margin: 0;
        order: -1;
        flex: 1 1 auto;
        min-width: 0;
    }

        #navmenu .logo-img a {
            display: inline-block !important;
        }

        #navmenu .logo-img img {
            height: 52px;
            width: auto;
            max-width: 100%;
            object-fit: contain;
        }

    #navmenu .search-formbox {
        order: 2;
        position: static;
    }

    /* Row 2: utility strip */
    #header .header-wrapper {
        position: static;
        clip-path: none;
        padding: 5px 12px;
        border-bottom: 0;
        border-top: 2px solid var(--nrl-orange);
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px 10px;
        font-size: 0.72rem;
        width: 100%;
    }

    #header .topnav-list {
        gap: 8px;
    }

        #header .topnav-list li a span,
        #header .topnav-list .accessibility-btn span {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        #header .topnav-list li a {
            font-size: 1rem;
        }

    #header .accdiv {
        gap: 8px;
    }

    /* Mobile drawer */
    #navmenu > ul {
        display: none;
        position: fixed;
        inset: 76px 12px 12px 12px;
        padding: 12px 0;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: #FFFFFF;
        border-radius: var(--radius-md);
        border-top: 4px solid var(--nrl-orange);
        overflow-y: auto;
        box-shadow: 0 0 30px rgba(1, 38, 90, 0.25);
        z-index: 9998;
    }

    body.mobile-nav-active #navmenu > ul {
        display: flex;
    }

    body.mobile-nav-active #navmenu {
        position: fixed;
        inset: 0;
        background: rgba(1, 38, 90, 0.85);
        z-index: 9997;
        padding: 12px 16px;
        align-items: flex-start;
    }

        body.mobile-nav-active #navmenu .logo-img {
            visibility: hidden;
        }

        body.mobile-nav-active #navmenu .search-formbox {
            position: absolute;
            top: 12px;
            right: 16px;
        }

    body.mobile-nav-active .mobile-nav-toggle {
        color: #FFFFFF;
    }

    #navmenu > ul > li > a {
        border-radius: 0;
        padding: 12px 20px;
        font-size: 0.95rem;
        justify-content: flex-start;
        white-space: normal;
    }

        #navmenu > ul > li > a > span {
            flex: 1 1 auto;
            justify-content: space-between;
        }

    #navmenu li.dropdown > ul a {
        justify-content: flex-start;
    }

    body.mobile-nav-active #navmenu .search-formbox {
        display: flex;
        gap: 12px;
        z-index: 9999;
    }

    body.mobile-nav-active .mobile-nav-toggle {
        position: static;
        font-size: 30px;
        margin: 0;
    }

    #navmenu > ul > li > a::after {
        display: none;
    }

    #navmenu li.dropdown > ul,
    #navmenu li.dropdown > ul li.dropdown > ul,
    #navmenu > ul > li.dropdown:nth-last-child(-n+4) li.dropdown > ul,
    #navmenu > ul > li.dropdown:last-child > ul,
    #navmenu > ul > li.dropdown:nth-last-child(2) > ul {
        position: static;
        width: 100%;
        min-width: 0;
        max-height: none;
        border: 0;
        border-left: 3px solid var(--nrl-orange);
        border-radius: 0;
        box-shadow: none;
        margin: 4px 0 4px 20px;
        padding: 4px 8px;
        animation: none;
        background: var(--bg-card-subtle);
        overflow: visible;
    }

        #navmenu li.dropdown > ul li.dropdown::after {
            display: none;
        }

        #navmenu li.dropdown > ul li.dropdown > a i.toggle-dropdown {
            rotate: 0deg;
        }

    #navmenu li.dropdown.active > a i.toggle-dropdown {
        rotate: 180deg;
    }
}

@media (max-width: 575.98px) {
    #header .theme-change,
    #header .topnav-list .accessibility-btn {
        display: none;
    }
}

/* ==========================================================================
   DESIGN SYSTEM (ported verbatim from the approved design styles.css)
   ========================================================================== */

:root {
    /* Poppins Primary Typography */
    --font-primary: 'Poppins', 'Noto Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Poppins', sans-serif;
    /* User-Specified Brand Palette */
    --nrl-navy: #01265A;
    --nrl-deep-navy: #002559;
    --nrl-yellow: #FFFF00;
    --nrl-orange: #EF6E4A;
    --nrl-orange-aa: #C84A1A; /* darker orange: 4.7:1 with white text (WCAG AA) */
    --nrl-white: #FFFFFF;
    /* Subtle Muted Backgrounds & Surfaces (Non-Boxy) */
    --bg-body: #F4F7FB;
    --bg-surface: #FFFFFF;
    --bg-card-subtle: #F8FAFD;
    /* Text & Typography */
    --text-main: #0B192C;
    --text-muted: #3B4A61;
    --text-subtle: #56657E; /* was #687993 — raised to 5.9:1 for WCAG AA */
    --border-subtle: rgba(1, 38, 90, 0.08);
    /* Soft Ambient Layered Shadows for Non-Boxy Floating Elements */
    --shadow-subtle: 0 4px 20px -2px rgba(1, 38, 90, 0.05);
    --shadow-soft-card: 0 10px 30px -5px rgba(1, 38, 90, 0.08);
    --shadow-hover-float: 0 20px 40px -10px rgba(1, 38, 90, 0.16);
    /* Organic Soft Radii */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 50px;
    /* Font Scaling */
    --font-scale: 1;
}

/* High Contrast Mode (WCAG Yellow on Black) */
body.dark-theme {
    --bg-body: #000000 !important;
    --bg-surface: #121212 !important;
    --text-main: #FFFF00 !important;
    --text-muted: #FFFFFF !important;
    --text-subtle: #FFD700 !important;
    --border-subtle: #FFFF00 !important;
    --nrl-navy: #000000 !important;
    --nrl-deep-navy: #000000 !important;
}

    body.dark-theme * {
        border-color: #FFFF00 !important;
    }

    body.dark-theme a {
        color: #00FFFF !important;
    }

/* Base Reset & Fluid Core Setup */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: calc(15px * var(--font-scale));
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary, 'Poppins', 'Noto Sans', 'Mukta', system-ui, -apple-system, sans-serif);
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Poppins Heading & Title Defaults */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.hero-subtitle,
.hero-badge,
.nav-link,
.section-head h2,
.kicker,
.timeline-caption,
.caption-year,
.milestone .year,
.milestone h3,
.counter-number,
.stat-card-value,
.tab-card-title,
.qs-title,
.footer-heading,
.hero-btn-primary,
.hero-btn-secondary,
.timeline-view,
.brand-logo-link {
    font-family: var(--font-heading, 'Poppins', sans-serif);
}

/* 100% FLUID FULL-WIDTH CONTAINER SYSTEM */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 40px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
}

/* Skip Link */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 20px;
    background: var(--nrl-orange);
    color: #FFFFFF;
    font-weight: 700;
    padding: 8px 18px;
    z-index: 99999;
    transition: top 0.2s ease;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow-soft-card);
}

    .skip-to-main:focus {
        top: 0;
    }

/* ==========================================================================
   1. TOP ACCESSIBILITY & LIVE STOCK TICKER BAR (Subtle Style)
   ========================================================================== */
.gov-top-bar {
    background: var(--nrl-deep-navy);
    border-bottom: 2px solid var(--nrl-orange);
    padding: 6px 0;
    font-size: 0.82rem;
    color: #E2E8F0;
}

.top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.top-bar-left {
    display: flex;
    align-items: center;
}

.gov-india-text {
    font-weight: 700;
    color: #FFFFFF;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.gov-acc-link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}

    .gov-acc-link:hover {
        color: var(--nrl-yellow);
    }

.accessibility-tools {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    padding: 2px 4px;
}

.acc-btn {
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-weight: 700;
    padding: 2px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
}

    .acc-btn:hover,
    .acc-btn.active {
        background: var(--nrl-orange);
        color: #FFFFFF;
    }

.contrast-btn {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease;
}

    .contrast-btn:hover {
        background: var(--nrl-orange);
    }

.lang-selector-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}

.lang-select {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFFFFF;
}

    .lang-select option {
        color: #000;
    }

/* ==========================================================================
   2. MAIN BRAND HEADER & SUBTLE NAVIGATION MENU
   ========================================================================== */
/* ==========================================================================
   3. SUBTLE HERO BANNER CAROUSEL
   ========================================================================== */
.hero-banner-section {
    position: relative;
    height: 540px;
    overflow: hidden;
    background: var(--nrl-deep-navy);
}

.hero-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00122e;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 0.45s ease-in-out, visibility 0.45s ease-in-out;
    display: flex;
    align-items: center;
    pointer-events: none;
}

    .hero-slide.swiper-slide-active {
        opacity: 1;
        visibility: visible;
        z-index: 2;
        pointer-events: auto;
    }

.hero-slide-content {
    max-width: 860px;
    color: #FFFFFF;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.hero-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--nrl-orange) 0%, #D95431 100%);
    color: #FFFFFF;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 5px 16px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 14px rgba(239, 110, 74, 0.4);
}

.hero-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
    color: #FFFFFF;
}

.hero-subtitle {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--nrl-yellow);
    margin-bottom: 16px;
}

.hero-description {
    font-size: 0.95rem;
    color: #E2E8F0;
    margin-bottom: 28px;
    line-height: 1.6;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-btn-primary {
    background: var(--nrl-orange);
    color: #FFFFFF;
    text-decoration: none;
    /* font-weight: 800; */
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 6px 20px rgba(239, 110, 74, 0.4);
}

    .hero-btn-primary:hover {
        transform: translateY(-3px);
        background: #E05632;
    }

.play-circle {
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    color: var(--nrl-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

.hero-btn-secondary {
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #FFFFFF;
    text-decoration: none;
    /* font-weight: 700; */
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}

    .hero-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        color: white;
    }

/* --------------------------------------------------------------------------
   HERO CAROUSEL CONTROLS & NAVIGATION (Oil India Style Next/Prev & Dock)
   -------------------------------------------------------------------------- */

/* Text Content Staggered Animation on Slide Activation */
.hero-slide.swiper-slide-active .hero-badge {
    animation: heroTextReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.hero-slide.swiper-slide-active .hero-title {
    animation: heroTextReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.hero-slide.swiper-slide-active .hero-subtitle {
    animation: heroTextReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero-slide.swiper-slide-active .hero-description {
    animation: heroTextReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.hero-slide.swiper-slide-active .hero-cta-group {
    animation: heroTextReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}

@keyframes heroTextReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Side Navigation Arrows (High-Visibility Oil India / PSU Style) */
.carousel-nav-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 28px;
    pointer-events: none;
    z-index: 25;
}

.carousel-arrow {
    pointer-events: auto;
    position: relative;
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: var(--nrl-deep-navy);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.25rem;
    box-shadow: 0 8px 25px rgba(0, 15, 45, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .carousel-arrow:hover {
        background: var(--nrl-orange);
        color: #FFFFFF;
        border-color: var(--nrl-orange);
        transform: scale(1.12);
        box-shadow: 0 12px 30px rgba(239, 110, 74, 0.55);
    }

    .carousel-arrow:active {
        transform: scale(0.95);
    }

    .carousel-arrow:focus-visible {
        outline: 3px solid var(--nrl-yellow);
        outline-offset: 3px;
    }

/* Floating Arrow Tooltip */
.carousel-btn-tooltip {
    position: absolute;
    top: -32px;
    background: rgba(0, 25, 60, 0.92);
    color: #FFFFFF;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.carousel-arrow:hover .carousel-btn-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Oil India Style Integrated Bottom Slider Dock */
.carousel-bottom-dock {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(1, 26, 62, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 25;
}

.carousel-dock-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.82rem;
    transition: all 0.2s ease;
    min-width: 33px;
}

    .carousel-dock-btn:hover {
        background: var(--nrl-orange);
        border-color: var(--nrl-orange);
        color: #FFFFFF;
        transform: scale(1.1);
    }

    .carousel-dock-btn:focus-visible {
        outline: 2px solid var(--nrl-yellow);
        outline-offset: 2px;
    }

/* Counter Badge (e.g. 01 / 06) */
.carousel-counter-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    padding: 0 8px 0 2px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

    .carousel-counter-badge .curr-slide {
        color: var(--nrl-yellow);
        font-size: 0.95rem;
        font-weight: 800;
    }

    .carousel-counter-badge .sep {
        opacity: 0.55;
        font-size: 0.75rem;
    }

    .carousel-counter-badge .total-slides {
        opacity: 0.85;
    }

/* Dots Navigation */
.carousel-dots-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

    .carousel-dot:hover {
        background: rgba(255, 255, 255, 0.85);
        transform: scale(1.2);
    }

    .carousel-dot.active {
        background: var(--nrl-orange);
        width: 28px;
        border-radius: var(--radius-pill);
        box-shadow: 0 0 10px rgba(239, 110, 74, 0.7);
    }

/* Mobile & Tablet Responsiveness for Hero Controls */
@media (max-width: 768px) {
    .hero-banner-section {
        height: 580px;
    }

    .carousel-nav-arrows {
        padding: 0 10px;
    }

    .carousel-arrow {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.92);
    }

    .carousel-btn-tooltip {
        display: none;
    }

    .carousel-bottom-dock {
        bottom: 14px;
        padding: 5px 12px;
        gap: 8px;
        max-width: 95%;
    }

    .carousel-dock-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .carousel-dot {
        width: 8px;
        height: 8px;
    }

        .carousel-dot.active {
            width: 20px;
        }

    .carousel-counter-badge {
        font-size: 0.78rem;
        padding-right: 6px;
    }
}

/* High Contrast Mode for Controls (WCAG 2.1 AA) */
body.dark-theme .carousel-arrow {
    background: #000000 !important;
    border: 2px solid #FFFF00 !important;
    color: #FFFF00 !important;
}

    body.dark-theme .carousel-arrow:hover {
        background: #FFFF00 !important;
        color: #000000 !important;
    }

body.dark-theme .carousel-bottom-dock {
    background: #000000 !important;
    border: 2px solid #FFFF00 !important;
}

body.dark-theme .carousel-dock-btn {
    background: #111111 !important;
    border-color: #FFFF00 !important;
    color: #FFFF00 !important;
}

    body.dark-theme .carousel-dock-btn:hover {
        background: #FFFF00 !important;
        color: #000000 !important;
    }

body.dark-theme .carousel-dot {
    background: #555555 !important;
}

    body.dark-theme .carousel-dot.active {
        background: #FFFF00 !important;
    }

body.dark-theme .carousel-counter-badge .curr-slide {
    color: #FFFF00 !important;
}

/* ==========================================================================
   4. ANIMATED KEY METRICS & COUNTERS BAR (Organic Cards)
   ========================================================================== */
.counters-section {
    background: var(--bg-body);
    padding: 40px 0;
}

.counters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.counter-box {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border: 1.5px solid var(--border-subtle);
    padding: 26px 20px;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 37, 89, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

    /* Diagonal Blue Theme Fill Slide-In on Hover */
    .counter-box::before {
        content: '';
        position: absolute;
        top: -150%;
        left: -150%;
        width: 350%;
        height: 350%;
        background: linear-gradient(135deg, var(--nrl-navy) 0%, #011C45 100%);
        transform: rotate(45deg) translateY(-100%);
        transition: transform 0.55s cubic-bezier(0.25, 1, 0.3, 1);
        z-index: 0;
        pointer-events: none;
    }

    .counter-box:hover::before {
        transform: rotate(45deg) translateY(0%);
    }

    .counter-box:hover {
        transform: translateY(-6px) scale(1.03);
        border-color: var(--nrl-orange);
        box-shadow: 0 14px 32px rgba(0, 37, 89, 0.3);
    }

.counter-val-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 6px;
}

.counter-number {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--nrl-navy);
    transition: color 0.35s ease;
}

.counter-box:hover .counter-number {
    color: #FFFFFF;
}

.counter-prefix,
.counter-unit {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--nrl-orange);
    transition: color 0.35s ease;
}

.counter-box:hover .counter-prefix,
.counter-box:hover .counter-unit {
    color: var(--nrl-yellow);
}

.counter-label {
    position: relative;
    z-index: 2;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    transition: color 0.35s ease;
}

.counter-box:hover .counter-label {
    color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   MIDDLE FEATURE SHOWCASE BANNER (ABEPL Centered Banner)
   ========================================================================== */
.middle-feature-banner {
    padding: 85px 0;
    background: linear-gradient(135deg, rgba(0, 37, 89, 0.9) 0%, rgba(1, 38, 90, 0.95) 100%), url('../img/inernation-trade.jpg') center/cover no-repeat;
    color: #FFFFFF;
    text-align: center;
    border-top: 3.5px solid var(--nrl-orange);
    border-bottom: 3.5px solid var(--nrl-orange);
    box-shadow: var(--shadow-soft-card);
}

.middle-feature-card {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.middle-feature-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #FFFFFF;
    margin: 14px 0 6px 0;
    letter-spacing: -0.01em;
}

.middle-feature-subtitle {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--nrl-yellow);
    margin-bottom: 16px;
}

.middle-feature-desc {
    font-size: 1.05rem;
    color: #E2E8F0;
    line-height: 1.6;
    margin-bottom: 28px;
    max-width: 780px;
}

/* ==========================================================================
   5. AN INTEGRATED ENERGY COMPANY (Subtle Business Cards)
   ========================================================================== */
.integrated-energy-section {
    padding: 70px 0;
    background: #FFFFFF;
}

.section-header-wrap {
    margin-bottom: 34px;
}

.main-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin-bottom: 8px;
}

.sub-heading-text {
    font-size: 0.95rem;
    color: var(--text-subtle);
}

.business-tabs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.tab-card {
    position: relative;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    padding: 26px 22px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-soft-card);
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    color: #FFFFFF;
}

    /* Open Source Background Images for Business Cards */
    .tab-card[data-tab="tab-refining"] {
        background: linear-gradient(180deg, rgba(0, 37, 89, 0.72) 0%, rgba(1, 38, 90, 0.92) 100%), url('../img/refining.jpg');
    }

    .tab-card[data-tab="tab-wax"],
    .tab-card[data-tab="tab-bio"] {
        background: linear-gradient(180deg, rgba(0, 37, 89, 0.72) 0%, rgba(1, 38, 90, 0.92) 100%), url('../img/inernation-trade.jpg');
    }

    .tab-card[data-tab="tab-pipelines"] {
        background: linear-gradient(180deg, rgba(0, 37, 89, 0.72) 0%, rgba(1, 38, 90, 0.92) 100%), url('../img/design/hero/ibfpl-pipeline.jpg');
    }

    .tab-card[data-tab="tab-alternate"] {
        background: linear-gradient(180deg, rgba(0, 37, 89, 0.72) 0%, rgba(1, 38, 90, 0.92) 100%), url('../img/design/hero/csr.jpg');
    }

    .tab-card:hover,
    .tab-card.active {
        border-color: var(--nrl-orange);
        box-shadow: 0 16px 40px rgba(1, 38, 90, 0.35);
        transform: translateY(-6px);
    }

    .tab-card[data-tab="tab-refining"]:hover,
    .tab-card[data-tab="tab-refining"].active {
        background: linear-gradient(180deg, rgba(239, 110, 74, 0.4) 0%, rgba(0, 37, 89, 0.95) 100%), url('../img/refining.jpg');
    }

    .tab-card[data-tab="tab-bio"]:hover,
    .tab-card[data-tab="tab-bio"].active {
        background: linear-gradient(180deg, rgba(239, 110, 74, 0.4) 0%, rgba(0, 37, 89, 0.95) 100%), url('../img/design/hero/green-energy.jpg');
    }

    .tab-card[data-tab="tab-pipelines"]:hover,
    .tab-card[data-tab="tab-pipelines"].active {
        background: linear-gradient(180deg, rgba(239, 110, 74, 0.4) 0%, rgba(0, 37, 89, 0.95) 100%), url('../img/design/hero/ibfpl-pipeline.jpg');
    }

    .tab-card[data-tab="tab-alternate"]:hover,
    .tab-card[data-tab="tab-alternate"].active {
        background: linear-gradient(180deg, rgba(239, 110, 74, 0.4) 0%, rgba(0, 37, 89, 0.95) 100%), url('../img/design/hero/csr.jpg');
    }

.tab-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.tab-number {
    width: 38px;
    height: 38px;
    background: var(--nrl-orange);
    color: #FFFFFF;
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(239, 110, 74, 0.5);
    transition: transform 0.2s ease;
}

.tab-card:hover .tab-number,
.tab-card.active .tab-number {
    transform: scale(1.1);
    background: var(--nrl-yellow);
    color: var(--nrl-navy);
}

.tab-arrow {
    font-size: 0.9rem;
    color: var(--nrl-yellow);
    transition: transform 0.2s ease;
}

.tab-card:hover .tab-arrow {
    transform: translateX(4px);
}

.tab-heading {
    font-size: 1.2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 6px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.tab-subtext {
    font-size: 0.84rem;
    color: #E2E8F0;
    line-height: 1.45;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.business-content-display {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft-card);
    overflow: hidden;
}

.tab-pane {
    display: none;
    padding: 36px;
}

    .tab-pane.active {
        display: block;
        animation: floatDown 0.3s ease;
    }

.pane-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 36px;
    align-items: center;
}

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

.pane-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
}

.pane-tag {
    display: inline-block;
    background: #FDF2EF;
    color: var(--nrl-orange);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
}

.pane-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin-bottom: 14px;
}

.pane-bullets {
    list-style: none;
    margin: 18px 0;
}

    .pane-bullets li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-bottom: 10px;
    }

        .pane-bullets li i {
            color: var(--nrl-orange);
        }

.pane-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--nrl-navy);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    transition: all 0.25s ease;
}

    .pane-btn:hover {
        background: var(--nrl-orange);
        color: white;
        transform: translateY(-2px);
    }

/* ==========================================================================
   6. SUBTLE MARQUEE TICKER & QUICK LINKS
   ========================================================================== */
.marquee-ticker-section {
    background: linear-gradient(135deg, var(--nrl-navy) 0%, var(--nrl-deep-navy) 100%);
    color: #FFFFFF;
    padding: 10px 0;
}

.ticker-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ticker-badge {
    background: var(--nrl-orange);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.8rem;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.ticker-pause-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #FFFFFF;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.ticker-track-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.ticker-track {
    display: inline-block;
    animation: marquee 55s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.ticker-item {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.85rem;
    /* font-weight: 600; */
    margin-right: 40px;
}

    .ticker-item:hover {
        color: var(--nrl-yellow);
    }

.ticker-tag {
    background: rgba(255, 255, 255, 0.2);
    color: var(--nrl-yellow);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 8px;
    font-weight: 800;
}

.ticker-view-all {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    transition: background 0.2s ease;
}

    .ticker-view-all:hover {
        background: var(--nrl-orange);
    }

.quick-links-dropdown-wrap {
    position: relative;
}

.quick-links-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quick-links-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 230px;
    background: #FFFFFF;
    border-top: 3.5px solid var(--nrl-orange);
    box-shadow: var(--shadow-hover-float);
    list-style: none;
    padding: 8px;
    display: none;
    z-index: 1200;
    border-radius: var(--radius-md);
}

.quick-links-dropdown-wrap.active .quick-links-menu {
    display: block;
}

.quick-links-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

    .quick-links-menu a:hover {
        background: var(--bg-card-subtle);
        color: var(--nrl-orange);
    }

/* ==========================================================================
   6B. QUICK ACCESS GRID SECTION
   ========================================================================== */
.quick-access-section {
    padding: 40px 0;
    background: var(--bg-card-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.quick-access-header {
    margin-bottom: 24px;
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
}

.quick-access-card {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 26px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--nrl-navy);
    box-shadow: 0 4px 16px rgba(0, 37, 89, 0.05);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 1;
}

    /* Diagonal Blue Theme Fill Slide-In on Hover */
    .quick-access-card::before {
        content: '';
        position: absolute;
        top: -150%;
        left: -150%;
        width: 350%;
        height: 350%;
        background: linear-gradient(135deg, var(--nrl-navy) 0%, #011C45 100%);
        transform: rotate(45deg) translateY(-100%);
        transition: transform 0.55s cubic-bezier(0.25, 1, 0.3, 1);
        z-index: 0;
        pointer-events: none;
    }

    .quick-access-card:hover::before {
        transform: rotate(45deg) translateY(0%);
    }

    .quick-access-card:hover {
        transform: translateY(-6px) scale(1.03);
        border-color: var(--nrl-orange);
        box-shadow: 0 14px 32px rgba(0, 37, 89, 0.3);
    }

.qa-icon-wrap {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #FDF2EF;
    color: var(--nrl-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: inset 0 0 0 1px rgba(239, 110, 74, 0.15);
}

.quick-access-card:hover .qa-icon-wrap {
    background: linear-gradient(135deg, var(--nrl-orange) 0%, #D95431 100%);
    color: #FFFFFF;
    transform: scale(1.15) rotate(8deg);
    box-shadow: 0 8px 22px rgba(239, 110, 74, 0.45);
}

.qa-title {
    position: relative;
    z-index: 2;
    font-size: 0.98rem;
    font-weight: 800;
    margin: 0;
    transition: color 0.35s ease;
}

.quick-access-card:hover .qa-title {
    color: #FFFFFF;
}

/* ==========================================================================
   7. SUSTAINABILITY & ESG COMMITMENT SHOWCASE
   ========================================================================== */
.sustainability-section {
    position: relative;
    padding: 80px 0;
    background: linear-gradient(135deg, #001B44 0%, #002559 50%, #01265A 100%);
    color: #FFFFFF;
    overflow: hidden;
}

.sustainability-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 25%, rgba(16, 185, 129, 0.14) 0%, transparent 45%), radial-gradient(circle at 88% 75%, rgba(239, 110, 74, 0.12) 0%, transparent 45%), radial-gradient(circle at 50% 50%, rgba(255, 255, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.sustainability-wrap {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 1024px) {
    .sustainability-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Eyebrow & Badges */
.sus-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.sus-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.16);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.35);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
}

.sus-badge-meta {
    font-size: 0.85rem;
    color: #94A3B8;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sustainability-title {
    font-family: 'Poppins', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin-bottom: 14px;
}

    .sustainability-title span {
        color: var(--nrl-yellow);
    }

.sustainability-intro {
    font-size: 1rem;
    color: #CBD5E1;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* ESG 3-Pillar Cards */
.esg-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .esg-pillars-grid {
        grid-template-columns: 1fr;
    }
}

.esg-pillar-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 18px 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
}

    .esg-pillar-card:hover {
        background: rgba(255, 255, 255, 0.09);
        transform: translateY(-4px);
    }

    .esg-pillar-card.pillar-e:hover {
        border-color: #34D399;
        box-shadow: 0 10px 24px -4px rgba(16, 185, 129, 0.25);
    }

    .esg-pillar-card.pillar-s:hover {
        border-color: var(--nrl-orange);
        box-shadow: 0 10px 24px -4px rgba(239, 110, 74, 0.25);
    }

    .esg-pillar-card.pillar-g:hover {
        border-color: var(--nrl-yellow);
        box-shadow: 0 10px 24px -4px rgba(255, 255, 0, 0.25);
    }

.esg-pillar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.esg-pillar-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.pillar-e .esg-pillar-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

.pillar-s .esg-pillar-icon {
    background: rgba(239, 110, 74, 0.2);
    color: #EF6E4A;
}

.pillar-g .esg-pillar-icon {
    background: rgba(255, 255, 0, 0.2);
    color: #FFFF00;
}

.esg-pillar-letter {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94A3B8;
}

.esg-pillar-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
}

.esg-pillar-desc {
    font-size: 0.82rem;
    color: #CBD5E1;
    line-height: 1.45;
    margin: 0;
}

/* Action Buttons */
.esg-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.sus-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--nrl-orange) 0%, #D85532 100%);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 20px rgba(239, 110, 74, 0.35);
    transition: all 0.25s ease;
}

    .sus-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(239, 110, 74, 0.5);
        color: #FFFFFF;
    }

.sus-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: all 0.25s ease;
}

    .sus-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.16);
        border-color: #FFFFFF;
        color: #FFFFFF;
        transform: translateY(-2px);
    }

/* Visual Card Showcase */
.esg-visual-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #001A3D;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

    .esg-visual-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 28px 60px -12px rgba(0, 0, 0, 0.65), 0 0 30px rgba(16, 185, 129, 0.18);
    }

.esg-visual-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 900px) {
    .esg-visual-img {
        height: 360px;
    }
}

.esg-visual-card:hover .esg-visual-img {
    transform: scale(1.03);
}

/* High Contrast Mode for Sustainability */
body.dark-theme .sustainability-section {
    background: #000000 !important;
}

body.dark-theme .esg-pillar-card,
body.dark-theme .esg-visual-card {
    background: #000000 !important;
    border-color: #FFFF00 !important;
}

body.dark-theme .sustainability-title,
body.dark-theme .esg-pillar-title {
    color: #FFFF00 !important;
}

body.dark-theme .sustainability-intro,
body.dark-theme .esg-pillar-desc,
body.dark-theme .sus-badge-meta {
    color: #FFFFFF !important;
}

body.dark-theme .sus-btn-primary {
    background: #FFFF00 !important;
    color: #000000 !important;
}

body.dark-theme .sus-btn-secondary {
    border-color: #FFFF00 !important;
    color: #FFFF00 !important;
}

/* ==========================================================================
   8. COMMUNITY ENGAGEMENT (CSR Carousel Organic Cards)
   ========================================================================== */
.csr-section {
    padding: 70px 0;
    background: #FFFFFF;
}

.csr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
}

.csr-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.csr-arrow {
    width: 40px;
    height: 40px;
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--nrl-navy);
    transition: all 0.2s ease;
}

    .csr-arrow:hover {
        background: var(--nrl-orange);
        color: #FFFFFF;
    }

.csr-view-all-btn {
    background: var(--nrl-navy);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    transition: all 0.2s ease;
}

    .csr-view-all-btn:hover {
        background: var(--nrl-orange);
    }

.csr-carousel-container {
    overflow: hidden;
}

.csr-track {
    display: flex;
    gap: 24px;
    transition: transform 0.3s ease;
}

.csr-card {
    min-width: 290px;
    max-width: 310px;
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--shadow-subtle);
    transition: all 0.25s ease;
}

    .csr-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-soft-card);
    }

.csr-img-box img {
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.csr-card-body {
    padding: 18px;
}

.csr-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin-bottom: 8px;
}

.csr-card-text {
    font-size: 0.82rem;
    color: var(--text-subtle);
    margin-bottom: 14px;
    line-height: 1.45;
}

.csr-link {
    color: var(--nrl-orange);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.82rem;
}

/* ==========================================================================
   9. OUR JOURNEY - MILESTONES THAT MOVED NRL FORWARD
   ========================================================================== */
.journey {
    position: relative;
    overflow: hidden;
    background: #00122E;
    color: #FFFFFF;
    padding: 90px 0 85px;
}

/* Background Cross-fade Layer with Rich Corporate Blue Tint */
.journey-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background: #06224e;
}

.journey-bg-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s ease-out;
    filter: brightness(0.92) contrast(1.08) saturate(1.15);
}

    .journey-bg-photo.is-current {
        opacity: 0.5;
        z-index: 1;
        transform: scale(1);
    }

    .journey-bg-photo.is-next {
        opacity: 0;
        z-index: 2;
        transform: scale(1.04);
    }

        .journey-bg-photo.is-next.is-active {
            opacity: 0.5;
            transform: scale(1);
        }

/* Rich Corporate NRL Blue Tint Overlay (High Contrast & Legibility) */
.journey-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(0, 37, 89, 0.65) 0%, rgba(0, 24, 60, 0.72) 45%, rgba(0, 18, 46, 0.80) 100%), radial-gradient(ellipse at 50% 35%, rgba(1, 45, 105, 0.35) 0%, rgba(0, 18, 46, 0.75) 80%);
}

.journey-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 18, 46, 0.6) 0%, transparent 22%, transparent 78%, rgba(0, 18, 46, 0.85) 100%);
}

.journey-wrap {
    position: relative;
    z-index: 2;
}

/* Section Header (Inverse on Dark Background) */
.section-head.inverse {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

    .section-head.inverse .kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--nrl-orange, #EF6E4A);
        font-size: 0.85rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 8px;
    }

        .section-head.inverse .kicker::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--nrl-yellow, #FDB813);
            box-shadow: 0 0 10px var(--nrl-yellow, #FDB813);
        }

    .section-head.inverse h2 {
        font-size: 2.35rem;
        font-weight: 800;
        color: #FFFFFF;
        margin: 0 0 8px;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    .section-head.inverse p {
        color: #94A3B8;
        font-size: 1.05rem;
        margin: 0;
        max-width: 620px;
        line-height: 1.55;
    }

/* View Full Timeline Link Button */
.timeline-view {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: var(--radius-pill, 9999px);
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

    .timeline-view span {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .timeline-view:hover {
        background: var(--nrl-orange, #EF6E4A);
        border-color: var(--nrl-yellow, #FDB813);
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(239, 110, 74, 0.4);
    }

        .timeline-view:hover span {
            transform: translateX(4px);
        }

/* Timeline Shell & Nav Arrows */
.timeline-shell {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 35px;
    width: 100%;
}

.timeline-arrow {
    position: absolute;
    top: 65px;
    z-index: 10;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(1, 38, 90, 0.88);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
}

    .timeline-arrow.prev {
        left: -20px;
    }

    .timeline-arrow.next {
        right: -20px;
    }

    .timeline-arrow:hover {
        background: var(--nrl-orange, #EF6E4A);
        border-color: var(--nrl-yellow, #FDB813);
        color: #FFFFFF;
        transform: scale(1.12);
        box-shadow: 0 10px 28px rgba(239, 110, 74, 0.55);
    }

    .timeline-arrow:disabled,
    .timeline-arrow.is-disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
    }

/* Timeline Scroll Hint Badge */
.timeline-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(239, 110, 74, 0.15);
    color: var(--nrl-yellow, #FDB813);
    border: 1px solid rgba(253, 184, 19, 0.35);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    animation: pulseScrollHint 2s infinite ease-in-out;
}

@keyframes pulseScrollHint {

    0%, 100% {
        opacity: 0.85;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(3px);
    }
}

/* Timeline Viewport & Track - Spacious Horizontal Scrollable Container */
.timeline-viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    padding: 24px 15px 32px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--nrl-orange, #EF6E4A) rgba(1, 38, 90, 0.7);
    cursor: grab;
}

    .timeline-viewport.grabbing,
    .timeline-viewport:active {
        cursor: grabbing;
    }

    /* Custom Styled Horizontal Scrollbar */
    .timeline-viewport::-webkit-scrollbar {
        height: 8px;
        display: block;
    }

    .timeline-viewport::-webkit-scrollbar-track {
        background: rgba(1, 26, 68, 0.7);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        margin: 0 40px;
    }

    .timeline-viewport::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--nrl-orange, #EF6E4A), var(--nrl-yellow, #FDB813));
        border-radius: 10px;
        box-shadow: 0 0 12px rgba(253, 184, 19, 0.6);
    }

        .timeline-viewport::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(90deg, #f97316, #fbbf24);
        }

.timeline-track {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 36px;
    width: max-content;
    min-width: 4200px;
    padding: 10px 45px 20px;
}

/* Timeline Sine Wave SVG */
.timeline-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    width: 100%;
    height: 110px;
    pointer-events: none;
    z-index: 1;
    fill: none;
    overflow: visible;
}

    .timeline-wave path:first-child {
        stroke: rgba(255, 255, 255, 0.18);
        stroke-width: 2.5;
        stroke-dasharray: 6 6;
    }

.timeline-wave-glow {
    stroke: rgba(253, 184, 19, 0.7);
    stroke-width: 3.5;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 8px rgba(239, 110, 74, 0.85));
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

/* Milestone Article Item - Spacious Layout */
.milestone {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 210px;
    flex: 0 0 210px;
    cursor: pointer;
    padding: 12px 10px;
    border-radius: 18px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    user-select: none;
}

    .milestone .node {
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: #01265A;
        border: 3px solid rgba(255, 255, 255, 0.22);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: 16px;
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }

        .milestone .node::after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 2px solid transparent;
            pointer-events: none;
            transition: all 0.35s ease;
        }

        .milestone .node .thumb {
            width: 78px;
            height: 78px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            background: #00122E;
        }

            .milestone .node .thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.45s ease;
            }

    .milestone .year {
        font-family: 'Poppins', sans-serif;
        font-size: 1.15rem;
        font-weight: 800;
        color: #CBD5E1;
        margin-bottom: 6px;
        letter-spacing: 0.02em;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .milestone h3 {
        font-size: 0.96rem;
        font-weight: 700;
        color: #FFFFFF;
        margin: 0 0 6px;
        line-height: 1.3;
        transition: color 0.3s ease;
    }

    .milestone p {
        font-size: 0.78rem;
        color: #94A3B8;
        margin: 0;
        line-height: 1.45;
        max-width: 160px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.3s ease;
    }

    /* Hover States */
    .milestone:hover {
        transform: translateY(-8px);
    }

        .milestone:hover .node {
            border-color: var(--nrl-yellow, #FDB813);
            transform: scale(1.06);
            box-shadow: 0 12px 28px rgba(253, 184, 19, 0.35);
        }

        .milestone:hover .thumb img {
            transform: scale(1.12);
        }

        .milestone:hover .year {
            color: var(--nrl-yellow, #FDB813);
        }

    /* Active Milestone State */
    .milestone.active {
        transform: translateY(-12px);
    }

        .milestone.active .node {
            border-color: var(--nrl-orange, #EF6E4A);
            transform: scale(1.16);
            box-shadow: 0 0 0 6px rgba(239, 110, 74, 0.25), 0 16px 36px rgba(239, 110, 74, 0.55);
        }

            .milestone.active .node::after {
                border-color: rgba(253, 184, 19, 0.6);
                animation: milestonePulse 2.4s infinite ease-out;
            }

        .milestone.active .thumb img {
            transform: scale(1.15);
        }

        .milestone.active .year {
            color: var(--nrl-yellow, #FDB813);
            font-size: 1.25rem;
            font-weight: 900;
            text-shadow: 0 0 14px rgba(253, 184, 19, 0.6);
        }

        .milestone.active h3 {
            color: #FFFFFF;
            font-weight: 800;
        }

        .milestone.active p {
            color: #E2E8F0;
        }

@keyframes milestonePulse {
    0% {
        inset: -6px;
        opacity: 0.9;
        border-color: rgba(253, 184, 19, 0.8);
    }

    100% {
        inset: -18px;
        opacity: 0;
        border-color: rgba(239, 110, 74, 0);
    }
}

/* Bottom Highlight Spotlight Caption: Large Left Image, Right Details */
.timeline-caption {
    background: rgba(1, 38, 90, 0.75);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
    margin-top: 18px;
}

    .timeline-caption::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent 0%, var(--nrl-orange, #EF6E4A) 30%, var(--nrl-yellow, #FDB813) 70%, transparent 100%);
    }

/* Left Side: Large Featured Milestone Image - Vintage Navy Archival Style */
.caption-media {
    width: 450px;
    height: 285px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 16px 40px rgba(1, 18, 48, 0.8), inset 0 0 30px rgba(2, 20, 52, 0.7);
    background: linear-gradient(135deg, #021434 0%, #061c44 50%, #0b2b64 100%);
    position: relative;
}

/* Vintage Navy Blue Image Tint & Filter */
.vintage-navy-img,
.caption-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.35s ease, transform 0.45s ease, filter 0.45s ease;
}

.caption-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(2, 20, 52, 0.65) 100%), linear-gradient(180deg, rgba(3, 27, 72, 0.25) 0%, transparent 60%, rgba(1, 15, 42, 0.7) 100%);
    pointer-events: none;
    z-index: 2;
}

.timeline-caption:hover .caption-img {
    transform: scale(1.05);
    filter: contrast(115%) sepia(25%) hue-rotate(185deg) saturate(150%) brightness(96%);
}

/* Archival Badge */
.vintage-navy-badge {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 4;
    background: rgba(2, 20, 52, 0.85);
    color: #E5B869;
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(229, 184, 105, 0.4);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Cellophane Tape Effect */
.vintage-tape {
    position: absolute;
    width: 60px;
    height: 18px;
    background: rgba(215, 195, 140, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tape-tl {
    top: -4px;
    left: 30px;
    transform: rotate(-15deg);
}

.tape-tr {
    top: -4px;
    right: 30px;
    transform: rotate(12deg);
}

/* Distressed Archival Rubber Stamp */
.vintage-stamp {
    position: absolute;
    bottom: 12px;
    right: 14px;
    z-index: 4;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 2px dashed rgba(229, 184, 105, 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(229, 184, 105, 0.85);
    transform: rotate(-14deg);
    background: rgba(2, 20, 52, 0.55);
    backdrop-filter: blur(3px);
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.stamp-top {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.stamp-mid {
    font-size: 0.65rem;
    font-weight: 900;
    border-top: 1px solid rgba(229, 184, 105, 0.6);
    border-bottom: 1px solid rgba(229, 184, 105, 0.6);
    padding: 1px 4px;
    margin: 2px 0;
    color: #EF6E4A;
}

.stamp-bot {
    font-size: 0.52rem;
    font-weight: 700;
}

/* Right Side: Year, Title, Description Details */
.caption-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.caption-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.caption-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.caption-year {
    font-family: 'Poppins', sans-serif;
    font-size: 2.6rem;
    font-weight: 900;
    color: var(--nrl-yellow, #FDB813);
    line-height: 1;
    text-shadow: 0 0 24px rgba(253, 184, 19, 0.5);
    letter-spacing: -0.01em;
}

.caption-divider {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.6rem;
    line-height: 1;
    font-weight: 300;
}

.caption-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
    transition: opacity 0.25s ease;
}

.caption-copy {
    font-size: 1.08rem;
    font-weight: 400;
    color: #e2e8f0;
    line-height: 1.65;
    transition: opacity 0.25s ease;
}

.timeline-progress {
    width: 160px;
    height: 6px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
}

#timelineProgress {
    display: block;
    height: 100%;
    width: 14%;
    background: linear-gradient(90deg, var(--nrl-yellow, #FDB813) 0%, var(--nrl-orange, #EF6E4A) 100%);
    border-radius: 9999px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(239, 110, 74, 0.6);
}

/* Responsive Breakpoints for Journey Timeline */
@media (max-width: 1100px) {
    .caption-media {
        width: 360px;
        height: 230px;
    }

    .caption-year {
        font-size: 2.2rem;
    }

    .caption-title {
        font-size: 1.35rem;
    }
}

@media (max-width: 992px) {
    .journey {
        padding: 70px 0 65px;
    }

    .section-head.inverse h2 {
        font-size: 1.95rem;
    }

    .timeline-arrow.prev {
        left: 2px;
    }

    .timeline-arrow.next {
        right: 2px;
    }

    .timeline-caption {
        padding: 20px;
        gap: 20px;
    }

    .caption-media {
        width: 300px;
        height: 200px;
    }

    .caption-year {
        font-size: 1.9rem;
    }

    .caption-copy {
        font-size: 0.98rem;
    }

    .timeline-progress {
        width: 120px;
    }
}

@media (max-width: 768px) {
    .section-head.inverse {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .timeline-caption {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 16px;
    }

    .caption-media {
        width: 100%;
        height: 220px;
    }

    .caption-details {
        width: 100%;
    }

    .timeline-progress {
        width: 100%;
    }

    .timeline-arrow {
        width: 40px;
        height: 40px;
        font-size: 0.95rem;
        top: 55px;
    }
}

/* High Contrast Mode for Journey Timeline */
body.dark-theme .journey {
    background: #000000 !important;
    color: #FFFF00 !important;
}

body.dark-theme .journey-bg {
    display: none !important;
}

body.dark-theme .section-head.inverse h2,
body.dark-theme .milestone h3,
body.dark-theme .caption-copy {
    color: #FFFFFF !important;
}

body.dark-theme .section-head.inverse .kicker,
body.dark-theme .milestone .year,
body.dark-theme .caption-year {
    color: #FFFF00 !important;
}

body.dark-theme .section-head.inverse p,
body.dark-theme .milestone p {
    color: #FFFFFF !important;
}

body.dark-theme .milestone .node {
    background: #000000 !important;
    border: 3px solid #FFFFFF !important;
}

body.dark-theme .milestone.active .node {
    border: 3.5px solid #FFFF00 !important;
    box-shadow: 0 0 0 4px #FFFF00 !important;
}

body.dark-theme .timeline-view,
body.dark-theme .timeline-arrow,
body.dark-theme .caption-media,
body.dark-theme .timeline-caption {
    background: #000000 !important;
    border-color: #FFFF00 !important;
    color: #FFFF00 !important;
}

body.dark-theme .caption-copy {
    color: #FFFFFF !important;
}

body.dark-theme #timelineProgress {
    background: #FFFF00 !important;
}


/* ==========================================================================
   10. MEDIA GRID 2x2 & GET SOCIAL
   ========================================================================== */
.media-grid-section {
    padding: 70px 0;
    background: var(--bg-body);
}

.grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

@media (max-width: 992px) {
    .grid-2x2 {
        grid-template-columns: 1fr;
    }
}

.media-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 37, 89, 0.06);
    border: 1px solid var(--border-subtle);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: 340px;
    display: flex;
    flex-direction: column;
}

    .media-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 36px rgba(0, 37, 89, 0.16);
        border-color: var(--nrl-orange);
    }

.media-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

    .media-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

.media-card:hover .media-img-wrapper img {
    transform: scale(1.08);
}

.media-overlay-box {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 20, 50, 0.96) 0%, rgba(0, 37, 89, 0.65) 50%, transparent 100%);
    padding: 24px 24px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    z-index: 2;
}

.media-text-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.media-badge {
    display: inline-block;
    background: var(--nrl-orange);
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.media-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    line-height: 1.25;
}

.media-sub {
    font-size: 0.85rem;
    color: #E2E8F0;
    margin: 0;
    line-height: 1.45;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.media-cta-link {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--nrl-orange) 0%, #D95431 100%);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.82rem;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 14px rgba(239, 110, 74, 0.4);
    transition: all 0.25s ease;
    white-space: nowrap;
}

    .media-cta-link:hover {
        transform: scale(1.06);
        box-shadow: 0 6px 18px rgba(239, 110, 74, 0.6);
    }

.social-card-inner {
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
}

.social-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--bg-body);
    padding-bottom: 14px;
}

.social-head-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin: 0;
}

.social-tabs {
    display: flex;
    gap: 8px;
}

.soc-tab-btn {
    background: var(--bg-card-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .soc-tab-btn.active {
        background: var(--nrl-navy);
        color: var(--nrl-yellow);
        border-color: var(--nrl-navy);
        box-shadow: 0 4px 12px rgba(0, 37, 89, 0.25);
    }

.soc-pane {
    display: none;
    height: 100%;
}

    .soc-pane.active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        animation: floatDown 0.3s ease;
    }

.soc-feed-placeholder {
    text-align: center;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.soc-icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 4px;
}

    .soc-icon-circle.fb {
        background: #E8F0FE;
        color: #1877F2;
    }

    .soc-icon-circle.tw {
        background: #F1F5F9;
        color: #0F172A;
    }

.soc-page-name {
    font-size: 1rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin: 0;
}

.soc-desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
    max-width: 380px;
}

.soc-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 800;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.25s ease;
}

    .soc-action-btn.fb {
        background: #1877F2;
        box-shadow: 0 4px 14px rgba(24, 119, 242, 0.35);
    }

    .soc-action-btn.tw {
        background: #0F172A;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35);
    }

    .soc-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    }

/* ==========================================================================
   11. NOTEWORTHY SITES (Automated Logo Slider)
   ========================================================================== */
.noteworthy-sites-section {
    background: #FFFFFF;
    padding: 60px 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.noteworthy-slider-container {
    overflow: hidden;
    position: relative;
    margin-top: 16px;
    padding: 16px 0;
    width: 100%;
}

    .noteworthy-slider-container::before,
    .noteworthy-slider-container::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none;
    }

    .noteworthy-slider-container::before {
        left: 0;
        background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
    }

    .noteworthy-slider-container::after {
        right: 0;
        background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
    }

.noteworthy-track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    padding: 10px 0;
    animation: logoScroll 35s linear infinite;
}

.noteworthy-slider-container:hover .noteworthy-track {
    animation-play-state: paused;
}

@keyframes logoScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.noteworthy-logo-card {
    flex: 0 0 auto;
    height: 76px;
    padding: 10px 22px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    cursor: pointer;
}

    .noteworthy-logo-card:hover {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 8px 24px rgba(0, 37, 89, 0.14);
        border-color: var(--nrl-orange);
    }

.noteworthy-img {
    max-height: 52px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   12. MAIN FOOTER
   ========================================================================== */
.main-footer {
    background: var(--nrl-deep-navy);
    color: #94A3B8;
    padding: 60px 0 24px 0;
    border-top: 4px solid var(--nrl-orange);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px;
}

.footer-heading {
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-address {
    font-size: 0.85rem;
    line-height: 1.6;
}

.footer-links-list {
    list-style: none;
}

    .footer-links-list li {
        margin-bottom: 10px;
    }

    .footer-links-list a {
        color: #CBD5E1;
        text-decoration: none;
        font-size: 0.84rem;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: color 0.2s ease;
    }

        .footer-links-list a:hover {
            color: var(--nrl-yellow);
        }

.footer-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.compliance-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--nrl-yellow);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.footer-meta-info {
    font-size: 0.75rem;
    color: #64748B;
}

.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.8rem;
}

.footer-bottom-links a {
    color: #94A3B8;
    text-decoration: none;
    margin: 0 6px;
}

    .footer-bottom-links a:hover {
        color: #FFFFFF;
    }

.footer-bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 15px;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

    .footer-legal-links a {
        color: #94A3B8;
        text-decoration: none;
        font-size: 0.84rem;
        transition: color 0.2s ease;
    }

        .footer-legal-links a:hover {
            color: var(--nrl-yellow);
        }

.bar-sep {
    color: rgba(255, 255, 255, 0.2);
    margin: 0 4px;
}

.footer-bottom-bar .credits,
.copyright-text .credits {
    margin-left: 4px;
}

    .footer-bottom-bar .credits a,
    .footer-bottom-bar p a,
    .copyright-text a {
        color: var(--nrl-orange, #EB5D31);
        font-weight: 700;
        text-decoration: underline;
        transition: color 0.2s ease;
    }

        .footer-bottom-bar .credits a:hover,
        .footer-bottom-bar p a:hover,
        .copyright-text a:hover {
            color: var(--nrl-yellow, #FDB813);
        }

.browser-compatibility {
    font-size: 0.78rem;
    color: #94A3B8;
    margin-top: 4px;
    width: 100%;
    text-align: center;
    line-height: 1.5;
}

/* ==========================================================================
   13. RIGHT-SIDE HOVER SOCIAL POPUP FLYOUT WIDGET
   ========================================================================== */
.right-social-flyout-wrap {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
}

/* Collapsed Trigger Button on Right Edge */
.social-flyout-trigger {
    background: var(--nrl-orange);
    color: #FFFFFF;
    padding: 14px 12px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    box-shadow: -4px 0 20px rgba(255, 107, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-right: none;
}

.social-trigger-text {
    writing-mode: vertical-rl;
    text-transform: uppercase;
    /* font-weight: 800; */
    /* font-size: 0.75rem; */
    letter-spacing: 1px;
    white-space: nowrap;
    user-select: none;
}

.social-trigger-arrow {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

/* Popup Panel sliding from Right */
.social-flyout-panel {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(20px);
    width: 310px;
    background: var(--nrl-deep-navy);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px 0 0 16px;
    padding: 18px;
    box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover Behavior: Expand Popup on Hovering Trigger or Panel */
.right-social-flyout-wrap:hover .social-flyout-panel,
.right-social-flyout-wrap.active .social-flyout-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.right-social-flyout-wrap:hover .social-flyout-trigger .social-trigger-arrow {
    transform: rotate(180deg);
}

.right-social-flyout-wrap:hover .social-flyout-trigger {
    background: var(--nrl-orange);
    box-shadow: -6px 0 24px rgba(255, 107, 0, 0.4);
}

/* Inside Popup Elements */
.social-flyout-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.social-flyout-title {
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.social-flyout-subtitle {
    color: #94A3B8;
    font-size: 0.72rem;
}

.social-flyout-links-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.soc-flyout-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-decoration: none;
    color: #FFFFFF;
    transition: all 0.25s ease;
}

    .soc-flyout-card:hover {
        background: rgba(255, 255, 255, 0.14);
        transform: translateX(-4px);
        border-color: var(--nrl-orange);
    }

.soc-flyout-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.soc-flyout-card.fb .soc-flyout-icon {
    background: #1877F2;
    color: #FFF;
}

.soc-flyout-card.tw .soc-flyout-icon {
    background: #000000;
    color: #FFF;
    border: 1px solid #333;
}

.soc-flyout-card.in .soc-flyout-icon {
    background: #0A66C2;
    color: #FFF;
}

.soc-flyout-card.yt .soc-flyout-icon {
    background: #FF0000;
    color: #FFF;
}

.soc-flyout-card.ig .soc-flyout-icon {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #FFF;
}

.soc-flyout-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.soc-flyout-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #FFFFFF;
}

.soc-flyout-handle {
    font-size: 0.68rem;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-flyout-arrow {
    font-size: 0.7rem;
    color: #64748B;
    transition: color 0.2s ease;
}

.soc-flyout-card:hover .soc-flyout-arrow {
    color: var(--nrl-yellow);
}

/* ==========================================================================
   14. QUICK SERVICES & INITIATIVES GRID (Above Sustainability)
   ========================================================================== */
.quick-services-section {
    padding: 55px 0;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-subtle);
}

.quick-access-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 992px) {
    .quick-access-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .quick-access-grid-4col {
        grid-template-columns: 1fr;
    }
}

.quick-service-card {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: var(--radius-md);
    padding: 24px 20px;
    border: 1.5px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0, 37, 89, 0.05);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

    /* Diagonal Blue Theme Fill Slide-In on Hover */
    .quick-service-card::before {
        content: '';
        position: absolute;
        top: -150%;
        left: -150%;
        width: 350%;
        height: 350%;
        background: linear-gradient(135deg, var(--nrl-navy) 0%, #011C45 100%);
        transform: rotate(45deg) translateY(-100%);
        transition: transform 0.55s cubic-bezier(0.25, 1, 0.3, 1);
        z-index: 0;
        pointer-events: none;
    }

    .quick-service-card:hover::before {
        transform: rotate(45deg) translateY(0%);
    }

    .quick-service-card:hover {
        transform: translateY(-6px) scale(1.02);
        border-color: var(--nrl-orange);
        box-shadow: 0 14px 32px rgba(0, 37, 89, 0.28);
    }

.qs-icon-wrap {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #FDF2EF;
    color: var(--nrl-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    transition: all 0.35s ease;
    flex-shrink: 0;
}

.quick-service-card:hover .qs-icon-wrap {
    background: var(--nrl-orange);
    color: #FFFFFF;
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 6px 16px rgba(255, 107, 0, 0.35);
}

.qs-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qs-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin: 0;
    transition: color 0.3s ease;
}

.quick-service-card:hover .qs-title {
    color: #FFFFFF;
}

.qs-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    transition: color 0.3s ease;
}

.quick-service-card:hover .qs-desc {
    color: #CBD5E1;
}

/* ==========================================================================
   15. INNER PAGE SYSTEM & REUSABLE COMPONENTS
   ========================================================================== */
.inner-hero-header {
    position: relative;
    background-color: var(--nrl-deep-navy);
    background-image: linear-gradient(90deg, rgba(0, 37, 89, 0.95) 0%, rgba(0, 37, 89, 0.85) 50%, rgba(0, 37, 89, 0.35) 100%), url('../img/design/inner-banner.jpg');
    background-size: cover;
    background-position: center right;
    min-height: 180px;
    display: flex;
    align-items: center;
    border-bottom: 4px solid var(--nrl-orange);
    padding: 35px 0;
}

.inner-hero-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #CBD5E1;
    font-size: 0.9rem;
    font-weight: 500;
}

    .page-breadcrumb a {
        color: #FFFFFF;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: color 0.2s;
    }

        .page-breadcrumb a:hover {
            color: var(--nrl-orange);
        }

.breadcrumb-sep {
    color: var(--nrl-orange);
    font-size: 0.8rem;
}

.breadcrumb-active {
    color: var(--nrl-yellow);
    font-weight: 700;
}

.page-main-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.inner-page-body {
    padding: 50px 0 70px 0;
    background: var(--bg-body);
}

    .inner-page-body .container,
    .inner-hero-header .container {
        /* max-width: 1200px; */
        margin-left: auto;
        margin-right: auto;
        padding-left: clamp(24px, 5vw, 60px);
        padding-right: clamp(24px, 5vw, 60px);
    }

.content-paper-card {
    background: #FFFFFF;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-soft-card);
    padding: 40px clamp(24px, 4vw, 40px);
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .content-paper-card {
        padding: 24px 18px;
    }
}

.last-updated-tag {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-subtle);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.inner-lead-quote {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--nrl-orange);
    border-left: 4px solid var(--nrl-orange);
    padding-left: 18px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.content-section-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin: 32px 0 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .content-section-title::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 22px;
        background: var(--nrl-orange);
        border-radius: 4px;
    }

/* Styled Table System */
.nrl-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 24px 0 35px 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 10px rgba(0, 37, 89, 0.04);
}

.nrl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    text-align: left;
}

    .nrl-table th {
        background: var(--nrl-navy);
        color: #FFFFFF;
        font-weight: 700;
        padding: 14px 18px;
        border: 1px solid #001A3D;
        letter-spacing: 0.02em;
    }

        .nrl-table th.orange-th {
            background: var(--nrl-orange);
            border-color: #D4491F;
        }

    .nrl-table td {
        padding: 13px 18px;
        border: 1px solid #E2E8F0;
        color: var(--text-main);
        vertical-align: top;
    }

    .nrl-table tbody tr:nth-child(even) {
        background: #F8FAFD;
    }

    .nrl-table tbody tr:hover {
        background: rgba(1, 38, 90, 0.05);
    }

.table-highlight {
    color: var(--nrl-orange);
    font-weight: 700;
}

/* Board of Directors Hierarchy & Grid System */
.board-hierarchy-section {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-top: 24px;
}

.board-tier-block {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 30px 26px;
    box-shadow: 0 2px 10px rgba(0, 37, 89, 0.04);
}

.board-tier-header {
    border-bottom: 2px solid #F1F5F9;
    padding-bottom: 16px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.board-tier-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.board-tier-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.tier-apex .board-tier-icon {
    background: #FFF7ED;
    color: #EB5D31;
    border: 1px solid #FFEDD5;
}

.tier-functional .board-tier-icon {
    background: #EFF6FF;
    color: #0284C7;
    border: 1px solid #DBEAFE;
}

.tier-nominee .board-tier-icon {
    background: #EEF2FF;
    color: #4338CA;
    border: 1px solid #E0E7FF;
}

.tier-independent .board-tier-icon {
    background: #FDF2F8;
    color: #BE185D;
    border: 1px solid #FCE7F3;
}

.board-tier-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin: 0;
}

.board-tier-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}

.board-tier-pill {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 14px;
    border-radius: 20px;
}

.tier-apex .board-tier-pill {
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FDBA74;
}

.tier-functional .board-tier-pill {
    background: #EFF6FF;
    color: #0369A1;
    border: 1px solid #93C5FD;
}

.tier-nominee .board-tier-pill {
    background: #EEF2FF;
    color: #3730A3;
    border: 1px solid #A5B4FC;
}

.tier-independent .board-tier-pill {
    background: #FDF2F8;
    color: #9D174D;
    border: 1px solid #F472B6;
}

.board-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 820px) {
    .board-grid-2col {
        grid-template-columns: 1fr;
    }
}

.board-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

@media (max-width: 992px) {
    .board-grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .board-grid-3col {
        grid-template-columns: 1fr;
    }
}

.board-chairman-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

    .board-chairman-wrap .board-card {
        max-width: 520px;
        width: 100%;
    }

.board-grid-1col-center {
    display: flex;
    justify-content: center;
}

    .board-grid-1col-center .board-card {
        max-width: 580px;
        width: 100%;
    }

.board-card {
    background: #FFFFFF;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 37, 89, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

    .board-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--nrl-orange);
        opacity: 0.85;
    }

    .board-card.card-apex::before {
        background: linear-gradient(90deg, #002559 0%, #EB5D31 100%);
        height: 5px;
    }

    .board-card.card-functional::before {
        background: linear-gradient(90deg, #0284C7 0%, #0369A1 100%);
    }

    .board-card.card-nominee::before {
        background: linear-gradient(90deg, #4338CA 0%, #6366F1 100%);
    }

    .board-card.card-independent::before {
        background: linear-gradient(90deg, #BE185D 0%, #EC4899 100%);
    }

    .board-card:hover {
        transform: translateY(-6px);
        border-color: var(--nrl-orange);
        box-shadow: 0 12px 28px rgba(0, 37, 89, 0.12);
    }

.board-img-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3.5px solid var(--nrl-orange);
    padding: 4px;
    margin-bottom: 16px;
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(235, 93, 49, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.board-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.board-card:hover .board-img {
    transform: scale(1.08);
}

.board-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin-bottom: 6px;
}

.board-role-badge {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.badge-chairman {
    background: #EEF4FF;
    color: #002559;
    border: 1px solid #BFDBFE;
}

.badge-md {
    background: #ECFDF5;
    color: #047857;
    border: 1px solid #A7F3D0;
}

.badge-technical {
    background: #F0F9FF;
    color: #0284C7;
    border: 1px solid #BAE6FD;
}

.badge-finance {
    background: #FFFBEB;
    color: #B45309;
    border: 1px solid #FDE68A;
}

.badge-nominee {
    background: #EEF2FF;
    color: #4338CA;
    border: 1px solid #C7D2FE;
}

.badge-independent {
    background: #FDF2F8;
    color: #BE185D;
    border: 1px solid #FBCFE8;
}

.board-affiliation {
    font-size: 0.86rem;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 14px;
    min-height: 22px;
}

.board-bio-snippet {
    font-size: 0.92rem;
    line-height: 1.68;
    color: var(--text-main);
    text-align: justify;
    margin-bottom: 14px;
    width: 100%;
}

.board-bio-expanded {
    font-size: 0.90rem;
    line-height: 1.68;
    color: #475569;
    text-align: justify;
    width: 100%;
    display: none;
    border-top: 1px dashed #E2E8F0;
    padding-top: 14px;
    margin-top: 10px;
}

    .board-bio-expanded.is-active {
        display: block;
        animation: fadeInBio 0.3s ease;
    }

@keyframes fadeInBio {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.board-bio-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nrl-orange);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 6px;
    padding: 8px 18px;
    margin-top: auto;
    transition: all 0.25s ease;
}

    .board-bio-btn:hover {
        background: var(--nrl-orange);
        color: #FFFFFF;
        border-color: var(--nrl-orange);
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(235, 93, 49, 0.35);
        transform: translateY(-2px);
    }

    .board-bio-btn i {
        transition: transform 0.25s ease;
    }

    .board-bio-btn:hover i {
        transform: translateX(3px);
    }

/* Director Profile Modal Dialog */
.director-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 50, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeInOverlay 0.25s ease forwards;
}

    .director-modal-overlay.is-open {
        display: flex;
    }

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.director-modal-card {
    background: #FFFFFF;
    border-radius: 16px;
    max-width: 680px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 37, 89, 0.35);
    position: relative;
    padding: 32px 30px;
    border-top: 5px solid var(--nrl-orange);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.director-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F1F5F9;
    border: none;
    font-size: 1.1rem;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .director-modal-close:hover {
        background: #EB5D31;
        color: #FFFFFF;
        transform: rotate(90deg);
    }

.director-modal-header {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 20px;
    margin-bottom: 22px;
}

.director-modal-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid var(--nrl-orange);
    padding: 3px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(235, 93, 49, 0.2);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .director-modal-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

.director-modal-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--nrl-navy);
    margin: 0 0 6px 0;
}

.director-modal-content {
    font-size: 0.96rem;
    line-height: 1.75;
    color: #334155;
}

    .director-modal-content p {
        margin-bottom: 14px;
        text-align: justify;
    }

        .director-modal-content p:last-child {
            margin-bottom: 0;
        }

    .director-modal-content strong {
        color: #002559;
    }

/* Governance Committees Section */
.board-committees-box {
    margin-top: 48px;
    background: #F8FAFD;
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--nrl-navy);
    border-radius: var(--radius-md);
    padding: 30px 24px;
}

.board-committees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.committee-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: all 0.2s;
}

    .committee-card:hover {
        border-color: var(--nrl-orange);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .committee-card h4 {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--nrl-navy);
        margin: 0 0 6px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .committee-card h4 i {
            color: var(--nrl-orange);
            font-size: 0.92rem;
        }

    .committee-card p {
        font-size: 0.84rem;
        color: #64748B;
        margin: 0;
        line-height: 1.5;
    }

/* Download / Document List */
.doc-download-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .doc-download-grid {
        grid-template-columns: 1fr;
    }
}

.doc-download-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #F8FAFD;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.25s ease;
}

    .doc-download-card:hover {
        background: #FFFFFF;
        border-color: var(--nrl-orange);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 37, 89, 0.08);
    }

.doc-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.doc-icon {
    font-size: 1.6rem;
    color: #E53E3E;
}

.doc-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--nrl-navy);
}

.doc-size {
    font-size: 0.78rem;
    color: var(--text-subtle);
}

.doc-action-btn {
    color: var(--nrl-orange);
    font-size: 1.1rem;
}

/* Info Callout Box */
.info-callout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 24px;
    background: #F0F5FD;
    border-left: 4px solid var(--nrl-navy);
    border-radius: var(--radius-sm);
    margin: 24px 0;
}

    .info-callout.warning {
        background: #FFF9ED;
        border-left-color: #D97706;
    }

    .info-callout.success {
        background: #EDFDF5;
        border-left-color: #059669;
    }

.info-callout-icon {
    font-size: 1.6rem;
    color: var(--nrl-navy);
    margin-top: 2px;
}

.info-callout.warning .info-callout-icon {
    color: #D97706;
}

.info-callout.success .info-callout-icon {
    color: #059669;
}

.info-callout-content {
    flex: 1;
}

.info-callout-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nrl-navy);
    margin-bottom: 4px;
}

/* Stat Highlight Cards */
.stat-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 28px 0;
}

.stat-highlight-card {
    background: linear-gradient(145deg, #F8FAFD 0%, #EFF4FC 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 24px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .stat-highlight-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--nrl-navy), var(--nrl-orange));
    }

    .stat-highlight-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(1, 38, 90, 0.1);
    }

.stat-card-value {
    font-family: 'Poppins', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--nrl-navy);
    line-height: 1.1;
    margin-bottom: 6px;
}

.stat-card-label {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Policy Grid System */
.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
    margin-top: 25px;
}

.policy-card {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 24px 22px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .policy-card:hover {
        border-color: var(--nrl-orange);
        box-shadow: 0 8px 24px rgba(1, 38, 90, 0.08);
        transform: translateY(-3px);
    }

.policy-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.policy-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #FDF2EF;
    color: var(--nrl-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.policy-card:hover .policy-icon {
    background: var(--nrl-orange);
    color: #FFFFFF;
}

.policy-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nrl-navy);
    margin: 0;
}

.policy-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 16px;
    flex: 1;
}

.policy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nrl-navy);
    font-weight: 700;
    font-size: 0.86rem;
    text-decoration: none;
    transition: color 0.2s;
}

    .policy-btn:hover {
        color: var(--nrl-orange);
    }

/* Feature Grid 2-col */
.feature-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 25px 0;
}

@media (max-width: 768px) {
    .feature-grid-2col {
        grid-template-columns: 1fr;
    }
}

.feature-box {
    background: #F8FAFD;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 24px;
}

    .feature-box h4 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--nrl-navy);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .feature-box h4 i {
            color: var(--nrl-orange);
        }

/* Modal Dialog System */
.nrl-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 50, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

    .nrl-modal-backdrop.active {
        display: flex;
    }

.nrl-modal-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    max-width: 680px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 36px 32px;
    animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.nrl-modal-close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    background: #F1F5F9;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
}

    .nrl-modal-close-btn:hover {
        background: #E2E8F0;
        color: #0F172A;
    }

/* ==========================================================================
   19. LOCATION SHOWCASE & MAP EMBEDS
   ========================================================================== */
.location-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 2.5rem;
    padding: 12px 16px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
}

.loc-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #334155;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

    .loc-filter-btn:hover {
        border-color: var(--nrl-orange, #EB5D31);
        color: var(--nrl-orange, #EB5D31);
        transform: translateY(-1px);
    }

    .loc-filter-btn.active {
        background: linear-gradient(135deg, #002A54 0%, #0A192F 100%);
        color: #FFFFFF;
        border-color: #002A54;
        box-shadow: 0 4px 12px rgba(0, 42, 84, 0.2);
    }

.loc-filter-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(0, 42, 84, 0.08);
    color: inherit;
}

.loc-filter-btn.active .loc-filter-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}

.location-showcase-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    box-shadow: 0 10px 30px -5px rgba(0, 42, 84, 0.06);
    margin-bottom: 2.5rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .location-showcase-card:hover {
        box-shadow: 0 18px 40px -10px rgba(0, 42, 84, 0.12);
        transform: translateY(-2px);
    }

.location-card-header {
    padding: 20px 28px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.loc-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.loc-icon-bubble {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #002559;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 37, 89, 0.15);
    flex-shrink: 0;
}

.loc-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--nrl-navy, #002A54);
    margin: 0;
    line-height: 1.3;
}

.loc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.loc-badge-hq {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
}

.loc-badge-refinery {
    background: #FFF7ED;
    color: #C2410C;
    border: 1px solid #FED7AA;
}

.loc-badge-office {
    background: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
}

.loc-badge-heritage {
    background: #FAF5FF;
    color: #7E22CE;
    border: 1px solid #E9D5FF;
}

.location-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

@media (max-width: 991px) {
    .location-card-body {
        grid-template-columns: 1fr;
    }
}

.loc-info-col {
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.loc-text-desc {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #334155;
    margin-bottom: 1.25rem;
}

.loc-address-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 4px solid var(--nrl-orange, #EB5D31);
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #1E293B;
}

.loc-address-title {
    font-weight: 700;
    color: var(--nrl-navy, #002A54);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.loc-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
}

.loc-meta-item {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.loc-meta-icon {
    color: var(--nrl-orange, #EB5D31);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.loc-meta-label {
    font-size: 0.76rem;
    color: #64748B;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.2;
}

.loc-meta-value {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0F172A;
    margin-top: 2px;
    line-height: 1.4;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.loc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 8px;
}

.loc-directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--nrl-orange, #EB5D31) 0%, #D84D22 100%);
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(235, 93, 49, 0.3);
    transition: all 0.25s ease;
}

    .loc-directions-btn:hover {
        background: linear-gradient(135deg, #D84D22 0%, #BF3E16 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(235, 93, 49, 0.4);
        color: #FFFFFF !important;
    }

.loc-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #475569;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .loc-copy-btn:hover {
        background: #F8FAFC;
        border-color: #94A3B8;
        color: #0F172A;
    }

.loc-map-col {
    background: #F1F5F9;
    position: relative;
    min-height: 380px;
    border-left: 1px solid #E2E8F0;
    display: flex;
}

@media (max-width: 991px) {
    .loc-map-col {
        border-left: none;
        border-top: 1px solid #E2E8F0;
        min-height: 320px;
    }
}

.loc-map-iframe {
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: none;
    display: block;
}

@media (max-width: 991px) {
    .loc-map-iframe {
        min-height: 320px;
    }
}

.loc-map-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    z-index: 2;
}

.loc-neighbourhood-intro {
    background: linear-gradient(135deg, rgba(0, 42, 84, 0.04) 0%, rgba(235, 93, 49, 0.04) 100%);
    border: 1px dashed #CBD5E1;
    border-radius: 14px;
    padding: 18px 24px;
    margin-bottom: 2rem;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.6;
}

body.dark-theme .location-showcase-card {
    background: #000000;
    border: 2px solid #FFFF00;
}

body.dark-theme .location-card-header {
    background: #111111;
    border-bottom: 2px solid #FFFF00;
}

body.dark-theme .loc-card-title {
    color: #FFFF00;
}

body.dark-theme .loc-address-box,
body.dark-theme .loc-meta-item,
body.dark-theme .location-filter-strip {
    background: #000000;
    border: 1px solid #FFFF00;
    color: #FFFFFF;
}

body.dark-theme .loc-filter-btn {
    background: #000000;
    border-color: #FFFF00;
    color: #FFFF00;
}

    body.dark-theme .loc-filter-btn.active {
        background: #FFFF00;
        color: #000000;
    }

body.dark-theme .loc-directions-btn {
    background: #FFFF00;
    color: #000000 !important;
}

/* Director Profile Modal High Contrast */
body.dark-theme .director-modal-card {
    background: #000000;
    border: 2px solid #FFFF00;
    color: #FFFFFF;
}

body.dark-theme .director-modal-name {
    color: #FFFF00;
}

body.dark-theme .director-modal-content {
    color: #FFFFFF;
}

    body.dark-theme .director-modal-content strong {
        color: #FFFF00;
    }

body.dark-theme .director-modal-close {
    background: #222222;
    color: #FFFF00;
}

body.dark-theme .board-addresses-box {
    background: #000000 !important;
    border-color: #FFFF00 !important;
    color: #FFFFFF !important;
}

    body.dark-theme .board-addresses-box h3,
    body.dark-theme .board-addresses-box h4 {
        color: #FFFF00 !important;
    }

    body.dark-theme .board-addresses-box td {
        color: #FFFFFF !important;
        border-color: #FFFF00 !important;
    }

    body.dark-theme .board-addresses-box th {
        background: #111111 !important;
        color: #FFFF00 !important;
        border-color: #FFFF00 !important;
    }

    body.dark-theme .board-addresses-box strong {
        color: #FFFF00 !important;
    }

/* ==========================================================================
   INTERACTIVE PAN-INDIA PRESENCE MAP & DIRECTORY
   ========================================================================== */
.nrl-presence-section {
    margin-bottom: 3.5rem;
}

.presence-hero-banner {
    background: linear-gradient(135deg, #002559 0%, #013A78 50%, #001B44 100%);
    border-radius: 20px;
    color: #FFFFFF;
    padding: 36px 36px 30px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 37, 89, 0.18);
}

    .presence-hero-banner::after {
        content: "";
        position: absolute;
        right: -60px;
        top: -80px;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(253, 184, 19, 0.15) 0%, rgba(239, 110, 74, 0.08) 50%, transparent 70%);
        pointer-events: none;
    }

.presence-hero-content {
    position: relative;
    z-index: 1;
}

.presence-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(253, 184, 19, 0.15);
    border: 1px solid rgba(253, 184, 19, 0.4);
    color: #FDB813;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.presence-main-title {
    font-size: clamp(1.75rem, 2.8vw, 2.4rem);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin: 0 0 10px;
}

.presence-lead-text {
    font-size: 0.98rem;
    line-height: 1.65;
    color: #CBD5E1;
    max-width: 780px;
    margin: 0 0 24px;
}

.presence-metrics-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 20px;
}

.presence-metric-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    backdrop-filter: blur(8px);
    transition: transform 0.2s ease, background 0.2s ease;
}

    .presence-metric-box:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.1);
    }

.presence-metric-num {
    font-size: 1.8rem;
    font-weight: 800;
    color: #FDB813;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.presence-metric-label {
    font-size: 0.78rem;
    color: #E2E8F0;
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.3;
}

/* Control Toolbar */
.presence-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(0, 37, 89, 0.04);
    flex-wrap: wrap;
}

.presence-search-wrap {
    flex: 1;
    min-width: 260px;
    position: relative;
}

.presence-search-input {
    width: 100%;
    height: 46px;
    padding: 10px 16px 10px 42px;
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.92rem;
    color: #0F172A;
    transition: all 0.2s ease;
}

    .presence-search-input:focus {
        background: #FFFFFF;
        border-color: #002559;
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 37, 89, 0.12);
    }

.presence-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748B;
    font-size: 0.95rem;
    pointer-events: none;
}

.presence-filter-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.presence-filter-select {
    height: 46px;
    padding: 0 16px;
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #002559;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .presence-filter-select:focus {
        background: #FFFFFF;
        border-color: #002559;
        outline: none;
    }

.presence-reset-btn {
    height: 46px;
    padding: 0 16px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .presence-reset-btn:hover {
        background: #F1F5F9;
        border-color: #CBD5E1;
        color: #0F172A;
    }

.presence-count-badge {
    font-size: 0.85rem;
    color: #64748B;
    font-weight: 600;
    white-space: nowrap;
}

/* Workspace Grid: Map on Left (1.15fr), Inspector on Right (1fr, min 390px) */
.presence-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, 1fr);
    gap: 24px;
    margin-bottom: 28px;
    align-items: stretch;
}

/* Map Card */
.nrl-map-panel {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 37, 89, 0.08);
    display: flex;
    flex-direction: column;
}

.nrl-map-panel-head {
    padding: 16px 20px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .nrl-map-panel-head h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: #002559;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nrl-map-panel-head p {
        margin: 3px 0 0;
        font-size: 0.8rem;
        color: #64748B;
    }

.nrl-map-surface-wrapper {
    position: relative;
    background: #EEF5FB;
    overflow: hidden;
    flex: 1;
}

.map-scroll-surface {
    position: relative;
    width: 100%;
}

    .map-scroll-surface > img.map-base {
        display: block;
        width: 100%;
        height: auto;
        user-select: none;
        -webkit-user-drag: none;
    }

/* Map Pin Styling */
.nrl-map-pin {
    position: absolute;
    transform: translate(-50%, -96%);
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    filter: drop-shadow(0 6px 10px rgba(0, 37, 89, 0.35));
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nrl-map-pin:hover,
    .nrl-map-pin:focus-visible {
        transform: translate(-50%, -96%) scale(1.15);
        filter: drop-shadow(0 10px 18px rgba(0, 37, 89, 0.45));
        outline: none;
        z-index: 20;
    }

    .nrl-map-pin[aria-pressed="true"],
    .nrl-map-pin.active {
        transform: translate(-50%, -96%) scale(1.22);
        filter: drop-shadow(0 0 12px rgba(235, 93, 49, 0.85)) drop-shadow(0 10px 20px rgba(0, 37, 89, 0.5));
        z-index: 25;
    }

    .nrl-map-pin img.pin-img {
        display: block;
        width: clamp(34px, 4.4vw, 56px);
        height: auto;
        pointer-events: none;
    }

.pin-num-badge {
    display: none !important;
}

.nrl-map-pin[aria-pressed="true"] .pin-num-badge,
.nrl-map-pin.active .pin-num-badge {
    background: #EB5D31;
    color: #FFFFFF;
}

/* Radar pulse animation for active pin */
.nrl-map-pin .pin-radar {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #EB5D31;
    background: rgba(235, 93, 49, 0.2);
    animation: radarWave 2s infinite ease-out;
    pointer-events: none;
    opacity: 0;
    z-index: -1;
}

.nrl-map-pin[aria-pressed="true"] .pin-radar,
.nrl-map-pin.active .pin-radar {
    opacity: 1;
}

@keyframes radarWave {
    0% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.8);
        opacity: 0;
    }
}

/* Floating Map Labels (Hidden per requirement: only show pins) */
.nrl-map-label {
    display: none !important;
}


/* Map Legend */
.nrl-map-legend {
    padding: 12px 18px;
    border-top: 1px solid #E2E8F0;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: #64748B;
}

.legend-chips {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #002559;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

    .legend-dot.refinery {
        background: #EB5D31;
    }

    .legend-dot.hq {
        background: #002559;
    }

    .legend-dot.terminal {
        background: #15803D;
    }

    .legend-dot.overseas {
        background: #8B5CF6;
    }

/* Right Inspector Panel */
.presence-inspector-panel {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 37, 89, 0.08);
    display: flex;
    flex-direction: column;
}

.inspector-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inspector-tag-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inspector-index-chip {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    background: #002559;
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 6px;
}

.inspector-type-badge {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(235, 93, 49, 0.1);
    color: #C2410C;
    border: 1px solid rgba(235, 93, 49, 0.25);
    padding: 3px 10px;
    border-radius: 6px;
}

.inspector-body {
    padding: 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.inspector-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #002559;
    margin: 0 0 4px;
    line-height: 1.3;
}

.inspector-city {
    font-size: 0.9rem;
    color: #64748B;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inspector-address-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #EB5D31;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1E293B;
}

.inspector-address-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748B;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inspector-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.inspector-meta-chip {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.82rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

    .inspector-meta-chip i {
        color: #EB5D31;
        font-size: 0.95rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .inspector-meta-chip div {
        flex: 1;
        min-width: 0;
        line-height: 1.35;
    }

    .inspector-meta-chip strong {
        display: block;
        font-size: 0.72rem;
        color: #64748B;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.3px;
        margin-bottom: 3px;
    }

    .inspector-meta-chip span {
        display: block;
        font-size: 0.84rem;
        color: #0F172A;
        font-weight: 600;
        line-height: 1.4;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

/* Embedded Google Map inside Inspector */
.inspector-map-frame-box {
    position: relative;
    height: 280px;
    min-height: 250px;
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #CBD5E1;
    margin-bottom: 16px;
    background: #E2E8F0;
}

    .inspector-map-frame-box iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

.inspector-actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #E2E8F0;
}

.inspector-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 8px;
}

/* Quick Facility Cards Grid below workspace */
.facility-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 3rem;
}

.facility-quick-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.22s ease;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

    .facility-quick-card:hover {
        transform: translateY(-2px);
        border-color: #002559;
        box-shadow: 0 8px 20px rgba(0, 37, 89, 0.08);
    }

    .facility-quick-card.active,
    .facility-quick-card[aria-pressed="true"] {
        border-color: #EB5D31;
        background: #FFFBF9;
        box-shadow: inset 4px 0 0 #EB5D31, 0 8px 20px rgba(235, 93, 49, 0.12);
    }

.facility-card-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #EEF5FB;
    color: #002559;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.facility-quick-card.active .facility-card-num {
    background: #EB5D31;
    color: #FFFFFF;
}

.facility-card-content strong {
    display: block;
    font-size: 0.88rem;
    color: #002559;
    font-weight: 700;
    line-height: 1.3;
}

.facility-card-content span {
    display: block;
    font-size: 0.78rem;
    color: #64748B;
    margin-top: 2px;
}

/* Responsive adjustments */
@media (max-width: 1080px) {
    .presence-workspace {
        grid-template-columns: 1fr;
    }

    .presence-metrics-strip {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .presence-hero-banner {
        padding: 24px 20px;
    }

    .presence-metrics-strip {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .presence-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .presence-filter-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .nrl-map-label {
        display: none;
    }

    .nrl-map-pin img.pin-img {
        width: 32px;
    }

    .nrl-map-surface-wrapper {
        overflow-x: auto;
    }

    .map-scroll-surface {
        min-width: 640px;
    }

    .facility-quick-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .inspector-meta-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .inspector-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* High Contrast Mode for Pan-India Presence */
body.dark-theme .presence-hero-banner {
    background: #000000;
    border: 2px solid #FFFF00;
}

body.dark-theme .presence-pill-badge {
    border-color: #FFFF00;
    color: #FFFF00;
}

body.dark-theme .presence-metric-box {
    background: #000000;
    border-color: #FFFF00;
}

body.dark-theme .presence-metric-num {
    color: #FFFF00;
}

body.dark-theme .presence-toolbar,
body.dark-theme .nrl-map-panel,
body.dark-theme .presence-inspector-panel,
body.dark-theme .facility-quick-card {
    background: #000000;
    border-color: #FFFF00;
    color: #FFFFFF;
}

body.dark-theme .presence-search-input,
body.dark-theme .presence-filter-select,
body.dark-theme .presence-reset-btn {
    background: #000000;
    border-color: #FFFF00;
    color: #FFFF00;
}

body.dark-theme .nrl-map-panel-head,
body.dark-theme .inspector-header,
body.dark-theme .nrl-map-legend {
    background: #111111;
    border-color: #FFFF00;
    color: #FFFFFF;
}

    body.dark-theme .nrl-map-panel-head h3,
    body.dark-theme .inspector-title,
    body.dark-theme .facility-card-content strong {
        color: #FFFF00;
    }

body.dark-theme .inspector-address-box,
body.dark-theme .inspector-meta-chip {
    background: #111111;
    border-color: #FFFF00;
    color: #FFFFFF;
}

    body.dark-theme .inspector-meta-chip strong {
        color: #CBD5E1;
    }

    body.dark-theme .inspector-meta-chip span {
        color: #FFFF00;
    }

body.dark-theme .nrl-map-label {
    background: #000000;
    border-color: #FFFF00;
    color: #FFFF00;
}

body.dark-theme .facility-quick-card.active {
    background: #222222;
    border-color: #FFFF00;
}

/* ==========================================================================
   MAJOR UNITS CARDS & TABLES
   ========================================================================== */
.major-units-container {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    margin-top: 1.5rem;
}

.major-unit-card {
    display: flex;
    flex-direction: row;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(1, 38, 90, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .major-unit-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(1, 38, 90, 0.09);
        border-color: #CBD5E1;
    }

.major-unit-media {
    flex: 0 0 280px;
    max-width: 280px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-right: 1px solid #E2E8F0;
}

    .major-unit-media img {
        width: 100%;
        height: 100%;
        max-height: 230px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #E2E8F0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease;
    }

.major-unit-card:hover .major-unit-media img {
    transform: scale(1.02);
}

.major-unit-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.major-unit-header {
    background: linear-gradient(135deg, #F8FAFC 0%, #EDF2F7 100%);
    padding: 14px 20px;
    border-bottom: 2px solid #DF5927;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.major-unit-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #DF5927;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .major-unit-title i {
        color: #01265A;
        font-size: 1rem;
    }

.major-unit-table-wrap {
    overflow-x: auto;
    flex: 1;
}

.major-unit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

    .major-unit-table tr {
        border-bottom: 1px solid #E2E8F0;
        transition: background 0.15s ease;
    }

        .major-unit-table tr:last-child {
            border-bottom: none;
        }

        .major-unit-table tr:nth-child(even) {
            background: #F8FAFD;
        }

        .major-unit-table tr:hover {
            background: rgba(1, 38, 90, 0.04);
        }

    .major-unit-table td {
        padding: 11px 18px;
        vertical-align: middle;
        line-height: 1.45;
    }

        .major-unit-table td.col-prop {
            width: 34%;
            font-weight: 600;
            color: #DF5927;
        }

        .major-unit-table td.col-sep {
            width: 4%;
            text-align: center;
            color: #94A3B8;
            font-weight: 700;
        }

        .major-unit-table td.col-val {
            color: #1E293B;
            font-weight: 500;
        }

@media (max-width: 860px) {
    .major-unit-card {
        flex-direction: column;
    }

    .major-unit-media {
        flex: none;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #E2E8F0;
        padding: 16px;
    }

        .major-unit-media img {
            max-height: 260px;
            width: 100%;
            max-width: 380px;
            margin: 0 auto;
        }

    .major-unit-table td.col-prop {
        width: 42%;
    }
}

/* ==========================================================================
   MARKETING TERMINALS SHOWCASE & FIGURES
   ========================================================================== */
.terminal-section-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: #01265A;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #DF5927;
    display: flex;
    align-items: center;
    gap: 10px;
}

.terminal-subheading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #DF5927;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin: 1.75rem 0;
}

.terminal-card-figure {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(1, 38, 90, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}

    .terminal-card-figure:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(1, 38, 90, 0.12);
    }

.terminal-photo-wrap {
    overflow: hidden;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    max-height: 300px;
}

    .terminal-photo-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
    }

.terminal-card-figure:hover .terminal-photo-wrap img {
    transform: scale(1.03);
}

.terminal-map-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(1, 38, 90, 0.06);
    margin: 1.75rem 0;
}

.terminal-map-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #F8FAFC;
}

    .terminal-map-wrap img {
        max-width: 100%;
        height: auto;
        max-height: 480px;
        border-radius: 8px;
        border: 1px solid #CBD5E1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

.terminal-caption {
    padding: 11px 18px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #01265A;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .terminal-caption i {
        color: #DF5927;
        font-size: 0.95rem;
    }

.terminal-feature-row {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    margin: 1.75rem 0;
}

.terminal-feature-info {
    flex: 1;
    min-width: 0;
}

.terminal-feature-media {
    flex: 0 0 340px;
    max-width: 340px;
}

@media (max-width: 860px) {
    .terminal-grid-2col {
        grid-template-columns: 1fr;
    }

    .terminal-feature-row {
        flex-direction: column;
    }

    .terminal-feature-media {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================================================
   GENESIS MILESTONES WITH IMAGES TIMELINE
   ========================================================================== */
.genesis-timeline-wrap {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 28px;
}

.genesis-milestone-card {
    display: grid;
    grid-template-columns: 190px 1fr 290px;
    gap: 24px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 3px 12px rgba(0, 37, 89, 0.04);
    transition: all 0.28s ease;
    position: relative;
}

    .genesis-milestone-card:hover {
        border-color: rgba(235, 93, 49, 0.45);
        box-shadow: 0 8px 24px rgba(0, 37, 89, 0.08);
        transform: translateY(-2px);
    }

    .genesis-milestone-card.no-image {
        grid-template-columns: 190px 1fr;
    }

.genesis-date-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.genesis-date-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    line-height: 1.3;
}

    .genesis-date-badge.orange {
        background: linear-gradient(135deg, #EF6E4A 0%, #D84A20 100%);
    }

    .genesis-date-badge.navy {
        background: linear-gradient(135deg, #002559 0%, #00183A 100%);
    }

    .genesis-date-badge.green {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
    }

.genesis-desc-col {
    font-size: 0.96rem;
    color: #1E293B;
    line-height: 1.65;
}

    .genesis-desc-col h4 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: #002559;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .genesis-desc-col h4 i {
            color: #EB5D31;
            font-size: 0.9em;
        }

.genesis-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #EB5D31;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: underline;
    transition: color 0.2s ease;
    margin-left: 4px;
}

    .genesis-doc-link:hover {
        color: #B83B10;
    }

.genesis-media-col {
    width: 100%;
}

.genesis-img-box {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid #CBD5E1;
    box-shadow: 0 4px 14px rgba(0, 20, 50, 0.1);
    aspect-ratio: 16 / 10;
    background: #F1F5F9;
    cursor: pointer;
    text-decoration: none;
}

    .genesis-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.4s ease, filter 0.4s ease;
    }

    .genesis-img-box:hover img {
        transform: scale(1.06);
    }

.genesis-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 37, 89, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    color: #FFFFFF;
    font-size: 1.3rem;
}

.genesis-img-box:hover .genesis-img-overlay {
    opacity: 1;
}

.genesis-img-caption {
    font-size: 0.78rem;
    color: #64748B;
    margin-top: 6px;
    text-align: center;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.genesis-dual-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .genesis-dual-media .genesis-img-box {
        aspect-ratio: 4 / 3;
    }

/* Lightbox Modal for Genesis Images */
.genesis-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(1, 13, 33, 0.88);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

    .genesis-lightbox.active {
        opacity: 1;
        pointer-events: auto;
    }

.genesis-lightbox-card {
    background: #FFFFFF;
    border-radius: 14px;
    max-width: 900px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: zoomLightbox 0.3s ease;
}

@keyframes zoomLightbox {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.genesis-lightbox-media {
    max-height: 65vh;
    background: #021230;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .genesis-lightbox-media img {
        max-height: 65vh;
        width: 100%;
        object-fit: contain;
        display: block;
    }

.genesis-lightbox-foot {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
}

.genesis-lightbox-title {
    font-weight: 700;
    color: #002559;
    font-size: 1.05rem;
}

.genesis-lightbox-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s ease;
    z-index: 10;
}

    .genesis-lightbox-close:hover {
        background: #EF6E4A;
    }

@media (max-width: 960px) {
    .genesis-milestone-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }

        .genesis-milestone-card.no-image {
            grid-template-columns: 1fr;
        }

    .genesis-media-col {
        max-width: 380px;
    }
}

/* ==========================================================================
   CORPORATE FILMS PORTAL & VIDEO LIGHTBOX
   ========================================================================== */
.nrl-films-section {
    margin-bottom: 2.5rem;
}

.nrl-films-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 2px solid #002559;
    padding-bottom: 0.85rem;
    margin-bottom: 2rem;
}

.nrl-films-title {
    margin: 0;
    color: #002559;
    font-size: 1.45rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.nrl-films-badge-archive {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    background: #E0F2FE;
    color: #0369A1;
    border: 1px solid #BAE6FD;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.88rem;
    transition: all 0.2s ease;
}

    .nrl-films-badge-archive:hover {
        background: #0369A1;
        color: #FFFFFF;
    }

.nrl-films-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1.85rem;
    margin-bottom: 2.5rem;
}

.nrl-film-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 37, 89, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

    .nrl-film-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 32px rgba(0, 37, 89, 0.14);
        border-color: #CBD5E1;
    }

.nrl-film-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #021230;
    overflow: hidden;
    cursor: pointer;
}

    .nrl-film-thumb-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        display: block;
    }

.nrl-film-card:hover .nrl-film-thumb-wrap img {
    transform: scale(1.06);
}

.nrl-film-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 50, 0.3) 0%, rgba(0, 10, 30, 0.1) 40%, rgba(0, 15, 40, 0.75) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.nrl-film-card:hover .nrl-film-thumb-overlay {
    background: linear-gradient(180deg, rgba(0, 20, 50, 0.45) 0%, rgba(0, 10, 30, 0.25) 40%, rgba(0, 15, 40, 0.88) 100%);
}

.nrl-film-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 37, 89, 0.88);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 2;
}

.nrl-film-type {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: #F8FAFC;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 2;
}

    .nrl-film-type.youtube {
        background: rgba(220, 38, 38, 0.9);
        color: #FFFFFF;
        border-color: rgba(255, 255, 255, 0.3);
    }

.nrl-film-play-trigger {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(0, 37, 89, 0.85);
    border: 2px solid #EF6E4A;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, box-shadow 0.3s ease;
    z-index: 2;
    padding-left: 3px;
}

.nrl-film-card:hover .nrl-film-play-trigger {
    transform: scale(1.15);
    background: #EF6E4A;
    border-color: #FFFFFF;
    box-shadow: 0 0 25px rgba(239, 110, 74, 0.7);
}

.nrl-film-body {
    padding: 1.2rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.nrl-film-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #002559;
    margin: 0 0 0.5rem 0;
    line-height: 1.45;
}

.nrl-film-desc {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 1rem 0;
    flex-grow: 1;
}

.nrl-film-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid #F1F5F9;
}

.btn-film-play {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: #002559;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

    .btn-film-play:hover {
        background: #EF6E4A;
        transform: translateY(-1px);
    }

.btn-film-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: #F0F9FF;
    color: #0284C7;
    border: 1px solid #BAE6FD;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .btn-film-link:hover {
        background: #0284C7;
        color: #FFFFFF;
        border-color: #0284C7;
    }

/* Secondary Archive Accordion / Grid */
.nrl-archive-toggle-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #002559;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    margin-bottom: 1.5rem;
}

    .nrl-archive-toggle-btn:hover {
        background: #EEF2F6;
        border-color: #CBD5E1;
    }

    .nrl-archive-toggle-btn .archive-chevron {
        transition: transform 0.3s ease;
    }

    .nrl-archive-toggle-btn.open .archive-chevron {
        transform: rotate(180deg);
    }

.nrl-archive-collapse {
    display: block;
}

    .nrl-archive-collapse.collapsed {
        display: none;
    }

/* Video Modal Lightbox */
.nrl-video-modal {
    position: fixed;
    inset: 0;
    background: rgba(3, 12, 27, 0.94);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

    .nrl-video-modal.active {
        display: flex;
        opacity: 1;
    }

.nrl-video-modal-card {
    background: #0B162C;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    width: 100%;
    max-width: 960px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    animation: zoomVideoModal 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomVideoModal {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.nrl-video-modal-head {
    padding: 14px 20px;
    background: #050D1D;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.nrl-video-modal-title {
    color: #F8FAFC;
    font-size: 1.08rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nrl-video-modal-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.nrl-video-modal-extlink {
    color: #38BDF8;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 5px 12px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 6px;
    transition: all 0.2s ease;
}

    .nrl-video-modal-extlink:hover {
        background: rgba(56, 189, 248, 0.18);
        color: #7DD3FC;
    }

.nrl-video-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #F8FAFC;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .nrl-video-modal-close:hover {
        background: #EF6E4A;
        color: #FFFFFF;
        transform: rotate(90deg);
    }

.nrl-video-modal-player-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .nrl-video-modal-player-wrap video,
    .nrl-video-modal-player-wrap iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

.nrl-video-modal-foot {
    padding: 12px 20px;
    background: #050D1D;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #94A3B8;
    flex-wrap: wrap;
    gap: 0.5rem;
}

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

    .nrl-films-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .nrl-film-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-film-link {
        justify-content: center;
    }
}

/* ==========================================================================
   R. RAZOR / DYNAMIC-PAGE MAPPINGS (added for the ASP.NET integration)
   ========================================================================== */

/* --- Base: neutralise a few main.css rules that fight the design --- */
body {
    font-family: var(--font-primary) !important;
    background-color: var(--bg-body);
    color: var(--text-main);
}

.main-heading,
.news-ticker,
.a_rightText,
#modalTitle {
    filter: none !important;
}

main#pageTop {
    outline: none;
}

/* --- Hero carousel on Swiper (slides are positioned by Swiper, not by .active) --- */
.nrl-hero-swiper {
    width: 100%;
    height: 100%;
}

    .nrl-hero-swiper .swiper-wrapper {
        height: 100%;
    }

    .nrl-hero-swiper .hero-slide,
    .nrl-hero-swiper .hero-slide.swiper-slide {
        position: relative;
        visibility: visible;
        height: 100%;
        /* Swiper's fade effect drives opacity + transition-duration inline and
     waits for transitionend — keep the property transitionable. */
        transition-property: opacity;
        transition-timing-function: ease;
    }

        .nrl-hero-swiper .hero-slide.swiper-slide-active {
            pointer-events: auto;
        }

        .nrl-hero-swiper .hero-slide:not(.swiper-slide-active) {
            pointer-events: none;
        }

    .nrl-hero-swiper .swiper-slide-active {
        z-index: 2;
    }

.hero-banner-section .hero-slide .container {
    width: 100%;
}

.carousel-dots-container .carousel-dot {
    flex: 0 0 auto;
}

/* --- What's New ticker (NewsAnnouncements component) --- */
.marquee-ticker-section .news-ticker {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    filter: none;
}

.marquee-ticker-section .news-ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: marquee 55s linear infinite;
    transform: none;
    will-change: transform;
}

    .marquee-ticker-section .news-ticker-track.is-paused,
    .marquee-ticker-section .news-ticker.is-paused .news-ticker-track {
        animation-play-state: paused;
    }

.marquee-ticker-section .ticker-track-container:hover .news-ticker-track,
.marquee-ticker-section .ticker-track-container:focus-within .news-ticker-track {
    animation-play-state: paused;
}

.marquee-ticker-section .news-ticker-track a {
    flex-shrink: 0;
    margin-right: 0;
}

.marquee-ticker-section .marquee-sep {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 6px;
}

.marquee-ticker-section button#newsTickerToggle {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .marquee-ticker-section button#newsTickerToggle:hover,
    .marquee-ticker-section button#newsTickerToggle[aria-pressed="true"] {
        background: var(--nrl-orange);
    }

.quick-links-menu[hidden] {
    display: none !important;
}

/* --- Footer (FooterMenu component + FooterContent CMS block) --- */
footer.siteFooter.main-footer {
    padding: 60px 0 0 0;
    border-top: 4px solid var(--nrl-orange);
}

    footer.siteFooter.main-footer .footer-heading.h4 {
        font-size: 1.05rem;
        margin-top: 0;
    }

footer.siteFooter .footer-grid > .row {
    margin: 0;
}

footer.siteFooter .footer-links-list,
footer.siteFooter ul.footerlinks {
    list-style: none;
    padding: 0;
    margin: 0;
}

    footer.siteFooter ul.footerlinks li.underlined-links a {
        text-decoration: none !important;
    }

        footer.siteFooter ul.footerlinks li.underlined-links a:hover,
        footer.siteFooter ul.footerlinks li.underlined-links a:focus-visible {
            text-decoration: underline !important;
            color: var(--nrl-yellow);
        }

footer.siteFooter .footer-about p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #CBD5E1;
    font-weight: 400;
    margin-top: 4px;
}

footer.siteFooter .footer-logo-box {
    background: #FFFFFF;
    padding: 10px 16px;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 16px;
}

    footer.siteFooter .footer-logo-box img {
        height: 100px;
        max-width: 100%;
        object-fit: contain;
    }

.footer-bottom {
    background: #0A1628;
    color: #CBD5E1;
}

    .footer-bottom p {
        color: #CBD5E1;
        margin: 0;
        font-weight: 400;
    }

    .footer-bottom .footer-bottom-bar {
        border-top: 0;
        margin-top: 0;
    }

    .footer-bottom a {
        color: var(--nrl-orange);
        font-weight: 700;
        text-decoration: none;
    }

        .footer-bottom a:hover {
            text-decoration: underline;
        }

/* --- Back to previous page bar --- */
.back-page-wrap {
    background: var(--bg-body);
    padding: 10px 0 24px;
}

.btn-back-page {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    color: var(--nrl-navy);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-back-page:hover,
    .btn-back-page:focus-visible {
        background: var(--nrl-orange);
        color: #FFFFFF;
        border-color: var(--nrl-orange);
    }

/* --- Back to top --- */
button#backToTop {
    color: var(--nrl-orange) !important;
    bottom: 30px !important;
    background: transparent;
}

    button#backToTop:hover {
        color: var(--nrl-navy) !important;
    }

/* --- Search overlay (offcanvas) --- */
.offcanvas.offcanvas-top#offcanvasTop {
    background: rgba(0, 18, 46, 0.96);
    height: 100vh;
}

#offcanvasTop .offcanvas-header .btn-close {
    color: #FFFFFF;
    opacity: 1;
    background: none;
    font-size: 1.2rem;
}

#offcanvasTop .form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

#offcanvasTop #searchBox {
    gap: 12px;
}

#offcanvasTop #searchInput {
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    border: none;
    font-size: 0.95rem;
}

#offcanvasTop #searchBtn,
#offcanvasTop #voiceBtn {
    border-radius: var(--radius-pill);
    padding: 8px 12px;
    border: none;
}

#offcanvasTop #searchBtn {
    background: var(--nrl-orange);
    color: #FFFFFF;
}

#offcanvasTop #voiceBtn {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
}

#offcanvasTop #searchResults {
    color: #FFFFFF;
}

    #offcanvasTop #searchResults a {
        color: #FFFFFF;
    }

#offcanvasTop .searchModule--popular .eyebrow {
    color: var(--nrl-yellow);
    font-size: 1.1rem;
    font-weight: 700;
}

/* --- Inner page system applied to Razor pages (internalpages / Contents / lists) --- */
.inner-hero-header {
    background-image: linear-gradient(90deg, rgba(0, 37, 89, 0.95) 0%, rgba(0, 37, 89, 0.85) 50%, rgba(0, 37, 89, 0.35) 100%), url('../img/design/inner-banner.jpg');
}

    .inner-hero-header .page-breadcrumb ol,
    .page-breadcrumb ol {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

.page-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .page-breadcrumb li + li::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f054";
        color: var(--nrl-orange);
        font-size: 0.7rem;
    }

h1.page-main-heading {
    font-size: 2.2rem;
}

.inner-page-body section.inner-section {
    padding: 0;
}

.inner-page-body .content-paper-card .container {
    padding: 0;
    max-width: 100%;
}

.inner-page-body .last-updated-tag {
    justify-content: flex-end;
}

.inner-page-body strong.card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-size: 0.82rem;
    color: var(--text-subtle);
    font-weight: 600;
}

/* Rich-text content coming from the CMS inside the paper card */
.content-paper-card h2,
.content-paper-card h3,
.content-paper-card h4 {
    color: var(--nrl-navy);
    font-weight: 700;
}

.content-paper-card h2 {
    font-size: 1.5rem;
    margin: 0 0 16px 0;
}

.content-paper-card h3 {
    font-size: 1.2rem;
    margin: 28px 0 12px 0;
}

.content-paper-card p {
    color: var(--text-muted);
    /* line-height: 1.8; */
    /* margin-bottom: 1rem; */
    font-size: 0.95rem;
}

.content-paper-card a:not(.btn):not(.nrl-btn) {
    color: var(--nrl-orange);
    font-weight: 600;
}

.content-paper-card ul:not([class]),
.content-paper-card ol:not([class]) {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
}

    .content-paper-card ul:not([class]) li + li,
    .content-paper-card ol:not([class]) li + li {
        margin-top: 6px;
    }

.content-paper-card img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* Plain and Bootstrap tables inside the card get the NRL table system */
.content-paper-card table:not(.nrl-table),
.content-paper-card .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    margin: 16px 0 28px 0;
}

    .content-paper-card table:not(.nrl-table) thead th,
    .content-paper-card .table thead th {
        background: var(--nrl-navy);
        color: #FFFFFF;
        font-weight: 700;
        padding: 14px 18px;
        border: 1px solid #001A3D;
        letter-spacing: 0.02em;
        vertical-align: middle;
    }

    .content-paper-card table:not(.nrl-table) td,
    .content-paper-card .table td {
        padding: 13px 18px;
        border: 1px solid #E2E8F0;
        color: var(--text-main);
        vertical-align: top;
        background: transparent;
    }

    .content-paper-card table:not(.nrl-table) tbody tr:nth-child(even),
    .content-paper-card .table tbody tr:nth-child(even) {
        background: #F8FAFD;
    }

    .content-paper-card table:not(.nrl-table) tbody tr:hover,
    .content-paper-card .table tbody tr:hover {
        background: rgba(1, 38, 90, 0.05);
    }

.content-paper-card .table-responsive {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 2px 10px rgba(0, 37, 89, 0.04);
    margin: 24px 0 35px 0;
}

    .content-paper-card .table-responsive > table {
        margin: 0;
    }

/* Buttons & forms used by dynamic pages (feedback, contact, tenders) */
.nrl-btn,
.content-paper-card .btn-primary,
.content-paper-card button[type="submit"].btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--nrl-navy);
    color: #FFFFFF;
    border: 1px solid var(--nrl-navy);
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .nrl-btn:hover,
    .nrl-btn:focus-visible,
    .content-paper-card .btn-primary:hover,
    .content-paper-card .btn-primary:focus-visible {
        background: var(--nrl-orange);
        border-color: var(--nrl-orange);
        color: #FFFFFF;
    }

.nrl-btn-outline,
.content-paper-card .btn-outline-primary,
.content-paper-card .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    color: var(--nrl-navy);
    border: 1.5px solid var(--nrl-navy);
    padding: 9px 22px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .nrl-btn-outline:hover,
    .content-paper-card .btn-outline-primary:hover,
    .content-paper-card .btn-secondary:hover {
        background: var(--nrl-navy);
        color: #FFFFFF;
    }

.content-paper-card .form-control,
.content-paper-card .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid #CBD5E1;
    padding: 10px 14px;
    font-size: 0.92rem;
    color: var(--text-main);
}

    .content-paper-card .form-control:focus,
    .content-paper-card .form-select:focus {
        border-color: var(--nrl-orange);
        box-shadow: 0 0 0 3px rgba(239, 110, 74, 0.2) !important;
    }

.content-paper-card .form-label,
.content-paper-card label {
    font-weight: 600;
    color: var(--nrl-navy);
    font-size: 0.88rem;
    margin-bottom: 6px;
}

/* DataTables used on tender / newsroom pages */
.content-paper-card .dataTables_wrapper .dataTables_filter input,
.content-paper-card .dataTables_wrapper .dataTables_length select,
.content-paper-card .dt-search input,
.content-paper-card .dt-length select {
    border-radius: var(--radius-pill);
    border: 1px solid #CBD5E1;
    padding: 6px 14px;
    margin-left: 6px;
}

.content-paper-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.content-paper-card .dt-paging .dt-paging-button.current {
    background: var(--nrl-navy) !important;
    color: #FFFFFF !important;
    border-color: var(--nrl-navy) !important;
    border-radius: var(--radius-sm);
}

.content-paper-card .dt-buttons .btn,
.content-paper-card .dt-buttons button {
    border-radius: var(--radius-pill);
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    color: var(--nrl-navy);
    font-weight: 600;
    font-size: 0.8rem;
}

/* Cards used by list pages (newsroom, gallery, tenders) */
.nrl-list-card {
    background: #FFFFFF;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .nrl-list-card:hover,
    .nrl-list-card:focus-within {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover-float);
    }

    .nrl-list-card .nrl-list-card-img {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: #EEF2F7;
    }

        .nrl-list-card .nrl-list-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0;
        }

    .nrl-list-card .nrl-list-card-body {
        padding: 18px 20px 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1;
    }

    .nrl-list-card .nrl-list-card-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--nrl-navy);
        margin: 0;
        line-height: 1.4;
    }

        .nrl-list-card .nrl-list-card-title a {
            color: inherit;
            text-decoration: none;
        }

            .nrl-list-card .nrl-list-card-title a:hover {
                color: var(--nrl-orange);
            }

    .nrl-list-card .nrl-list-card-meta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text-subtle);
    }

        .nrl-list-card .nrl-list-card-meta i {
            color: var(--nrl-orange);
        }

    .nrl-list-card .nrl-list-card-text {
        color: var(--text-muted);
        font-size: 0.88rem;
        margin: 0;
    }

    .nrl-list-card .nrl-list-card-actions {
        margin-top: auto;
        padding-top: 8px;
    }

/* Pill tag (used for Archive / New / PDF labels) */
.nrl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #FDF2EF;
    color: var(--nrl-orange);
    border: 1px solid #F8CFC2;
}

    .nrl-pill.navy {
        background: #EEF3FA;
        color: var(--nrl-navy);
        border-color: #CBD9EC;
    }

/* Page toolbar (filters / archive links on top of list pages) */
.nrl-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Error pages */
.nrl-error-page {
    text-align: center;
    padding: 40px 20px;
}

    .nrl-error-page .nrl-error-code {
        font-size: 5rem;
        font-weight: 900;
        color: var(--nrl-orange);
        line-height: 1;
        margin-bottom: 12px;
    }

    .nrl-error-page h2 {
        color: var(--nrl-navy);
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

/* --- Right side social flyout (layout) — links are the real NRL handles --- */
.right-social-flyout-wrap:focus-within .social-flyout-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

/* --- Noteworthy sites (OtherWebsiteLinks CMS block) --- */
.noteworthy-logo-card a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   ACCESSIBILITY (WCAG 2.1 AA / GIGW 3.0)
   ========================================================================== */
:focus-visible {
    outline: 3px solid var(--nrl-orange);
    outline-offset: 2px;
}

#navmenu a:focus-visible,
.hero-btn-primary:focus-visible,
.hero-btn-secondary:focus-visible,
.quick-service-card:focus-visible,
.quick-access-card:focus-visible {
    outline: 3px solid var(--nrl-yellow);
    outline-offset: 2px;
}

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

/* Skip link lives in the utility strip in this template; keep a visible focus */
#header .topnav-list a[href="#maincontent"]:focus-visible {
    background: var(--nrl-orange);
    color: #FFFFFF;
    padding: 2px 8px;
    border-radius: 4px;
    outline-color: #FFFFFF;
}

/* Letter spacing toggle (main.js adds class via jQuery) */
body.letter-spacing,
body.letter-spacing * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

/* Reduced motion: stop marquees / autoplay visuals */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .news-ticker-track,
    .ticker-track {
        animation: none !important;
        white-space: normal;
    }

    .noteworthy-track {
        animation: none !important;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
}

/* --- Dark theme (project toggle) extras for the Razor-mapped parts --- */
body.dark-theme #header.header {
    background: #000000;
    border-bottom-color: #FFFF00;
}

body.dark-theme #navmenu > ul > li > a {
    color: #FFFF00;
}

    body.dark-theme #navmenu > ul > li > a:hover,
    body.dark-theme #navmenu > ul > li.active > a {
        background: #1a1a1a;
        color: #FFFFFF;
    }

body.dark-theme #navmenu li.dropdown > ul {
    background: #121212;
}

    body.dark-theme #navmenu li.dropdown > ul a {
        color: #FFFF00;
    }

        body.dark-theme #navmenu li.dropdown > ul a:hover {
            background: #1a1a1a;
            color: #FFFFFF;
        }

body.dark-theme .content-paper-card,
body.dark-theme .nrl-list-card {
    background: #121212;
    color: #FFFFFF;
}

    body.dark-theme .content-paper-card p,
    body.dark-theme .content-paper-card li,
    body.dark-theme .content-paper-card td {
        color: #FFFFFF;
    }

    body.dark-theme .content-paper-card h2,
    body.dark-theme .content-paper-card h3,
    body.dark-theme .nrl-list-card .nrl-list-card-title {
        color: #FFFF00;
    }

body.dark-theme .marquee-ticker-section,
body.dark-theme .counters-section .counter-box,
body.dark-theme .quick-service-card,
body.dark-theme .quick-access-card {
    background: #121212;
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
    #header .header-wrapper,
    #navmenu,
    .marquee-ticker-section,
    .right-social-flyout-wrap,
    .social-sticky-buttons,
    button#backToTop,
    .back-page-wrap,
    .hero-banner-section .carousel-nav-arrows,
    .hero-banner-section .carousel-bottom-dock,
    .sidebtn-box {
        display: none !important;
    }

    #header.header {
        position: static;
        box-shadow: none;
    }

    .inner-hero-header {
        background: none;
        border-bottom: 2px solid #000;
        min-height: 0;
        padding: 10px 0;
    }

    h1.page-main-heading,
    .page-breadcrumb,
    .page-breadcrumb a {
        color: #000 !important;
        text-shadow: none;
    }

    .content-paper-card {
        box-shadow: none;
        border: 0;
        padding: 0;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* Social flyout: keyboard/touch toggle state (added by nrl-design.js) */
.right-social-flyout-wrap.is-open .social-flyout-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}

.right-social-flyout-wrap.is-open .social-flyout-trigger .social-trigger-arrow {
    transform: rotate(180deg);
}

/* Business tab cards are real <button role="tab"> elements (keyboard accessible) */
button.tab-card {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: #FFFFFF;
}

.tab-card .tab-card-header {
    display: flex;
}

.tab-card .tab-heading,
.tab-card .tab-subtext {
    display: block;
}

.business-content-display .tab-pane[hidden] {
    display: none;
}

.counters-section .counter-number {
    margin: 0;
}

/* ==========================================================================
   RESPONSIVE ADDITIONS (hero / dock / sections on small screens)
   ========================================================================== */
@media (max-width: 991.98px) {
    .hero-banner-section {
        height: auto;
        min-height: 0;
    }

    .nrl-hero-swiper .hero-slide {
        min-height: 520px;
        padding: 56px 0 120px;
    }

    .hero-title {
        font-size: 2.1rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .carousel-nav-arrows {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .nrl-hero-swiper .hero-slide {
        padding: 40px 0 110px;
        min-height: 480px;
    }

    .hero-title {
        font-size: 1.55rem;
    }

    .hero-subtitle {
        font-size: 0.82rem;
        letter-spacing: 0.02em;
    }

    .hero-description {
        font-size: 0.85rem;
    }

    .hero-cta-group {
        flex-direction: column;
        gap: 10px;
    }

        .hero-cta-group a {
            width: 100%;
            justify-content: center;
        }

    .carousel-bottom-dock {
        gap: 6px;
        padding: 6px 10px;
    }

    .ticker-wrapper {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .marquee-ticker-section .ticker-track-container {
        order: 10;
        flex: 1 1 100%;
    }

    .counters-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .counter-box {
        padding: 20px 12px;
    }

    .main-heading {
        font-size: 1.6rem;
    }

    h1.page-main-heading {
        font-size: 1.6rem;
    }

    .inner-hero-header {
        min-height: 140px;
        padding: 24px 0;
    }
}

/* ==========================================================================
   WCAG 2.1 AA CONTRAST — white text on orange surfaces and orange text on
   white use the AA-safe orange; brand orange stays for borders/icons/accents.
   ========================================================================== */
.hero-badge,
.ticker-badge,
.ticker-tag,
.media-badge,
.hero-btn-primary,
.sus-btn-primary,
.media-cta-link,
.social-flyout-trigger,
.nrl-btn:hover,
.nrl-btn:focus-visible,
.quick-links-menu a:hover,
#header .font-adjust ul li button#fontReset,
#header .font-adjust ul li button:hover,
#header .topnav-list li button:hover,
#header .topnav-list li button[aria-pressed="true"],
#header .news-lang a#lang:hover,
#header .theme-change ul li .theme-item.active,
.marquee-ticker-section button#newsTickerToggle:hover,
.marquee-ticker-section button#newsTickerToggle[aria-pressed="true"],
.content-paper-card .btn-primary:hover,
.content-paper-card .btn-primary:focus-visible {
    background: var(--nrl-orange-aa) !important;
    background-image: none !important;
    color: #FFFFFF !important;
}

    .hero-btn-primary:hover,
    .sus-btn-primary:hover,
    .media-cta-link:hover {
        background: #A93D14 !important;
        color: #FFFFFF !important;
    }

    .hero-btn-primary .play-circle {
        background: rgba(255, 255, 255, 0.22);
    }

.table-highlight,
.nrl-table .table-highlight,
.counter-unit,
.nrl-pill,
.csr-link,
.timeline-view:hover,
.sub-heading-text a,
.footer-bottom a,
.kicker,
#navmenu > ul > li > a:hover,
#navmenu > ul > li.active > a,
#navmenu > ul > li.current > a,
#navmenu li.dropdown > ul a:hover,
#navmenu li.dropdown > ul a:focus-visible,
#navmenu li.dropdown > ul li:hover > a {
    color: var(--nrl-orange-aa);
}

.nrl-table th.orange-th {
    background: var(--nrl-orange-aa);
    border-color: #A93D14;
}

/* Yellow accent on navy is 13:1 — fine. Light grey copy on dark surfaces: */
.hero-description,
.sustainability-intro,
.section-head.inverse p,
.caption-copy,
.footer-official-text {
    color: #E2E8F0;
}

.pane-tag {
    color: #A93D14;
}

/* Dark theme: tables */
body.dark-theme .content-paper-card table tbody tr:nth-child(even),
body.dark-theme .content-paper-card .table tbody tr:nth-child(even),
body.dark-theme .nrl-table tbody tr:nth-child(even),
body.dark-theme .nrl-table tbody tr:hover,
body.dark-theme .content-paper-card table tbody tr:hover {
    background: #1a1a1a !important;
}

body.dark-theme .content-paper-card table td,
body.dark-theme .nrl-table td {
    background: transparent !important;
    color: #FFFFFF !important;
}

body.dark-theme .content-paper-card table th,
body.dark-theme .nrl-table th {
    background: #000000 !important;
    color: #FFFF00 !important;
}

body.dark-theme .inner-hero-header {
    background-image: none;
    background-color: #000;
}

/* Bootstrap nav-tabs inside content pages (newsroom etc.) */
.content-paper-card .nav-tabs {
    border-bottom: 2px solid var(--border-subtle);
    gap: 6px;
    margin-bottom: 24px;
}

    .content-paper-card .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-radius: var(--radius-pill) var(--radius-pill) 0 0;
        color: var(--nrl-navy);
        font-weight: 700;
        font-size: 0.9rem;
        padding: 10px 20px;
        background: transparent;
    }

        .content-paper-card .nav-tabs .nav-link:hover,
        .content-paper-card .nav-tabs .nav-link:focus-visible {
            background: #FDF2EF;
            color: var(--nrl-orange-aa);
            border-color: transparent;
        }

        .content-paper-card .nav-tabs .nav-link.active {
            background: var(--nrl-navy);
            color: #FFFFFF;
            border-color: var(--nrl-navy);
        }

body.dark-theme .content-paper-card .nav-tabs .nav-link {
    color: #FFFF00;
}

    body.dark-theme .content-paper-card .nav-tabs .nav-link.active {
        background: #FFFF00;
        color: #000;
    }

/* ==========================================================================
   POLISH PASS — dynamic pages (tenders / newsroom / gallery / forms)
   ========================================================================== */

/* Footer: remove legacy dot pseudo-element, keep the design chevron */
footer.siteFooter .footerlinks a::before {
    display: none !important;
    content: none !important;
}

footer.siteFooter .footerlinks a {
    padding-left: 0;
    font-size: 0.84rem;
    font-weight: 400;
    color: #CBD5E1;
}

/* Legacy tab buttons (.media-buttons) → design tabs */
.content-paper-card .media-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-paper-card .media-btn,
.content-paper-card .media-btn2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1.5px solid var(--border-subtle);
    color: var(--nrl-navy) !important;
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: none;
    text-decoration: none;
    transition: all 0.2s ease;
}

    .content-paper-card .media-btn::before {
        font-size: 0.95rem;
    }

    .content-paper-card .media-btn span,
    .content-paper-card .media-btn .text-white {
        color: inherit !important;
    }

    .content-paper-card .media-btn:hover,
    .content-paper-card .media-btn:focus-visible {
        transform: none;
        background: #FDF2EF !important;
        border-color: var(--nrl-orange);
        color: var(--nrl-orange-aa) !important;
        box-shadow: none;
    }

    .content-paper-card .media-btn.active,
    .content-paper-card .media-btn[aria-selected="true"] {
        background: var(--nrl-navy) !important;
        border-color: var(--nrl-navy);
        color: #FFFFFF !important;
    }

/* Bootstrap nav-tabs: stronger than UX4G defaults */
.content-paper-card .nav-tabs > li > .nav-link,
.content-paper-card .nav-tabs .nav-item .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -2px;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: #FFFFFF;
    color: var(--nrl-navy);
    font-weight: 700;
    font-size: 0.86rem;
    padding: 9px 18px;
}

.content-paper-card .nav-tabs {
    border-bottom: 0;
    gap: 8px;
    padding-bottom: 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

    .content-paper-card .nav-tabs > li > .nav-link:hover,
    .content-paper-card .nav-tabs > li > .nav-link:focus-visible,
    .content-paper-card .nav-tabs .nav-item .nav-link:hover {
        background: #FDF2EF;
        border-color: var(--nrl-orange);
        color: var(--nrl-orange-aa);
    }

    .content-paper-card .nav-tabs > li > .nav-link.active,
    .content-paper-card .nav-tabs > li > .nav-link[aria-selected="true"],
    .content-paper-card .nav-tabs .nav-item .nav-link.active {
        background: var(--nrl-navy) !important;
        border-color: var(--nrl-navy) !important;
        color: #FFFFFF !important;
    }

/* Toolbar select */
.nrl-page-toolbar .form-select {
    min-width: 120px;
    border-radius: var(--radius-pill);
    padding: 8px 36px 8px 16px;
    border: 1.5px solid var(--border-subtle);
    font-weight: 600;
    color: var(--nrl-navy);
}

.nrl-page-toolbar .form-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* List card titles: navy, orange on hover (beats the generic content link rule) */
.content-paper-card .nrl-list-card .nrl-list-card-title a,
.content-paper-card .nrl-list-card .nrl-list-card-title a:visited {
    color: var(--nrl-navy);
    font-weight: 700;
    text-decoration: none;
}

    .content-paper-card .nrl-list-card .nrl-list-card-title a:hover,
    .content-paper-card .nrl-list-card .nrl-list-card-title a:focus-visible {
        color: var(--nrl-orange-aa);
        text-decoration: underline;
    }

.nrl-list-card .nrl-list-card-title .notice-icon {
    color: var(--nrl-orange);
    margin-right: 4px;
}

.nrl-list-card .nrl-list-card-title .nrl-pill {
    vertical-align: middle;
    margin-left: 6px;
}

.nrl-list-card {
    border-top: 3px solid transparent;
}

    .nrl-list-card:hover,
    .nrl-list-card:focus-within {
        border-top-color: var(--nrl-orange);
    }

/* DataTables (tenders, archives) */
.nrl-table,
.nrl-table th,
.nrl-table td {
    text-align: left;
}

    .nrl-table th.text-end,
    .nrl-table td.text-end {
        text-align: right;
    }

    .nrl-table.dataTable thead tr.filter-row th,
    .nrl-table thead tr.filter-row th {
        background: #F8FAFD !important;
        border-color: #E2E8F0;
        padding: 8px 10px;
    }

        .nrl-table thead tr.filter-row th input {
            width: 100%;
            min-width: 0;
            border-radius: var(--radius-sm);
            border: 1px solid #CBD5E1;
            font-size: 0.8rem;
            padding: 6px 10px;
            background: #FFFFFF;
        }

#tenderTable thead th:nth-child(3),
#mediaTable thead th:nth-child(3),
#priceTable thead th:nth-child(3) {
    min-width: 280px;
}

.nrl-table.dataTable thead .sorting::before,
.nrl-table.dataTable thead .sorting::after,
.nrl-table.dataTable thead .sorting_asc::before,
.nrl-table.dataTable thead .sorting_asc::after,
.nrl-table.dataTable thead .sorting_desc::before,
.nrl-table.dataTable thead .sorting_desc::after {
    color: #FFFFFF;
    opacity: 0.5;
}

.content-paper-card .dataTables_wrapper .dataTables_filter,
.content-paper-card .dt-container .dt-search {
    margin-bottom: 12px;
}

    .content-paper-card .dataTables_wrapper .dataTables_filter label,
    .content-paper-card .dt-container .dt-search label {
        font-weight: 600;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

.content-paper-card .dataTables_wrapper .dataTables_info,
.content-paper-card .dt-container .dt-info {
    color: var(--text-subtle);
    font-size: 0.85rem;
    padding-top: 14px;
}

.content-paper-card .dataTables_wrapper .dataTables_paginate,
.content-paper-card .dt-container .dt-paging {
    padding-top: 10px;
}

    .content-paper-card .dataTables_wrapper .dataTables_paginate .paginate_button,
    .content-paper-card .dt-container .dt-paging .dt-paging-button,
    .content-paper-card .pagination .page-link {
        border: 1px solid var(--border-subtle) !important;
        border-radius: var(--radius-sm) !important;
        background: #FFFFFF !important;
        color: var(--nrl-navy) !important;
        margin: 0 2px;
        padding: 6px 12px;
        font-size: 0.85rem;
        font-weight: 600;
        box-shadow: none !important;
        background-image: none !important;
    }

        .content-paper-card .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
        .content-paper-card .dt-container .dt-paging .dt-paging-button:hover,
        .content-paper-card .pagination .page-link:hover {
            background: #FDF2EF !important;
            border-color: var(--nrl-orange) !important;
            color: var(--nrl-orange-aa) !important;
        }

        .content-paper-card .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .content-paper-card .dt-container .dt-paging .dt-paging-button.current,
        .content-paper-card .pagination .page-item.active .page-link {
            background: var(--nrl-navy) !important;
            border-color: var(--nrl-navy) !important;
            color: #FFFFFF !important;
        }

        .content-paper-card .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .content-paper-card .dt-container .dt-paging .dt-paging-button.disabled {
            opacity: 0.45;
        }

.content-paper-card .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

    .content-paper-card .dt-buttons .dt-button,
    .content-paper-card .dt-buttons button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: var(--radius-pill) !important;
        background: #FFFFFF !important;
        background-image: none !important;
        border: 1.5px solid var(--border-subtle) !important;
        color: var(--nrl-navy) !important;
        font-weight: 700;
        font-size: 0.78rem;
        padding: 6px 14px !important;
        margin: 0;
    }

        .content-paper-card .dt-buttons .dt-button:hover,
        .content-paper-card .dt-buttons button:hover {
            background: var(--nrl-navy) !important;
            border-color: var(--nrl-navy) !important;
            color: #FFFFFF !important;
        }

.content-paper-card table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.content-paper-card table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--nrl-orange);
    border: 0;
    color: #FFFFFF;
    border-radius: 50%;
}

.content-paper-card .tender-link {
    color: var(--nrl-navy);
    font-weight: 600;
}

    .content-paper-card .tender-link:hover {
        color: var(--nrl-orange-aa);
    }

/* Forms */
.content-paper-card .form-note {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.content-paper-card .form-text {
    color: var(--text-subtle);
    font-size: 0.78rem;
}

.content-paper-card .required,
.content-paper-card .req-star {
    color: #B91C1C;
    margin-left: 2px;
}

.content-paper-card .captcha-box {
    display: inline-flex;
    align-items: center;
    min-width: 150px;
    padding: 8px 18px;
    background: #EEF3FA;
    border: 1.5px dashed var(--nrl-navy);
    border-radius: var(--radius-sm);
    font-family: "Courier New", monospace;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--nrl-navy);
    user-select: none;
}

.content-paper-card #captchaRefreshBtn {
    border-radius: var(--radius-pill);
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--nrl-navy);
    color: var(--nrl-navy);
    background: #FFFFFF;
}

    .content-paper-card #captchaRefreshBtn:hover {
        background: var(--nrl-navy);
        color: #FFFFFF;
    }

.content-paper-card .form-status:empty {
    display: none;
}

.content-paper-card .form-status[role="alert"]:not(:empty) {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.content-paper-card .form-status[role="status"]:not(:empty) {
    background: #ECFDF5;
    border: 1px solid #6EE7B7;
    color: #065F46;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.content-paper-card .text-danger.field-validation-error,
.content-paper-card span[data-valmsg-for].field-validation-error {
    display: block;
    font-size: 0.8rem;
    margin-top: 4px;
    color: #B91C1C !important;
}

.content-paper-card .input-validation-error {
    border-color: #DC2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.content-paper-card .btn-secondary,
.content-paper-card button[type="reset"] {
    background: #FFFFFF;
    color: var(--nrl-navy);
    border: 1.5px solid var(--nrl-navy);
}

/* Section rhythm inside the paper card */
.content-paper-card > .content-section-title:first-child,
.content-paper-card > form > .content-section-title:first-child,
.content-paper-card .tab-pane > .content-section-title:first-child {
    margin-top: 0;
}

.content-paper-card .last-updated-tag {
    margin-top: 28px;
    margin-bottom: 0;
    padding-top: 14px;
    padding-bottom: 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 0;
}

    .content-paper-card .last-updated-tag:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        margin-bottom: 24px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-subtle);
    }

/* Small screens: give tables and cards room */
@media (max-width: 767.98px) {
    .inner-page-body {
        padding: 24px 0 40px;
    }

        .inner-page-body .container {
            padding-left: 12px;
            padding-right: 12px;
        }

    .content-paper-card {
        padding: 20px 14px;
        border-radius: 12px;
    }

    .nrl-page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

        .nrl-page-toolbar .media-buttons,
        .nrl-page-toolbar .nav-tabs {
            width: 100%;
        }

        .nrl-page-toolbar > a.nrl-btn-outline {
            justify-content: center;
        }

    .content-paper-card .dt-buttons {
        justify-content: flex-start;
    }

    .content-paper-card .dataTables_wrapper .dataTables_filter input,
    .content-paper-card .dt-container .dt-search input {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }

    .content-paper-card .dataTables_wrapper .dataTables_filter label,
    .content-paper-card .dt-container .dt-search label {
        display: block;
        width: 100%;
    }

    .nrl-table th,
    .nrl-table td,
    .content-paper-card table td,
    .content-paper-card table th {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .content-paper-card h2,
    .content-section-title {
        font-size: 1.2rem;
    }

    .nrl-error-page .nrl-error-code {
        font-size: 3.5rem;
    }
}

.content-paper-card .dt-buttons .dt-button,
.content-paper-card .dt-buttons button {
    flex: 0 0 auto;
    width: auto;
}

.nrl-table th.dt-type-numeric,
.nrl-table td.dt-type-numeric,
.nrl-table th.dt-right,
.nrl-table td.dt-right {
    text-align: left;
}

.content-paper-card a.tender-link {
    color: var(--nrl-navy) !important;
}

    .content-paper-card a.tender-link:hover,
    .content-paper-card a.tender-link:focus-visible {
        color: var(--nrl-orange-aa) !important;
    }

.content-paper-card .nrl-list-card .nrl-list-card-title a,
.content-paper-card .nrl-list-card .nrl-list-card-title a:visited {
    color: var(--nrl-navy) !important;
}

    .content-paper-card .nrl-list-card .nrl-list-card-title a:hover,
    .content-paper-card .nrl-list-card .nrl-list-card-title a:focus-visible {
        color: var(--nrl-orange-aa) !important;
    }

table.dataTable.nrl-table th.dt-type-numeric,
table.dataTable.nrl-table td.dt-type-numeric,
table.dataTable.nrl-table th.dt-type-date,
table.dataTable.nrl-table td.dt-type-date {
    text-align: left !important;
}

table.dataTable.nrl-table thead > tr > th.dt-orderable-asc,
table.dataTable.nrl-table thead > tr > th.dt-orderable-desc {
    padding-right: 28px;
}

/* Social flyout: compact on small screens so it never covers content */
@media (max-width: 767.98px) {
    .right-social-flyout-wrap {
        top: auto;
        bottom: 90px;
        transform: none;
    }

    .social-flyout-trigger {
        padding: 8px 6px;
        font-size: 0.65rem;
    }

    .social-flyout-panel {
        width: min(300px, calc(100vw - 60px));
        top: auto;
        bottom: 0;
        transform: translateX(20px);
    }

    .right-social-flyout-wrap:hover .social-flyout-panel,
    .right-social-flyout-wrap.is-open .social-flyout-panel,
    .right-social-flyout-wrap:focus-within .social-flyout-panel {
        transform: translateX(0);
    }
}

table.dataTable.nrl-table th.dt-type-numeric div.dt-column-header,
table.dataTable.nrl-table th.dt-type-date div.dt-column-header {
    flex-direction: row;
}

.nrl-btn-outline,
.content-paper-card .btn-outline-primary {
    color: var(--nrl-navy);
    border-color: var(--nrl-navy);
}

    .nrl-btn-outline:hover,
    .nrl-btn-outline:focus-visible {
        background: var(--nrl-navy);
        color: #FFFFFF;
    }

.content-paper-card a.nrl-btn-outline:not(:hover) {
    color: var(--nrl-navy) !important;
}

.content-paper-card a.nrl-btn:not(:hover) {
    color: #FFFFFF !important;
}

/* ==========================================================================
   REFINEMENT PASS 2 — typography scale, header bar, mobile/tablet layout
   ========================================================================== */
:root {
    --text-muted: #000000;
}

/* Slightly larger, more readable type across the system */
#navmenu > ul > li > a {
    font-size: 0.92rem;
}

#navmenu li.dropdown > ul a {
    font-size: 0.86rem;
}

#navmenu li.dropdown > ul li.dropdown > ul a {
    font-size: 0.86rem;
}

.hero-description {
    font-size: 1.02rem;
    line-height: 1.7;
}

.sub-heading-text {
    font-size: 1rem;
}

.counter-label {
    font-size: 0.95rem;
}

.tab-subtext {
    font-size: 0.86rem;
}

.qs-desc {
    font-size: 0.86rem;
    line-height: 1.6;
}

.qs-title {
    font-size: 1.02rem;
}

.esg-pillar-desc {
    font-size: 0.86rem;
}

.sustainability-intro {
    font-size: 1rem;
}

.media-sub {
    font-size: 0.9rem;
}

.caption-copy {
    font-size: 1rem;
}

.footer-links-list a,
footer.siteFooter .footerlinks a {
    font-size: 0.9rem;
}

footer.siteFooter .footer-about p {
    font-size: 0.9rem;
}

.footer-bottom p {
    font-size: 0.85rem;
}

.ticker-item {
    /* font-size: 0.88rem; */
}

.content-paper-card p {
    font-size: 1rem;
}

.content-paper-card ul:not([class]) li,
.content-paper-card ol:not([class]) li {
    font-size: 1rem;
}

.nrl-table,
.content-paper-card table:not(.nrl-table),
.content-paper-card .table {
    font-size: 0.95rem;
}

.nrl-list-card .nrl-list-card-title {
    font-size: 1.05rem;
}

.nrl-list-card .nrl-list-card-text {
    font-size: 0.92rem;
}

.page-breadcrumb {
    font-size: 0.92rem;
}

.last-updated-tag,
.inner-page-body strong.card {
    font-size: 0.85rem;
}

.content-paper-card .form-text {
    font-size: 0.82rem;
}

/* Header: tidy vertical rhythm on desktop */
@media (min-width: 1200px) {
    #header .headermenus {
        gap: 8px;
        padding-bottom: 10px;
    }

    #header .header-wrapper {
        padding: 7px 22px 7px 38px;
    }

    #navmenu > ul > li > a {
        padding: 9px 15px;
    }
}

/* Header: tablet + mobile — utility strip becomes a full-width bar */
@media (max-width: 1199.98px) {
    #header .navheader {
        padding: 0 !important;
    }

    #header .header-wrapper {
        border-radius: 0;
        padding: 6px 16px;
        justify-content: space-between;
        border-top: 0;
        border-bottom: 2.5px solid var(--nrl-orange);
        font-size: 0.78rem;
    }

        #header .header-wrapper .topnav-list li a {
            font-size: 1.05rem;
        }

    #header .accdiv {
        margin-left: auto;
    }

    #navmenu.navmenu {
        padding: 10px 16px;
    }

    #navmenu .logo-img img {
        height: 56px;
    }
}

/* Tablet (768–991): 2x2 counters, 2-col quick services, 3-col quick links */
@media (max-width: 991.98px) {
    .counters-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-access-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

        .footer-grid .footer-brand-col {
            grid-column: 1 / -1;
        }

    .grid-2x2 {
        grid-template-columns: 1fr;
    }
}

/* Phones */
@media (max-width: 767.98px) {
    .quick-services-section .quick-access-grid-4col {
        gap: 12px;
    }

    .quick-service-card {
        padding: 18px 16px;
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }

        .quick-service-card .qs-icon-wrap {
            flex: 0 0 48px;
            width: 48px;
            height: 48px;
            margin: 0;
            font-size: 1.1rem;
        }

        .quick-service-card .qs-info {
            min-width: 0;
        }

    .qs-title {
        font-size: 0.98rem;
        margin-bottom: 4px;
    }

    .qs-desc {
        font-size: 0.82rem;
    }

    .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .quick-access-card {
        padding: 16px 8px;
    }

        .quick-access-card .qa-icon-wrap {
            width: 52px;
            height: 52px;
            font-size: 1.15rem;
        }

    .qa-title {
        font-size: 0.85rem;
    }

    .business-tabs-grid {
        grid-template-columns: 1fr;
    }

    .pane-grid {
        gap: 20px;
    }

    .esg-pillars-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .esg-actions-row {
        flex-direction: column;
        align-items: stretch;
    }

        .esg-actions-row a {
            justify-content: center;
        }

    .section-head.inverse {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .timeline-caption {
        flex-direction: column;
        align-items: stretch;
    }

        .timeline-caption .caption-media {
            max-width: 100%;
        }

    .noteworthy-logo-card {
        min-width: 120px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }

        .footer-grid .footer-brand-col {
            grid-column: 1 / -1;
        }

    .footer-links-list li + li,
    footer.siteFooter .footerlinks li + li {
        margin-top: 6px;
    }

    footer.siteFooter.main-footer {
        padding-top: 36px;
    }

    .footer-heading {
        margin-bottom: 12px;
    }

    .main-heading {
        font-size: 1.55rem;
    }

    .sustainability-title {
        font-size: 1.9rem;
    }

    .section-head h2 {
        font-size: 1.55rem;
    }
}

@media (max-width: 479.98px) {
    .quick-services-section .quick-access-grid-4col {
        grid-template-columns: 1fr;
    }

    .counters-grid {
        gap: 10px;
    }

    .counter-number {
        font-size: 1.7rem;
    }

    .quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Bootstrap's .align-items-center on .headermenus is !important — override it */
#header .headermenus.d-flex {
    align-items: flex-end !important;
}

@media (max-width: 1199.98px) {
    #header .headermenus.d-flex {
        align-items: stretch !important;
    }

    #header .header-wrapper {
        width: 100%;
    }
}

@media (max-width: 1199.98px) {
    /* main.css turns .header-wrapper into a hidden 200px popup below 992px — restore the bar */
    #header .header-wrapper,
    #header .header-wrapper.active {
        position: static !important;
        display: flex !important;
        max-width: none !important;
        width: 100% !important;
        flex-direction: row !important;
        border: 0 !important;
        border-bottom: 2.5px solid var(--nrl-orange) !important;
        background: var(--nrl-deep-navy) !important;
        z-index: auto;
        right: auto;
        top: auto;
    }
}
/* The diagonal hover wipe peeks out of wide/short cards — disable it where there is no hover */
@media (hover: none), (max-width: 991.98px) {
    .quick-service-card::before {
        display: none;
    }

    .quick-service-card:hover {
        transform: none;
    }

        .quick-service-card:hover .qs-title {
            color: var(--nrl-navy);
        }

        .quick-service-card:hover .qs-desc {
            color: var(--text-muted);
        }

        .quick-service-card:hover .qs-icon-wrap {
            transform: none;
        }
}

@media (max-width: 767.98px) {
    .milestone {
        width: 150px;
        flex: 0 0 150px;
        padding: 10px 6px;
    }

        .milestone .node {
            width: 72px;
            height: 72px;
        }

            .milestone .node .thumb {
                width: 60px;
                height: 60px;
            }

        .milestone h3 {
            font-size: 0.82rem;
        }

        .milestone .year {
            font-size: 1rem;
        }

    .timeline-arrow {
        width: 36px;
        height: 36px;
    }

    .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .quick-access-card .qa-icon-wrap {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .qa-title {
        font-size: 0.8rem;
    }
}

@media (max-width: 479.98px) {
    .quick-access-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-bottom .copyright-text a,
.footer-bottom-bar a {
    float: none;
    display: inline;
    margin: 0 2px;
}

.footer-bottom .footer-bottom-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
/* Laptop widths (1200–1439): tighten the nav so it never collides with the logo */
@media (min-width: 1200px) and (max-width: 1439.98px) {
    #header .navheader {
        padding: 0 24px !important;
        gap: 12px;
    }

    #header .logo-wrapperbox .logo-img img {
        height: 62px;
        max-width: 300px;
    }

    #navmenu > ul {
        gap: 0;
    }

        #navmenu > ul > li > a {
            font-size: 0.8rem;
            padding: 8px 9px;
        }

    #navmenu a i.toggle-dropdown {
        font-size: 0.55rem;
    }

    #header .header-wrapper {
        font-size: 0.76rem;
        padding: 5px 16px 5px 32px;
        gap: 10px;
    }

    #header .topnav-list a {
        font-size: 0.74rem;
    }

    #navmenu .search-formbox .form-wrapper button {
        width: 36px;
        height: 36px;
    }
}

@media (min-width: 1200px) and (max-width: 1299.98px) {
    #navmenu > ul > li > a {
        font-size: 0.76rem;
        padding: 8px 7px;
    }

    #header .topnav-list li a span {
        display: none;
    }
}


strong.card {
    background: transparent;
}

section.hero-banner-section {
    padding: 0;
}

.offcanvas-header {
    justify-content: end;
}

.inner-section table.table.capital-structure a {
    color: #fff;
}