/* GENERATED by tools/bake-header.py from a real browser render.
   Do not edit: change components.src.js, re-capture, re-run.
   Region: global  fingerprint: 17e11a2b */

    /* --- SHARED NAV BAR (global / SG / MY) --- */
    /* av-mobile-blur-guard */@media (max-width: 900px){.cs-nav{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(255,255,255,0.98) !important;}.drawer-overlay{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:rgba(10,25,47,0.88) !important;}}
    .cs-nav {
        position: fixed; top: 44px; left: 0; width: 100%; height: 85px;
        background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(15, 30, 61, 0.08); z-index: 9000;
        box-shadow: 0 4px 20px rgba(15, 30, 61, 0.07);
        font-family: 'Inter', sans-serif;
    }

    .cs-nav-inner {
        max-width: 1350px; margin: 0 auto; padding: 0 30px;
        height: 100%; display: flex; justify-content: space-between; align-items: center;
    }

    .cs-nav-left { display: flex; align-items: center; gap: 30px; height: 100%; }

    .cs-logo { display: flex; align-items: center; text-decoration: none; gap: 10px; }
    .cs-logo img { height: 45px; width: auto; display: block; object-fit: contain; }
    .logo-text-fallback { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.6rem; color: var(--text-platinum); }
    .logo-text-fallback span { color: var(--accent-teal); }

    /* Region badge (used by /sg; absent on global) */
    .cs-region-badge {
        display: inline-flex; align-items: center; gap: 5px;
        background: rgba(33,104,160,0.10); color: var(--accent-teal, #2168A0);
        font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
        padding: 4px 10px; border-radius: 30px; white-space: nowrap;
    }
    /* HRD Corp badge next to the logo (MY pages). Flag-aware: TT-certified by default, Claimable when approved. */
    .cs-hrd-badge { height: 40px; width: auto; display: block; margin-left: 4px; }
    @media (max-width: 1024px) { .cs-hrd-badge { height: 34px; } }
    @media (max-width: 560px) { .cs-hrd-badge { display: none; } }

    .cs-nav-links { display: flex; align-items: center; gap: 20px; }

    .cs-nav-item {
        font-size: 0.85rem; font-weight: 600; color: var(--text-platinum);
        text-transform: uppercase; letter-spacing: 0.5px;
        text-decoration: none; transition: 0.3s;
        display: flex; align-items: center; gap: 6px; height: 100%;
        white-space: nowrap;
    }
    .cs-nav-item:hover { color: var(--accent-teal); }

    /* --- MEGA MENU ENGINE (DARK THEME) --- */
    .cs-mega-wrapper { position: relative; height: 100%; display: flex; align-items: center; }
    
    .cs-mega-menu {
        position: fixed; top: 129px; left: 50%; width: 1160px; max-width: 96vw;
        background: var(--bg-light-navy); border: 1px solid var(--border); border-top: 3px solid var(--accent-teal);
        border-radius: 0 0 14px 14px; box-shadow: 0 30px 60px rgba(15, 30, 61, 0.18);
        display: flex; opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(15px);
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s; overflow: hidden; z-index: 9001;
    }

    .cs-mega-wrapper::after { content: ''; position: absolute; bottom: -22px; left: -10px; width: 130%; height: 22px; }
    .cs-mega-wrapper:hover .cs-mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

    /* Link columns for Corporate / About mega-menus */
    .cs-mega-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }
    .cs-mega-link { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; transition: background 0.18s ease; }
    .cs-mega-link:hover { background: rgba(33,104,160,0.06); }
    .cs-mega-link strong { display: block; color: var(--text-platinum); font-size: 0.96rem; font-weight: 700; }
    .cs-mega-link span { display: block; color: var(--text-slate); font-size: 0.8rem; margin-top: 3px; line-height: 1.4; }
    .cs-mega-content-title { font-size: 0.72rem; color: var(--accent-teal); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px 14px; }

    /* Sidebar (Left) */
    .cs-mega-sidebar { width: 260px; background: var(--bg-navy); border-right: 1px solid var(--border); padding: 20px 0; flex-shrink: 0; }
    .cs-mega-tab {
        padding: 16px 30px; font-size: 0.95rem; font-weight: 700; color: var(--text-slate);
        cursor: pointer; display: flex; justify-content: space-between; align-items: center;
        transition: 0.2s; border-left: 4px solid transparent; white-space: nowrap;
    }
    .cs-mega-tab:hover, .cs-mega-tab.active { background: var(--bg-light-navy); color: var(--accent-teal); border-left: 4px solid var(--accent-teal); }

    /* Featured panel (left, HeiCoders style) */
    .cs-mega-feature { width: 264px; flex-shrink: 0; padding: 26px 24px; background: linear-gradient(165deg, #f5f8fc, #eef4fb); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
    .cs-mega-feature-badge { align-self: flex-start; background: rgba(33,104,160,0.1); color: var(--accent-teal); border-radius: 30px; padding: 5px 13px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; }
    .cs-mega-feature h4 { font-family: 'Playfair Display', serif; font-size: 1.38rem; font-weight: 800; color: var(--text-platinum); margin: 14px 0 8px; line-height: 1.2; }
    .cs-mega-feature p { font-size: 0.86rem; color: var(--text-slate); line-height: 1.55; margin: 0 0 16px; }
    .cs-mega-feature-cta { color: var(--accent-teal); font-weight: 800; text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease; }
    .cs-mega-feature-cta:hover { gap: 11px; }

    /* Content (Middle) */
    .cs-mega-content { flex: 1; padding: 20px 26px; background: var(--bg-light-navy); max-height: 80vh; overflow-y: auto; }
    .cs-mega-pane { display: block; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
    .cs-mega-pane:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
    @keyframes quickFade { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

    /* Grid for Courses */
    .cs-course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }

    /* Promo zone (right) */
    .cs-mega-promo { width: 250px; flex-shrink: 0; padding: 28px 24px; background: linear-gradient(160deg, #163a5c 0%, #2168A0 70%, #2f8fd8 130%); color: #fff; text-decoration: none; display: flex; flex-direction: column; justify-content: center; gap: 6px; transition: filter 0.25s ease; }
    .cs-mega-promo:hover { filter: brightness(1.09); }
    .cs-mega-promo-badge { align-self: flex-start; background: rgba(255,255,255,0.18); border-radius: 30px; padding: 4px 12px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
    .cs-mega-promo h4 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 800; margin: 8px 0 4px; color: #fff; line-height: 1.15; }
    .cs-mega-promo p { font-size: 0.86rem; color: rgba(255,255,255,0.9); line-height: 1.5; margin: 0; }
    .cs-mega-promo-cta { font-weight: 800; color: #fff; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease; }
    .cs-mega-promo:hover .cs-mega-promo-cta { gap: 11px; }

    .cs-course-link {
        display: flex; align-items: center; gap: 10px; padding: 7px 11px;
        border-radius: 8px; text-decoration: none; border: 1px solid transparent; transition: 0.2s;
    }
    .cs-course-link:hover { background: rgba(255,255,255,0.05); border-color: var(--border); }

    .cs-course-image {
        width: 38px; height: 38px; border-radius: 6px; object-fit: contain; 
        background: #ffffff; border: 1px solid var(--border); flex-shrink: 0; 
        padding: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    }

    .cs-course-details strong { display: block; color: var(--text-platinum); font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; line-height: 1.3; }

    .cs-mobile-toggle { display: none; font-size: 2rem; color: var(--accent-teal); cursor: pointer; border: none; background: none; }
    
    .mobile-only-link { display: none !important; }

    /* 🚨 MOBILE HEADER FIXES 🚨 */
    @media (max-width: 1200px) {
        .cs-nav-inner { padding: 0 15px; }
        .cs-logo img { height: 40px; }
        .cs-mobile-toggle { display: block; }
        
        .cs-mega-wrapper { display: none; }
        .cs-nav--my .cs-nav-left .cs-nav-item { display: none; }
        /* The SG bar also carries the AI Readiness Quiz pill, which is 253px
           wide. Next to it in a 390px viewport the logo was squeezed to 18px
           and the brand was unreadable, because .cs-logo could shrink. The
           quiz is still in the mobile drawer and again in the page body, so
           the top bar drops it here. !important because that anchor carries an
           inline display:inline-flex, and flex-shrink stops any future item
           from crushing the logo again. */
        .cs-nav-left .cs-nav-quiz { display: none !important; }
        .cs-logo { flex-shrink: 0; }

        .cs-nav-links { display: none; position: absolute; top: 85px; left: 0; width: 100%; background: var(--bg-light-navy); flex-direction: column; height: auto; padding: 20px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); gap: 15px; align-items: flex-start; border-bottom: 1px solid var(--border); }
        .cs-nav-links.active { display: flex; }
        
        .mobile-only-link { display: flex !important; color: var(--accent-teal) !important; }
        .cs-nav--my #navLinks .cs-nav-item { padding: 8px 2px; font-size: 1.05rem; }
        
        .cs-mega-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); display: flex; overflow-x: auto; padding: 10px; }
        .cs-mega-tab { padding: 10px 15px; border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
        .cs-mega-tab.active { border-left: none; border-bottom: 3px solid var(--accent-teal); }
        .cs-course-grid { grid-template-columns: 1fr; }
        .cs-mega-content { max-height: none; overflow-y: visible; }
    }

    /* === MEGA MENU v4: Agilemania-clean + clickable + visual polish === */
    .cs-mega-menu.cs-mega-mv4 {
        width: 1180px; max-width: 96vw;
        display: grid; grid-template-columns: 320px 1fr;
        grid-template-rows: 1fr auto;
        background: #fff; border-radius: 16px; overflow: hidden;
        box-shadow: 0 36px 80px rgba(15,30,61,0.22);
    }
    /* Left rail */
    .cs-mv4-rail {
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5fb 100%);
        border-right: 1px solid #e2e8f0;
        padding: 14px 0;
        display: flex; flex-direction: column;
    }
    .cs-mv4-rail-eyebrow {
        font-size: 0.66rem; font-weight: 800;
        color: #647388; letter-spacing: 1.4px; text-transform: uppercase;
        padding: 6px 22px 14px;
    }
    .cs-mv4-cat {
        display: flex; align-items: center; gap: 12px;
        width: 100%; text-align: left; cursor: pointer;
        background: none; border: none; font-family: inherit;
        padding: 12px 22px;
        font-size: 0.94rem; font-weight: 600;
        color: #42566b; text-decoration: none;
        border-left: 3px solid transparent;
        transition: 0.15s;
    }
    .cs-mv4-cat:hover, .cs-mv4-cat.active {
        background: #fff;
        color: #2168A0;
        border-left-color: #2168A0;
        font-weight: 700;
    }
    .cs-mv4-cat-icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px;
        background: rgba(33,104,160,0.08); border-radius: 8px;
        font-size: 1.1rem; flex-shrink: 0;
        transition: 0.15s;
    }
    .cs-mv4-cat.active .cs-mv4-cat-icon {
        background: rgba(33,104,160,0.18);
    }
    .cs-mv4-cat-name { flex: 1; min-width: 0; }
    .cs-mv4-cat-arrow { font-size: 1.2rem; color: #647388; opacity: 0; transition: 0.15s; font-weight: 400; }
    .cs-mv4-cat.active .cs-mv4-cat-arrow { opacity: 1; color: #2168A0; }
    /* Bottom of rail: "Not sure where to start?" CTA */
    .cs-mv4-rail-help {
        margin-top: auto;
        display: flex; align-items: center; gap: 12px;
        background: linear-gradient(135deg, #163a5c, #0c2233);
        color: #fff;
        padding: 14px 18px;
        margin: 16px 14px 8px;
        border-radius: 12px;
        text-decoration: none;
        transition: 0.18s;
    }
    .cs-mv4-rail-help:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15,30,61,0.20); }
    .cs-mv4-rail-help-icon {
        font-size: 1.4rem;
        background: rgba(255,255,255,0.14);
        width: 38px; height: 38px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .cs-mv4-rail-help span:not(.cs-mv4-rail-help-icon) {
        display: flex; flex-direction: column; line-height: 1.3;
    }
    .cs-mv4-rail-help strong { font-size: 0.86rem; font-weight: 700; color: #fff; }
    .cs-mv4-rail-help small { font-size: 0.74rem; color: #9cc1e6; }
    /* Right content area */
    .cs-mv4-content {
        padding: 22px 26px;
        position: relative;
    }
    .cs-mv4-pane {
        display: none;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
    }
    .cs-mv4-pane.active { display: grid; }
    .cs-mv4-courses {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
        row-gap: 6px;
        margin-bottom: 14px;
    }
    /* Course rows — clean, scannable, well-spaced */
    .cs-mv4-course {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 12px; border-radius: 10px;
        text-decoration: none; transition: 0.15s;
    }
    .cs-mv4-course:hover { background: #f1f5fb; transform: translateX(2px); }
    .cs-mv4-course img { width: 38px; height: 38px; flex-shrink: 0; object-fit: contain; }
    .cs-mv4-course-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .cs-mv4-course-title {
        font-size: 0.92rem; font-weight: 700; color: #163a5c;
        line-height: 1.3;
    }
    .cs-mv4-code {
        color: #63738a; font-weight: 600; font-size: 0.82rem;
    }
    /* Badges */
    .cs-mv4-badge {
        display: inline-block; padding: 2px 9px; border-radius: 4px;
        font-size: 0.68rem; font-weight: 700;
        letter-spacing: 0.2px;
        align-self: flex-start;
    }
    .cs-mv4-badge-recommended { background: #d4f4e2; color: #077a57; }
    .cs-mv4-badge-bestseller   { background: #2168A0; color: #fff; }
    .cs-mv4-badge-indemand     { background: #e7defb; color: #5b3fc4; }
    .cs-mv4-badge-trending     { background: #fdecc8; color: #9a6207; }
    .cs-mv4-badge-new          { background: #fde68a; color: #9a6207; }
    /* Contextual CTA card — fills empty space when category has few courses */
    .cs-mv4-cta-card {
        grid-column: 1 / -1;
        display: flex; align-items: center; gap: 16px;
        background: linear-gradient(135deg, #fff8e1, #fffdf6);
        border: 1px solid #f0c14b;
        border-radius: 12px;
        padding: 14px 18px;
        margin-top: 8px;
    }
    .cs-mv4-cta-icon {
        font-size: 1.8rem;
        background: #fff;
        width: 48px; height: 48px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(154,98,7,0.10);
    }
    .cs-mv4-cta-body { flex: 1; min-width: 0; }
    .cs-mv4-cta-label {
        font-size: 0.7rem; font-weight: 800; color: #9a6207;
        letter-spacing: 1.2px; text-transform: uppercase;
        margin-bottom: 3px;
    }
    .cs-mv4-cta-blurb { font-size: 0.88rem; color: #653607; margin: 0 0 4px; line-height: 1.5; }
    .cs-mv4-cta-link {
        font-size: 0.84rem; font-weight: 800; color: #9a6207;
        text-decoration: none;
    }
    .cs-mv4-cta-link:hover { color: #653607; }
    /* Footer strip */
    .cs-mv4-foot {
        grid-column: 1 / -1;
        background: #f8fafc; border-top: 1px solid #e2e8f0;
        padding: 12px 24px;
        display: flex; align-items: center; justify-content: space-between;
    }
    .cs-mv4-foot-badge {
        font-size: 0.78rem; font-weight: 700; color: #2168A0;
    }
    .cs-mv4-foot-cta {
        font-size: 0.88rem; font-weight: 800; color: #2168A0;
        text-decoration: none;
    }
    .cs-mv4-foot-cta:hover { color: #163a5c; }
    /* Responsive */
    @media (max-width: 1240px) {
        .cs-mega-menu.cs-mega-mv4 { width: 100vw; max-width: 100vw; grid-template-columns: 280px 1fr; }
    }
    @media (max-width: 920px) {
        .cs-mega-menu.cs-mega-mv4 { grid-template-columns: 1fr; max-height: calc(100vh - 130px); overflow-y: auto; }
        .cs-mv4-rail { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid #e2e8f0; padding: 8px 10px; }
        .cs-mv4-rail-eyebrow, .cs-mv4-rail-help { display: none; }
        .cs-mv4-cat { padding: 8px 12px; border-left: 0; border-bottom: 2px solid transparent; gap: 8px; }
        .cs-mv4-cat:hover, .cs-mv4-cat.active { border-left: 0; border-bottom-color: #2168A0; }
        .cs-mv4-cat-arrow { display: none; }
        .cs-mv4-cat-icon { width: 26px; height: 26px; font-size: 0.95rem; }
        .cs-mv4-pane { grid-template-columns: 1fr; }
        .cs-mv4-courses { grid-template-columns: 1fr; }
    }
    .cs-mega-all22 .cs-mega-cat {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        display: inline-block;
        width: 100%;
        margin: 0 0 16px;
    }
    .cs-mega-cat-extra .cs-mega-cat-title { color: #8a5806; border-bottom-color: rgba(194,121,10,0.25); }
    .cs-mega-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 28px; border-top: 1px solid var(--border); background: linear-gradient(180deg, #f5f8fc, #eef4fb); }
    .cs-mega-foot-badge { background: rgba(33,104,160,0.10); color: var(--accent-teal); border: 1px solid rgba(33,104,160,0.22); border-radius: 30px; padding: 5px 12px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; flex-shrink: 0; }
    .cs-mega-foot-text { color: var(--text-slate); font-size: 0.85rem; font-weight: 600; }
    .cs-mega-foot-cta { margin-left: auto; font-weight: 800; color: var(--accent-teal); text-decoration: none; font-size: 0.9rem; }
    .cs-mega-foot-cta:hover { text-decoration: underline; }
    .cs-mega-cat-title {
        color: var(--accent-teal);
        font-size: 0.7rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 0 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    .cs-mega-all22 .cs-cat-link {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 7px 6px;
        text-decoration: none;
        border-radius: 8px;
        transition: background 0.15s ease;
    }
    .cs-mega-all22 .cs-cat-link:hover { background: rgba(33,104,160,0.06); }
    .cs-mega-all22 .cs-cat-link img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        background: #ffffff;
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 3px;
        flex-shrink: 0;
    }
    .cs-mega-all22 .cs-cat-link-text {
        color: var(--text-platinum);
        font-size: 0.83rem;
        font-weight: 700;
        line-height: 1.25;
    }
    .cs-mega-all22 .cs-cat-link-code {
        color: var(--text-slate);
        font-size: 0.68rem;
        font-weight: 500;
        margin-top: 1px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }
    @media(max-width:1100px){
        .cs-mega-menu.cs-mega-all22 { width: auto; }
        .cs-mega-all22 .cs-mega-cats { grid-template-columns: 1fr; gap: 16px; padding: 16px 14px; }
    }

    /* =====================================================================
       UNIVERSAL TITLE SPACING — single source of truth.
       The fixed chrome is: announcement topbar (40px) + nav bar (85px).
       #global-header is the in-flow placeholder that must reserve the 85px
       nav height so the fixed nav never overlaps the page title. Some bespoke
       pages shipped without that inline min-height; this enforces it for ALL
       pages (global / SG / MY) so every page title sits the SAME comfortable
       distance below the menu. Keep the gap here, not scattered per-page.
       ===================================================================== */
    #global-header { min-height: 85px !important; }
    .course-hero,
    .av-hei-hero,
    .sv-hero,
    .sv-hero-home,
    .mv-hero,
    .hero.hero-sub,
    body > .hero,
    main > .hero { padding-top: 48px !important; }
    @media (max-width: 1024px) {
        .course-hero,
        .av-hei-hero,
        .sv-hero,
        .sv-hero-home,
        .mv-hero,
        .hero.hero-sub,
        body > .hero,
        main > .hero { padding-top: 30px !important; }
    }

    /* === INVITING "FIND THE RIGHT COURSE" LEAD SECTION (global / sg / my homes) === */
    .av-findcourse { background: linear-gradient(135deg, #0c2233 0%, #163a5c 55%, #2168A0 120%); padding: 60px 24px; }
    .av-findcourse__wrap { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
    .av-findcourse__eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); color: #fff; border-radius: 30px; padding: 6px 14px; font-size: 0.78rem; font-weight: 700; }
    .av-findcourse__dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; animation: avFcDot 1.8s infinite; }
    @keyframes avFcDot { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.25); opacity: .6; } 100% { transform: scale(1); opacity: 1; } }
    .av-findcourse--my .av-fc-claim { display: inline-block; background: linear-gradient(90deg, #22c55e, #10b981); color: #06341c; font-weight: 900; font-size: 0.72rem; letter-spacing: 0.8px; text-transform: uppercase; padding: 5px 12px; border-radius: 30px; margin-bottom: 14px; box-shadow: 0 6px 18px rgba(34,197,94,0.35); }
    .av-findcourse .av-findcourse__title { font-family: 'Playfair Display', serif; color: #fff !important; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.18; margin: 16px 0 12px; }
    .av-findcourse__sub { color: rgba(255,255,255,0.88); font-size: 1.02rem; line-height: 1.6; margin: 0 0 22px; max-width: 480px; }
    .av-findcourse__photo { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,0.3); aspect-ratio: 16/10; }
    .av-findcourse__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
    .av-findcourse__card { background: #fff; border-radius: 18px; padding: 30px; box-shadow: 0 30px 60px rgba(0,0,0,0.25); }
    .av-findcourse__form { display: flex; flex-direction: column; gap: 13px; }
    .av-fc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .av-fc-input { width: 100%; padding: 13px 15px; border: 1px solid #d4deea; border-radius: 9px; background: #f5f8fc; color: #163a5c; font-family: 'Inter', sans-serif; font-size: 0.95rem; box-sizing: border-box; }
    .av-fc-input:focus { outline: none; border-color: var(--accent-teal, #2168A0); box-shadow: 0 0 0 3px rgba(33,104,160,0.15); background: #fff; }
    .av-fc-textarea { min-height: 90px; resize: vertical; }
    .av-fc-btn { background: var(--accent-teal, #2168A0); color: #fff; font-weight: 800; border: none; padding: 15px; border-radius: 9px; font-size: 1.02rem; cursor: pointer; letter-spacing: 0.3px; transition: transform 0.15s, box-shadow 0.15s; margin-top: 4px; }
    .av-fc-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(33,104,160,0.3); }
    .av-fc-success { display: none; padding: 18px; background: rgba(33,104,160,0.08); border: 1px solid var(--accent-teal, #2168A0); color: var(--accent-teal, #2168A0); border-radius: 10px; text-align: center; font-weight: 700; }
    .av-fc-alt { text-align: center; color: #63738a; font-size: 0.88rem; margin-top: 14px; }
    .av-fc-alt a { color: #147a47; font-weight: 800; text-decoration: none; }
    .av-fc-alt a:hover { text-decoration: underline; }
    @media (max-width: 860px) { .av-findcourse__wrap { grid-template-columns: 1fr; gap: 28px; } .av-findcourse__photo { display: none; } .av-fc-row { grid-template-columns: 1fr; } }


/* MY nav: taller bar to seat a big AgileVisa logo (70px) + big HRD Corp Accredited Trainer badge (90px).
   MY-only via cs-nav--my; the in-flow spacer (#global-header.gh-my, tagged at injection) grows to match
   so page content still clears the fixed nav; the mega drops to sit just under the taller bar. */
.cs-nav--my{height:100px;}
#global-header.gh-my{min-height:100px !important;}
/* Anchor-jump offset: #catalog/#contact/#corporate/#faq etc. must land BELOW the fixed topbar(56)+nav(144), not hidden under it. Applies to every in-page anchor target on all MY pages. */
body.my-light [id]{scroll-margin-top:170px;}
.cs-nav--my .cs-mega-menu{top:144px;}
.cs-nav--my .cs-logo img{height:70px;}
.cs-hrd-badge--my{height:90px;margin-left:14px;}
.cs-nav--my .cs-nav-quiz{height:auto;}
@media (max-width:1024px){
  .cs-nav--my{height:78px;}
  #global-header.gh-my{min-height:78px !important;}
  body.my-light [id]{scroll-margin-top:138px;}
  .cs-nav--my .cs-mega-menu{top:122px;}
  .cs-nav--my .cs-logo img{height:46px;}
  .cs-hrd-badge--my{height:58px;margin-left:8px;}
}

/* ===== MY interactive-reveal mega menu (cs-myrev): left tracks -> right detail, no truncation ===== */
.cs-mega-myrev{display:block !important;width:1080px;min-width:auto;max-width:96vw;background:#fff;border-radius:0 0 14px 14px;overflow:hidden;box-shadow:0 30px 60px rgba(15,30,61,0.18);max-height:calc(100vh - 220px);}
.cs-myrev{display:flex;align-items:stretch;max-height:calc(100vh - 220px);}
.cs-myrev-rail{width:250px;flex:0 0 250px;background:#f6f9fc;border-right:1px solid #e6edf5;padding:14px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overscroll-behavior:contain;}
.cs-myrev-raillabel{font-size:0.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7c8aa0;padding:4px 10px 8px;}
.cs-myrev-track{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 11px;border-radius:9px;text-decoration:none;border-left:3px solid transparent;transition:.12s;}
.cs-myrev-tname{font-size:0.86rem;font-weight:600;color:#16314d;}
.cs-myrev-tn{font-size:0.64rem;font-weight:800;color:#8a99ad;background:#e9f0f8;border-radius:30px;padding:1px 8px;}
.cs-myrev-track:hover,.cs-myrev-track.is-active{background:#fff;border-left-color:#2168A0;box-shadow:0 2px 10px rgba(15,30,61,0.06);}
.cs-myrev-track:hover .cs-myrev-tname,.cs-myrev-track.is-active .cs-myrev-tname{color:#2168A0;}
.cs-myrev-railall{margin-top:8px;padding:10px 11px 4px;font-size:0.8rem;font-weight:700;color:#16314d;text-decoration:none;border-top:1px solid #e6edf5;}
.cs-myrev-railcta{padding:4px 11px;font-size:0.8rem;font-weight:800;color:#2168A0;text-decoration:none;}
.cs-myrev-railall:hover,.cs-myrev-railcta:hover{color:#16467a;}
.cs-myrev-panels{flex:1;padding:16px 22px;min-height:240px;overflow-y:auto;overscroll-behavior:contain;}
.cs-myrev-panel{display:none;}
.cs-myrev-panel.is-active{display:block;animation:csRevFade .18s ease;}
@keyframes csRevFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.cs-myrev-phead{margin-bottom:12px;}
.cs-myrev-phead h4{margin:0;font-size:1.05rem;font-weight:800;color:#0f1e3d;display:flex;align-items:center;gap:8px;}
.cs-myrev-pn{font-size:0.64rem;font-weight:800;color:#2168A0;background:#eaf2fb;border-radius:30px;padding:2px 9px;}
.cs-myrev-psub{display:block;font-size:0.8rem;color:#65748a;margin-top:3px;}
.cs-myrev-courses{display:flex;flex-direction:column;gap:1px;}
.cs-myrev-courses--two{display:grid;grid-template-columns:1fr 1fr;gap:1px 20px;}
.cs-myrev-course{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 9px;border-radius:8px;text-decoration:none;transition:.12s;}
.cs-myrev-cname{font-size:0.85rem;font-weight:600;color:#27384f;line-height:1.25;}
.cs-myrev-code{flex:0 0 auto;font-size:0.6rem;font-weight:800;color:#2168A0;background:#eef4fa;border-radius:30px;padding:2px 7px;letter-spacing:.3px;white-space:nowrap;}
.cs-myrev-course:hover{background:#f2f7fc;}
.cs-myrev-course:hover .cs-myrev-cname{color:#2168A0;}
.cs-myrev-viewall{display:inline-block;margin-top:12px;font-size:0.8rem;font-weight:800;color:#2168A0;text-decoration:none;}
.cs-myrev-viewall:hover{color:#16467a;}
.cs-myrev-feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
.cs-myrev-featcard{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:12px;background:linear-gradient(160deg,#f3f8fd,#e9f1fb);border:1px solid #dbe7f4;text-decoration:none;transition:.14s;}
.cs-myrev-featcard--blue{background:linear-gradient(160deg,#163a5c,#0f2c47);border-color:#0f2c47;}
.cs-myrev-featcard--blue strong,.cs-myrev-featcard--blue .cs-myrev-featsub{color:#fff;}
.cs-myrev-featcard--blue .cs-myrev-feateyebrow{color:#9cc1e6;}
.cs-myrev-featcard--blue .cs-myrev-featcta{color:#cfe4f7;}
.cs-myrev-feateyebrow{font-size:0.62rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#2168A0;}
.cs-myrev-featcard strong{font-size:0.95rem;color:#0f1e3d;line-height:1.2;}
.cs-myrev-featsub{font-size:0.78rem;color:#56657c;line-height:1.35;}
.cs-myrev-featcta{font-size:0.76rem;font-weight:800;color:#2168A0;margin-top:2px;}
.cs-myrev-featcard:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,30,61,0.12);}
.cs-myrev-poptitle{font-size:0.66rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#7c8aa0;margin-bottom:6px;}
.cs-myrev-industries{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:11px 22px;border-top:1px solid #eef2f7;background:#fafcff;}
.cs-myrev-indlabel{font-size:0.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#7c8aa0;margin-right:4px;}
.cs-myrev-ind{font-size:0.76rem;font-weight:600;color:#3d4d63;background:#eef3f9;border-radius:30px;padding:4px 11px;text-decoration:none;transition:.12s;}
.cs-myrev-ind:hover{background:#2168A0;color:#fff;}
.cs-myrev-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 22px;background:#0f2540;}
.cs-myrev-foot span{font-size:0.76rem;color:#b9c9dc;}
.cs-myrev-footcta{font-size:0.8rem;font-weight:800;color:#fff;text-decoration:none;white-space:nowrap;}
.cs-myrev-footcta:hover{color:#cfe4f7;}
@media (max-width:1024px){.cs-mega-myrev{min-width:auto;max-width:94vw;} .cs-myrev{flex-direction:column;} .cs-myrev-rail{width:auto;flex:none;flex-direction:row;flex-wrap:wrap;gap:6px;border-right:none;border-bottom:1px solid #e6edf5;} .cs-myrev-raillabel{width:100%;} .cs-myrev-courses--two{grid-template-columns:1fr;} .cs-myrev-feat{grid-template-columns:1fr;}}
.cs-mega-myv2 { display: grid; grid-template-columns: 224px 1fr; grid-template-rows: auto auto auto; gap: 0; min-width: 1160px; max-width: 1300px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(15,30,61,0.18); }
.cs-myv2-rail { grid-row: 1; background: linear-gradient(160deg,#163a5c,#0a2336); color: #fff; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.cs-myv2-rail-eyebrow { font-size: 0.7rem; font-weight: 800; color: #9cc1e6; letter-spacing: 1.2px; text-transform: uppercase; }
.cs-myv2-rail-card { display: block; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; padding: 11px 12px; text-decoration: none; color: #fff; transition: 0.15s; }
.cs-myv2-rail-card:hover { background: rgba(255,255,255,0.13); transform: translateY(-2px); }
.cs-myv2-rail-card strong { display: block; font-size: 0.88rem; font-weight: 800; margin-bottom: 3px; color: #fff; }
.cs-myv2-rail-card span { font-size: 0.74rem; color: #cfe0ff; line-height: 1.45; }
.cs-myv2-rail-cta { margin-top: auto; color: #fff; font-weight: 700; text-decoration: none; font-size: 0.84rem; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 12px; }
.cs-myv2-rail-cta:hover { color: #9cc1e6; }
.cs-myv2-rail-card--alt { background: rgba(156,193,230,0.12); border-color: rgba(156,193,230,0.3); }
.cs-myv2-cols { grid-row: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px; padding: 12px 18px; align-content: start; }
.cs-myv2-colwrap { min-width: 0; }
.cs-myv2-cat { margin-bottom: 10px; }
.cs-myv2-col-title { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 800; color: #163a5c; margin: 0 0 2px; text-decoration: none; }
.cs-myv2-col-title:hover { color: #2168A0; }
.cs-myv2-cat-n { font-size: 0.62rem; font-weight: 800; color: #63738a; background: #eef2f7; border-radius: 30px; padding: 1px 7px; }
.cs-myv2-link { display: flex; align-items: center; gap: 8px; padding: 1px 8px; border-radius: 6px; text-decoration: none; color: #42566b; font-size: 0.78rem; font-weight: 500; line-height: 1.5; transition: 0.12s; min-width: 0; }
.cs-myv2-link:hover { background: #eef4fa; color: #2168A0; }
.cs-myv2-lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-myv2-price { flex: 0 0 auto; font-size: 0.63rem; font-weight: 700; color: #2168A0; background: #eef4fa; padding: 1px 6px; border-radius: 30px; white-space: nowrap; }
.cs-myv2-industries { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 18px; border-top: 1px solid #eef2f7; }
.cs-myv2-ind-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px; color: #63738a; margin-right: 2px; }
.cs-myv2-ind { font-size: 0.74rem; font-weight: 700; color: #163a5c; text-decoration: none; background: #f1f5fb; border: 1px solid #e2e8f0; padding: 3px 9px; border-radius: 30px; transition: 0.15s; white-space: nowrap; }
.cs-myv2-ind:hover { background: #2168A0; color: #fff; border-color: #2168A0; }
.cs-myv2-foot { grid-column: 1 / -1; grid-row: 3; background: #f6f9ff; border-top: 1px solid #e2e8f0; padding: 9px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cs-myv2-foot-text { font-size: 0.78rem; color: #42566b; font-weight: 600; }
.cs-myv2-foot-cta { color: #2168A0; font-weight: 800; text-decoration: none; font-size: 0.86rem; }
.cs-myv2-foot-cta:hover { color: #163a5c; }
.cs-mega-myv2--noind { grid-template-rows: auto auto; }
.cs-mega-myv2--noind .cs-myv2-foot { grid-row: 2; }
@media (max-width: 1100px) { .cs-mega-myv2 { min-width: 880px; grid-template-columns: 220px 1fr; } .cs-myv2-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .cs-mega-myv2 { min-width: 0; grid-template-columns: 1fr; } .cs-myv2-rail { grid-row: auto; } .cs-myv2-cols { grid-row: auto; grid-template-columns: 1fr; } }