:root {
                --navy: #05152b;
                --navy-light: #0c1f3a;
                --navy-glow: #112a4a;
                --blue: #0d8fdb;
                --blue-glow: #4db8ff;
                --green: #2ecc71;
                --green-glow: #5ee397;
                --orange: #f5a623;
                --ink: #0a1628;
                --muted: #7a8ba3;
                --soft: #f0f4f8;
                --line: #e1e8f0;
                --white: #fff;
                --radius: 20px;
                --radius-lg: 28px;
                --shadow: 0 8px 40px rgba(5, 21, 43, 0.1);
                --shadow-lg: 0 24px 80px rgba(5, 21, 43, 0.14);
                --max: 1200px;
                --sans: Inter, system-ui, -apple-system, sans-serif;
                --display: "Space Grotesk", Inter, sans-serif;
            }
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            html {
                scroll-behavior: smooth;
            }
            body {
                font-family: var(--sans);
                color: var(--ink);
                background: #fff;
                line-height: 1.6;
                overflow-x: hidden;
            }
            a {
                text-decoration: none;
                color: inherit;
            }
            img {
                max-width: 100%;
                display: block;
            }
            button,
            input,
            select {
                font: inherit;
            }
            .container {
                width: min(var(--max), calc(100% - 48px));
                margin: auto;
            }
            .section {
                padding: 100px 0;
            }
            .kicker {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                font-size: 0.72rem;
                font-weight: 700;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--blue);
                font-family: var(--display);
            }
            .kicker::before {
                content: "";
                width: 28px;
                height: 2.5px;
                background: var(--green);
                border-radius: 99px;
            }
            .section-head {
                max-width: 680px;
                margin-bottom: 56px;
            }
            .section-head h2 {
                font-family: var(--display);
                font-size: clamp(2.1rem, 4.5vw, 3.6rem);
                line-height: 1.05;
                letter-spacing: -0.035em;
                margin: 14px 0 18px;
                color: var(--navy);
                font-weight: 700;
            }
            .section-head p {
                color: var(--muted);
                font-size: 1.05rem;
                max-width: 560px;
                line-height: 1.65;
            }

            
            .nav {
                position: fixed;
                inset: 0 0 auto;
                z-index: 100;
                height: 76px;
                background: rgba(5, 21, 43, 0.75);
                backdrop-filter: blur(20px) saturate(1.3);
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
                transition: all 0.3s;
            }
            .nav.scrolled {
                background: rgba(5, 21, 43, 0.92);
                box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
            }
            .nav-inner {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 28px;
            }
            .logo img {
                height: 38px;
                width: auto;
                filter: brightness(0) invert(1);
            }
            .nav-links {
                display: flex;
                align-items: center;
                gap: 6px;
                list-style: none;
            }
            .nav-links a {
                padding: 9px 14px;
                border-radius: 10px;
                color: rgba(255, 255, 255, 0.55);
                font-size: 0.84rem;
                font-weight: 600;
                transition: all 0.2s;
            }
            .nav-links a:hover,
            .nav-links a.active {
                color: #fff;
                background: rgba(255, 255, 255, 0.08);
            }
            .nav-actions {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .btn {
                min-height: 48px;
                padding: 11px 22px;
                border-radius: 12px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 9px;
                border: 1px solid transparent;
                font-size: 0.85rem;
                font-weight: 700;
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                cursor: pointer;
                font-family: var(--sans);
            }
            .btn:hover {
                transform: translateY(-2px);
            }
            .btn-primary {
                background: var(--blue);
                color: #fff;
                box-shadow: 0 10px 28px rgba(13, 143, 219, 0.35);
            }
            .btn-primary:hover {
                background: #0a7ec7;
                box-shadow: 0 14px 36px rgba(13, 143, 219, 0.45);
            }
            .btn-ghost-nav {
                background: rgba(255, 255, 255, 0.06);
                color: #fff;
                border-color: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
            }
            .btn-ghost-nav:hover {
                background: rgba(255, 255, 255, 0.14);
                border-color: rgba(255, 255, 255, 0.3);
            }
            .menu-btn {
                display: none;
                border: 0;
                background: transparent;
                color: #fff;
                font-size: 1.3rem;
                cursor: pointer;
                width: 44px;
                height: 44px;
                border-radius: 10px;
                transition: background 0.2s;
            }
            .menu-btn:hover {
                background: rgba(255, 255, 255, 0.08);
            }
            .mobile-panel {
                display: none;
                position: fixed;
                top: 76px;
                left: 0;
                right: 0;
                z-index: 99;
                background: rgba(5, 21, 43, 0.96);
                backdrop-filter: blur(20px);
                padding: 16px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
                flex-direction: column;
                gap: 4px;
            }
            .mobile-panel.open {
                display: flex;
            }
            .mobile-panel a {
                padding: 14px 16px;
                border-radius: 12px;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.7);
                font-size: 0.9rem;
                transition: all 0.2s;
            }
            .mobile-panel a:hover {
                background: rgba(255, 255, 255, 0.06);
                color: #fff;
            }
            .mobile-panel .btn {
                margin-top: 8px;
                justify-content: center;
            }

            
            .hero-courses {
                position: relative;
                min-height: 560px;
                background: linear-gradient(135deg, var(--navy) 0%, #0a1f3d 50%, #0d2847 100%);
                display: flex;
                align-items: center;
                overflow: hidden;
                padding-top: 76px;
            }
            .hero-courses::before {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(ellipse 70% 60% at 80% 30%, rgba(13, 143, 219, 0.1) 0%, transparent 60%),
                    radial-gradient(ellipse 40% 40% at 15% 70%, rgba(46, 204, 113, 0.05) 0%, transparent 50%);
                pointer-events: none;
            }
            .hero-courses-inner {
                position: relative;
                z-index: 2;
                padding: 80px 0 60px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .hero-courses .kicker {
                color: var(--blue-glow);
                opacity: 0.9;
                margin-bottom: 16px;
            }
            .hero-courses .kicker::before {
                background: var(--green-glow);
            }
            .hero-courses h1 {
                font-family: var(--display);
                font-size: clamp(2.6rem, 5.5vw, 4.6rem);
                line-height: 1;
                letter-spacing: -0.04em;
                color: #fff;
                margin-bottom: 18px;
                font-weight: 700;
            }
            .hero-courses h1 em {
                font-style: normal;
                background: linear-gradient(90deg, var(--blue-glow), var(--green-glow));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .hero-courses .lead {
                font-size: 1.1rem;
                color: rgba(255, 255, 255, 0.5);
                max-width: 620px;
                line-height: 1.7;
                margin-bottom: 36px;
            }
            .hero-sectors {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom: 28px;
            }
            .sector-chip {
                padding: 7px 16px;
                border-radius: 100px;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                color: rgba(255, 255, 255, 0.55);
                font-size: 0.74rem;
                font-weight: 600;
                transition: all 0.2s;
            }
            .sector-chip.core {
                background: rgba(13, 143, 219, 0.15);
                border-color: rgba(13, 143, 219, 0.3);
                color: var(--blue-glow);
            }
            .course-search {
                display: flex;
                gap: 12px;
                max-width: 680px;
                width: 100%;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: 16px;
                padding: 8px;
                backdrop-filter: blur(12px);
            }
            .course-search input {
                flex: 1;
                min-height: 52px;
                padding: 0 20px;
                border-radius: 12px;
                background: transparent;
                border: none;
                outline: none;
                color: #fff;
                font-size: 0.95rem;
            }
            .course-search input::placeholder {
                color: rgba(255, 255, 255, 0.35);
            }
            .course-search button {
                min-height: 52px;
                padding: 0 24px;
                border-radius: 12px;
                background: var(--green);
                color: var(--navy);
                border: none;
                font-size: 0.9rem;
                font-weight: 800;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                transition: all 0.2s;
                font-family: var(--sans);
                white-space: nowrap;
            }
            .course-search button:hover {
                background: var(--green-glow);
                transform: translateY(-1px);
            }

            
            .filters {
                background: #fff;
                border-bottom: 1px solid var(--line);
                padding: 20px 0;
                position: sticky;
                top: 76px;
                z-index: 50;
            }
            .filters-inner {
                display: flex;
                align-items: center;
                gap: 16px;
                flex-wrap: wrap;
            }
            .filter-group {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            .filter-label {
                font-size: 0.72rem;
                font-weight: 700;
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: 0.08em;
                font-family: var(--display);
            }
            .filter-select {
                min-height: 44px;
                padding: 0 16px;
                border-radius: 12px;
                background: var(--soft);
                border: 1px solid var(--line);
                color: var(--ink);
                font-size: 0.85rem;
                font-weight: 600;
                outline: none;
                cursor: pointer;
                transition: all 0.2s;
            }
            .filter-select:focus {
                border-color: var(--blue);
                box-shadow: 0 0 0 3px rgba(13, 143, 219, 0.1);
            }
            .mode-toggle {
                display: flex;
                gap: 4px;
                padding: 4px;
                border-radius: 12px;
                background: var(--soft);
                border: 1px solid var(--line);
                margin-left: auto;
            }
            .mode-btn {
                padding: 8px 16px;
                border-radius: 10px;
                border: none;
                background: transparent;
                color: var(--muted);
                font-size: 0.78rem;
                font-weight: 700;
                cursor: pointer;
                transition: all 0.2s;
                font-family: var(--sans);
            }
            .mode-btn.active {
                background: #fff;
                color: var(--navy);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            }

            
            .courses-section {
                background: var(--soft);
                padding: 60px 0 100px;
            }
            .courses-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20px;
                margin-bottom: 32px;
                flex-wrap: wrap;
            }
            .courses-count {
                font-size: 0.9rem;
                color: var(--muted);
                font-weight: 500;
            }
            .courses-count strong {
                color: var(--navy);
                font-weight: 700;
            }
            .course-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 24px;
            }

            .course-card {
                background: #fff;
                border-radius: var(--radius-lg);
                border: 1px solid var(--line);
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                display: flex;
                flex-direction: column;
            }
            .course-card:hover {
                transform: translateY(-8px);
                box-shadow: var(--shadow-lg);
                border-color: transparent;
            }
            .course-card-image {
                position: relative;
                height: 200px;
                overflow: hidden;
                background: linear-gradient(135deg, var(--navy), var(--navy-light));
            }
            .course-card-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0.6;
                transition:
                    transform 0.6s ease,
                    opacity 0.3s;
            }
            .course-card:hover .course-card-image img {
                transform: scale(1.08);
                opacity: 0.75;
            }
            .course-card-badges {
                position: absolute;
                top: 14px;
                left: 14px;
                right: 14px;
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                z-index: 3;
            }
            .course-card-badge {
                padding: 5px 12px;
                border-radius: 8px;
                font-size: 0.68rem;
                font-weight: 800;
                text-transform: uppercase;
                letter-spacing: 0.06em;
            }
            .badge-maritime {
                background: var(--blue);
                color: #fff;
            }
            .badge-offshore {
                background: var(--navy);
                color: #fff;
            }
            .badge-oilgas {
                background: #b07d1a;
                color: #fff;
            }
            .badge-safety {
                background: #e74c3c;
                color: #fff;
            }
            .badge-construction {
                background: #8e44ad;
                color: #fff;
            }
            .badge-energy {
                background: #16a085;
                color: #fff;
            }
            .badge-aviation {
                background: #2980b9;
                color: #fff;
            }
            .badge-mgmt {
                background: var(--green);
                color: #fff;
            }
            .mode-badge {
                position: absolute;
                bottom: 14px;
                right: 14px;
                padding: 5px 12px;
                border-radius: 8px;
                font-size: 0.68rem;
                font-weight: 800;
                letter-spacing: 0.04em;
                display: flex;
                align-items: center;
                gap: 6px;
                z-index: 3;
            }
            .mode-physical {
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(8px);
                color: #fff;
            }
            .mode-online {
                background: rgba(46, 204, 113, 0.85);
                color: #fff;
            }

            .course-card-body {
                padding: 26px 24px 24px;
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            .course-card-meta {
                display: flex;
                gap: 14px;
                margin-bottom: 12px;
                flex-wrap: wrap;
            }
            .course-card-meta span {
                font-size: 0.72rem;
                font-weight: 600;
                color: var(--muted);
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .course-card-meta i {
                font-size: 0.65rem;
                color: var(--blue);
            }
            .course-card h3 {
                font-family: var(--display);
                font-size: 1.12rem;
                color: var(--navy);
                margin-bottom: 8px;
                font-weight: 700;
                line-height: 1.3;
                letter-spacing: -0.01em;
            }
            .course-card p {
                font-size: 0.82rem;
                color: var(--muted);
                line-height: 1.6;
                margin-bottom: 18px;
                flex: 1;
            }
            .course-card-footer {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                padding-top: 16px;
                border-top: 1px solid var(--line);
            }
            .course-price {
                font-family: var(--display);
                font-size: 1.05rem;
                font-weight: 700;
                color: var(--navy);
            }
            .course-price span {
                font-size: 0.72rem;
                color: var(--muted);
                font-weight: 500;
            }
            .course-card .btn {
                min-height: 40px;
                padding: 8px 18px;
                font-size: 0.78rem;
            }

            
            .sectors-section {
                background: #fff;
                padding: 0 0 100px;
            }
            .sectors-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 16px;
            }
            .sector-card {
                border-radius: var(--radius);
                padding: 28px 24px;
                background: #fff;
                border: 1px solid var(--line);
                transition: all 0.3s;
                position: relative;
                overflow: hidden;
            }
            .sector-card:hover {
                transform: translateY(-5px);
                box-shadow: var(--shadow);
                border-color: transparent;
            }
            .sector-card.core {
                border-color: rgba(13, 143, 219, 0.25);
            }
            .sector-card.core::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: linear-gradient(90deg, var(--blue), var(--green));
            }
            .sector-icon {
                width: 48px;
                height: 48px;
                border-radius: 14px;
                display: grid;
                place-items: center;
                font-size: 1.1rem;
                margin-bottom: 18px;
            }
            .sector-card.core .sector-icon {
                background: linear-gradient(135deg, #e8f4fd, #f0f9ff);
                color: var(--blue);
            }
            .sector-card:not(.core) .sector-icon {
                background: var(--soft);
                color: var(--muted);
            }
            .sector-card h4 {
                font-family: var(--display);
                font-size: 1.05rem;
                color: var(--navy);
                margin-bottom: 6px;
                font-weight: 700;
            }
            .sector-card p {
                font-size: 0.78rem;
                color: var(--muted);
                line-height: 1.55;
            }
            .sector-count {
                position: absolute;
                top: 20px;
                right: 20px;
                font-size: 0.7rem;
                font-weight: 800;
                color: var(--blue);
                background: #e8f4fd;
                padding: 4px 10px;
                border-radius: 20px;
            }

            
            .pathway-banners {
                padding: 0 0 100px;
                background: var(--soft);
            }
            .pathway-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 20px;
            }
            .pathway-banner {
                border-radius: var(--radius-lg);
                padding: 40px 32px;
                position: relative;
                overflow: hidden;
                color: #fff;
                min-height: 280px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                transition: all 0.4s;
            }
            .pathway-banner:hover {
                transform: translateY(-6px);
                box-shadow: var(--shadow-lg);
            }
            .pathway-banner::before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: 1;
                background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.7) 100%);
            }
            .pathway-banner img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: 0.35;
                transition: transform 0.6s;
            }
            .pathway-banner:hover img {
                transform: scale(1.05);
            }
            .pathway-banner-content {
                position: relative;
                z-index: 2;
            }
            .pathway-banner h3 {
                font-family: var(--display);
                font-size: 1.4rem;
                margin-bottom: 8px;
                font-weight: 700;
            }
            .pathway-banner p {
                font-size: 0.85rem;
                opacity: 0.7;
                margin-bottom: 18px;
                max-width: 280px;
            }
            .pathway-banner .link {
                font-size: 0.82rem;
                font-weight: 700;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                transition: gap 0.2s;
            }
            .pathway-banner:hover .link {
                gap: 14px;
            }
            .pathway-maritime {
                background: linear-gradient(160deg, #0d8fdb, #085a8f);
            }
            .pathway-offshore {
                background: linear-gradient(160deg, #1a3a5c, #0a1f3d);
            }
            .pathway-oilgas {
                background: linear-gradient(160deg, #b07d1a, #8a6312);
            }

            
            .cta {
                padding: 0 0 100px;
                background: var(--soft);
            }
            .cta-card {
                border-radius: var(--radius-lg);
                background: linear-gradient(120deg, #05152b, #0c2847);
                padding: 64px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 40px;
                color: #fff;
                overflow: hidden;
                position: relative;
                box-shadow: var(--shadow-lg);
            }
            .cta-card::before {
                content: "";
                position: absolute;
                width: 500px;
                height: 500px;
                border: 1px solid rgba(255, 255, 255, 0.06);
                border-radius: 50%;
                right: -150px;
                bottom: -300px;
            }
            .cta-card::after {
                content: "";
                position: absolute;
                width: 300px;
                height: 300px;
                background: rgba(13, 143, 219, 0.08);
                border-radius: 50%;
                filter: blur(60px);
                top: -100px;
                left: 10%;
            }
            .cta-card > * {
                position: relative;
                z-index: 2;
            }
            .cta-card h2 {
                font-family: var(--display);
                font-size: clamp(1.8rem, 3.5vw, 2.8rem);
                line-height: 1.1;
                letter-spacing: -0.03em;
                max-width: 600px;
                font-weight: 700;
            }
            .cta-card p {
                color: rgba(255, 255, 255, 0.45);
                max-width: 520px;
                margin-top: 14px;
                font-size: 1rem;
            }

            
            .footer {
                background: #040e1c;
                color: #fff;
                padding: 70px 0 24px;
            }
            .footer-grid {
                display: grid;
                grid-template-columns: 1.6fr 1fr 1fr 1fr;
                gap: 40px;
                padding-bottom: 50px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            }
            .footer-brand img {
                height: 36px;
                margin-bottom: 20px;
                filter: brightness(0) invert(1);
                opacity: 0.9;
            }
            .footer-brand p {
                font-size: 0.82rem;
                color: rgba(255, 255, 255, 0.35);
                max-width: 320px;
                line-height: 1.7;
            }
            .footer h4 {
                font-size: 0.7rem;
                text-transform: uppercase;
                letter-spacing: 0.12em;
                margin-bottom: 20px;
                color: rgba(255, 255, 255, 0.5);
                font-family: var(--display);
            }
            .footer ul {
                list-style: none;
                display: grid;
                gap: 11px;
            }
            .footer li a {
                font-size: 0.8rem;
                color: rgba(255, 255, 255, 0.38);
                transition: color 0.2s;
            }
            .footer li a:hover {
                color: #fff;
            }
            .footer-bottom {
                display: flex;
                justify-content: space-between;
                gap: 20px;
                flex-wrap: wrap;
                padding-top: 24px;
                color: rgba(255, 255, 255, 0.22);
                font-size: 0.68rem;
            }

            
            .reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .reveal.visible {
                opacity: 1;
                transform: translateY(0);
            }

            
            @media (max-width: 1050px) {
                .nav-links {
                    display: none;
                }
                .menu-btn {
                    display: block;
                }
                .nav-actions {
                    display: none;
                }
                .course-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .sectors-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .pathway-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .footer-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
                .cta-card {
                    flex-direction: column;
                    text-align: center;
                    align-items: center;
                }
                .filters-inner {
                    gap: 12px;
                }
                .mode-toggle {
                    margin-left: 0;
                    width: 100%;
                    justify-content: center;
                }
            }
            @media (max-width: 720px) {
                .container {
                    width: min(100% - 32px, var(--max));
                }
                .section {
                    padding: 80px 0;
                }
                .hero-courses {
                    padding-top: 66px;
                    min-height: auto;
                }
                .hero-courses h1 {
                    font-size: clamp(2.2rem, 10vw, 3.4rem);
                }
                .course-search {
                    flex-direction: column;
                }
                .course-search button {
                    justify-content: center;
                }
                .course-grid {
                    grid-template-columns: 1fr;
                }
                .sectors-grid {
                    grid-template-columns: 1fr;
                }
                .pathway-grid {
                    grid-template-columns: 1fr;
                }
                .filters {
                    position: static;
                }
                .filters-inner {
                    flex-direction: column;
                    align-items: stretch;
                }
                .filter-group {
                    width: 100%;
                }
                .filter-select {
                    width: 100%;
                }
                .footer-grid {
                    grid-template-columns: 1fr;
                }
                .cta-card {
                    padding: 40px 28px;
                }
                .courses-header {
                    flex-direction: column;
                    align-items: flex-start;
                }
                .hero-sectors {
                    gap: 6px;
                }
                .sector-chip {
                    font-size: 0.68rem;
                    padding: 5px 10px;
                }
            }
            @media (max-width: 430px) {
                .mobile-panel {
                    top: 66px;
                }
                .course-card-footer {
                    flex-direction: column;
                    align-items: flex-start;
                }
            }


.gctc-nav-logout { white-space: nowrap; }
.mobile-panel .gctc-mobile-account { width: 100%; justify-content: center; }
.mobile-panel .gctc-mobile-logout { margin-top: 4px; }


.badge-free{background:#eafaf1!important;color:#168a50!important;border:1px solid rgba(46,204,113,.32)!important}.badge-free i{margin-right:4px}.course-price.is-free{color:#15965a}.course-price.is-free span{display:block;color:#789087;margin-top:2px}

/* v4.5.22 — course industry dock: seven desktop / 3-2-1 mobile */
.hero-sectors.sector-dock{
    width:min(1120px,100%);
    margin:0 auto 30px;
    display:flex;
    justify-content:center;
    align-items:stretch;
    flex-wrap:wrap;
    gap:10px;
}
.hero-sectors.sector-dock .sector-chip{
    order:var(--desktop-order);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:9px 16px;
    border-radius:14px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.66);
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
    text-decoration:none;
}
.hero-sectors.sector-dock .sector-chip-icon{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:8px;
    background:rgba(255,255,255,.055);
    flex:0 0 auto;
}
.hero-sectors.sector-dock .sector-chip.core{
    background:linear-gradient(180deg,rgba(13,143,219,.20),rgba(13,143,219,.11));
    border-color:rgba(45,177,241,.38);
    color:#6fd0ff;
    box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.hero-sectors.sector-dock .sector-chip.core .sector-chip-icon{
    background:rgba(13,143,219,.18);
}
.hero-sectors.sector-dock .sector-chip:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.24);
    color:#fff;
}

.gctc-course-empty{
    grid-column:1/-1;
    width:min(860px,100%);
    margin:8px auto 20px;
    padding:34px!important;
    border:1px solid #dce6ef;
    border-radius:22px;
    background:linear-gradient(145deg,#fff,#f7fbfe);
    box-shadow:0 18px 45px rgba(20,48,76,.07);
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:22px;
    text-align:left!important;
}
.gctc-course-empty-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:#e8f6fd;
    color:#118fd0;
    font-size:22px;
}
.gctc-course-empty-kicker{
    display:block;
    margin-bottom:5px;
    color:#159bd8;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}
.gctc-course-empty h2{margin:0 0 6px;font-size:1.2rem;color:#0b2038;}
.gctc-course-empty p{margin:0;max-width:560px;color:#6f8297;line-height:1.55;font-size:.88rem;}
.gctc-course-empty-actions{display:flex;gap:9px;align-items:center;}
.gctc-course-empty-actions .btn{white-space:nowrap;}
.gctc-course-empty-actions .btn-outline{background:#fff;border:1px solid #dbe5ee;color:#17314a;}

@media (max-width:760px){
    .hero-sectors.sector-dock{
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:8px;
        width:100%;
        margin-bottom:24px;
    }
    .hero-sectors.sector-dock .sector-chip{
        order:var(--mobile-order);
        grid-column:span 2;
        width:100%;
        min-width:0;
        min-height:72px;
        padding:9px 6px;
        border-radius:14px;
        flex-direction:column;
        gap:6px;
        white-space:normal;
        font-size:.67rem;
        line-height:1.15;
    }
    /* Core trio always occupies the first row. The next row is a centred pair,
       followed by one centred sector. A seventh desktop sector is intentionally
       omitted on mobile so the requested 3 / 2 / 1 rhythm stays balanced. */
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="4"]{grid-column:2 / span 2;}
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="5"]{grid-column:4 / span 2;}
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="6"]{grid-column:3 / span 2;}
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="7"]{display:none;}
    .hero-sectors.sector-dock .sector-chip-icon{width:26px;height:26px;}
    .hero-sectors.sector-dock .sector-chip-label{display:block;overflow-wrap:anywhere;}
    .gctc-course-empty{
        grid-template-columns:1fr;
        gap:14px;
        padding:24px!important;
        text-align:center!important;
    }
    .gctc-course-empty-icon{margin:0 auto;}
    .gctc-course-empty p{margin:0 auto;}
    .gctc-course-empty-actions{justify-content:center;flex-wrap:wrap;}
}
@media (max-width:390px){
    .hero-sectors.sector-dock{gap:7px;}
    .hero-sectors.sector-dock .sector-chip{font-size:.62rem;padding:8px 4px;}
}

/* v4.5.23 — compact shuffled sector navigation + auto-scroll industry slider */
.hero-sectors.sector-dock{
    width:min(1180px,100%);
    margin:0 auto 34px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}
.hero-sectors.sector-dock .sector-chip{
    order:var(--desktop-order);
    min-height:40px;
    padding:7px 13px;
    border-radius:999px;
    gap:7px;
    font-size:.82rem;
}
.hero-sectors.sector-dock .sector-chip-icon{
    width:21px;
    height:21px;
    border-radius:50%;
    background:transparent;
}
.hero-sectors.sector-dock .sector-chip.core{
    background:linear-gradient(180deg,rgba(13,143,219,.23),rgba(13,143,219,.13));
}

/* Give every major course-page section deliberate breathing room. */
.hero-courses,
.filters,
.courses-section,
.sectors-section,
.pathway-banners,
.cta{position:relative;}
.filters{margin-bottom:36px;}
.courses-section{padding-top:34px!important;padding-bottom:64px!important;}
.sectors-section{padding-top:68px!important;padding-bottom:68px!important;margin-top:24px;}
.pathway-banners{padding-top:68px!important;padding-bottom:68px!important;margin-top:24px;}
.cta{padding-top:68px!important;padding-bottom:72px!important;margin-top:24px;}
.sectors-section .section-head,
.pathway-banners .section-head{margin-bottom:30px!important;}

/* Industry cards are now a horizontal, touch-friendly auto-scroll slider. */
.sectors-grid.gctc-sector-slider{
    display:flex!important;
    grid-template-columns:none!important;
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:4px 4px 18px;
    margin:0 -4px;
    overscroll-behavior-inline:contain;
}
.sectors-grid.gctc-sector-slider::-webkit-scrollbar{display:none;}
.sectors-grid.gctc-sector-slider .sector-card{
    flex:0 0 clamp(270px,31vw,360px);
    min-width:270px;
    scroll-snap-align:start;
    min-height:210px;
}

@media (max-width:760px){
    .hero-sectors.sector-dock{
        display:flex;
        flex-wrap:nowrap;
        justify-content:flex-start;
        gap:8px;
        width:100%;
        margin:0 0 24px;
        padding:0 2px 6px;
        overflow-x:auto;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }
    .hero-sectors.sector-dock::-webkit-scrollbar{display:none;}
    .hero-sectors.sector-dock .sector-chip{
        order:var(--mobile-order);
        display:inline-flex!important;
        flex:0 0 auto;
        width:auto!important;
        min-width:max-content;
        min-height:38px;
        padding:7px 12px;
        border-radius:999px;
        flex-direction:row;
        gap:6px;
        white-space:nowrap;
        font-size:.74rem;
        line-height:1;
        scroll-snap-align:start;
    }
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos]{grid-column:auto!important;}
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="7"]{display:inline-flex!important;}
    .hero-sectors.sector-dock .sector-chip-icon{width:18px;height:18px;font-size:.72rem;}
    .hero-sectors.sector-dock .sector-chip-label{overflow-wrap:normal;}

    .filters{margin-bottom:24px;}
    .courses-section{padding-top:26px!important;padding-bottom:46px!important;}
    .sectors-section{padding-top:48px!important;padding-bottom:48px!important;margin-top:18px;}
    .pathway-banners{padding-top:48px!important;padding-bottom:48px!important;margin-top:18px;}
    .cta{padding-top:48px!important;padding-bottom:52px!important;margin-top:18px;}
    .sectors-section .section-head,.pathway-banners .section-head{margin-bottom:24px!important;}

    .sectors-grid.gctc-sector-slider{gap:14px;padding-bottom:14px;}
    .sectors-grid.gctc-sector-slider .sector-card{
        flex-basis:min(84vw,320px);
        min-width:min(84vw,320px);
        min-height:196px;
    }
}

/* v4.5.24 — balanced non-scroll sector selector + corrected course-page spacing */
.hero-sectors.sector-dock{
    width:min(1180px,100%);
    margin:0 auto 30px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    overflow:visible!important;
    padding:0!important;
}
.hero-sectors.sector-dock .sector-chip{
    order:var(--desktop-order);
    flex:0 0 auto;
}
/* Core trio occupies the middle three positions of the seven-item desktop row. */
.hero-sectors.sector-dock .sector-chip.core{position:relative;}

/* Bring filters closer to the hero while giving results enough room below them. */
.filters{
    margin:0!important;
    padding:16px 0!important;
}
.filters + .courses-section{
    margin-top:0!important;
}
.courses-section{
    padding-top:46px!important;
}
.courses-header{
    margin-bottom:24px!important;
}

@media (max-width:760px){
    .hero-sectors.sector-dock{
        width:100%;
        margin:0 auto 24px;
        display:grid!important;
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:8px;
        overflow:visible!important;
        padding:0!important;
    }
    .hero-sectors.sector-dock .sector-chip{
        order:var(--mobile-order);
        width:100%!important;
        min-width:0!important;
        min-height:38px;
        padding:8px 8px;
        display:flex!important;
        justify-content:center;
        align-items:center;
        white-space:normal;
        text-align:center;
        line-height:1.12;
        font-size:.72rem;
        gap:6px;
        grid-column:span 2;
    }
    .hero-sectors.sector-dock .sector-chip.mobile-hidden{display:none!important;}
    /* Row 2 = two sectors, each half width. */
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="4"]{grid-column:1 / span 3;}
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="5"]{grid-column:4 / span 3;}
    /* Row 3 = one centred sector. */
    .hero-sectors.sector-dock .sector-chip[data-mobile-pos="6"]{grid-column:3 / span 2;}
    .hero-sectors.sector-dock .sector-chip-icon{flex:0 0 auto;}
    .filters{padding:14px 0!important;}
    .courses-section{padding-top:34px!important;}
    .courses-header{margin-bottom:18px!important;}
}

/* v4.5.25 — mobile sector dock: compact 3 / 2 / 1 layout without overlap */
@media (max-width:760px){
    .hero-courses .hero-sectors.sector-dock{
        width:100%;
        max-width:100%;
        margin:0 auto 24px;
        display:grid!important;
        grid-template-columns:repeat(6,minmax(0,1fr));
        grid-auto-flow:row;
        align-items:stretch;
        justify-items:stretch;
        column-gap:8px;
        row-gap:9px;
        overflow:visible!important;
        padding:0!important;
        box-sizing:border-box;
    }
    .hero-courses .hero-sectors.sector-dock .sector-chip{
        box-sizing:border-box;
        order:var(--mobile-order);
        grid-column:span 2;
        width:100%!important;
        min-width:0!important;
        max-width:100%;
        min-height:48px;
        height:auto;
        margin:0;
        padding:7px 7px;
        display:flex!important;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:5px;
        border-radius:16px;
        white-space:normal;
        overflow:hidden;
        text-align:center;
        font-size:.66rem;
        line-height:1.08;
    }
    .hero-courses .hero-sectors.sector-dock .sector-chip-icon{
        width:18px;
        height:18px;
        min-width:18px;
        flex:0 0 18px;
        font-size:.68rem;
    }
    .hero-courses .hero-sectors.sector-dock .sector-chip-label{
        display:block;
        min-width:0;
        max-width:100%;
        overflow:visible;
        overflow-wrap:normal;
        word-break:normal;
        hyphens:none;
    }
    /* second row: two equal centred items */
    .hero-courses .hero-sectors.sector-dock .sector-chip[data-mobile-pos="4"]{grid-column:1 / span 3;}
    .hero-courses .hero-sectors.sector-dock .sector-chip[data-mobile-pos="5"]{grid-column:4 / span 3;}
    /* third row: one item centred with the same visual width as row-one items */
    .hero-courses .hero-sectors.sector-dock .sector-chip[data-mobile-pos="6"]{grid-column:3 / span 2;}
    .hero-courses .hero-sectors.sector-dock .sector-chip.mobile-hidden,
    .hero-courses .hero-sectors.sector-dock .sector-chip[data-mobile-pos="7"],
    .hero-courses .hero-sectors.sector-dock .sector-chip[data-mobile-pos="99"]{display:none!important;}
}
@media (max-width:400px){
    .hero-courses .hero-sectors.sector-dock{column-gap:6px;row-gap:7px;}
    .hero-courses .hero-sectors.sector-dock .sector-chip{
        min-height:46px;
        padding:6px 5px;
        gap:4px;
        font-size:.61rem;
        border-radius:15px;
    }
    .hero-courses .hero-sectors.sector-dock .sector-chip-icon{
        width:16px;height:16px;min-width:16px;flex-basis:16px;font-size:.62rem;
    }
}


/* v4.5.26 — hard reset for the course-sector selector. Separate desktop/mobile markup prevents legacy dock rules from colliding. */
.hero-courses .sector-dock-desktop{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:10px!important;width:min(1180px,100%)!important;margin:0 auto 30px!important;padding:0!important;overflow:visible!important}
.hero-courses .sector-dock-desktop .sector-chip{display:inline-flex!important;position:relative!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;min-height:40px!important;margin:0!important;padding:8px 14px!important;align-items:center!important;justify-content:center!important;gap:7px!important;border-radius:999px!important;white-space:nowrap!important}
.hero-courses .sector-dock-mobile{display:none!important}
@media(max-width:760px){
  .hero-courses .sector-dock-desktop{display:none!important}
  .hero-courses .sector-dock-mobile{display:flex!important;flex-direction:column!important;width:100%!important;max-width:100%!important;margin:0 auto 24px!important;padding:0 2px!important;gap:8px!important;overflow:visible!important;box-sizing:border-box!important}
  .hero-courses .sector-dock-mobile .sector-mobile-row{display:grid!important;width:100%!important;gap:8px!important;align-items:stretch!important;justify-content:center!important;box-sizing:border-box!important}
  .hero-courses .sector-dock-mobile .sector-mobile-row-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .hero-courses .sector-dock-mobile .sector-mobile-row-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0 8%!important}
  .hero-courses .sector-dock-mobile .sector-mobile-row-1{grid-template-columns:minmax(0,34%)!important;justify-content:center!important}
  .hero-courses .sector-dock-mobile .sector-chip{display:flex!important;position:relative!important;box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:48px!important;height:auto!important;margin:0!important;padding:7px 6px!important;align-items:center!important;justify-content:center!important;gap:5px!important;border-radius:16px!important;white-space:normal!important;overflow:hidden!important;text-align:center!important;font-size:.66rem!important;line-height:1.08!important}
  .hero-courses .sector-dock-mobile .sector-chip-icon{display:flex!important;align-items:center!important;justify-content:center!important;width:18px!important;height:18px!important;min-width:18px!important;flex:0 0 18px!important;font-size:.68rem!important}
  .hero-courses .sector-dock-mobile .sector-chip-label{display:block!important;min-width:0!important;max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important;word-break:normal!important;hyphens:none!important}
}
@media(max-width:400px){
  .hero-courses .sector-dock-mobile{gap:7px!important;padding:0!important}
  .hero-courses .sector-dock-mobile .sector-mobile-row{gap:6px!important}
  .hero-courses .sector-dock-mobile .sector-mobile-row-2{padding:0 6%!important}
  .hero-courses .sector-dock-mobile .sector-mobile-row-1{grid-template-columns:minmax(0,36%)!important}
  .hero-courses .sector-dock-mobile .sector-chip{min-height:46px!important;padding:6px 4px!important;font-size:.60rem!important;border-radius:15px!important;gap:4px!important}
  .hero-courses .sector-dock-mobile .sector-chip-icon{width:16px!important;height:16px!important;min-width:16px!important;flex-basis:16px!important;font-size:.61rem!important}
}


/* v4.5.28 — mobile sector pyramid: 3 / 2 / 1, centred and non-scrollable. */
@media (max-width: 900px){
  .hero-courses .sector-dock-desktop{display:none!important;}
  .hero-courses .sector-dock-mobile{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:620px!important;
    margin:0 auto 26px!important;
    padding:0 8px!important;
    gap:10px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .hero-courses .sector-dock-mobile .sector-mobile-row{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:stretch!important;
    width:100%!important;
    gap:10px!important;
    padding:0!important;
    margin:0!important;
    box-sizing:border-box!important;
  }
  .hero-courses .sector-dock-mobile .sector-mobile-row-3 .sector-chip{
    flex:0 1 calc((100% - 20px)/3)!important;
    max-width:calc((100% - 20px)/3)!important;
  }
  .hero-courses .sector-dock-mobile .sector-mobile-row-2 .sector-chip{
    flex:0 1 calc((82% - 10px)/2)!important;
    max-width:calc((82% - 10px)/2)!important;
  }
  .hero-courses .sector-dock-mobile .sector-mobile-row-1 .sector-chip{
    flex:0 1 32%!important;
    max-width:32%!important;
  }
  .hero-courses .sector-dock-mobile .sector-chip{
    display:flex!important;
    box-sizing:border-box!important;
    min-width:0!important;
    width:auto!important;
    min-height:42px!important;
    padding:7px 7px!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border-radius:999px!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-align:center!important;
    font-size:.68rem!important;
    line-height:1.08!important;
  }
  .hero-courses .sector-dock-mobile .sector-chip-icon{
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    flex:0 0 17px!important;
    font-size:.66rem!important;
  }
  .hero-courses .sector-dock-mobile .sector-chip-label{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}
@media (max-width: 420px){
  .hero-courses .sector-dock-mobile{gap:8px!important;padding:0 4px!important;}
  .hero-courses .sector-dock-mobile .sector-mobile-row{gap:7px!important;}
  .hero-courses .sector-dock-mobile .sector-mobile-row-3 .sector-chip{
    flex-basis:calc((100% - 14px)/3)!important;
    max-width:calc((100% - 14px)/3)!important;
  }
  .hero-courses .sector-dock-mobile .sector-mobile-row-2 .sector-chip{
    flex-basis:calc((86% - 7px)/2)!important;
    max-width:calc((86% - 7px)/2)!important;
  }
  .hero-courses .sector-dock-mobile .sector-mobile-row-1 .sector-chip{
    flex-basis:34%!important;max-width:34%!important;
  }
  .hero-courses .sector-dock-mobile .sector-chip{
    min-height:40px!important;padding:6px 5px!important;font-size:.62rem!important;gap:4px!important;
  }
  .hero-courses .sector-dock-mobile .sector-chip-icon{
    width:15px!important;height:15px!important;min-width:15px!important;flex-basis:15px!important;font-size:.59rem!important;
  }
}


/* v4.5.28 — mobile sector selector: show ONLY the 3 / 2 / 1 pyramid.
   This intentionally overrides every older sector-dock rule so the desktop
   selector can never leak into the mobile hero. */
@media (max-width: 900px){
  html body .hero-courses .hero-courses-inner > .hero-sectors.sector-dock.sector-dock-desktop{
    display:none!important;
    visibility:hidden!important;
    position:absolute!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  html body .hero-courses .hero-courses-inner > .sector-dock-mobile{
    display:flex!important;
    visibility:visible!important;
    position:relative!important;
    opacity:1!important;
  }
}
@media (min-width: 901px){
  html body .hero-courses .hero-courses-inner > .sector-dock-mobile{display:none!important;}
}

/* v4.5.29 — tighten the transition from catalogue hero to course filters */
.gctc-lms-page .hero-courses + .filters,
.hero-courses + .filters{
    padding-top:8px!important;
    padding-bottom:8px!important;
    margin-top:0!important;
}
.gctc-lms-page .hero-courses + .filters .filters-inner,
.hero-courses + .filters .filters-inner{
    min-height:0!important;
    margin-top:0!important;
    margin-bottom:0!important;
}
@media (max-width:760px){
    .gctc-lms-page .hero-courses + .filters,
    .hero-courses + .filters{padding-top:10px!important;padding-bottom:10px!important;}
}


/* v4.5.31 — remove the remaining catalogue hero/filter gap completely.
   The old sticky top offset was creating a visible blank band on desktop. */
html body .hero-courses{margin-bottom:0!important;}
html body .hero-courses + .filters{
    position:relative!important;
    top:auto!important;
    margin:0!important;
    padding-top:10px!important;
    padding-bottom:10px!important;
    transform:none!important;
}
html body .hero-courses + .filters .filters-inner{
    margin-top:0!important;
    margin-bottom:0!important;
    padding-top:0!important;
    padding-bottom:0!important;
}

/* v4.5.38 — keep the catalogue filter bar available while browsing courses. */
@media (min-width: 761px){
  html body .hero-courses + .filters{
    position:sticky!important;
    top:0!important;
    z-index:80!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(15,39,67,.08)!important;
  }
}
@media (max-width:760px){
  html body .hero-courses + .filters{
    position:relative!important;
    top:auto!important;
  }
}

/* v4.5.40 — robust sticky catalogue filters.
   overflow-x:hidden on page/root creates a scrolling ancestor in some browsers
   and prevents position:sticky from following the viewport. Use clip instead. */
@media (min-width:761px){
  html:has(body.gctc-course-route),
  body.gctc-course-route,
  body.gctc-course-route #gctc-standalone-root{
    overflow-x:clip!important;
    overflow-y:visible!important;
  }
  body.gctc-course-route .hero-courses + .filters{
    position:-webkit-sticky!important;
    position:sticky!important;
    top:76px!important;
    z-index:9980!important;
    width:100%!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(5,21,43,.09)!important;
    transform:none!important;
    contain:none!important;
    isolation:isolate;
  }
  body.admin-bar.gctc-course-route .hero-courses + .filters{
    top:108px!important;
  }
}
@media (min-width:761px) and (max-width:782px){
  body.admin-bar.gctc-course-route .hero-courses + .filters{
    top:122px!important;
  }
}

/* v4.5.41 — fixed catalogue toolbar + remove artificial lower-page spacer bands. */
@media (min-width:761px){
  body.gctc-course-route .hero-courses + .filters{
    position:relative!important;
    top:auto!important;
    z-index:9980!important;
  }
  body.gctc-course-route .hero-courses + .filters.gctc-filters-fixed{
    position:fixed!important;
    top:76px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    margin:0!important;
    z-index:9980!important;
    background:#fff!important;
    box-shadow:0 10px 28px rgba(5,21,43,.13)!important;
  }
  body.admin-bar.gctc-course-route .hero-courses + .filters.gctc-filters-fixed{
    top:108px!important;
  }
  .gctc-filter-placeholder{display:none;height:0;}
  .gctc-filter-placeholder.is-active{display:block;}
}
@media (max-width:760px){
  body.gctc-course-route .hero-courses + .filters,
  body.gctc-course-route .hero-courses + .filters.gctc-filters-fixed{
    position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:auto!important;
  }
  .gctc-filter-placeholder{display:none!important;}
}

/* Keep sections intentionally separated by their own padding, not empty spacer strips. */
body.gctc-course-route .filters{margin-bottom:0!important;}
body.gctc-course-route .courses-section{margin:0!important;padding-top:28px!important;padding-bottom:30px!important;}
body.gctc-course-route .sectors-section{margin:0!important;padding-top:36px!important;padding-bottom:36px!important;}
body.gctc-course-route .pathway-banners{margin:0!important;padding-top:36px!important;padding-bottom:36px!important;}
body.gctc-course-route .cta{margin:0!important;padding-top:32px!important;padding-bottom:32px!important;}
@media(max-width:760px){
  body.gctc-course-route .courses-section{padding-top:22px!important;padding-bottom:24px!important;}
  body.gctc-course-route .sectors-section,
  body.gctc-course-route .pathway-banners{padding-top:28px!important;padding-bottom:28px!important;}
  body.gctc-course-route .cta{padding-top:24px!important;padding-bottom:24px!important;}
}

/* v4.5.43 — final frontend catalogue toolbar + compact section transitions. */
@media (min-width:761px){
  body.gctc-course-route .hero-courses + .filters,
  body.gctc-course-route .hero-courses + .filters.gctc-filters-fixed{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    margin:0!important;
    z-index:9995!important;
  }
  body.gctc-course-route .hero-courses + .filters.gctc-filters-fixed{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    max-width:none!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(5,21,43,.14)!important;
  }
  body.gctc-course-route .gctc-filter-placeholder.is-active{
    display:block!important;
    width:100%!important;
  }
}

/* Do not leave decorative white/grey spacer strips between the catalogue sections. */
body.gctc-course-route .courses-section,
body.gctc-course-route .sectors-section,
body.gctc-course-route .pathway-banners,
body.gctc-course-route .cta{
  margin-top:0!important;
  margin-bottom:0!important;
}
body.gctc-course-route .courses-section{padding:22px 0 22px!important;}
body.gctc-course-route .sectors-section{padding:24px 0 26px!important;}
body.gctc-course-route .pathway-banners{padding:24px 0 26px!important;}
body.gctc-course-route .cta{padding:24px 0 26px!important;}
body.gctc-course-route .courses-section + .sectors-section,
body.gctc-course-route .sectors-section + .pathway-banners,
body.gctc-course-route .pathway-banners + .cta{
  border-top:0!important;
}
@media(max-width:760px){
  body.gctc-course-route .courses-section{padding:18px 0 20px!important;}
  body.gctc-course-route .sectors-section,
  body.gctc-course-route .pathway-banners,
  body.gctc-course-route .cta{padding:22px 0!important;}
}


/* v4.5.44 — definitive frontend catalogue fixes. */
.gctc-courses-page{
    display:block;
    width:100%;
    margin:0!important;
    padding:0!important;
}
.gctc-courses-page > section{
    margin-left:0!important;
    margin-right:0!important;
}
.gctc-courses-page > .filters{
    position:relative!important;
    top:auto!important;
    margin:0!important;
    padding:10px 0!important;
    width:100%!important;
    background:#fff!important;
    border-top:0!important;
    border-bottom:1px solid var(--line)!important;
    z-index:80;
}
.gctc-courses-page > .filters.gctc-filters-fixed{
    position:fixed!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(5,21,43,.12)!important;
}
.gctc-courses-page > .gctc-filter-placeholder{
    display:none;
    width:100%;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
}

/* Remove the blank divider bands between the lower catalogue sections. */
.gctc-courses-page > .courses-section,
.gctc-courses-page > .sectors-section,
.gctc-courses-page > .pathway-banners,
.gctc-courses-page > .cta{
    margin:0!important;
    border-top:0!important;
    border-bottom:0!important;
}
.gctc-courses-page > .courses-section{
    padding:22px 0 24px!important;
}
.gctc-courses-page > .sectors-section{
    padding:42px 0!important;
}
.gctc-courses-page > .pathway-banners{
    padding:42px 0!important;
}
.gctc-courses-page > .cta{
    padding:0 0 42px!important;
}
.gctc-courses-page > .courses-section + .sectors-section,
.gctc-courses-page > .sectors-section + .pathway-banners,
.gctc-courses-page > .pathway-banners + .cta{
    margin-top:0!important;
}
.gctc-courses-page > .cta .cta-card{
    margin-top:0!important;
}

@media(max-width:760px){
    .gctc-courses-page > .filters,
    .gctc-courses-page > .filters.gctc-filters-fixed{
        position:relative!important;
        top:auto!important;
        left:auto!important;
        right:auto!important;
        width:100%!important;
        box-shadow:none!important;
    }
    .gctc-courses-page > .gctc-filter-placeholder{display:none!important;height:0!important;}
    .gctc-courses-page > .courses-section{padding:18px 0 20px!important;}
    .gctc-courses-page > .sectors-section,
    .gctc-courses-page > .pathway-banners{padding:30px 0!important;}
    .gctc-courses-page > .cta{padding:0 0 30px!important;}
}

/* v4.5.45 — subtle breathing room between the sticky filters, results and advisor CTA. */
.gctc-courses-page > .courses-section{
    padding-top:30px!important;
    padding-bottom:30px!important;
}
.gctc-courses-page > .cta{
    padding-top:18px!important;
    padding-bottom:42px!important;
}
@media(max-width:760px){
    .gctc-courses-page > .courses-section{
        padding-top:22px!important;
        padding-bottom:22px!important;
    }
    .gctc-courses-page > .cta{
        padding-top:14px!important;
        padding-bottom:30px!important;
    }
}


/* GCTC v4.5.50 — pathway photography fidelity */
.pathway-banner {
    background:#0b2744 !important;
    isolation:isolate;
}
.pathway-banner img {
    opacity:1 !important;
    filter:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none;
    z-index:0;
}
.pathway-banner::before {
    background:linear-gradient(180deg, rgba(3,18,34,.04) 0%, rgba(3,18,34,.10) 34%, rgba(3,18,34,.82) 100%) !important;
    z-index:1;
}
.pathway-banner:hover img { transform:scale(1.025) !important; }
.pathway-maritime img { object-position:center 52% !important; }
.pathway-oilgas img { object-position:center 50% !important; }
.pathway-offshore img { object-position:center 50% !important; }
.pathway-banner p { opacity:.82 !important; }
@media (max-width: 767px) {
  .pathway-banner { min-height:300px; padding:28px 24px; }
}

/* GCTC v4.5.54 — fresh pathway photography, natural crop, stronger text contrast */
.gctc-courses-page .pathway-grid{
    align-items:stretch;
}
.gctc-courses-page .pathway-banner{
    aspect-ratio: 16 / 10;
    min-height:0 !important;
    padding:clamp(24px,2.2vw,34px) !important;
    background:#071d32 !important;
}
.gctc-courses-page .pathway-banner img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    opacity:1 !important;
    filter:none !important;
}
.gctc-courses-page .pathway-banner::before{
    background:linear-gradient(180deg,rgba(3,15,28,.15) 0%,rgba(3,15,28,.28) 38%,rgba(3,15,28,.90) 100%) !important;
}
.gctc-courses-page .pathway-maritime img{object-position:center 48% !important;}
.gctc-courses-page .pathway-oilgas img{object-position:center 46% !important;}
.gctc-courses-page .pathway-offshore img{object-position:center 45% !important;}
.gctc-courses-page .pathway-banner h3,
.gctc-courses-page .pathway-banner p,
.gctc-courses-page .pathway-banner .link{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.35);}
.gctc-courses-page .pathway-banner p{opacity:.88 !important;}
@media(max-width:980px){
 .gctc-courses-page .pathway-grid{grid-template-columns:1fr 1fr !important;}
 .gctc-courses-page .pathway-banner{aspect-ratio:16/11;}
}
@media(max-width:680px){
 .gctc-courses-page .pathway-grid{grid-template-columns:1fr !important;gap:16px !important;}
 .gctc-courses-page .pathway-banner{aspect-ratio:16/11;min-height:260px !important;}
}