/* =============================================================================
   JCB — JUABEN COMMUNITY BANK PLC — site stylesheet
   Base visual language adapted from the approved homepage design.
   ============================================================================= */

        :root {
            --font-display: 'Cormorant Garamond', serif;
            --font-body: 'DM Sans', sans-serif;
            --navy: #001E4E;
            --navy-deep: #001235;
            --navy-mid: #002866;
            --gold: #FFC107;
            --gold-dark: #E6AD00;
            --gold-light: rgba(255,193,7,0.15);
            --white: #ffffff;
            --off-white: #F7F8FA;
            --text: #1A1A2E;
            --text-muted: #6B7280;
            --border: rgba(0,30,78,0.1);
            --border-light: rgba(255,255,255,0.1);

            /* Shadows */
            --shadow-xs: 0 1px 4px rgba(0,0,0,0.06);
            --shadow-sm: 0 4px 16px rgba(0,30,78,0.08);
            --shadow-md: 0 8px 32px rgba(0,30,78,0.12);
            --shadow-lg: 0 20px 60px rgba(0,30,78,0.18);
            --shadow-gold: 0 8px 32px rgba(255,193,7,0.3);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: var(--font-body);
            font-size: 16px;
            background: var(--white);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
        }
        body.no-scroll { overflow: hidden; }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        /* ─── ANIMATIONS ──────────────────────────────────────────── */
        @keyframes shimmer {
            0% { background-position: -200% center; }
            100% { background-position: 200% center; }
        }
        @keyframes borderPulse {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.005); }
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-24px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes rotateBorder {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes progressBar {
            from { width: 0; }
            to { width: 100%; }
        }

        .aos { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1); }
        .aos.left { transform: translateX(-28px); }
        .aos.right { transform: translateX(28px); }
        .aos.visible { opacity: 1; transform: none; }
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }

        /* ─── TOP BAR ─────────────────────────────────────────────── */
        .top-bar {
            background: var(--navy-deep);
            border-bottom: 1px solid rgba(255,193,7,0.15);
            padding: 9px 0;
        }
        .top-bar-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .top-bar-left {
            display: flex;
            gap: 24px;
        }
        .top-bar-item {
            display: flex;
            align-items: center;
            gap: 7px;
            color: rgba(255,255,255,0.72);
            font-size: 12.5px;
            letter-spacing: 0.2px;
        }
        .top-bar-item i {
            color: var(--gold);
            font-size: 11px;
        }
        .top-bar-link { cursor: pointer; transition: color 0.25s; }
        .top-bar-link:hover { color: var(--gold); }
        .top-bar-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .top-bar-social {
            display: flex;
            gap: 10px;
        }
        .top-bar-social a {
            color: rgba(255,255,255,0.4);
            font-size: 12px;
            transition: color 0.3s;
        }
        .top-bar-social a:hover { color: var(--gold); }
        .top-bar-branch {
            background: linear-gradient(135deg, var(--gold), #FFD54F);
            color: var(--navy);
            padding: 5px 14px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
        .top-bar-branch:hover { background: var(--gold-dark); }

        /* ─── MIDDLE HEADER ────────────────────────────────────────── */
        .mid-header {
            background: var(--navy);
            padding: 18px 0;
            position: relative;
        }
        .mid-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,193,7,0.4), transparent);
        }
        .mid-header-inner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo-wrap {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .logo-emblem {
            position: relative;
            width: 52px;
            height: 52px;
        }
        .logo-emblem-bg {
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, var(--gold), #FFD54F);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            font-size: 22px;
            position: relative;
            z-index: 1;
        }
        .logo-emblem::before {
            content: '';
            position: absolute;
            inset: -3px;
            background: linear-gradient(135deg, var(--gold), transparent, var(--gold));
            animation: rotateBorder 4s linear infinite;
            z-index: 0;
        }
        .logo-emblem::after {
            content: '';
            position: absolute;
            inset: -1px;
            background: var(--navy);
            z-index: 0;
        }
        .logo-emblem .logo-emblem-bg { z-index: 2; position: relative; }
        /* A real uploaded logo replaces the icon entirely — the rotating
           gold ring + navy fill were built to frame the small glyph and
           just clutter/obscure an actual logo image, so drop them here. */
        .logo-emblem--custom::before,
        .logo-emblem--custom::after { content: none; }
        .logo-text-wrap { line-height: 1.2; }
        .logo-name {
            color: var(--white);
            font-family: var(--font-display);
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 2px;
            display: block;
        }
        .logo-tagline {
            color: var(--gold);
            font-size: 10px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: 500;
        }
        .header-meta {
            display: flex;
            gap: 32px;
            align-items: center;
        }
        .header-meta-item {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,0.75);
            font-size: 13px;
        }
        .header-meta-icon {
            width: 36px;
            height: 36px;
            border: 1px solid rgba(255,193,7,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gold);
            font-size: 14px;
            flex-shrink: 0;
            transition: 0.3s;
        }
        .header-meta-item:hover .header-meta-icon {
            background: var(--gold);
            color: var(--navy);
            border-color: var(--gold);
        }
        .header-meta-text strong {
            display: block;
            color: var(--white);
            font-size: 13px;
            font-weight: 600;
        }
        .header-meta-text span {
            font-size: 11.5px;
            color: rgba(255,255,255,0.5);
        }

        /* ─── NAVIGATION ───────────────────────────────────────────── */
        .main-nav {
            background: rgba(0,30,78,0.98);
            backdrop-filter: blur(12px);
            border-top: 1px solid rgba(255,193,7,0.12);
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 24px rgba(0,0,0,0.25);
        }
        #navSentinel { height: 1px; }
        .nav-inner {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
        }
        /* The logo reveal + rightward nav-list shift on stick used to be
           an instant display:none/flex + justify-content flex-start/
           space-between flip — both discrete, non-interpolable
           properties, so it snapped into place with no transition.
           Replaced with two properties that DO animate smoothly:
           .nav-logo grows in via max-width/opacity, and .nav-spacer's
           flex-grow (a plain number) absorbs the freed-up space,
           pushing .nav-list right the same way space-between used to —
           just smoothly instead of instantly. justify-content stays
           flex-start always now; .nav-spacer is what does the pushing. */
        .nav-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
            transition: max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
        }
        .main-nav.stuck .nav-logo {
            max-width: 320px;
            opacity: 1;
            pointer-events: auto;
        }
        .nav-spacer {
            flex-grow: 0;
            transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .main-nav.stuck .nav-spacer { flex-grow: 1; }
        .nav-logo .logo-emblem, .nav-logo .logo-emblem-bg { width: 34px; height: 34px; }
        .nav-logo .logo-emblem-bg { font-size: 15px; }
        .nav-logo-name {
            color: var(--white);
            font-family: var(--font-display);
            font-size: 17px;
            font-weight: 700;
            letter-spacing: 1.2px;
            white-space: nowrap;
        }
        .nav-mobile-panel, .nav-mobile-scroll { display: contents; }
        .nav-mobile-contact, .nav-mobile-logo { display: none; }
        .nav-list {
            display: flex;
            align-items: stretch;
        }
        .nav-item { position: relative; }
        .nav-hide-desktop { display: none; }
        .nav-item > a,
        .nav-item > span {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 18px 18px;
            color: rgba(255,255,255,0.78);
            font-size: 12.5px;
            font-weight: 600;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            transition: color 0.3s, padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            cursor: pointer;
            white-space: nowrap;
        }
        /* The stuck nav is the compact, logo-inline version of the bar
           (see .main-nav.stuck above) — a little less vertical padding
           keeps it feeling snug rather than just a shrunk copy of the
           full-size bar. */
        .main-nav.stuck .nav-item > a,
        .main-nav.stuck .nav-item > span {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .nav-item > a::after,
        .nav-item > span::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 18px;
            right: 18px;
            height: 2px;
            background: linear-gradient(90deg, var(--gold), #FFD54F);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .nav-item:hover > a,
        .nav-item:hover > span,
        .nav-item.active > a,
        .nav-item.active > span {
            color: var(--gold);
        }
        .nav-item:hover > a::after,
        .nav-item:hover > span::after,
        .nav-item.active > a::after,
        .nav-item.active > span::after {
            transform: scaleX(1);
        }
        .nav-chevron { font-size: 8px; transition: transform 0.3s; }
        .nav-item:hover .nav-chevron { transform: rotate(180deg); }

        /* Mega Menu
           Centered under its trigger (left: 50% + translateX(-50%)) instead
           of left-aligned to the trigger's left edge — left:0 made the
           panel's position depend on how far right that particular nav
           item happened to sit (which changes between the full-size header
           and the compact "stuck" header), so it could run off the right
           edge of the viewport entirely. --mega-shift is an extra nudge in
           px, set by JS (site.js) after measuring the rendered panel, so it
           stays fully on-screen even when centering alone isn't enough
           (e.g. narrow viewports). Defaults to 0px so nothing moves when
           JS hasn't run yet / is unavailable. */
        .mega-menu {
            position: absolute;
            top: calc(100% + 1px);
            left: 50%;
            --mega-shift: 0px;
            background: var(--white);
            min-width: calc(var(--mega-cols, 3) * 230px);
            padding: 0;
            box-shadow: var(--shadow-lg);
            display: grid;
            grid-template-columns: repeat(var(--mega-cols, 3), 1fr);
            opacity: 0;
            visibility: hidden;
            transform: translateX(calc(-50% + var(--mega-shift, 0px))) translateY(12px);
            transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
            z-index: 2000;
            border-top: 3px solid var(--gold);
            overflow: hidden;
        }
        .nav-item:hover .mega-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(calc(-50% + var(--mega-shift, 0px))) translateY(0);
        }
        .mega-col {
            padding: 28px 24px;
            border-right: 1px solid var(--border);
            transition: background 0.3s;
        }
        .mega-col:last-child { border-right: none; }
        .mega-col:hover { background: var(--off-white); }
        .mega-col h4 {
            color: var(--navy);
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 14px;
            text-transform: uppercase;
            letter-spacing: 2px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--gold);
            display: inline-block;
        }
        .mega-col ul li { margin-bottom: 6px; }
        .mega-col ul li a {
            color: var(--text);
            font-size: 14px;
            font-weight: 500;
            padding: 5px 0 5px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.25s;
            border-bottom: 1px solid transparent;
        }
        .mega-col ul li a::before {
            content: '';
            width: 5px;
            height: 1px;
            background: var(--gold);
            transition: width 0.25s;
        }
        .mega-col ul li a:hover {
            color: var(--navy);
            padding-left: 4px;
        }
        .mega-col ul li a:hover::before { width: 10px; }

        /* Nav Call */
        .nav-call {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            background: rgba(255,193,7,0.08);
            border: 1px solid rgba(255,193,7,0.2);
            color: var(--white);
            cursor: pointer;
            transition: all 0.3s;
            margin-left: 8px;
        }
        .nav-call:hover {
            background: var(--gold);
            color: var(--navy);
            border-color: var(--gold);
        }
        .nav-call:hover i { color: var(--navy); }
        .nav-call i { color: var(--gold); font-size: 16px; transition: color 0.3s; }
        .nav-call-num { font-size: 15px; font-weight: 700; line-height: 1; }
        .nav-call-lbl { font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; }

        /* Mobile toggle */
        .nav-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 8px;
            position: relative;
            z-index: 1600;
        }
        .nav-toggle span {
            width: 22px; height: 2px;
            background: var(--white); transition: 0.3s;
        }
        .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
        .nav-toggle.active span:nth-child(2) { opacity: 0; }
        .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

        /* ─── HERO SLIDER ──────────────────────────────────────────── */
        .hero {
            position: relative;
            height: 620px;
            overflow: hidden;
            background: var(--navy-deep);
        }
        .slider-track {
            display: flex;
            height: 100%;
            transition: transform 0.8s cubic-bezier(0.76,0,0.24,1);
        }
        .slide {
            min-width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
        }
        .slide-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            filter: brightness(0.28);
            transform: scale(1.05);
            transition: transform 8s ease, filter 0.3s ease;
        }
        .slide.active .slide-bg { transform: scale(1); }
        /* Per-slide opt-out (show_overlay = 0): skip both the gradient
           overlay div AND this dimming filter, so the original image
           shows at full brightness. */
        .slide-bg--no-dim { filter: brightness(1); }
        .slide-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, rgba(0,18,53,0.97) 0%, rgba(0,30,78,0.7) 45%, rgba(0,30,78,0.1) 100%);
        }
        /* Subtle geometric accent on hero */
        .slide-overlay::after {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 40%;
            height: 100%;
            background: linear-gradient(135deg, transparent 60%, rgba(255,193,7,0.04) 100%);
        }
        .hero .container {
            width: 100%;
        }
        .slide-content {
            position: relative;
            z-index: 2;
            max-width: 620px;
            color: var(--white);
            padding: 0;
        }
        .slide-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,193,7,0.12);
            border: 1px solid rgba(255,193,7,0.25);
            color: var(--gold);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            padding: 6px 14px;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
        }
        .slide.active .slide-eyebrow { opacity: 1; transform: none; }
        .slide-content h1 {
            font-family: var(--font-display);
            font-size: 58px;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: 18px;
            letter-spacing: -0.5px;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.6s 0.25s, transform 0.6s 0.25s;
        }
        .slide.active .slide-content h1 { opacity: 1; transform: none; }
        .slide-content h1 em {
            font-style: normal;
            color: var(--gold);
            position: relative;
        }
        .slide-content p {
            font-size: 16.5px;
            opacity: 0;
            margin-bottom: 30px;
            line-height: 1.75;
            color: rgba(255,255,255,0.82);
            max-width: 490px;
            transform: translateY(20px);
            transition: opacity 0.6s 0.4s, transform 0.6s 0.4s;
        }
        .slide.active .slide-content p { opacity: 1; transform: none; }
        .slide-btns {
            display: flex;
            gap: 12px;
            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.6s 0.55s, transform 0.6s 0.55s;
        }
        .slide.active .slide-btns { opacity: 1; transform: none; }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        .btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0);
            transition: background 0.3s;
        }
        .btn:hover::after { background: rgba(255,255,255,0.08); }
        .btn-gold {
            background: linear-gradient(135deg, var(--gold), #FFD54F);
            color: var(--navy);
            box-shadow: 0 4px 16px rgba(255,193,7,0.35);
        }
        .btn-gold:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(255,193,7,0.45);
        }
        .btn-outline-white {
            border: 1.5px solid rgba(255,255,255,0.5);
            background: transparent;
            color: var(--white);
        }
        .btn-outline-white:hover {
            background: rgba(255,255,255,0.1);
            border-color: var(--white);
        }
        .btn-navy {
            background: var(--navy);
            color: var(--white);
        }
        .btn-navy:hover {
            background: var(--navy-mid);
            transform: translateY(-2px);
        }
        .btn-outline-navy {
            border: 1.5px solid var(--navy);
            background: transparent;
            color: var(--navy);
        }
        .btn-outline-navy:hover {
            background: var(--navy);
            color: var(--white);
        }

        /* Slider UI */
        .slider-dots {
            position: absolute;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 10;
        }
        .slider-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            cursor: pointer;
            transition: all 0.35s;
        }
        .slider-dot.active {
            background: var(--gold);
            width: 26px;
            border-radius: 4px;
        }
        .slider-btns {
            position: absolute;
            bottom: 22px;
            right: 32px;
            display: flex;
            gap: 8px;
            z-index: 10;
        }
        .slider-btn {
            width: 40px; height: 40px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.18);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s;
        }
        .slider-btn:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--navy);
        }
        .slider-progress {
            position: absolute;
            bottom: 0; left: 0;
            height: 2px;
            background: var(--gold);
            z-index: 10;
        }

        /* ─── QUICK LINKS BAR ──────────────────────────────────────── */
        .quick-bar {
            background: var(--white);
            border-bottom: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
        }
        .quick-bar-inner {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }
        .quick-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 20px 24px;
            border-right: 1px solid var(--border);
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .quick-item:last-child { border-right: none; }
        .quick-item::before {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 100%; height: 2px;
            background: linear-gradient(90deg, var(--gold), #FFD54F);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.35s;
        }
        .quick-item:hover { background: var(--off-white); }
        .quick-item:hover::before { transform: scaleX(1); }
        .quick-icon {
            width: 44px; height: 44px;
            background: var(--gold-light);
            border: 1px solid rgba(255,193,7,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            font-size: 18px;
            flex-shrink: 0;
            transition: all 0.3s;
        }
        .quick-item:hover .quick-icon {
            background: var(--gold);
            border-color: var(--gold);
        }
        .quick-label {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--text);
        }
        .quick-sub {
            font-size: 11.5px;
            color: var(--text-muted);
            margin-top: 1px;
        }

        /* ─── SECTIONS ─────────────────────────────────────────────── */
        .section { padding: 90px 0; }
        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--gold-light);
            border: 1px solid rgba(255,193,7,0.25);
            color: var(--navy);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 5px 12px;
            margin-bottom: 12px;
        }
        .section-tag::before {
            content: '';
            width: 16px; height: 2px;
            background: var(--gold);
        }
        .section-title {
            font-family: var(--font-display);
            font-size: 40px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 14px;
            line-height: 1.2;
        }
        .section-title em {
            font-style: normal;
            color: var(--gold);
        }
        .section-sub {
            font-size: 15.5px;
            color: var(--text-muted);
            line-height: 1.7;
            max-width: 520px;
        }
        .section-header {
            text-align: center;
            margin-bottom: 56px;
        }
        .section-header .section-sub { margin: 0 auto; }

        /* ─── WELCOME SECTION ───────────────────────────────────────── */
        .welcome-section { background: var(--white); }
        .welcome-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
        }
        .welcome-content .section-title::after {
            content: '';
            display: block;
            width: 48px; height: 3px;
            background: var(--gold);
            margin-top: 14px;
        }
        .welcome-text {
            margin-top: 22px;
            font-size: 15px;
            line-height: 1.85;
            color: var(--text-muted);
        }
        .welcome-text p { margin-bottom: 14px; }
        .welcome-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            margin-top: 32px;
            border: 1px solid var(--border);
        }
        .stat-item {
            padding: 18px 16px;
            border-right: 1px solid var(--border);
            position: relative;
            transition: background 0.3s;
        }
        .stat-item:last-child { border-right: none; }
        .stat-item::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 2px;
            background: var(--gold);
            transform: scaleX(0);
            transition: transform 0.3s;
        }
        .stat-item:hover { background: var(--off-white); }
        .stat-item:hover::before { transform: scaleX(1); }
        .stat-num {
            font-family: var(--font-display);
            font-size: 28px;
            font-weight: 700;
            color: var(--navy);
            line-height: 1;
            margin-bottom: 4px;
        }
        .stat-num em { font-style: normal; color: var(--gold); }
        .stat-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; }
        .welcome-image-wrap {
            position: relative;
        }
        .welcome-image-wrap::before {
            content: '';
            position: absolute;
            top: -14px; right: -14px;
            width: calc(100% - 28px);
            height: calc(100% - 28px);
            border: 2px solid var(--gold);
            animation: borderPulse 3s ease-in-out infinite;
            pointer-events: none;
        }
        .welcome-image-wrap img {
            width: 100%;
            height: auto;
            display: block;
            box-shadow: var(--shadow-md);
            position: relative;
            z-index: 1;
        }
        .welcome-badge {
            position: absolute;
            bottom: -18px;
            left: -18px;
            z-index: 2;
            background: var(--navy);
            border: 3px solid var(--gold);
            padding: 16px 20px;
            color: var(--white);
            box-shadow: var(--shadow-md);
        }
        .welcome-badge strong {
            display: block;
            font-family: var(--font-display);
            font-size: 32px;
            color: var(--gold);
            line-height: 1;
        }
        .welcome-badge span {
            font-size: 11px;
            opacity: 0.7;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* ─── PRODUCTS ──────────────────────────────────────────────── */
        .products-section { background: var(--off-white); }
        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
        }
        .product-card {
            background: var(--white);
            padding: 36px 30px;
            transition: all 0.4s;
            position: relative;
            overflow: hidden;
        }
        .product-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 3px;
            background: linear-gradient(90deg, var(--navy), var(--gold));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s;
        }
        .product-card:hover::before { transform: scaleX(1); }
        .product-card:hover {
            background: var(--navy);
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            z-index: 2;
        }
        .product-card.featured {
            background: var(--navy);
        }
        .product-card.featured::before { transform: scaleX(1); }
        .product-icon {
            width: 52px; height: 52px;
            background: var(--gold-light);
            border: 1px solid rgba(255,193,7,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--navy);
            margin-bottom: 20px;
            transition: all 0.4s;
        }
        .product-card:hover .product-icon,
        .product-card.featured .product-icon {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--navy);
        }
        .product-card h3 {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 10px;
            transition: color 0.4s;
        }
        .product-card:hover h3,
        .product-card.featured h3 { color: var(--white); }
        .product-card p {
            font-size: 13.5px;
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 18px;
            transition: color 0.4s;
        }
        .product-card:hover p,
        .product-card.featured p { color: rgba(255,255,255,0.65); }
        .product-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--navy);
            letter-spacing: 0.5px;
            text-transform: uppercase;
            transition: all 0.3s;
        }
        .product-link i { transition: transform 0.3s; }
        .product-link:hover i { transform: translateX(4px); }
        .product-card:hover .product-link,
        .product-card.featured .product-link { color: var(--gold); }

        /* ─── CSR SECTION ───────────────────────────────────────────── */
        .csr-section { background: var(--white); }
        .csr-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 72px;
            align-items: center;
        }
        .csr-image-wrap {
            position: relative;
            overflow: hidden;
        }
        .csr-image-wrap img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.6s;
        }
        .csr-image-wrap:hover img { transform: scale(1.03); }
        .csr-image-wrap::after {
            content: '';
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            transition: border-color 0.4s;
            pointer-events: none;
        }
        .csr-image-wrap:hover::after { border-color: rgba(255,193,7,0.4); }

        /* ─── FINANCIAL STATEMENTS ─────────────────────────────────── */
        .fin-section {
            background: var(--white);
            padding: 60px 0 20px;
            position: relative;
            overflow: hidden;
        }
        .fin-section::before {
            content: '';
            position: absolute;
            top: -50%; right: -10%;
            width: 500px; height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,193,7,0.08) 0%, transparent 70%);
        }
        .fin-header {
            text-align: center;
            margin-bottom: 36px;
        }
        .fin-header .section-title { color: var(--navy); }
        .fin-header .section-sub { color: var(--text-muted); margin: 0 auto; }
        .fin-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .fin-card {
            background: var(--off-white);
            border: 1px solid var(--border);
            padding: 24px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }
        .fin-card::before {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 3px; height: 100%;
            background: var(--gold);
        }
        .fin-card:hover {
            background: var(--white);
            border-color: rgba(255,193,7,0.35);
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }
        .fin-info h3 {
            color: var(--navy);
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        .fin-info p { color: var(--text-muted); font-size: 12.5px; }
        .fin-btn {
            background: var(--navy);
            color: var(--white);
            padding: 10px 18px;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.5px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            text-transform: uppercase;
        }
        .fin-btn:hover {
            background: var(--navy-mid);
            transform: translateY(-1px);
        }

        /* ─── NEWS ──────────────────────────────────────────────────── */
        .news-section { background: var(--off-white); }
        .news-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        .news-card {
            background: var(--white);
            overflow: hidden;
            border: 1px solid var(--border);
            transition: all 0.4s;
            position: relative;
        }
        .news-card::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 100%; height: 2px;
            background: linear-gradient(90deg, var(--navy), var(--gold));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s;
        }
        .news-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-md);
            border-color: transparent;
        }
        .news-card:hover::after { transform: scaleX(1); }
        .news-img {
            height: 196px;
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
        }
        .news-img::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 50%, rgba(0,18,53,0.5));
        }
        .news-tag {
            position: absolute;
            top: 14px; left: 14px;
            background: var(--gold);
            color: var(--navy);
            padding: 3px 10px;
            font-size: 10.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            z-index: 1;
        }
        .news-body { padding: 22px 22px 20px; }
        .news-meta {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            color: var(--text-muted);
            margin-bottom: 10px;
        }
        .news-meta i { color: var(--gold); font-size: 11px; }
        .news-card h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
            line-height: 1.45;
        }
        .news-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; line-height: 1.6; }
        .news-link {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--navy);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }
        .news-link i { transition: transform 0.3s; font-size: 11px; }
        .news-link:hover { color: var(--gold-dark); }
        .news-link:hover i { transform: translateX(4px); }

        /* ─── FAQ ───────────────────────────────────────────────────── */
        .faq-section { background: var(--white); }
        .faq-wrap { max-width: 780px; margin: 0 auto; }
        .faq-item {
            border: 1px solid var(--border);
            margin-bottom: 6px;
            background: var(--white);
            transition: border-color 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
        }
        .faq-item::before {
            content: '';
            position: absolute;
            left: 0; top: 0;
            width: 3px; height: 100%;
            background: var(--gold);
            transform: scaleY(0);
            transition: transform 0.3s;
        }
        .faq-item:hover,
        .faq-item.active {
            border-color: rgba(255,193,7,0.3);
            box-shadow: var(--shadow-xs);
        }
        .faq-item.active::before { transform: scaleY(1); }
        .faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 22px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14.5px;
            color: var(--text);
        }
        .faq-icon {
            width: 28px; height: 28px;
            background: var(--navy);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            flex-shrink: 0;
            transition: all 0.3s;
        }
        .faq-item.active .faq-icon {
            background: var(--gold);
            color: var(--navy);
            transform: rotate(180deg);
        }
        .faq-a {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .faq-item.active .faq-a { max-height: 200px; }
        .faq-a-text {
            padding: 0 22px 18px;
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.75;
        }

        /* ─── FOOTER ────────────────────────────────────────────────── */
        footer {
            background: var(--navy-deep);
            color: rgba(255,255,255,0.65);
            font-size: 13.5px;
        }
        .footer-top {
            padding: 60px 0 40px;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
            gap: 40px;
        }
        .footer-brand-name {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 700;
            color: var(--white);
            letter-spacing: 1.5px;
            margin-bottom: 12px;
        }
        .footer-brand-tagline {
            color: var(--gold);
            font-size: 10.5px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 14px;
            display: block;
        }
        .footer-brand p {
            font-size: 13.5px;
            line-height: 1.7;
            margin-bottom: 18px;
        }
        .footer-socials {
            display: flex;
            gap: 8px;
        }
        .footer-socials a {
            width: 34px; height: 34px;
            border: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            transition: all 0.3s;
        }
        .footer-socials a:hover {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--navy);
        }
        .footer-col h4 {
            color: var(--white);
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 18px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255,193,7,0.25);
        }
        .footer-col ul li {
            margin-bottom: 9px;
        }
        .footer-col ul li a {
            color: rgba(255,255,255,0.55);
            transition: color 0.3s;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .footer-col ul li a::before {
            content: '›';
            color: var(--gold);
            font-size: 16px;
            line-height: 1;
        }
        .footer-col ul li a:hover { color: var(--gold); }
        .footer-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 12px;
            color: rgba(255,255,255,0.55);
            font-size: 13px;
        }
        .footer-contact-item i {
            color: var(--gold);
            margin-top: 2px;
            width: 14px;
        }
        .footer-bottom {
            padding: 18px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12.5px;
            color: rgba(255,255,255,0.38);
        }
        .footer-bottom a:hover { color: var(--gold); }

        /* ─── POPUP ─────────────────────────────────────────────────── */
        .popup-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,12,38,0.8);
            backdrop-filter: blur(6px);
            z-index: 5000;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.35s, visibility 0.35s;
        }
        .popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .popup-box {
            background: var(--white);
            width: 100%;
            max-width: 520px;
            max-height: 92vh;
            overflow-x: hidden;
            overflow-y: auto;
            border-radius: 14px;
            box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 2px 0 rgba(255,255,255,0.04) inset;
            transform: scale(0.94) translateY(16px);
            transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
            position: relative;
            border-top: 4px solid var(--gold);
            /* Firefox custom scrollbar (Chrome/Safari/Edge use the
               ::-webkit-scrollbar-* rules just below instead). */
            scrollbar-width: thin;
            scrollbar-color: var(--gold) transparent;
        }
        /* Custom scrollbar — replaces the default OS scrollbar with a
           slim gold pill matching the brand accent. Track stays
           transparent so the navy header / white body show through it
           naturally instead of a boxed-in grey channel. */
        .popup-box::-webkit-scrollbar { width: 7px; }
        .popup-box::-webkit-scrollbar-track { background: transparent; }
        .popup-box::-webkit-scrollbar-thumb {
            background: var(--gold);
            border-radius: 999px;
        }
        .popup-box::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }
        .popup-overlay.active .popup-box {
            transform: scale(1) translateY(0);
        }
        .popup-head {
            background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
            padding: 32px 28px 28px;
            position: relative;
            overflow: hidden;
        }
        .popup-head::before {
            content: '';
            position: absolute;
            top: -40%; right: -10%;
            width: 300px; height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,193,7,0.08) 0%, transparent 70%);
        }
        .popup-close-btn {
            position: absolute;
            top: 14px; right: 14px;
            width: 30px; height: 30px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 8px;
            color: rgba(255,255,255,0.7);
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            z-index: 1;
        }
        .popup-close-btn:hover {
            background: rgba(255,255,255,0.15);
            color: var(--white);
        }
        .popup-emblem {
            width: 60px; height: 60px;
            background: linear-gradient(135deg, var(--gold), #FFD54F);
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(255,193,7,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--navy);
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }
        .popup-head h2 {
            font-family: var(--font-display);
            color: var(--white);
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 6px;
            position: relative;
            z-index: 1;
        }
        .popup-head h2 em { font-style: normal; color: var(--gold); }
        .popup-head p {
            color: rgba(255,255,255,0.6);
            font-size: 13px;
            position: relative;
            z-index: 1;
        }
        .popup-body { padding: 26px 28px; }
        .popup-benefits {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 24px;
        }
        .popup-benefit {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 12px;
            background: var(--off-white);
            border: 1px solid var(--border);
            border-radius: 8px;
            transition: all 0.3s;
        }
        .popup-benefit:hover {
            border-color: rgba(255,193,7,0.3);
            background: rgba(255,193,7,0.04);
            box-shadow: 0 4px 12px rgba(0,30,78,0.06);
            transform: translateY(-1px);
        }
        .popup-benefit-ico {
            width: 32px; height: 32px;
            border-radius: 8px;
            background: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--navy);
            font-size: 13px;
            flex-shrink: 0;
        }
        .popup-benefit span {
            font-size: 12px;
            font-weight: 600;
            color: var(--text);
        }
        .popup-form-title {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--navy);
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }
        .popup-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }
        .popup-form-row.full { grid-template-columns: 1fr; }
        .form-group { display: flex; flex-direction: column; gap: 5px; }
        .form-group label {
            font-size: 10.5px;
            font-weight: 700;
            color: var(--text);
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }
        .form-control {
            padding: 10px 13px;
            border: 1.5px solid var(--border);
            background: var(--off-white);
            color: var(--text);
            font-family: var(--font-body);
            font-size: 13.5px;
            transition: all 0.3s;
            outline: none;
        }
        .form-control:focus {
            border-color: var(--navy);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(0,30,78,0.06);
        }
        /* A <div>-based control (the custom select/date triggers below)
           doesn't naturally resolve the same line-height as an <input>
           at the same font-size, so without a shared explicit height
           they render a few pixels taller than a real input. Scoped to
           input.form-control (not the bare .form-control class) so the
           multi-row <textarea class="form-control"> is left free to
           size itself. */
        input.form-control {
            height: 37px;
        }
        /* Custom select styling — strips native OS chrome (the default
           select look varies wildly by browser/OS) in favour of a plain
           chevron that matches the rest of the form controls.
           background-color/repeat/position/size are set individually and
           marked !important so they can't be silently reset by the base
           .form-control rule's `background:` shorthand (that property
           resets every background sub-value at once) or by any later,
           equal-specificity rule. Base64-encoded SVG rather than a
           URL-encoded one, since some browsers mis-parse the special
           characters in an encoded inline SVG and fall back to tiling. */
        select.form-control {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-color: var(--off-white) !important;
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTIgOCI+PHBhdGggZmlsbD0iIzVBNjQ3MyIgZD0iTTEgMWw1IDUgNS01IiBzdHJva2U9IiM1QTY0NzMiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") !important;
            background-repeat: no-repeat !important;
            background-position: right 14px center !important;
            background-size: 11px 7px !important;
            padding-right: 38px;
            cursor: pointer;
        }
        select.form-control::-ms-expand { display: none; }
        select.form-control:focus {
            background-color: var(--white) !important;
            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTIgOCI+PHBhdGggZmlsbD0iIzAwMUU0RSIgZD0iTTEgMWw1IDUgNS01IiBzdHJva2U9IiMwMDFFNEUiIHN0cm9rZS13aWR0aD0iMS41IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=") !important;
            background-repeat: no-repeat !important;
            background-position: right 14px center !important;
            background-size: 11px 7px !important;
        }
        select.form-control option { color: var(--text); background: var(--white); padding: 8px; }
        /* Scoped to .popup-box so this doesn't round every form-control
           site-wide (KYC, contact, admin forms keep their existing look). */
        .popup-box input.form-control,
        .popup-box select.form-control,
        .popup-box textarea.form-control {
            border-radius: 8px;
        }
        .popup-cta {
            width: 100%;
            padding: 14px;
            margin-top: 18px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            text-align: center;
            display: flex;
            justify-content: center;
        }
        .popup-footer {
            text-align: center;
            margin-top: 14px;
            padding-top: 14px;
            border-top: 1px solid var(--border);
            font-size: 12.5px;
            color: var(--text-muted);
        }
        .popup-footer a { color: var(--navy); font-weight: 600; }

        /* ─── FLOATING CTA ──────────────────────────────────────────── */
        .floating-btn {
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 2000;
        }
        .floating-btn .btn {
            box-shadow: 0 8px 32px rgba(255,193,7,0.4);
            padding: 13px 22px;
            font-size: 12.5px;
        }
        .floating-btn .btn:hover {
            box-shadow: 0 12px 40px rgba(255,193,7,0.55);
        }
        body.no-scroll .floating-btn { display: none; }

        /* ─── RESPONSIVE ────────────────────────────────────────────── */
        @media (max-width: 1024px) {
            .hero { height: 540px; }
            .slide-content h1 { font-size: 46px; }
            .products-grid { grid-template-columns: repeat(2, 1fr); }
            .news-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
            .quick-bar-inner { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .top-bar { display: none; }
            .nav-hide-desktop { display: block; }
            .nav-logo, .main-nav.stuck .nav-logo { display: none; }
            .mid-header {
                padding: 12px 0;
                position: sticky;
                top: 0;
                z-index: 900;
            }
            .mid-header-inner { flex-wrap: nowrap; gap: 10px; text-align: left; }
            .header-meta { display: none; }
            .logo-wrap { gap: 10px; }
            .logo-emblem, .logo-emblem-bg { width: 38px; height: 38px; }
            .logo-emblem-bg { font-size: 16px; }
            .logo-name { font-size: 15.5px; letter-spacing: 1px; }
            .logo-tagline { font-size: 8px; letter-spacing: 2px; }
            .nav-toggle { display: flex; margin-left: auto; }
            /* backdrop-filter on an ancestor creates a containing block for
               position:fixed children, which would trap the full-screen menu
               inside the header instead of the viewport — disable it on mobile. */
            .main-nav { backdrop-filter: none; }

            /* ── Full-screen mobile menu ─────────────────────── */
            .nav-mobile-panel {
                display: block;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100dvh;
                background:
                    radial-gradient(circle at 85% 0%, rgba(255,193,7,0.08), transparent 45%),
                    linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%);
                z-index: 999;
                opacity: 0;
                visibility: hidden;
                transform: translateY(-16px);
                transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
            }
            .nav-mobile-panel.open { opacity: 1; visibility: visible; transform: none; }
            .nav-mobile-scroll {
                display: block;
                height: 100%;
                overflow-y: auto;
                padding: 80px 28px 48px;
            }
            .nav-mobile-logo {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 22px;
                margin-bottom: 10px;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                opacity: 0;
                transform: translateY(14px);
                transition: opacity 0.4s ease, transform 0.4s ease;
            }
            .nav-mobile-panel.open .nav-mobile-logo { opacity: 1; transform: none; }
            .nav-mobile-logo .logo-wrap { justify-content: flex-start; }
            /* Lives in the scrollable panel content (not the sticky page
               header), so it scrolls away with the rest of the menu instead
               of staying pinned mid-screen over whatever's scrolled beneath
               it. Scroll back to top to reach it again, same as the logo. */
            .nav-mobile-close {
                flex: none;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border: none;
                background: rgba(255,255,255,0.06);
                border-radius: 50%;
                color: var(--white);
                font-size: 16px;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }
            .nav-list {
                display: flex;
                flex-direction: column;
                counter-reset: navcount;
            }
            .nav-item {
                width: 100%;
                counter-increment: navcount;
                opacity: 0;
                transform: translateY(14px);
                transition: opacity 0.4s ease, transform 0.4s ease;
                transition-delay: 0s;
            }
            .nav-mobile-panel.open .nav-item { opacity: 1; transform: none; }
            .nav-mobile-panel.open .nav-item:nth-child(1) { transition-delay: 0.08s; }
            .nav-mobile-panel.open .nav-item:nth-child(2) { transition-delay: 0.14s; }
            .nav-mobile-panel.open .nav-item:nth-child(3) { transition-delay: 0.20s; }
            .nav-mobile-panel.open .nav-item:nth-child(4) { transition-delay: 0.26s; }
            .nav-mobile-panel.open .nav-item:nth-child(5) { transition-delay: 0.32s; }
            .nav-mobile-panel.open .nav-item:nth-child(6) { transition-delay: 0.38s; }
            .nav-item > a, .nav-item > span {
                padding: 16px 2px;
                border-bottom: 1px solid rgba(255,255,255,0.08);
                font-family: var(--font-display);
                font-size: 21px;
                font-weight: 600;
                letter-spacing: 0.2px;
                text-transform: none;
                color: rgba(255,255,255,0.92);
                gap: 14px;
            }
            .nav-item > a::before, .nav-item > span::before {
                content: counter(navcount, decimal-leading-zero);
                font-family: var(--font-body);
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 1px;
                color: var(--gold);
                opacity: 0.7;
            }
            .nav-item > a::after, .nav-item > span::after {
                content: '\f105';
                font-family: 'Font Awesome 6 Free';
                font-weight: 900;
                position: static;
                width: auto; height: auto;
                background: none;
                margin-left: auto;
                color: rgba(255,255,255,0.3);
                font-size: 15px;
                transform: none;
                transition: transform 0.3s, color 0.3s;
            }
            .nav-item:hover > a::after, .nav-item:hover > span::after,
            .nav-item.active > a::after, .nav-item.active > span::after {
                transform: translateX(4px);
                color: var(--gold);
            }
            .nav-item.active > a, .nav-item.active > span { color: var(--gold); }
            .nav-item.active > a::before, .nav-item.active > span::before { opacity: 1; }
            .nav-chevron { display: none; }
            .nav-dropdown > span::after { display: none; }
            .nav-dropdown > span {
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }
            .nav-dropdown .nav-chevron {
                display: inline-flex;
                margin-left: auto;
                font-size: 14px;
                color: rgba(255,255,255,0.35);
                transition: transform 0.35s ease, color 0.35s ease;
            }
            .nav-dropdown.open > span { color: var(--gold); }
            .nav-dropdown.open .nav-chevron { transform: rotate(180deg); color: var(--gold); }
            .mega-menu {
                position: static;
                min-width: 100%;
                grid-template-columns: 1fr;
                display: grid;
                max-height: 0;
                overflow: hidden;
                box-shadow: none;
                background: rgba(255,255,255,0.04);
                padding: 0 4px 0 30px;
                border-top: none;
                border-radius: 0;
                opacity: 1;
                visibility: visible;
                transform: none;
                transition: max-height 0.45s cubic-bezier(0.4,0,0.2,1), padding 0.45s ease;
            }
            .nav-item.open .mega-menu { max-height: 900px; padding: 6px 4px 14px 30px; }
            .mega-col { border-right: none; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
            .mega-col:last-child { border-bottom: none; }
            .mega-col:hover { background: none; }
            .mega-col h4 { color: var(--gold); border-bottom-color: rgba(255,193,7,0.3); }
            .mega-col ul li a { color: rgba(255,255,255,0.65); }
            .mega-col ul li a:hover { color: var(--white); }

            /* ── Contact block inside the mobile menu ────────── */
            .nav-mobile-contact {
                display: block;
                margin-top: 28px;
                padding-top: 28px;
                border-top: 1px solid rgba(255,255,255,0.1);
                opacity: 0;
                transform: translateY(14px);
                transition: opacity 0.4s ease 0.42s, transform 0.4s ease 0.42s;
            }
            .nav-mobile-panel.open .nav-mobile-contact { opacity: 1; transform: none; }
            .nmc-heading {
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 2px;
                text-transform: uppercase;
                color: var(--gold);
                margin-bottom: 16px;
            }
            .nmc-item {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 10px 0;
                color: var(--white);
            }
            .nmc-ico {
                width: 38px; height: 38px;
                min-width: 38px;
                display: flex; align-items: center; justify-content: center;
                background: rgba(255,193,7,0.1);
                border: 1px solid rgba(255,193,7,0.25);
                color: var(--gold);
                font-size: 14px;
            }
            .nmc-text { display: flex; flex-direction: column; gap: 2px; }
            .nmc-text strong { font-size: 14.5px; font-weight: 700; }
            .nmc-text small { font-size: 12px; color: rgba(255,255,255,0.55); }
            .nmc-socials { display: flex; gap: 10px; margin: 18px 0 4px; }
            .nmc-socials a {
                width: 36px; height: 36px;
                display: flex; align-items: center; justify-content: center;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(255,255,255,0.12);
                color: rgba(255,255,255,0.75);
                font-size: 13px;
                transition: 0.3s;
            }
            .nmc-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
            .nmc-cta { width: 100%; justify-content: center; margin-top: 18px; }

            .nav-call { display: none; }
            .hero { height: 440px; }
            .slide-content h1 { font-size: 34px; }
            .slide-content p { font-size: 14.5px; }
            .slide-btns { flex-direction: column; gap: 8px; }
            .welcome-grid, .csr-grid { grid-template-columns: 1fr; gap: 32px; }
            .products-grid { grid-template-columns: 1fr; background: none; gap: 12px; }
            .products-grid .product-card { border: 1px solid var(--border); }
            .news-grid { grid-template-columns: 1fr; }
            .fin-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
            .popup-benefits { grid-template-columns: 1fr; }
            .popup-form-row { grid-template-columns: 1fr; }
            .welcome-badge { display: none; }
            .section-title { font-size: 32px; }
        }
        @media (max-width: 480px) {
            .container { padding: 0 16px; }
            .hero { height: 400px; }
            .slide-content h1 { font-size: 28px; }
            .section { padding: 60px 0; }
            .quick-bar-inner { grid-template-columns: 1fr 1fr; }
        }

/* =============================================================================
   ADDITIONAL COMPONENTS — inner pages, chat widget, marketing popups, forms
   ============================================================================= */

/* ─── FLASH MESSAGES ──────────────────────────────────────────── */
.site-flash {
    max-width: 1200px;
    margin: 18px auto 0;
    padding: 0 24px;
}
.site-flash-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 4px;
    font-size: 14.5px;
    font-weight: 500;
}
.site-flash-inner.success { background: rgba(34,197,94,0.1); color: #15803d; border: 1px solid rgba(34,197,94,0.25); }
.site-flash-inner.error { background: rgba(220,38,38,0.08); color: #b91c1c; border: 1px solid rgba(220,38,38,0.22); }

/* ─── PAGE HEADER (inner pages) ───────────────────────────────── */
.page-header {
    background: linear-gradient(135deg, var(--navy), var(--navy-deep));
    padding: 72px 0 56px;
    position: relative;
    overflow: hidden;
}
.page-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 20%, rgba(255,193,7,0.12), transparent 55%);
}
.page-header-inner { position: relative; z-index: 1; }
.page-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,193,7,0.12);
    border: 1px solid rgba(255,193,7,0.3);
    color: var(--gold);
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.page-header h1 {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
}
.page-header p { color: rgba(255,255,255,0.6); font-size: 16px; max-width: 640px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; margin-top: 18px; font-size: 13px; color: rgba(255,255,255,0.45); }
.breadcrumb a { color: rgba(255,255,255,0.7); transition: color 0.25s; }
.breadcrumb a:hover { color: var(--gold); }

/* ─── GENERIC INNER SECTION ───────────────────────────────────── */
.inner-section { padding: 72px 0; }
.inner-section.tight { padding: 48px 0; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-tab {
    padding: 10px 22px;
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--text-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s;
}
.filter-tab:hover { border-color: var(--gold); color: var(--navy); }
.filter-tab.active { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ─── PRODUCT DETAIL PAGE ─────────────────────────────────────── */
.product-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 56px;
}
.product-hero-icon {
    width: 76px; height: 76px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    margin-bottom: 22px;
}
.product-hero h1 { font-family: var(--font-display); font-size: 38px; margin-bottom: 14px; }
.product-hero .lead { font-size: 16px; color: var(--text-muted); line-height: 1.8; margin-bottom: 24px; }
.product-meta-row { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.product-meta-item { }
.product-meta-item .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 4px; }
.product-meta-item .value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); }
.product-hero-image { background-size: cover; background-position: center; min-height: 340px; box-shadow: var(--shadow-lg); }
.product-features-list { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.product-features-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text); }
.product-features-list li i { color: var(--gold); margin-top: 3px; }
.product-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.product-gallery-grid img { width: 100%; height: 180px; object-fit: cover; }
.related-products { margin-top: 64px; }

/* ─── NEWS INDEX / SHOW ───────────────────────────────────────── */
.news-article-cover { width: 100%; height: 360px; object-fit: cover; margin-bottom: 32px; }
.news-article-meta { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; color: var(--text-muted); font-size: 13.5px; }
.news-article-body { font-size: 16px; line-height: 1.9; color: var(--text); max-width: 760px; }
.news-article-body p { margin-bottom: 20px; }
.other-news { margin-top: 64px; }

/* ─── FAQ PAGE (dedicated) ────────────────────────────────────── */
.faq-page-wrap { max-width: 820px; margin: 0 auto; }
.faq-category-heading { font-family: var(--font-display); font-size: 24px; color: var(--navy); margin: 40px 0 18px; }
.faq-category-heading:first-child { margin-top: 0; }

/* ─── DOWNLOADS PAGE (dedicated) ──────────────────────────────── */
.downloads-page-wrap { max-width: 900px; margin: 0 auto; }
.downloads-category-heading { font-family: var(--font-display); font-size: 24px; color: var(--navy); margin: 40px 0 18px; }
.downloads-category-heading:first-child { margin-top: 0; }
.downloads-grid { display: grid; gap: 16px; }
.download-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--off-white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    padding: 20px 24px;
    transition: all 0.25s;
}
.download-card:hover {
    background: var(--white);
    border-color: rgba(255,193,7,0.35);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.download-card-icon {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--navy);
    color: var(--gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.download-card-info { flex: 1; min-width: 0; }
.download-card-info h3 { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.download-card-info p { font-size: 13.5px; color: var(--text-muted); margin-bottom: 5px; }
.download-card-meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; }
.download-card-cta {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: background 0.25s;
}
.download-card:hover .download-card-cta { background: var(--navy-mid); }

/* ─── PRODUCT DETAIL SIDEBAR ─────────────────────────────────────
   The "Our X Products" list on a product's own detail page — reuses
   .director-detail-grid for the two-column layout and
   .director-sidebar-cta for the enquiry box; this adds just the list
   of sibling products itself. */
.product-sidebar-nav {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold);
    margin-bottom: 20px;
}
.product-sidebar-nav h3 {
    font-size: 15px; font-weight: 700; color: var(--navy);
    padding: 18px 22px; margin: 0;
    border-bottom: 1px solid var(--border);
}
.product-sidebar-list { list-style: none; margin: 0; padding: 8px 0; }
.product-sidebar-list li { border-bottom: 1px solid var(--border); }
.product-sidebar-list li:last-child { border-bottom: none; }
.product-sidebar-list a,
.product-sidebar-list .current {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 22px;
    font-size: 13.5px; font-weight: 600; color: var(--text);
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.product-sidebar-list a i { color: var(--gold); font-size: 11px; flex-shrink: 0; }
.product-sidebar-list a:hover { background: var(--white); color: var(--navy); padding-left: 28px; }
.product-sidebar-list .current { background: var(--navy); color: #fff; }
.product-sidebar-list .current i { color: var(--gold); }

@media (max-width: 992px) {
    .product-sidebar-nav { margin-top: 40px; }
}

/* Wraps a document download-card so a Copy Link button can sit in its
   corner without nesting an interactive control inside the card's own
   <a> (invalid HTML, unreliable click handling). */
.download-card-wrap { position: relative; }
.media-copy-btn {
    position: absolute; top: 12px; right: 12px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: 1px solid var(--border);
    color: var(--navy); font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.media-copy-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.media-copy-btn.is-copied { background: var(--navy); border-color: var(--navy); color: var(--gold); }

/* ─── MEDIA TILES (images & videos on the Downloads page) ──────── */
.media-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 8px;
}
.media-tile {
    background: var(--off-white);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
}
.media-tile:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.media-tile-thumb {
    display: block; position: relative;
    aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy);
    cursor: zoom-in;
}
.media-tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.media-tile:hover .media-tile-thumb img { transform: scale(1.05); }
.media-tile-zoom {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,30,78,0.35); color: #fff; font-size: 20px;
    opacity: 0; transition: opacity 0.25s;
}
.media-tile-thumb:hover .media-tile-zoom { opacity: 1; }
.media-tile-info { padding: 14px 16px 16px; }
.media-tile-info h3 { font-size: 14.5px; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.media-tile-info p { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.media-tile-actions { display: flex; gap: 8px; }
.media-tile-action {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--white); border: 1px solid var(--border);
    color: var(--navy); font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.media-tile-action:hover { background: var(--navy); border-color: var(--navy); color: var(--gold); }
.media-tile-action.is-copied { background: var(--navy); border-color: var(--navy); color: var(--gold); }

/* ─── CUSTOM VIDEO PLAYER ────────────────────────────────────────
   Native <video controls> handles actual playback (seek/volume/pause —
   proven cross-browser, no need to reinvent it), layered with two custom
   pieces on top: a poster overlay with a play button (so a video never
   auto-shows raw browser chrome before the visitor has chosen to play
   it) and an explicit fullscreen button. See site.js for the behaviour. */
.media-video-card {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--navy);
    overflow: hidden;
}
.media-video-card video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
.media-video-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, rgba(0,30,78,0.55), rgba(0,20,54,0.75));
    cursor: pointer;
    transition: opacity 0.25s, visibility 0.25s;
}
.media-video-overlay.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.media-video-play {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--gold); color: var(--navy);
    border: none; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.media-video-play:hover { transform: scale(1.08); }
.media-video-fullscreen {
    position: absolute; bottom: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 6px;
    background: rgba(0,0,0,0.55); color: #fff; border: none;
    font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s, background 0.2s;
}
.media-video-card:hover .media-video-fullscreen { opacity: 1; }
.media-video-fullscreen:hover { background: rgba(0,0,0,0.8); }

@media (max-width: 640px) {
    .media-tile-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .media-video-fullscreen { opacity: 1; }
}

/* ─── LIGHTBOX (image preview) ───────────────────────────────────
   Mirrors the admin panel's lightbox exactly: wrap an <img> in an
   <a class="lightbox-trigger">, the delegated handler in site.js does
   the rest. Optional data-caption shows a label under the image. */
.lightbox-trigger { cursor: zoom-in; }
.lightbox-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(0, 20, 54, 0.9);
    display: flex; align-items: center; justify-content: center;
    padding: 48px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.lightbox-overlay.open { opacity: 1; visibility: visible; }
.lightbox-overlay img {
    min-width: min(70vw, 720px);
    max-width: min(92vw, 1100px);
    max-height: 85vh;
    width: auto; height: auto;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    background: #fff;
    transform: scale(0.96);
    transition: transform 0.2s ease;
}
.lightbox-overlay.open img { transform: scale(1); }
.lightbox-caption {
    position: absolute; bottom: 26px; left: 0; right: 0;
    text-align: center; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.3px;
}
.lightbox-close {
    position: absolute; top: 20px; right: 24px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.14); color: #fff; border: none;
    font-size: 17px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.26); }

/* ─── CONTACT PAGE ────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-info-card { background: var(--off-white); padding: 32px; margin-bottom: 20px; }
.contact-info-item { display: flex; gap: 14px; margin-bottom: 20px; }
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-item i { color: var(--gold); font-size: 18px; width: 24px; }
.contact-info-item strong { display: block; color: var(--navy); margin-bottom: 3px; }
.contact-form-wrap { background: var(--white); border: 1px solid var(--border); padding: 36px; box-shadow: var(--shadow-sm); }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }

/* ─── BRANCHES PAGE ───────────────────────────────────────────── */
.branches-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.branch-card { background: var(--white); border: 1px solid var(--border); padding: 28px; position: relative; }
.branch-card.is-hq::before {
    content: 'HEAD OFFICE';
    position: absolute; top: 0; right: 0;
    background: var(--gold); color: var(--navy);
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
    padding: 5px 12px;
}
.branch-card h3 { font-family: var(--font-display); font-size: 20px; color: var(--navy); margin-bottom: 14px; }
.branch-card .contact-info-item { margin-bottom: 12px; }

/* ─── LOAN APPLICATION PAGE ───────────────────────────────────── */
.loan-form-wrap { max-width: 720px; margin: 0 auto; background: var(--white); border: 1px solid var(--border); padding: 40px; box-shadow: var(--shadow-sm); }

/* ─── CAREERS ──────────────────────────────────────────────────── */
.careers-grid { display: grid; gap: 18px; }
.career-card {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--white); border: 1px solid var(--border);
    padding: 26px 30px; transition: all 0.25s;
}
.career-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.career-card h3 { font-family: var(--font-display); font-size: 20px; color: var(--navy); margin-bottom: 6px; }
.career-card .meta { font-size: 13px; color: var(--text-muted); }
.career-card .meta span { margin-right: 14px; }
.career-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* ─── GALLERY ──────────────────────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gallery-item { position: relative; overflow: hidden; height: 220px; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,18,53,0.85), transparent);
    color: #fff; font-size: 13px; padding: 30px 14px 12px;
    opacity: 0; transition: opacity 0.3s;
}
.gallery-item:hover .caption { opacity: 1; }

/* ─── PAGINATION ───────────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    border: 1px solid var(--border); font-size: 13.5px; font-weight: 600; color: var(--text);
    transition: all 0.25s;
}
.pagination a:hover { border-color: var(--gold); color: var(--navy); }
.pagination .current { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* ─── GENERIC PAGE CONTENT (Page model / legal pages) ─────────── */
.static-page-body { max-width: 800px; margin: 0 auto; font-size: 16px; line-height: 1.9; color: var(--text); }
.static-page-body h2 { font-family: var(--font-display); font-size: 26px; color: var(--navy); margin: 32px 0 14px; }
.static-page-body p { margin-bottom: 18px; }

/* ─── 404 PAGE ─────────────────────────────────────────────────── */
.error-page { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; }
.error-page .code { font-family: var(--font-display); font-size: 120px; font-weight: 700; color: var(--navy); line-height: 1; }
.error-page h1 { font-size: 24px; margin: 12px 0 10px; color: var(--navy); }
.error-page p { color: var(--text-muted); margin-bottom: 28px; }

/* ─── AUTH PAGES (admin login / forgot / reset) ───────────────── */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); padding: 24px; }
.auth-box { background: var(--white); width: 100%; max-width: 420px; padding: 44px 40px; box-shadow: var(--shadow-lg); }
.auth-logo { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; text-align: center; }
.auth-logo .logo-emblem-bg { width: 52px; height: 52px; background: linear-gradient(135deg, var(--gold), #FFD54F); display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 22px; margin-bottom: 14px; }
.auth-logo h1 { font-family: var(--font-display); font-size: 20px; color: var(--navy); }
.auth-box .form-group { margin-bottom: 18px; }
.auth-box .btn { width: 100%; justify-content: center; }
.auth-links { text-align: center; margin-top: 18px; font-size: 13.5px; }
.auth-links a { color: var(--navy-mid); font-weight: 600; }
.auth-links a:hover { color: var(--gold-dark); }

/* ─── CHAT WIDGET ──────────────────────────────────────────────── */
.chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 998; }
.chat-toggle-btn {
    height: 54px; padding: 0 24px 0 20px; border-radius: 999px;
    background: var(--white);
    border: 2px solid var(--gold);
    color: var(--navy); cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; font-weight: 700;
    box-shadow: var(--shadow-lg);
    position: relative; transition: transform 0.25s, box-shadow 0.25s;
}
.chat-toggle-btn i { font-size: 19px; }
.chat-toggle-btn:hover { transform: scale(1.04); box-shadow: var(--shadow-gold); }
.notification-badge {
    position: absolute; top: -2px; right: -2px;
    background: #dc2626; color: #fff; font-size: 11px; font-weight: 800;
    min-width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--white);
}
.chat-window {
    position: absolute; bottom: 76px; right: 0;
    width: 360px; max-width: calc(100vw - 48px);
    background: var(--white); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    height: 480px; max-height: 70vh;
    opacity: 0; transform: translateY(16px) scale(0.98);
    pointer-events: none; transition: all 0.25s;
}
.chat-widget.open .chat-window { opacity: 1; transform: none; pointer-events: auto; }
.chat-widget.open .chat-toggle-btn { display: none; }
.chat-header { background: var(--navy); color: #fff; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; }
.chat-header-info { display: flex; align-items: center; gap: 12px; }
.chat-header-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.chat-header-text h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 2px; }
.chat-header-text p { font-size: 11.5px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 5px; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; }
.chat-close-btn { background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; font-size: 15px; }
.chat-close-btn:hover { color: #fff; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--off-white); }
.chat-message { max-width: 82%; }
.chat-message.bot, .chat-message.agent { align-self: flex-start; }
.chat-message.visitor { align-self: flex-end; }
.chat-message-content { padding: 10px 14px; font-size: 13.5px; line-height: 1.5; }
.chat-message.bot .chat-message-content, .chat-message.agent .chat-message-content { background: var(--white); color: var(--text); border: 1px solid var(--border); border-radius: 2px 12px 12px 12px; }
.chat-message.visitor .chat-message-content { background: var(--navy); color: #fff; border-radius: 12px 2px 12px 12px; }
.chat-message-time { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.chat-message.visitor .chat-message-time { text-align: right; }
.chat-input-area { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--white); }
.chat-input { flex: 1; border: 1px solid var(--border); padding: 10px 14px; font-size: 13.5px; font-family: var(--font-body); }
.chat-input:focus { outline: none; border-color: var(--gold); }
.chat-send-btn { width: 40px; height: 40px; background: var(--navy); color: var(--gold); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-send-btn:hover { background: var(--navy-mid); }
@media (max-width: 480px) {
    .chat-widget { right: 14px; bottom: 14px; }
    .chat-window { width: calc(100vw - 28px); }
}

/* ─── GENERIC MARKETING POPUPS (jcb_popups — separate from the account modal) ─── */
.tn-popup-overlay { position: fixed; inset: 0; background: rgba(0,18,53,0.6); z-index: 1200; opacity: 0; transition: opacity 0.3s; }
.tn-popup-overlay.is-visible { opacity: 1; }
.tn-popup { position: fixed; z-index: 1201; background: var(--white); box-shadow: var(--shadow-lg); opacity: 0; transition: all 0.3s; }
.tn-popup-modal { top: 50%; left: 50%; transform: translate(-50%, -46%); width: 460px; max-width: calc(100vw - 32px); }
.tn-popup-modal.is-visible { opacity: 1; transform: translate(-50%, -50%); }
.tn-popup-banner-top { top: 0; left: 0; right: 0; opacity: 1; transform: translateY(-100%); }
.tn-popup-banner-top.is-visible { transform: translateY(0); }
.tn-popup-banner-bottom { bottom: 0; left: 0; right: 0; opacity: 1; transform: translateY(100%); }
.tn-popup-banner-bottom.is-visible { transform: translateY(0); }
.tn-popup-slide-in { bottom: 24px; right: 24px; width: 340px; opacity: 1; transform: translateX(120%); }
.tn-popup-slide-in.is-visible { transform: translateX(0); }
.tn-popup-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: rgba(0,30,78,0.06); border: none; cursor: pointer; color: var(--navy); z-index: 2; }
.tn-popup-close:hover { background: var(--navy); color: #fff; }
.tn-popup-image { height: 160px; background-size: cover; background-position: center; }
.tn-popup-content { padding: 24px; }
.tn-popup-headline { font-family: var(--font-display); font-size: 22px; color: var(--navy); margin-bottom: 8px; }
.tn-popup-text { font-size: 14px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.tn-popup-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: #fff; padding: 10px 20px; font-size: 13.5px; font-weight: 700; }
.tn-popup-cta:hover { background: var(--navy-mid); }
body.tn-popup-lock-scroll { overflow: hidden; }

/* ─── Responsive additions for inner pages ────────────────────── */
@media (max-width: 900px) {
    .product-hero { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form-row { grid-template-columns: 1fr; }
    .product-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .career-card { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 560px) {
    .page-header h1 { font-size: 30px; }
    .product-gallery-grid { grid-template-columns: 1fr; }
}

/* ─── NESTED FLYOUT MENU (e.g. "Open An Account" → Deposit → Savings...) ── */
.nav-flyout {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    --mega-shift: 0px;
    background: var(--navy);
    min-width: 240px;
    padding: 8px 0;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(var(--mega-shift, 0px)) translateY(12px);
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 2000;
    border-top: 3px solid var(--gold);
}
.nav-item:hover > .nav-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(var(--mega-shift, 0px)) translateY(0);
}
.nav-flyout-item {
    position: relative;
}
.nav-flyout-item > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 20px;
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.nav-flyout-item > span i { font-size: 10px; color: rgba(255,255,255,0.4); transition: transform 0.2s; }
.nav-flyout-item:hover > span { background: rgba(255,255,255,0.06); color: var(--gold); }
.nav-flyout-item:hover > span i { color: var(--gold); }
.nav-flyout-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    background: var(--navy-mid);
    min-width: 220px;
    padding: 8px 0;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(8px);
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    border-top: 3px solid var(--gold);
}
.nav-flyout-item:hover > .nav-flyout-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
.nav-flyout-submenu a {
    display: block;
    padding: 12px 20px;
    color: rgba(255,255,255,0.8);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
    border-left: 2px solid transparent;
}
.nav-flyout-submenu a:hover {
    color: var(--gold);
    background: rgba(255,255,255,0.05);
    border-left-color: var(--gold);
    padding-left: 24px;
}

/* Mobile: hover doesn't exist, so flyouts become click-to-expand accordions
   sharing the mega-menu's mobile behaviour (.nav-item.open, .open on the
   flyout-item itself) — wired up in site.js. */
@media (max-width: 768px) {
    .nav-flyout {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        border-top: none;
        min-width: 0;
        padding: 0;
        transition: max-height 0.35s ease;
    }
    .nav-item.open .nav-flyout { max-height: 900px; padding: 4px 0 10px 20px; }
    .nav-flyout-item > span { color: rgba(255,255,255,0.75); padding: 12px 10px; }
    .nav-flyout-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: none;
        box-shadow: none;
        border-top: none;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.3s ease;
    }
    .nav-flyout-item.open .nav-flyout-submenu { max-height: 600px; padding: 2px 0 8px 14px; }
    .nav-flyout-item.open > span i { transform: rotate(90deg); }
    .nav-flyout-submenu a { color: rgba(255,255,255,0.6); padding: 10px 10px; }

    /* The desktop hover rules (.nav-item:hover .mega-menu etc.) are declared
       outside any media query and are MORE specific than the plain
       `.mega-menu { transform: none }` mobile override above, so as soon as a
       touch/pointer lands on an open accordion the panel picks up the desktop
       `translateX(-50%)` and jumps half its width to the left. Re-assert the
       mobile geometry at matching specificity so hover state is a no-op here. */
    .nav-item:hover .mega-menu,
    .nav-item:hover > .nav-flyout,
    .nav-item:hover > .nav-sidebar-menu,
    .nav-flyout-item:hover > .nav-flyout-submenu {
        transform: none;
        left: auto;
        right: auto;
        --mega-shift: 0px;
    }
    /* Accordions are height-driven on mobile; hover must not reveal a
       collapsed panel's contents either. */
    .nav-item:hover .mega-menu { max-height: 0; }
    .nav-item.open:hover .mega-menu { max-height: 900px; }
    .nav-item:hover > .nav-flyout { max-height: 0; }
    .nav-item.open:hover > .nav-flyout { max-height: 900px; }
    .nav-flyout-item:hover > .nav-flyout-submenu { max-height: 0; }
    .nav-flyout-item.open:hover > .nav-flyout-submenu { max-height: 600px; }
}

/* ─── SIDEBAR DROPDOWN (e.g. "About Us") — white single-column list where
   some rows are plain links and some expand their own navy flyout ──────── */
.nav-sidebar-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    --mega-shift: 0px;
    background: var(--white);
    min-width: 280px;
    padding: 8px 0;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateX(var(--mega-shift, 0px)) translateY(12px);
    transition: opacity 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 2000;
    border-top: 3px solid var(--gold);
}
.nav-item:hover > .nav-sidebar-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(var(--mega-shift, 0px)) translateY(0);
}
.nav-sidebar-menu > a,
.nav-sidebar-menu > .nav-flyout-item > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 22px;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
}
.nav-sidebar-menu > a:hover {
    background: var(--off-white);
    color: var(--navy);
    padding-left: 26px;
}
.nav-sidebar-menu > .nav-flyout-item {
    position: relative;
}
.nav-sidebar-menu > .nav-flyout-item > span {
    cursor: pointer;
}
.nav-sidebar-menu > .nav-flyout-item > span i {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.nav-sidebar-menu > .nav-flyout-item:hover > span {
    background: var(--off-white);
    color: var(--navy);
    padding-left: 26px;
}
/* The flyout that pops out from a sidebar row reuses .nav-flyout-submenu's
   navy styling as-is — just repositioned relative to this wider parent. */
.nav-sidebar-menu > .nav-flyout-item > .nav-flyout-submenu {
    top: 0;
    left: 100%;
}

@media (max-width: 768px) {
    .nav-sidebar-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        min-width: 0;
        border-top: none;
        padding: 0;
        box-shadow: none;
        background: rgba(255,255,255,0.04);
        transition: max-height 0.4s ease, padding 0.4s ease;
    }
    .nav-item.open .nav-sidebar-menu { max-height: 1200px; padding: 4px 0 10px 20px; }
    .nav-sidebar-menu > a,
    .nav-sidebar-menu > .nav-flyout-item > span {
        color: rgba(255,255,255,0.75);
        padding: 12px 10px;
    }
    .nav-sidebar-menu > a:hover,
    .nav-sidebar-menu > .nav-flyout-item:hover > span {
        background: none;
        color: var(--gold);
        padding-left: 10px;
    }
}

/* ─── UPDATE MY DETAILS — 2-column layout + multi-step KYC form ────────── */
.kyc-page-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
}
.kyc-info-col img {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}
.kyc-info-col h2 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--navy);
    margin-bottom: 14px;
}
.kyc-info-col p { color: var(--text-muted); font-size: 14.5px; line-height: 1.8; margin-bottom: 16px; }
.kyc-info-points { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.kyc-info-points li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text); }
.kyc-info-points li i { color: var(--gold); margin-top: 3px; font-size: 15px; }
.kyc-info-note {
    background: var(--off-white);
    border-left: 3px solid var(--gold);
    padding: 16px 18px;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 24px;
}

.kyc-form-wrap {
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 36px 40px;
    position: sticky;
    top: 24px;
}

/* Step indicator */
.kyc-steps-bar { display: flex; align-items: center; margin-bottom: 34px; }
.kyc-step-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--off-white); border: 2px solid var(--border);
    color: var(--text-muted); font-size: 12.5px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.3s;
}
.kyc-step-dot.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.kyc-step-dot.done { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.kyc-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 4px; transition: background 0.3s; }
.kyc-step-line.done { background: var(--gold); }

.kyc-step { display: none; }
.kyc-step.active { display: block; animation: kycFadeIn 0.35s ease; }
@keyframes kycFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.kyc-step h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--navy);
    margin-bottom: 4px;
}
.kyc-step .kyc-step-sub { font-size: 12.5px; color: var(--text-muted); margin-bottom: 22px; }
.kyc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.kyc-form-row.full { grid-template-columns: 1fr; }
.kyc-subsection-label {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--gold-dark); margin: 24px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--off-white);
}
.kyc-subsection-label:first-child { margin-top: 0; }

.kyc-checkbox-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.kyc-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); }
.kyc-checkbox-item input { width: 16px; height: 16px; accent-color: var(--navy); }

/* File dropzones (Ghana Card front/back) */
.kyc-file-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.kyc-file-drop {
    border: 2px dashed var(--border);
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    position: relative;
    min-height: 130px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.kyc-file-drop:hover { border-color: var(--gold); background: var(--off-white); }
.kyc-file-drop i { font-size: 22px; color: var(--text-muted); margin-bottom: 8px; }
.kyc-file-drop span { font-size: 12px; color: var(--text-muted); }
.kyc-file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kyc-file-drop img { max-width: 100%; max-height: 100px; border-radius: 4px; }
.kyc-file-drop.has-file { border-style: solid; border-color: var(--gold); }

/* Signature pad */
.kyc-signature-wrap { margin: 8px 0 20px; }
.kyc-signature-canvas {
    width: 100%;
    height: 160px;
    border: 2px dashed var(--border);
    background: var(--off-white);
    cursor: crosshair;
    touch-action: none;
    display: block;
}
.kyc-signature-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.kyc-signature-hint { font-size: 11.5px; color: var(--text-muted); }
.kyc-signature-clear {
    background: none; border: none; color: var(--navy-mid); font-size: 12.5px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.kyc-signature-clear:hover { color: var(--gold-dark); }

.kyc-declaration {
    background: var(--off-white);
    padding: 18px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 20px;
    font-style: italic;
}

.kyc-declaration-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 24px;
    cursor: pointer;
}
.kyc-declaration-agree input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--navy);
}

.kyc-step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.kyc-step-nav-right { display: flex; align-items: center; gap: 18px; }
.kyc-skip-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    text-align: right;
    line-height: 1.4;
}
.kyc-skip-link span { display: block; color: var(--navy-mid); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.kyc-skip-link:hover span { color: var(--gold-dark); }
@media (max-width: 480px) {
    .kyc-step-nav { flex-wrap: wrap; gap: 14px; }
    .kyc-step-nav-right { width: 100%; flex-direction: column-reverse; align-items: stretch; gap: 10px; }
    .kyc-skip-link { text-align: center; }
}

/* ─── KYC SUCCESS MODAL ────────────────────────────────────────
   Shown once, right after a successful "Update My Details"
   submission — same visual language as .popup-overlay/.popup-box
   (the account-opening modal) for consistency, but a simpler
   single-panel layout since this is a confirmation, not a form. */
.kyc-success-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,12,38,0.8);
    backdrop-filter: blur(6px);
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    opacity: 1;
    animation: kycSuccessFadeIn 0.3s ease;
}
.kyc-success-overlay.closing { opacity: 0; transition: opacity 0.2s ease; }
@keyframes kycSuccessFadeIn { from { opacity: 0; } to { opacity: 1; } }
.kyc-success-modal {
    background: var(--white);
    width: 100%;
    max-width: 440px;
    padding: 40px 36px 36px;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    transform: scale(1) translateY(0);
    animation: kycSuccessPopIn 0.35s cubic-bezier(0.4,0,0.2,1);
}
.kyc-success-overlay.closing .kyc-success-modal { transform: scale(0.94) translateY(10px); transition: transform 0.2s ease; }
@keyframes kycSuccessPopIn {
    from { transform: scale(0.9) translateY(16px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.kyc-success-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    background: var(--off-white);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.kyc-success-close:hover { background: var(--gray-100, #F2F0EC); color: var(--navy); }
.kyc-success-icon {
    width: 68px; height: 68px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22C55E, #16A34A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--white);
    box-shadow: 0 10px 24px rgba(22,163,74,0.35);
}
.kyc-success-modal h2 {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--navy);
    margin-bottom: 12px;
}
.kyc-success-modal p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 26px;
}
.kyc-success-modal .btn { width: 100%; justify-content: center; }

.kyc-error-icon {
    background: linear-gradient(135deg, #F87171, #DC2626);
    box-shadow: 0 10px 24px rgba(220,38,38,0.35);
}
.kyc-error-modal h2 { color: #B91C1C; }

@media (max-width: 900px) {
    .kyc-page-grid { grid-template-columns: 1fr; gap: 40px; }
    .kyc-form-wrap { position: static; padding: 26px 22px; }
    .kyc-form-row, .kyc-file-row { grid-template-columns: 1fr; }
}

/* =============================================================================
   FULLY CUSTOM FORM CONTROLS — dropdown + date picker
   These replace native <select> and <input type="date"> entirely (not just
   restyle them) because browsers never allow CSS to restyle a native open
   dropdown list or calendar popup — this is the only way to get a
   consistent, fully-branded look in every state, on every browser.
   ============================================================================= */

/* ── Custom dropdown ─────────────────────────────────────── */
.jcb-select-wrap { position: relative; }
.jcb-select-wrap select.form-control {
    /* Native select stays in the DOM (still the thing that submits with
       the form) but is fully invisible — the trigger below is what's seen. */
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.jcb-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 37px;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    background: var(--off-white);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.25s;
    user-select: none;
}
.jcb-select-trigger.placeholder { color: #8a94a3; }
.jcb-select-trigger i { font-size: 10px; color: var(--text-muted); transition: transform 0.25s; flex-shrink: 0; }
.jcb-select-wrap.open .jcb-select-trigger {
    border-color: var(--navy);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(0,30,78,0.06);
}
.jcb-select-wrap.open .jcb-select-trigger i { transform: rotate(180deg); color: var(--navy); }

.jcb-select-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-height: 240px;
    overflow-y: auto;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s ease;
}
.jcb-select-wrap.open .jcb-select-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.jcb-select-option {
    padding: 10px 14px;
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
}
.jcb-select-option:hover, .jcb-select-option.highlighted { background: var(--off-white); }
.jcb-select-option.selected { background: var(--navy); color: #fff; font-weight: 600; }
.jcb-select-option.selected:hover { background: var(--navy-mid); }
.jcb-select-option.placeholder-option { color: #8a94a3; }

/* ── Custom date picker ──────────────────────────────────── */
.jcb-date-wrap { position: relative; }
.jcb-date-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 37px;
    padding: 10px 13px;
    border: 1.5px solid var(--border);
    background: var(--off-white);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13.5px;
    cursor: pointer;
    transition: all 0.25s;
    user-select: none;
}
.jcb-date-display.placeholder { color: #8a94a3; }
.jcb-date-display i { font-size: 14px; color: var(--text-muted); }
.jcb-date-wrap.open .jcb-date-display { border-color: var(--navy); background: var(--white); box-shadow: 0 0 0 3px rgba(0,30,78,0.06); }

.jcb-date-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    width: 280px;
    padding: 16px;
    z-index: 500;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s ease;
}
.jcb-date-wrap.open .jcb-date-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.jcb-date-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.jcb-date-month-select { display: flex; align-items: center; gap: 6px; }
.jcb-date-month-label { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy); }
.jcb-date-nav { display: flex; gap: 4px; }
.jcb-date-nav button {
    width: 26px; height: 26px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.jcb-date-nav button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.jcb-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 12px; }
.jcb-date-dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text-muted); padding: 4px 0; }
.jcb-date-day {
    text-align: center;
    padding: 7px 0;
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.15s;
}
.jcb-date-day:hover { background: var(--off-white); }
.jcb-date-day.other-month { color: #c3cad4; }
.jcb-date-day.selected { background: var(--navy); color: #fff; font-weight: 700; }
.jcb-date-day.today:not(.selected) { color: var(--gold-dark); font-weight: 700; }
.jcb-date-day.disabled { color: #d8dce3; cursor: not-allowed; pointer-events: none; }

.jcb-date-footer { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--off-white); }
.jcb-date-footer button {
    background: none; border: none; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--navy-mid);
}
.jcb-date-footer button:hover { color: var(--gold-dark); }

/* Year quick-select (click the month label) */
.jcb-date-year-panel {
    position: absolute; inset: 0; background: var(--white);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    padding: 16px; overflow-y: auto; z-index: 2;
}
.jcb-date-year-panel button {
    padding: 10px 0; border: 1px solid var(--border); background: var(--white);
    color: var(--text); font-size: 12.5px; cursor: pointer; transition: all 0.15s;
}
.jcb-date-year-panel button:hover, .jcb-date-year-panel button.current { background: var(--navy); color: #fff; border-color: var(--navy); }


/* ─── ABOUT PAGE ─────────────────────────────────────────────── */
.about-section { padding: 76px 0; }
.about-section.bg-off { background: #F4F5F7; }
.about-section.bg-white { background: var(--white); }

.about-section-head { margin-bottom: 32px; }
.about-section-head h2 {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--navy);
}
.about-underline { display: block; width: 42px; height: 4px; background: var(--gold); margin-top: 14px; }

/* -- Our Culture, Our Way -- */
.about-culture-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}
.about-culture-text p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 18px;
}
.about-culture-text p:last-child { margin-bottom: 0; }

.about-video-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--navy-deep);
    box-shadow: 0 24px 50px rgba(0,18,53,0.22);
    cursor: pointer;
    border: none;
    padding: 0;
    display: block;
}
.about-video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,18,53,0.18);
    transition: background 0.3s;
}
.about-video-thumb:hover::after { background: rgba(0,18,53,0.32); }
.about-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 64px; height: 64px;
    border-radius: 16px;
    background: rgba(255,193,7,0.92);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 1;
    box-shadow: 0 10px 26px rgba(0,0,0,0.3);
    transition: transform 0.3s, background 0.3s;
}
.about-video-thumb:hover .about-video-play { transform: translate(-50%,-50%) scale(1.08); background: var(--gold); }

.about-media-empty {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    border: 2px dashed var(--border);
    background: var(--off-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
}
.about-media-empty i { font-size: 28px; color: #c3cad4; }
.about-media-empty span { font-size: 12.5px; max-width: 220px; }

/* -- Why Choose Us -- */
.about-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 32px;
}
.about-why-item { display: flex; align-items: flex-start; gap: 16px; }
.about-why-ico {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}
.about-why-body h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 8px;
}
.about-why-body .about-underline { width: 30px; height: 3px; margin-top: 0; margin-bottom: 10px; }
.about-why-body p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* -- Mission / Core Values / Awards -- */
.about-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}
.about-mission-text p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.85;
}
.about-core-values { margin-top: 44px; }
.about-core-values-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    list-style: none;
    margin-top: 4px;
}
.about-core-values-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text);
}
.about-core-values-list li::before {
    content: '';
    width: 7px; height: 7px;
    background: var(--gold-dark);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.about-awards-media img {
    width: 100%;
    display: block;
    border-radius: 12px;
    box-shadow: 0 20px 44px rgba(0,18,53,0.16);
}
.about-awards-media .about-media-empty { aspect-ratio: 16 / 11; border-radius: 12px; }

@media (max-width: 900px) {
    .about-culture-grid, .about-mission-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-culture-grid { direction: ltr; }
    .about-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .about-why-grid { grid-template-columns: 1fr; }
    .about-core-values-list { grid-template-columns: 1fr; }
    .about-section { padding: 52px 0; }
}

/* -- Video lightbox (culture video playback) -- */
.video-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,12,38,0.88);
    backdrop-filter: blur(6px);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.video-lightbox.active { opacity: 1; visibility: visible; }
.video-lightbox-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.video-lightbox-inner iframe,
.video-lightbox-inner video {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}
.video-lightbox-close {
    position: absolute;
    top: -44px; right: 0;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--white);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s;
}
.video-lightbox-close:hover { background: rgba(255,255,255,0.2); }


/* ─── BOARD OF DIRECTORS ─────────────────────────────────────── */
.directors-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 48px;
}
.director-card { display: flex; gap: 22px; align-items: flex-start; }
.director-photo {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 10px 26px rgba(0,18,53,0.14);
}
.director-photo-empty {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--off-white);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3cad4;
    font-size: 26px;
    flex-shrink: 0;
}
.director-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 3px;
}
.director-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.director-excerpt { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; margin-bottom: 12px; }
.director-readmore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    transition: gap 0.25s;
}
.director-readmore:hover { gap: 14px; color: var(--gold-dark); }
.director-readmore-ico {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

/* -- Director detail page -- */
.director-detail-grid {
    display: grid;
    grid-template-columns: 2.4fr 1fr;
    gap: 56px;
    align-items: start;
}
.director-detail-head {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 32px;
    margin-bottom: 36px;
}
.director-detail-photo {
    width: 150px; height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 16px 36px rgba(0,18,53,0.16);
}
.director-detail-photo-empty {
    width: 150px; height: 150px;
    border-radius: 50%;
    background: var(--off-white);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c3cad4;
    font-size: 40px;
}
.director-detail-col h4 {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
}
.director-bullets { list-style: none; }
.director-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 9px;
}
.director-bullets li::before {
    content: '';
    width: 6px; height: 6px;
    margin-top: 6px;
    background: var(--gold-dark);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.director-bio p { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin-bottom: 18px; }
.director-bio p:last-child { margin-bottom: 0; }

.director-sidebar-cta {
    background: var(--gold);
    padding: 28px 24px;
    border-radius: 4px;
}
.director-sidebar-cta h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.director-sidebar-cta p { font-size: 13.5px; color: rgba(0,30,78,0.75); margin-bottom: 18px; }

.director-others { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.director-others h3 { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 18px; }
.director-others-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.director-other-card { text-align: center; }
.director-other-card img, .director-other-card .director-photo-empty {
    width: 64px; height: 64px;
    margin: 0 auto 10px;
}
.director-other-card .director-name { font-size: 14px; }
.director-other-card .director-title { font-size: 11px; margin-bottom: 0; }

@media (max-width: 900px) {
    .directors-grid { grid-template-columns: 1fr; }
    .director-detail-grid { grid-template-columns: 1fr; }
    .director-detail-head { grid-template-columns: 1fr; text-align: center; }
    .director-detail-head .director-detail-photo, .director-detail-head .director-detail-photo-empty { margin: 0 auto; }
    .director-others-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .director-card { flex-direction: column; align-items: center; text-align: center; }
    .director-others-grid { grid-template-columns: 1fr; }
}