/* Extracted from Excel_IT_Orynx_Solution.html */

:root {
            --cream: #FAF8F3;
            --cream-mid: #F2EFE7;
            --cream-dark: #E8E3D8;
            --ink: #1A1814;
            --ink-mid: #3D3A35;
            --ink-light: #7A756B;
            --gold: #B8965A;
            --gold-light: #D4AF7A;
            --gold-pale: #F5EDD8;
            --teal: #1E6B6B;
            --teal-light: #EAF3F3;
            --white: #FFFFFF;

            /* Use Arial everywhere */
            --serif: Arial, "Segoe UI", sans-serif;
            --sans: Arial, "Segoe UI", sans-serif;

            --r: 4px;
            --rl: 12px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0
        }

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: var(--sans);
            background: var(--cream);
            color: var(--ink);
            overflow-x: hidden;
            font-size: 16px;
            line-height: 1.6
        }

        /* ── NAVBAR ── */
        .navbar {
            width: 100%;
            background: var(--white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 6%;
            position: sticky;
            top: 0;
            z-index: 999;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
        }

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

        .logo {
            width: 80px;
            max-width: 100%;
            height: auto;
        }

        .brand-text h2 {
            font-size: clamp(20px, 3vw, 32px);
            color: var(--gold-light);
            font-style: italic;
        }

        .brand-text h4 {
            font-size: clamp(14px, 2vw, 18px);
            color: var(--ink);
        }

        .brand-text p {
            font-size: 11px;
            line-height: 1.4;
            color: var(--ink-light);
        }

        .mobile-btn {
            display: none
        }

        .menu-toggle {
            display: none;
            font-size: 30px;
            cursor: pointer;
            background: none;
            border: none;
            color: var(--ink);
            line-height: 1;
        }

        @media (max-width: 900px) {
            .navbar {
                padding: 15px 5%
            }

            .logo {
                width: 65px
            }
        }

        @media (max-width: 768px) {
            .navbar {
                padding: 14px 20px
            }

            .menu-toggle {
                display: block
            }

            .nav-cta {
                display: none
            }

            .mobile-btn {
                display: block
            }

            .nav-links {
                position: absolute;
                top: 100%;
                left: -100%;
                width: 100%;
                background: var(--white);
                flex-direction: column;
                gap: 25px;
                padding: 35px 0;
                transition: left .4s;
                box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
            }

            .nav-links.active {
                left: 0
            }
        }


        .nav-logo {
            font-family: var(--serif);
            font-size: 26px;
            font-weight: 600;
            letter-spacing: .04em;
            color: var(--ink);
            text-decoration: none;
            cursor: pointer
        }

        .nav-logo span {
            color: var(--gold)
        }

        .nav-links {
            display: flex;
            gap: 2.5rem;
            list-style: none
        }

        .nav-links a {
            font-size: 13px;
            font-weight: 500;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ink-mid);
            text-decoration: none;
            transition: color .2s;
            cursor: pointer
        }

        .nav-links a:hover {
            color: var(--gold)
        }

        .nav-cta {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--white);
            background: var(--ink);
            padding: 10px 22px;
            border-radius: var(--r);
            border: none;
            cursor: pointer;
            transition: background .2s, transform .15s
        }

        .nav-cta:hover {
            background: var(--gold);
            transform: translateY(-1px)
        }

        /* PAGE SYSTEM */
        .pv {
            display: none
        }

        .pv.active {
            display: block
        }

        /* --- HERO SECTION --- */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-wrap: wrap;
            padding-top: 68px;
            /* Offset for top nav */
            position: relative;
            overflow: hidden;
            background-color: #050505;
            /* Fallback dark color */
            color: #ffffff;
            /* Default all hero text to white */
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            /* Base layer */

            /* --- KEY CHANGE FOR READABILITY --- */
            /* This gradient adds a dark 'scrim' from left to right. */
            /* Start near-black on the left, fading to completely clear by the middle. */
            background:
                linear-gradient(to right, rgba(5, 5, 5, 0.95) 0%, rgba(5, 5, 5, 0.8) 35%, transparent 60%),
                url('../images/image-01.png');
            /* Your AI-generated image */

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
            /* Above image, below text */
            background-image:
                linear-gradient(rgba(184, 150, 90, .06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(184, 150, 90, .06) 1px, transparent 1px);
            background-size: 80px 80px;
            mask-image: radial-gradient(ellipse at 60% 40%, black 30%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 30%, transparent 70%);
        }

        .hero-left {
            flex: 0 0 50%;
            /* Target approx half width */
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            /* Corrected: Align items from the top/left */

            /* --- KEY CHANGE FOR POSITIONING --- */
            /* Reducded the large 8vw padding on the left and right */
            padding: 8vw 4vw 8vw 5vw;

            position: relative;
            z-index: 2;
            /* Text must be on top */
            text-align: left;
            /* Ensure left-aligned text */
        }

        /* Ensure subtext stays left-aligned if it shrinks */
        .hero-left>* {
            align-self: flex-start;
        }

        .hero-title {
            color: #ffffff;
            /* Reduced blur radius of text shadow for sharpness, while keeping contrast */
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
        }

        .hero-title em {
            color: var(--gold);
            /* Keep your gold accent */
            font-style: italic;
        }

        .hero-sub {
            color: rgba(255, 255, 255, 0.8);
            max-width: 480px;
            /* Reduced blur and added slight spread for readability over busy patterns */
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
            margin-bottom: 2.5rem;
        }

        .hero-actions {
            display: flex;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap;
        }

        /* --- MOBILE ADJUSTMENTS --- */
        /* (Kept your existing mobile fix, with slight padding adjustment) */
        @media (max-width: 992px) {
            .hero {
                flex-direction: column;
                justify-content: center;
                padding-top: 20px;
                min-height: 80vh;
                /* Applied the Gradient here */
                background: linear-gradient(180deg, #050505 0%, #0a192f 100%);
            }

            .hero-bg {
                /* Remove the background graphic entirely */
                background-image: none !important;
                /* Match the gradient here */
                background: linear-gradient(90deg, #080808 0%, #00122c 100%) !important;
                position: absolute;
                inset: 0;
                z-index: 0;
            }

            .hero-left {
                flex: 1;
                padding: 40px 5%;
                align-items: center;
                text-align: center;
                z-index: 2;
            }

            .hero-grid {
                display: none;
            }

            .hero-sub {
                max-width: 100%;
                margin-bottom: 2rem;
            }
        }



        .hero-actions {
            display: flex;
            gap: 16px;
            align-items: center;
            flex-wrap: wrap
        }

        .btn {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            background: var(--ink);
            color: var(--white);
            padding: 14px 32px;
            border-radius: var(--r);
            text-decoration: none;
            transition: all .2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            border: none
        }

        .btn:hover {
            background: var(--gold);
            transform: translateY(-2px)
        }

        .btn-ghost {
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-mid);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-bottom: 1px solid var(--cream-dark);
            padding-bottom: 2px;
            transition: color .2s, border-color .2s;
            cursor: pointer;
            text-decoration: none
        }

        .btn-ghost:hover {
            color: var(--gold);
            border-color: var(--gold)
        }

        .btn-ol {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            border: 1px solid var(--ink);
            color: var(--ink);
            padding: 14px 32px;
            border-radius: var(--r);
            cursor: pointer;
            background: transparent;
            transition: all .2s
        }

        .btn-ol:hover {
            background: var(--ink);
            color: var(--white)
        }

        .hero-stats {
            display: flex;
            gap: 2.5rem;
            margin-top: 3.5rem;
            padding-top: 2rem;
            border-top: 1px solid var(--cream-dark)
        }

        .stat-n {
            font-family: var(--serif);
            font-size: 32px;
            font-weight: 600;
            color: #ffffff;
            display: block
        }

        .stat-l {
            font-size: 12px;
            font-weight: 400;
            color: var(--ink-light);
            letter-spacing: .04em;
            margin-top: 2px;
            display: block
        }

        .hero-right {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6vw 6vw 6vw 2vw;
            position: relative;
            z-index: 2
        }

        .card-stack {
            position: relative;
            width: 100%;
            max-width: 380px
        }

        .fc {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            padding: 1.5rem;
            box-shadow: 0 4px 40px rgba(26, 24, 20, .08);
            animation: flt 6s ease-in-out infinite
        }

        .fc.cb {
            position: absolute;
            top: -20px;
            right: -20px;
            left: 20px;
            background: var(--gold-pale);
            border-color: rgba(184, 150, 90, .2);
            box-shadow: none;
            z-index: 0;
            animation-delay: -3s
        }

        .fc.cf {
            position: relative;
            z-index: 1
        }

        @keyframes flt {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        .card-tag {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--gold);
            background: var(--gold-pale);
            padding: 4px 10px;
            border-radius: 99px;
            display: inline-block;
            margin-bottom: 1rem
        }

        .card-name {
            font-family: var(--serif);
            font-size: 22px;
            font-weight: 500;
            color: var(--ink);
            margin-bottom: .5rem
        }

        .card-desc {
            font-size: 13px;
            color: var(--ink-light);
            line-height: 1.65;
            margin-bottom: 1.25rem
        }

        .card-feats {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .card-feat {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--ink-mid)
        }

        .feat-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0
        }

        /* MARQUEE */
        .mq-sec {
            border-top: 1px solid var(--cream-dark);
            border-bottom: 1px solid var(--cream-dark);
            background: var(--white);
            padding: 18px 0;
            overflow: hidden
        }

        .mq-track {
            display: flex;
            animation: mq 28s linear infinite;
            white-space: nowrap
        }

        .mq-item {
            display: inline-flex;
            align-items: center;
            gap: 20px;
            padding: 0 40px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--ink-light)
        }

        .mq-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0
        }

        @keyframes mq {
            from {
                transform: translateX(0)
            }

            to {
                transform: translateX(-50%)
            }
        }

        /* SECTIONS */
        section {
            padding: 7rem 8vw
        }

        .sec-ey {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 1.25rem
        }

        .sec-ey::before {
            content: '';
            display: block;
            width: 24px;
            height: 1px;
            background: var(--gold)
        }

        .sec-t {
            font-family: var(--serif);
            font-size: clamp(32px, 4vw, 56px);
            font-weight: 500;
            line-height: 1.1;
            color: var(--ink);
            margin-bottom: 1.25rem;
            letter-spacing: -.01em
        }

        .sec-t em {
            font-style: italic;
            color: var(--gold)
        }

        .sec-b {
            font-size: 16px;
            font-weight: 300;
            line-height: 1.8;
            color: var(--ink-mid);
            max-width: 560px
        }

        /* ABOUT */
        .about {
            background: var(--white)
        }

        .about-in {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8vw;
            align-items: center
        }

        .pillars {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            background: var(--cream-dark);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            overflow: hidden;
            margin-top: 2.5rem
        }

        .pill-c {
            background: var(--white);
            padding: 1.75rem;
            transition: background .2s
        }

        .pill-c:hover {
            background: var(--cream)
        }

        .pill-n {
            font-family: var(--serif);
            font-size: 36px;
            font-weight: 600;
            color: var(--gold);
            line-height: 1;
            display: block;
            margin-bottom: .5rem
        }

        .pill-l {
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            display: block;
            margin-bottom: .25rem
        }

        .pill-s {
            font-size: 12px;
            color: var(--ink-light);
            line-height: 1.5
        }

        .aq {
            font-family: var(--serif);
            font-size: clamp(20px, 2.5vw, 30px);
            font-weight: 400;
            font-style: italic;
            line-height: 1.4;
            color: var(--ink);
            border-left: 2px solid var(--gold);
            padding-left: 1.75rem;
            margin-bottom: 2rem
        }

        .dtags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 2rem
        }

        .dtag {
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .06em;
            padding: 7px 16px;
            border-radius: 99px;
            border: 1px solid var(--cream-dark);
            color: var(--ink-mid);
            background: var(--cream);
            display: inline-flex;
            align-items: center;
            gap: 6px
        }

        .dtag-d {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold)
        }

        /* COURSES GRID */
        .courses {
            background: var(--white)
        }

        .courses-hdr {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 3.5rem;
            flex-wrap: wrap;
            gap: 1.5rem
        }

        .cg {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1px;
            background: var(--cream-dark);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            overflow: hidden
        }

        .ct {
            background: var(--white);
            padding: 2rem 2rem 1.75rem;
            position: relative;
            overflow: hidden;
            transition: background .25s;
            cursor: pointer;
            display: flex;
            flex-direction: column
        }

        .ct::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), var(--gold-light));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .3s ease
        }

        .ct {
            transform: translateY(0);
            transition: background .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
        }

        .ct:hover {
            background: var(--cream);
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 40px rgba(184, 150, 90, .18), 0 8px 16px rgba(26, 24, 20, .08);
            z-index: 2;
        }

        .ct:hover::after {
            transform: scaleX(1)
        }

        .ct-ico {
            width: 44px;
            height: 44px;
            border-radius: var(--r);
            background: var(--gold-pale);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.25rem;
            font-size: 20px
        }

        .ct-name {
            font-family: var(--serif);
            font-size: 22px;
            font-weight: 500;
            color: var(--ink);
            margin-bottom: .75rem;
            line-height: 1.2
        }

        .ct-desc {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.7;
            color: var(--ink-mid);
            margin-bottom: 1.5rem;
            flex: 1
        }

        .ct-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 1.25rem
        }

        .ct-tag {
            font-size: 10px;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            padding: 3px 9px;
            border-radius: 3px;
            border: 1px solid var(--cream-dark);
            color: var(--ink-light);
            background: var(--cream)
        }

        .ct-cta {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--gold);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-bottom: 1px solid var(--gold-pale);
            padding-bottom: 2px;
            transition: gap .2s
        }

        .ct:hover .ct-cta {
            gap: 10px
        }

        /* WHY */
        .why {
            background: var(--ink)
        }

        .why .sec-ey {
            color: var(--gold-light)
        }

        .why .sec-ey::before {
            background: var(--gold-light)
        }

        .why .sec-t {
            color: var(--white)
        }

        .why .sec-b {
            color: rgba(255, 255, 255, .5)
        }

        .why-g {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1.5rem;
            margin-top: 3.5rem
        }

        .wc {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: var(--rl);
            padding: 2rem;
            transition: background .2s, border-color .2s
        }

        .wc:hover {
            background: rgba(184, 150, 90, .08);
            border-color: rgba(184, 150, 90, .3)
        }

        .wc-n {
            font-family: var(--serif);
            font-size: 48px;
            font-weight: 600;
            color: rgba(184, 150, 90, .25);
            line-height: 1;
            margin-bottom: 1.25rem;
            display: block
        }

        .wc-t {
            font-size: 15px;
            font-weight: 500;
            color: var(--white);
            margin-bottom: .75rem
        }

        .wc-b {
            font-size: 13px;
            font-weight: 300;
            line-height: 1.75;
            color: rgba(255, 255, 255, .45)
        }

        /* AUDIENCE */
        .audience {
            background: var(--white)
        }

        .aud-in {
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 8vw;
            align-items: start
        }

        .aud-cards {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 1rem
        }

        .acard {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            padding: 1.5rem;
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            transition: border-color .2s, box-shadow .2s
        }

        .acard:hover {
            border-color: var(--gold);
            box-shadow: 0 4px 20px rgba(184, 150, 90, .1)
        }

        .acard-ico {
            width: 36px;
            height: 36px;
            border-radius: var(--r);
            background: var(--gold-pale);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px
        }

        .acard-t {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 4px
        }

        .acard-b {
            font-size: 13px;
            color: var(--ink-light);
            line-height: 1.6
        }

        /* CTA */
        .cta-sec {
            background: var(--white);
            text-align: center;
            padding: 8rem 8vw;
            position: relative;
            overflow: hidden
        }

        .cta-sec::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold), transparent)
        }

        .cta-bg-r {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(ellipse at 50% 0%, rgba(184, 150, 90, .07) 0%, transparent 60%)
        }

        .cta-in {
            position: relative;
            z-index: 1;
            max-width: 100%;
            margin: 10px
        }

        .cta-t {
            font-family: var(--serif);
            font-size: clamp(36px, 5vw, 64px);
            font-weight: 500;
            line-height: 1.1;
            color: var(--ink);
            margin-bottom: 1.25rem;
            letter-spacing: -.01em
        }

        .cta-t em {
            font-style: italic;
            color: var(--gold)
        }

        .cta-b {
            font-size: 16px;
            font-weight: 300;
            line-height: 1.8;
            color: var(--ink-mid);
            margin-bottom: 2.5rem
        }

        .cta-btns {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap
        }

        /* FOOTER */
        footer {
            background: var(--ink);
            padding: 4rem 8vw 2.5rem
        }

        .ft-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 3rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
            flex-wrap: wrap;
            gap: 2rem
        }

        .ft-logo {
            font-family: var(--serif);
            font-size: 28px;
            font-weight: 600;
            color: var(--white);
            letter-spacing: .04em;
            cursor: pointer
        }

        .ft-logo span {
            color: var(--gold)
        }

        .ft-tag {
            font-size: 13px;
            color: rgba(255, 255, 255, .35);
            margin-top: 6px;
            font-weight: 300
        }

        .ft-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            max-width: 380px
        }

        .ft-pill {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: .06em;
            padding: 5px 12px;
            border-radius: 99px;
            border: 1px solid rgba(255, 255, 255, .12);
            color: rgba(255, 255, 255, .45);
            cursor: pointer;
            transition: border-color .2s, color .2s
        }

        .ft-pill:hover {
            color: var(--gold);
            border-color: rgba(184, 150, 90, .4)
        }

        .ft-bot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem
        }

        .ft-copy {
            font-size: 12px;
            color: rgba(255, 255, 255, .25)
        }

        .ft-note {
            font-size: 11px;
            color: rgba(255, 255, 255, .2);
            font-style: italic
        }

        /* ══ COURSE DETAIL ══ */
        .cdp {
            background: var(--cream);
            min-height: 100vh
        }

        .back-bar {
            background: var(--cream);
            border-bottom: 1px solid var(--cream-dark);
            padding: 14px 8vw
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--ink-mid);
            cursor: pointer;
            background: none;
            border: none;
            transition: color .2s
        }

        .back-btn:hover {
            color: var(--gold)
        }

        .back-btn svg {
            transition: transform .2s
        }

        .back-btn:hover svg {
            transform: translateX(-3px)
        }

        /* CD Hero */
        .cd-hero {
            background: var(--ink);
            padding: 5rem 8vw 4rem;
            position: relative;
            overflow: hidden;
            scroll-margin-top: 0;
        }

        .cd-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 50%, rgba(184, 150, 90, .12) 0%, transparent 55%);
            pointer-events: none
        }

        .cd-hi {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 4rem;
            align-items: start;
            position: relative;
            z-index: 1
        }

        .cd-ey {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 1.25rem
        }

        .cd-ey::before {
            content: '';
            width: 24px;
            height: 1px;
            background: var(--gold);
            display: block
        }

        .cd-t {
            font-family: var(--serif);
            font-size: clamp(36px, 4.5vw, 60px);
            font-weight: 500;
            line-height: 1.1;
            color: var(--white);
            margin-bottom: 1.25rem
        }

        .cd-desc {
            font-size: 15px;
            font-weight: 300;
            line-height: 1.8;
            color: rgba(255, 255, 255, .6);
            margin-bottom: 2rem;
            max-width: 560px
        }

        .cd-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 2rem
        }

        .cd-badge {
            font-size: 11px;
            font-weight: 500;
            padding: 5px 14px;
            border-radius: 99px;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .12);
            color: rgba(255, 255, 255, .7)
        }

        .cd-badge.g {
            background: rgba(184, 150, 90, .15);
            border-color: rgba(184, 150, 90, .35);
            color: var(--gold-light)
        }

        /* Sidebar */
        .cd-sb {
            background: var(--white);
            border-radius: var(--rl);
            overflow: hidden;
            border: 1px solid var(--cream-dark)
        }

        .cd-sb-hd {
            background: var(--gold-pale);
            padding: 1.5rem;
            border-bottom: 1px solid rgba(184, 150, 90, .2)
        }

        .cd-sb-pre {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 6px
        }

        .cd-sb-t {
            font-family: var(--serif);
            font-size: 20px;
            font-weight: 500;
            color: var(--ink)
        }

        .cd-sb-body {
            padding: 1.5rem
        }

        .cd-feats {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 1.5rem
        }

        .cd-feats li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: var(--ink-mid)
        }

        .cd-feats li::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0;
            margin-top: 6px
        }

        .cd-enrol {
            width: 100%;
            padding: 14px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            background: var(--ink);
            color: var(--white);
            border: none;
            border-radius: var(--r);
            cursor: pointer;
            transition: background .2s
        }

        .cd-enrol:hover {
            background: var(--gold)
        }

        .cd-demo {
            width: 100%;
            padding: 12px;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .06em;
            text-transform: uppercase;
            background: transparent;
            color: var(--ink-mid);
            border: 1px solid var(--cream-dark);
            border-radius: var(--r);
            cursor: pointer;
            margin-top: 10px;
            transition: all .2s
        }

        .cd-demo:hover {
            background: var(--cream);
            border-color: var(--gold);
            color: var(--gold)
        }

        /* CD Body */
        .cd-body {
            padding: 5rem 8vw
        }

        .cd-sec {
            margin-bottom: 4rem
        }

        .cd-sl {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: .75rem;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .cd-sl::before {
            content: '';
            width: 20px;
            height: 1px;
            background: var(--gold);
            display: block
        }

        .cd-st {
            font-family: var(--serif);
            font-size: clamp(26px, 3vw, 40px);
            font-weight: 500;
            color: var(--ink);
            margin-bottom: 1.25rem;
            line-height: 1.2
        }

        .cd-sb2 {
            font-size: 15px;
            font-weight: 300;
            line-height: 1.85;
            color: var(--ink-mid);
            max-width: 680px
        }

        /* Outcomes */
        .out-g {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 16px;
            margin-top: 1.5rem
        }

        .out-c {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            padding: 1.5rem;
            border-left: 3px solid var(--gold)
        }

        .out-t {
            font-size: 14px;
            font-weight: 500;
            color: var(--ink);
            margin-bottom: 6px
        }

        .out-b {
            font-size: 13px;
            color: var(--ink-light);
            line-height: 1.6
        }

        /* CTA Banner */
        .cta-banner {
            background: var(--ink);
            border-radius: var(--rl);
            padding: 2.5rem 3rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
            margin: 3rem 0
        }

        .cta-bnt {
            font-family: var(--serif);
            font-size: clamp(20px, 2.5vw, 28px);
            font-weight: 500;
            color: var(--white)
        }

        .cta-bnt em {
            color: var(--gold);
            font-style: italic
        }

        .cta-bns {
            font-size: 13px;
            color: rgba(255, 255, 255, .45);
            margin-top: 6px;
            font-weight: 300
        }

        /* Curriculum */
        .cur-g {
            display: flex;
            flex-direction: column;
            gap: 1px;
            background: var(--cream-dark);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            overflow: hidden;
            margin-top: 2rem
        }

        .cur-mod {
            background: var(--white)
        }

        .cur-hd {
            padding: 1.25rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: background .2s
        }

        .cur-hd:hover {
            background: var(--cream)
        }

        .cur-mi {
            display: flex;
            align-items: center;
            gap: 1rem
        }

        .cur-num {
            font-family: var(--serif);
            font-size: 22px;
            font-weight: 600;
            color: var(--gold);
            min-width: 32px
        }

        .cur-mn {
            font-size: 15px;
            font-weight: 500;
            color: var(--ink)
        }

        .cur-tog {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid var(--cream-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--ink-light);
            transition: all .2s;
            flex-shrink: 0
        }

        .cur-hd:hover .cur-tog {
            border-color: var(--gold);
            color: var(--gold)
        }

        .cur-con {
            padding: 0 1.5rem 1.5rem 4rem
        }

        .cur-con.h {
            display: none
        }

        .cur-topics {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .cur-topics li {
            font-size: 13px;
            color: var(--ink-mid);
            display: flex;
            align-items: center;
            gap: 10px
        }

        .cur-topics li::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--gold);
            flex-shrink: 0
        }

        /* Testimonials */
        .test-g {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 16px;
            margin-top: 1.5rem
        }

        .tcard {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            padding: 1.75rem
        }

        .tcard-stars {
            color: var(--gold);
            font-size: 14px;
            letter-spacing: 2px;
            margin-bottom: 1rem
        }

        .tcard-q {
            font-family: var(--serif);
            font-size: 17px;
            font-style: italic;
            color: var(--ink);
            line-height: 1.6;
            margin-bottom: 1.25rem
        }

        .tcard-a {
            font-size: 12px;
            font-weight: 600;
            color: var(--ink-mid);
            letter-spacing: .06em;
            text-transform: uppercase
        }

        .tcard-r {
            font-size: 12px;
            color: var(--ink-light);
            margin-top: 2px
        }

        /* Batches */
        .batch-t {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1.5rem
        }

        .batch-t th {
            padding: 12px 16px;
            text-align: left;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--ink-light);
            border-bottom: 1px solid var(--cream-dark);
            background: var(--cream)
        }

        .batch-t td {
            padding: 16px;
            font-size: 14px;
            color: var(--ink-mid);
            border-bottom: 1px solid var(--cream-dark);
            vertical-align: middle
        }

        .batch-t tr:last-child td {
            border-bottom: none
        }

        .batch-t tr:hover td {
            background: var(--cream)
        }

        .bd {
            font-weight: 500;
            color: var(--ink)
        }

        .btype {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 99px
        }

        .btype.weekday {
            background: var(--teal-light);
            color: var(--teal)
        }

        .btype.weekend {
            background: var(--gold-pale);
            color: #7A5520
        }

        .enrol-btn {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 8px 18px;
            border-radius: var(--r);
            background: var(--ink);
            color: var(--white);
            border: none;
            cursor: pointer;
            transition: background .2s;
            white-space: nowrap
        }

        .enrol-btn:hover {
            background: var(--gold)
        }

        /* FAQ */
        .faq-l {
            display: flex;
            flex-direction: column;
            gap: 1px;
            background: var(--cream-dark);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            overflow: hidden;
            margin-top: 2rem
        }

        .faq-i {
            background: var(--white)
        }

        .faq-q {
            padding: 1.25rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: var(--ink);
            gap: 1rem;
            transition: background .2s
        }

        .faq-q:hover {
            background: var(--cream)
        }

        .faq-ic {
            font-size: 20px;
            color: var(--gold);
            font-weight: 300;
            flex-shrink: 0
        }

        .faq-a {
            padding: 0 1.5rem 1.25rem;
            font-size: 13px;
            color: var(--ink-light);
            line-height: 1.75
        }

        .faq-a.h {
            display: none
        }

        /* Reveal */
        .rv {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .6s ease, transform .6s ease
        }

        .rv.vis {
            opacity: 1;
            transform: none
        }

        .d1 {
            transition-delay: .1s
        }

        .d2 {
            transition-delay: .2s
        }

        .d3 {
            transition-delay: .3s
        }

        /* Responsive */
        @media(max-width:900px) {
            .hero {
                grid-template-columns: 1fr;
                min-height: auto;
                padding-bottom: 4rem
            }

            .hero-right {
                display: none
            }

            .about-in {
                grid-template-columns: 1fr
            }

            .aud-in {
                grid-template-columns: 1fr
            }

            .cd-hi {
                grid-template-columns: 1fr
            }

            .nav-links {
                display: none
            }

            section {
                padding: 5rem 6vw
            }
        }

        @media(max-width:600px) {
            .hero-left {
                padding: 4rem 6vw
            }

            .hero-stats {
                gap: 1.5rem
            }

            .cd-hero {
                padding: 3rem 6vw
            }

            .cd-body {
                padding: 3rem 6vw
            }

            .cta-banner {
                padding: 1.75rem
            }

            .batch-t th:nth-child(3),
            .batch-t td:nth-child(3) {
                display: none
            }
        }

        section.process {
            padding: 60px 20px;
            text-align: center;
        }

        section.process h2 {
            font-size: 32px;
            margin-bottom: 10px;
        }

        section.process h3 {
            font-size: 24px;
            color: #ccc;
            margin-bottom: 40px;
        }

        .steps {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            max-width: 1000px;
            margin: 0 auto;

        }

        .step {
            flex: 1 1 220px;
            background: rgba(28, 28, 28, 0.8);
            padding: 20px;
            border-radius: 8px;
            text-align: left;
        }

        .step h4 {
            color: #D4AF37;
            font-size: 20px;
            margin-bottom: 10px;
        }

        .step p {
            font-size: 14px;
            color: #ddd;
            line-height: 1.5;
        }

        .cta {
            margin-top: 40px;
        }

        .cta button {
            background: #D4AF37;
            color: #111;
            padding: 15px 30px;
            border: none;
            border-radius: 6px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .cta button:hover {
            background: #b9972f;
        }

        /* Optional form styling */
        form {
            margin-top: 20px;
        }

        form input[type="email"] {
            padding: 10px;
            border-radius: 4px;
            border: none;
            margin-right: 10px;
            width: 250px;
        }


        form input[type="submit"] {
            background: #D4AF37;
            color: #111;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
        }

        form input[type="submit"]:hover {
            background: #b9972f;
        }

        .cta-in.two-col {
            display: flex;
            gap: 40px;
            align-items: flex-start;
        }

        .cta-left {
            flex: 1;
        }

        .cta-right {
            flex: 1;
            background: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .lead-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 15px;
        }

        .lead-form input {
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
        }

        .lead-form button.btn.gold {
            background: #d4af37;
            /* gold */
            color: #fff;
            padding: 12px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        .lead-form button.btn.gold:hover {
            background: #b9972f;
        }

        .trust-icons {
            margin-top: 15px;
            font-size: 13px;
            color: #555;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        /* ═══════════════════════════════════════════════
           REFACTORED — DRY / RESPONSIVE ADDITIONS
           ═══════════════════════════════════════════════ */

        /* Hero background image (extracted from inline style) */
        .hero-img-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
            z-index: 0
        }

        /* Courses section headings (extracted from inline styles) */
        .courses-heading {
            margin: 0;
            font-family: var(--serif);
            font-style: italic;
            font-weight: bold;
            color: var(--ink)
        }

        .courses-subheading {
            margin: 8px 0 0;
            font-style: italic;
            font-weight: 500;
            color: var(--ink-mid)
        }

        /* Course tile: border-radius unified (was inline on every .ct) */
        .ct {
            border-radius: var(--rl)
        }

        /* CTA banner action group (extracted from inline display:flex) */
        .cta-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            align-items: center
        }

        /* Dark outline button variant for dark-background CTA banners */
        .btn-ol--dark {
            color: rgba(255, 255, 255, .7);
            border-color: rgba(255, 255, 255, .2);
            background: transparent
        }

        .btn-ol--dark:hover {
            background: rgba(255, 255, 255, .1);
            color: var(--white)
        }

        /* CTA banner flush (no bottom margin variant) */
        .cta-banner--flush {
            margin-bottom: 0
        }

        /* Form submit button (extracted from inline style) */
        .form-submit-btn {
            background-color: var(--gold);
            color: var(--white);
            padding: 12px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 14px;
            text-align: center;
            width: 100%;
            transition: background .2s
        }

        .form-submit-btn:hover {
            background-color: #9c7e3d
        }

        /* Process section with background (extracted from inline style) */
        .process--bg {
            background-image: url('../images/image-02.png');
            background-size: cover;
            background-position: center;
            color: var(--ink)
        }

        .process--bgg {
            background-image: url('../images/image-03.png');
            background-size: cover;
            background-position: center;
            color: var(--ink)
        }

        .process-title {
            font-size: 32px;
            color: var(--ink);
            margin-bottom: 10px
        }

        .process-sub {
            font-size: 24px;
            color: var(--ink-mid);
            margin-bottom: 40px
        }

        /* About section body copy with extra bottom margin */
        .sec-b--mb {
            margin-bottom: 1.75rem
        }

        /* ── RESPONSIVE ADDITIONS ── */

        /* Nav links: consolidated into single responsive block */
        @media (max-width: 900px) {
            .nav-links {
                gap: 1.5rem
            }
        }

        /* CTA two-col: stack on mobile */
        @media (max-width: 768px) {
            .cta-in.two-col {
                flex-direction: column
            }

            .cta-right {
                width: 100%
            }

            .hero-stats {
                flex-wrap: wrap;
                gap: 1.5rem
            }

            .courses-hdr {
                flex-direction: column;
                align-items: flex-start
            }

            .batch-t {
                font-size: 12px
            }

            .batch-t th,
            .batch-t td {
                padding: 10px 8px
            }
        }

        @media (max-width: 480px) {
            .ft-top {
                flex-direction: column
            }

            .ft-pills {
                max-width: 100%
            }

            .cta-banner {
                flex-direction: column;
                align-items: flex-start
            }

            .pillars {
                grid-template-columns: 1fr
            }

            .cd-hi {
                gap: 2rem
            }
        }

        /* ══ HOMEPAGE TESTIMONIALS ══ */
        .ht-sec {
            background: #0d0d0d;
            padding: 7rem 8vw;
            position: relative;
            overflow: hidden;
        }

        .ht-sec::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1px;
            height: 60px;
            background: linear-gradient(to bottom, transparent, var(--gold));
        }

        .ht-eyebrow {
            text-align: center;
            margin-bottom: 3.5rem;
        }

        .ht-tag {
            display: inline-block;
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--gold);
            border: 1px solid rgba(184, 150, 90, .35);
            padding: 5px 16px;
            border-radius: 99px;
            margin-bottom: 1.25rem;
        }

        .ht-title {
            font-family: var(--serif);
            font-size: clamp(28px, 4vw, 48px);
            font-weight: 500;
            color: var(--white);
            line-height: 1.15;
        }

        .ht-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 4rem;
        }

        .htc {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: 16px;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            transition: border-color .25s, background .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
        }

        .htc:hover {
            border-color: rgba(184, 150, 90, .4);
            background: rgba(184, 150, 90, .06);
            transform: translateY(-4px);
        }

        .htc-stars {
            color: var(--gold);
            font-size: 13px;
            letter-spacing: 3px;
        }

        .htc-q {
            font-family: var(--serif);
            font-size: 16px;
            font-style: italic;
            color: rgba(255, 255, 255, .85);
            line-height: 1.65;
            flex: 1;
        }

        .htc-author {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-top: 1rem;
            border-top: 1px solid rgba(255, 255, 255, .07);
        }

        .htc-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: var(--gold);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            flex-shrink: 0;
            letter-spacing: 0;
        }

        .htc-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--white);
            letter-spacing: .04em;
        }

        .htc-role {
            font-size: 11px;
            color: rgba(255, 255, 255, .4);
            margin-top: 2px;
        }

        .ht-alumni {
            text-align: center;
            padding-top: 3rem;
            border-top: 1px solid rgba(255, 255, 255, .06);
        }

        .ht-alumni-label {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .25);
            margin-bottom: 1.25rem;
        }

        .ht-alumni-logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2.5rem 3.5rem;
            align-items: center;
        }

        .ht-alumni-logos span {
            font-size: 13px;
            font-weight: 500;
            color: rgba(255, 255, 255, .22);
            letter-spacing: .06em;
            transition: color .2s;
        }

        .ht-alumni-logos span:hover {
            color: rgba(255, 255, 255, .5);
        }

        /* ══ HOMEPAGE FAQ ══ */
        .hfaq-sec {
            background: var(--cream);
            padding: 7rem 8vw;
        }

        .hfaq-inner {
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
        }

        .hfaq-inner .sec-ey {
            justify-content: center;
        }

        .hfaq-inner .sec-ey::before {
            display: none;
        }

        .hfaq-inner .sec-t {
            margin-bottom: .5rem;
        }

        .hfaq-inner .sec-b {
            max-width: 480px;
            margin: 0 auto 3rem;
            text-align: center;
        }

        .hfaq-list {
            display: flex;
            flex-direction: column;
            gap: 1px;
            background: var(--cream-dark);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            overflow: hidden;
            text-align: left;
            margin-bottom: 2.5rem;
        }

        .hfaq-item {
            background: var(--white);
        }

        .hfaq-q {
            padding: 1.4rem 1.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            color: var(--ink);
            gap: 1.5rem;
            transition: background .2s;
            user-select: none;
        }

        .hfaq-q:hover {
            background: var(--cream);
        }

        .hfaq-ic {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid var(--cream-dark);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--gold);
            font-weight: 300;
            flex-shrink: 0;
            transition: all .2s;
        }

        .hfaq-q:hover .hfaq-ic {
            border-color: var(--gold);
            background: var(--gold-pale);
        }

        .hfaq-a {
            padding: 0 1.75rem 1.4rem 1.75rem;
            font-size: 14px;
            color: var(--ink-light);
            line-height: 1.8;
        }

        .hfaq-a.h {
            display: none
        }

        .hfaq-cta {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* ══ AUDIENCE STATS ══ */
        .aud-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 2.5rem;
        }

        .aud-stat {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            padding: 1.5rem 1.75rem;
            transition: border-color .2s, box-shadow .2s;
        }

        .aud-stat:hover {
            border-color: rgba(184, 150, 90, .35);
            box-shadow: 0 4px 20px rgba(184, 150, 90, .1);
        }

        .aud-stat.full-width {
            grid-column: 1 / -1;
            text-align: center;
        }

        .aud-stat-n {
            font-family: var(--serif);
            font-size: clamp(28px, 4vw, 40px);
            font-weight: 600;
            color: var(--gold);
            line-height: 1;
            display: block;
            margin-bottom: 6px;
        }

        .aud-stat-l {
            font-size: 12px;
            font-weight: 400;
            color: var(--ink-light);
            letter-spacing: .03em;
            display: block;
        }

        .aud-stat.full-width .aud-stat-n {
            font-size: clamp(22px, 3vw, 30px);
        }

        @media (max-width: 600px) {
            .aud-stats {
                grid-template-columns: 1fr 1fr;
                gap: 10px;
            }
        }

/* Additional page styles */

/* ── News page scoped styles (prefixed .news-pg) ── */
        .news-pg { font-size: 15px; }

        .news-pg .news-urgent-banner {
            background: #D83B01;
            color: #fff;
            text-align: center;
            padding: 10px 1rem;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        .news-pg .news-urgent-banner .nub-tag {
            background: #FFB900;
            color: #1a1814;
            border-radius: 4px;
            padding: 2px 8px;
            margin-right: 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        /* Hero */
        .news-pg .news-hero {
            background: #050505;
            background-image:
                linear-gradient(to right, rgba(5, 5, 5, .98), rgba(5, 5, 5, .88) 48%, rgba(10, 28, 68, .92)),
                linear-gradient(rgba(184, 150, 90, .08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(184, 150, 90, .08) 1px, transparent 1px);
            background-size: auto, 72px 72px, 72px 72px;
            color: #fff;
            padding: 60px 2rem 56px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .news-pg .news-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 80% 20%, rgba(0, 168, 255, .28), transparent 28%),
                radial-gradient(circle at 18% 82%, rgba(184, 150, 90, .18), transparent 30%);
        }
        .news-pg .news-hero-inner { position: relative; max-width: 760px; margin: 0 auto; }
        .news-pg .news-eyebrow {
            display: inline-block;
            background: var(--gold);
            color: var(--white);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            padding: 5px 16px;
            border-radius: 20px;
            margin-bottom: 20px;
        }
        .news-pg .news-hero h1 {
            font-family: var(--serif);
            font-size: clamp(28px, 5vw, 46px);
            font-weight: 600;
            line-height: 1.15;
            margin-bottom: 18px;
        }
        .news-pg .news-hero h1 em {
            font-style: normal;
            color: var(--gold-light);
        }
        .news-pg .news-hero p {
            font-size: 17px;
            opacity: 0.88;
            max-width: 600px;
            margin: 0 auto 28px;
            line-height: 1.65;
        }
        .news-pg .countdown-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255,255,255,0.15);
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 40px;
            padding: 10px 22px;
            font-size: 15px;
            font-weight: 600;
        }
        .news-pg .countdown-pill .ndot {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: var(--gold);
            animation: npulse 1.4s ease-in-out infinite;
        }
        @keyframes npulse {
            0%,100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.75); }
        }

        /* Back bar */
        .news-pg .news-back-bar {
            background: var(--cream-mid);
            border-bottom: 1px solid var(--cream-dark);
            padding: 12px 6%;
        }
        .news-pg .news-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-mid);
            background: none;
            border: none;
            cursor: pointer;
            letter-spacing: 0.03em;
            transition: color .2s;
        }
        .news-pg .news-back-btn:hover { color: var(--gold); }

        /* Content */
        .news-pg .news-content {
            max-width: 1180px;
            margin: 0 auto;
            padding: 48px 6vw 80px;
        }

        /* Intro card */
        .news-pg .n-intro-card {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-left: 4px solid var(--gold);
            border-radius: var(--rl);
            padding: 28px 32px;
            margin-bottom: 40px;
        }
        .news-pg .n-intro-card h2 {
            font-family: var(--serif);
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
            color: var(--ink);
        }
        .news-pg .n-intro-card p {
            font-size: 15px;
            line-height: 1.7;
            color: var(--ink-mid);
        }
        .news-pg .n-intro-card strong { color: var(--ink); }

        /* Section headings */
        .news-pg .n-sec-heading {
            font-family: var(--serif);
            font-size: 22px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 6px;
            margin-top: 8px;
        }
        .news-pg .n-sec-sub {
            font-size: 14px;
            color: var(--ink-light);
            margin-bottom: 24px;
        }

        /* Cert tracks grid */
        .news-pg .n-tracks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
            gap: 18px;
            margin-bottom: 48px;
        }
        .news-pg .n-track-card {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            overflow: hidden;
            transition: box-shadow 0.2s, transform 0.2s;
        }
        .news-pg .n-track-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(26,24,20,0.12); }
        .news-pg .n-track-header {
            padding: 16px 20px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .news-pg .n-track-icon {
            width: 40px; height: 40px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px;
            flex-shrink: 0;
        }
        .news-pg .n-track-header h3 {
            font-family: var(--sans);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.3;
            color: var(--ink);
        }
        .news-pg .n-count-badge {
            margin-left: auto;
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 20px;
        }
        .news-pg .n-track-certs {
            padding: 0 20px 18px;
            border-top: 1px solid var(--cream-dark);
        }
        .news-pg .n-cert-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid var(--cream-mid);
            font-size: 13px;
        }
        .news-pg .n-cert-row:last-child { border-bottom: none; }
        .news-pg .n-cert-id {
            font-weight: 700;
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 5px;
            white-space: nowrap;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .news-pg .n-cert-name { font-weight: 500; color: var(--ink); line-height: 1.4; }
        .news-pg .n-cert-focus { font-size: 12px; color: var(--ink-light); margin-top: 2px; }

        /* Track colour themes using site palette */
        .news-pg .nt-ai .n-track-icon { background: #e8f0fe; }
        .news-pg .nt-ai .n-track-header { background: #f5f8ff; }
        .news-pg .nt-ai .n-count-badge { background: #e8f0fe; color: #185FA5; }
        .news-pg .nt-ai .n-cert-id { background: #e8f0fe; color: #185FA5; }

        .news-pg .nt-azure .n-track-icon { background: #e8f0fe; }
        .news-pg .nt-azure .n-track-header { background: #f5f8ff; }
        .news-pg .nt-azure .n-count-badge { background: #e8f0fe; color: #185FA5; }
        .news-pg .nt-azure .n-cert-id { background: #e8f0fe; color: #185FA5; }

        .news-pg .nt-security .n-track-icon { background: #fce8e1; }
        .news-pg .nt-security .n-track-header { background: #fff5f2; }
        .news-pg .nt-security .n-count-badge { background: #fce8e1; color: #993C1D; }
        .news-pg .nt-security .n-cert-id { background: #fce8e1; color: #993C1D; }

        .news-pg .nt-work .n-track-icon { background: var(--gold-pale); }
        .news-pg .nt-work .n-track-header { background: #fffbf2; }
        .news-pg .nt-work .n-count-badge { background: var(--gold-pale); color: #854F0B; }
        .news-pg .nt-work .n-cert-id { background: var(--gold-pale); color: #854F0B; }

        .news-pg .nt-dynamics .n-track-icon { background: var(--gold-pale); }
        .news-pg .nt-dynamics .n-track-header { background: #fffbf2; }
        .news-pg .nt-dynamics .n-count-badge { background: var(--gold-pale); color: #854F0B; }
        .news-pg .nt-dynamics .n-cert-id { background: var(--gold-pale); color: #854F0B; }

        .news-pg .nt-github .n-track-icon { background: #f0eeff; }
        .news-pg .nt-github .n-track-header { background: #f9f7ff; }
        .news-pg .nt-github .n-count-badge { background: #f0eeff; color: #534AB7; }
        .news-pg .nt-github .n-cert-id { background: #f0eeff; color: #534AB7; }

        /* Steps */
        .news-pg .n-steps-section { margin-bottom: 48px; }
        .news-pg .n-steps-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 16px;
        }
        .news-pg .n-step-card {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            padding: 24px 20px;
            text-align: center;
        }
        .news-pg .n-step-num {
            width: 40px; height: 40px;
            border-radius: 50%;
            background: var(--gold);
            color: #fff;
            font-weight: 800;
            font-size: 18px;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 14px;
        }
        .news-pg .n-step-card h4 {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 6px;
            color: var(--ink);
        }
        .news-pg .n-step-card p { font-size: 13px; color: var(--ink-light); line-height: 1.55; }

        /* Excel IT batch promo */
        .news-pg .n-batch-promo {
            background: var(--white);
            border: 1px solid var(--cream-dark);
            border-radius: var(--rl);
            padding: 34px 36px;
            margin-bottom: 40px;
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
            gap: 28px;
            align-items: center;
            box-shadow: 0 10px 26px rgba(26, 24, 20, .06);
        }
        .news-pg .n-batch-eyebrow {
            color: var(--gold);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .news-pg .n-batch-copy h2 {
            font-family: var(--serif);
            font-size: clamp(24px, 3vw, 34px);
            line-height: 1.15;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 12px;
        }
        .news-pg .n-batch-copy p {
            color: var(--ink-mid);
            font-size: 15px;
            line-height: 1.7;
            max-width: 640px;
        }
        .news-pg .n-batch-points {
            display: grid;
            gap: 10px;
        }
        .news-pg .n-batch-points div {
            background: var(--cream);
            border: 1px solid var(--cream-dark);
            border-radius: var(--r);
            padding: 12px 14px;
            color: var(--ink);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
        }
        .news-pg .n-batch-points span {
            color: var(--gold);
            font-weight: 800;
            margin-right: 10px;
        }
        .news-pg .n-batch-actions {
            grid-column: 1 / -1;
            justify-content: flex-start;
        }
        .news-pg .n-batch-actions .n-btn-secondary {
            color: var(--ink);
            border-color: var(--cream-dark);
            background: var(--cream);
        }

        /* CTA */
        .news-pg .n-cta-section {
            background: #050505;
            background-image:
                linear-gradient(135deg, rgba(5, 5, 5, .98), rgba(22, 34, 62, .96)),
                linear-gradient(rgba(184, 150, 90, .08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(184, 150, 90, .08) 1px, transparent 1px);
            background-size: auto, 64px 64px, 64px 64px;
            border-radius: var(--rl);
            padding: 44px 36px;
            text-align: center;
            color: #fff;
            margin-bottom: 40px;
        }
        .news-pg .n-cta-section h2 {
            font-family: var(--serif);
            font-size: 26px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        .news-pg .n-cta-section p {
            font-size: 15px;
            opacity: 0.85;
            margin-bottom: 28px;
            max-width: 520px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.65;
        }
        .news-pg .n-cta-buttons {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .news-pg .n-btn-primary {
            background: var(--gold);
            color: var(--white);
            font-weight: 700;
            font-size: 15px;
            padding: 13px 28px;
            border-radius: var(--r);
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: background .2s;
            display: inline-block;
        }
        .news-pg .n-btn-primary:hover { background: var(--gold-light); }
        .news-pg .n-btn-secondary {
            background: rgba(255,255,255,0.12);
            color: #fff;
            font-weight: 600;
            font-size: 15px;
            padding: 13px 28px;
            border-radius: var(--r);
            text-decoration: none;
            border: 1px solid rgba(255,255,255,0.35);
            cursor: pointer;
            transition: background .15s;
            display: inline-block;
        }
        .news-pg .n-btn-secondary:hover { background: rgba(255,255,255,0.22); }

        /* Footer note */
        .news-pg .n-footer-note {
            text-align: center;
            font-size: 13px;
            color: var(--ink-light);
            line-height: 1.6;
            border-top: 1px solid var(--cream-dark);
            padding-top: 28px;
        }
        .news-pg .n-footer-note a { color: var(--gold); text-decoration: none; }
        .news-pg .n-footer-note a:hover { text-decoration: underline; }

        @media (max-width: 600px) {
            .news-pg .news-hero { padding: 40px 1rem 36px; }
            .news-pg .news-content { padding: 32px 5% 60px; }
            .news-pg .n-intro-card { padding: 20px; }
            .news-pg .n-batch-promo { grid-template-columns: 1fr; padding: 24px 20px; }
            .news-pg .n-batch-actions { justify-content: stretch; }
            .news-pg .n-batch-actions button { width: 100%; }
            .news-pg .n-cta-section { padding: 32px 20px; }
        }

        /* Course card pop/fill treatment */
        .courses .cg {
            overflow: visible;
        }

        .courses .ct {
            border: 1px solid var(--cream-dark);
            isolation: isolate;
        }

        .courses .ct::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(5, 5, 5, .98), rgba(16, 32, 70, .96)),
                linear-gradient(rgba(184, 150, 90, .08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(184, 150, 90, .08) 1px, transparent 1px);
            background-size: auto, 56px 56px, 56px 56px;
            opacity: 0;
            transition: opacity .25s ease;
            z-index: -1;
        }

        .courses .ct:hover {
            background: #050505;
            border-color: rgba(184, 150, 90, .55);
            box-shadow: 0 18px 34px rgba(26, 24, 20, .16), 0 8px 18px rgba(0, 168, 255, .12);
        }

        .courses .ct:hover::before {
            opacity: 1;
        }

        .courses .ct:hover .ct-ico {
            background: var(--gold);
            color: var(--white);
        }

        .courses .ct:hover .ct-name,
        .courses .ct:hover .ct-desc {
            color: var(--white);
        }

        .courses .ct:hover .ct-tag {
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .18);
            color: rgba(255, 255, 255, .78);
        }

        .courses .ct:hover .ct-cta {
            color: var(--gold-light);
            border-bottom-color: rgba(212, 175, 122, .55);
        }

        /* Mobile navigation fix */
        @media (max-width: 768px) {
            .navbar {
                position: sticky;
                z-index: 3000;
            }

            .menu-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 44px;
                height: 44px;
                position: relative;
                z-index: 3002;
            }

            .nav-links {
                display: flex;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                pointer-events: none;
                background: var(--white);
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 0 20px;
                text-align: left !important;
                box-shadow: 0 16px 30px rgba(0, 0, 0, .12);
                transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
                z-index: 3001;
            }

            .nav-links.active {
                max-height: 420px;
                opacity: 1;
                pointer-events: auto;
                padding: 18px 20px 22px;
            }

            .nav-links li {
                width: 100%;
            }

            .nav-links a,
            .nav-links button {
                display: block;
                width: 100%;
                padding: 14px 0;
            }

            .mobile-btn button {
                margin-top: 8px;
                padding: 13px 18px;
                border: 0;
                border-radius: var(--r);
                background: var(--ink);
                color: var(--white);
                font-weight: 700;
                letter-spacing: .08em;
                text-transform: uppercase;
            }
        }