/* ================================================================= */
        /* GLOBAL SYSTEM CORE VARIABLES & DESIGN SYSTEM ENGINE */
        /* ================================================================= */
        :root {
            --bg-olive: #839705;
            --text-dark-green: #043915;
            --btn-green: #468432;
            --white: #FFFFFF;
            --hover-accent: #99AD7A;
            --neutral-grey: #F5F5F0;
            --text-nav-top: #091413;
            
            --font-head: 'Roboto Slab', serif;
            --font-para: 'Finlandica', sans-serif;
            
            --transition-fluid: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* RESET & BASE CONFIGURATION */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: var(--white);
            font-family: var(--font-para);
            color: var(--text-dark-green);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* HEADING HIERARCHIES */
        h1, h2, h3, h4 {
            font-family: var(--font-head);
            font-weight: 700;
            color: var(--text-dark-green);
            letter-spacing: -0.02em;
        }

        p {
            font-family: var(--font-para);
            font-weight: 400;
            font-size: 1.15rem;
            color: var(--text-dark-green);
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* MULTIPAGE SPA ENGINE ROUTER VISIBILITY STATES */
        .page-instance {
            display: none;
            width: 100%;
        }

        .page-instance.active-route {
            display: block;
            animation: routeReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes routeReveal {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* SECTION LAYOUT COMMONS */
        .editorial-layout {
            max-width: 1400px;
            margin: 0 auto;
            padding: 120px 40px;
        }

        /* ================================================================= */
        /* GLOBAL NAVIGATIONAL HEADER STRUCT */
        /* ================================================================= */
        .global-header {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(4, 57, 21, 0.1);
            position: sticky;
            top: 0;
            width: 100%;
            height: 90px;
            z-index: 2000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 60px;
            transition: var(--transition-fluid);
        }

        .header-logo {
            font-family: var(--font-head);
            font-weight: 900;
            font-size: 1.7rem;
            color: var(--text-dark-green);
            cursor: pointer;
            letter-spacing: -0.04em;
        }

        .header-nav-container {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .nav-link-item {
            font-family: var(--font-para);
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--text-nav-top);
            cursor: pointer;
            transition: var(--transition-fluid);
            position: relative;
        }

        .nav-link-item:hover {
            color: var(--hover-accent);
        }

        .register-action-node {
            background-color: var(--btn-green);
            color: var(--white) !important;
            padding: 12px 30px;
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 1rem;
            border: none;
            cursor: pointer;
            transition: var(--transition-fluid);
        }

        .register-action-node:hover {
            background-color: var(--text-dark-green);
            transform: translateY(-2px);
        }

        /* RESPONSIVE MOBILE HAMBURGER MECHANICS */
        .hamburger-menu-trigger {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            width: 32px;
            height: 24px;
            flex-direction: column;
            justify-content: space-between;
            z-index: 2100;
        }

        .hamburger-menu-trigger span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: var(--text-dark-green);
            transition: var(--transition-fluid);
            transform-origin: left center;
        }

        /* ================================================================= */
        /* UNIVERSAL CORE SYSTEM HERO CONTAINER STRUCT */
        /* ================================================================= */
        .universal-hero-system {
            background-color: #cbdd55; /* Muted low-brightness tone variant of #839705 */
            width: 100%;
            min-height: 780px;
            position: relative;
            overflow: hidden;
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .hero-top-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            z-index: 10;
        }

        .hero-top-left {
            max-width: 350px;
        }

        .hero-top-left h5 {
            font-family: var(--font-head);
            font-weight: 700;
            color: var(--white);
            font-size: 1rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .hero-horizontal-line {
            width: 120px;
            height: 2px;
            background-color: var(--text-dark-green);
            border: none;
        }

        .hero-top-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            max-width: 380px;
            text-align: right;
        }

        .hero-top-right p {
            color: var(--text-dark-green);
            font-size: 1.05rem;
            line-height: 1.5;
            margin-top: 15px;
            font-weight: 600;
        }

        /* COMPOSITE DYNAMIC LAYERED IMAGERY SYSTEM */
        .hero-image-stack-canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 620px;
            height: 440px;
            z-index: 2;
            transition: var(--transition-fluid);
        }

        .image-layer-base {
            position: absolute;
            top: -50px;
            left: -60px;
            width: 700px;
            height: 80vh;
            background-size: cover;
            background-position: center;
            border: 1px solid rgba(255,255,255,0.2);
            filter: brightness(0.85) contrast(1.1) grayscale(15%);
        }

        .image-layer-center-overlap {
            position: absolute;
            top: 90px;
            left: 110px;
            width: 480px;
            height: 320px;
            background-size: cover;
            background-position: center;
            mix-blend-mode: overlay;
            border: 1px solid var(--hover-accent);
            opacity: 0.9;
        }

        .image-layer-top-left-overlap {
            position: absolute;
            top: 10px;
            left: -70px;
            width: 500px;
            height: 500px;
            background-size: cover;
            background-position: center;
        }

        /* HERO BOTTOM IDENTITY TYPOGRAPHY MATRIX */
        .hero-bottom-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            width: 100%;
            z-index: 10;
        }

        .hero-giant-typography {
            font-family: var(--font-head);
            font-weight: 900;
margin-top: -50rem;     
       font-size: 8rem;
            line-height: 0.85;
            color: var(--white);
            
            letter-spacing: -0.05em;
            text-transform: uppercase;
        }

        .hero-giant-typography {
    transform: translateY(-6rem);
}
        .hero-giant-typography.variant-right {
            color: var(--bg-olive);
        }

        /* SPECIAL HERO SPECIFICATION FOR COURSE PAGE ROUTE */
        .universal-hero-system.course-hero-spec .hero-image-stack-canvas {
            left: auto;
            right: 40px;
            transform: translateY(-50%);
        }

        .universal-hero-system.course-hero-spec .hero-giant-typography {
            font-size: 7rem;
        }

        /* ================================================================= */
        /* SECTION 2: FLOATING KNOWLEDGE CORE INTELLIGENCE CARD */
        /* ================================================================= */
        .floating-knowledge-wrapper {
            margin-top: -80px;
            position: relative;
            z-index: 100;
            padding: 0 60px;
        }

        .floating-academic-card {
            background-color: var(--white);
            border: 1px solid rgba(4, 57, 21, 0.12);
            box-shadow: 0 40px 80px rgba(4, 57, 21, 0.08);
            max-width: 1000px;
            margin: 0 auto;
            padding: 60px;
            display: grid;
            grid-template-columns: 1.3fr 1.7fr;
            gap: 50px;
            align-items: center;
        }

        .floating-academic-card h2 {
            font-size: 2.5rem;
            line-height: 1.15;
            letter-spacing: -0.03em;
        }

        .academic-card-text-block p {
            font-size: 1.2rem;
            margin-bottom: 20px;
            text-align: justify;
        }

        .academic-card-text-block span {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.95rem;
            text-transform: uppercase;
            color: var(--bg-olive);
            letter-spacing: 0.08em;
        }

        /* ================================================================= */
        /* SECTION 3: STRUCTURED COURSE IMAGE CATALOG GALLERY */
        /* ================================================================= */
        .gallery-grid-architecture {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 35px;
            margin-top: 40px;
        }

        .gallery-card-node {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .gallery-image-frame {
            height: 420px;
            width: 100%;
            overflow: hidden;
            border: 1px solid rgba(4, 57, 21, 0.1);
            position: relative;
        }

        .gallery-image-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-fluid);
            filter: grayscale(30%);
        }

        .gallery-card-node:hover .gallery-image-frame img {
            transform: scale(1.04);
            filter: grayscale(0%);
        }

        .gallery-outside-label {
            font-family: var(--font-head);
            font-weight: 800;
            font-size: 1.15rem;
            color: var(--bg-olive);
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        /* ================================================================= */
        /* SECTION 4: ASYMMETRIC LEARNING CONTENT SPLIT SCHEMA */
        /* ================================================================= */
        .asymmetric-split-container {
            display: grid;
            grid-template-columns: 1.1fr 1.9fr;
            gap: 80px;
            border-top: 1px solid rgba(4, 57, 21, 0.1);
        }

        .split-left-narrative h2 {
            font-size: 3.2rem;
            line-height: 1.1;
            margin-bottom: 30px;
        }

        .split-left-narrative p {
            font-size: 1.3rem;
            text-align: justify;
        }

        .split-right-stack-system {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .split-stack-card {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .split-stack-frame {
            height: 260px;
            width: 100%;
            overflow: hidden;
            border: 1px solid rgba(4, 57, 21, 0.08);
        }

        .split-stack-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ================================================================= */
        /* SECTION 5: SYSTEM INTELLIGENCE MATRIX (ACADEMIC DASHBOARD) */
        /* ================================================================= */
        .matrix-dashboard-wrapper {
            background-color: var(--neutral-grey);
            border-top: 1px solid rgba(131, 151, 5, 0.15);
            border-bottom: 1px solid rgba(131, 151, 5, 0.15);
        }

        .matrix-system-heading {
            font-size: 3rem;
            margin-bottom: 60px;
            text-align: left;
        }

        .matrix-quadrant-layout {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
        }

        .matrix-intel-block-card {
            background-color: var(--white);
            border: 1px solid rgba(4, 57, 21, 0.08);
            padding: 50px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 40px;
        }

        .matrix-block-top-para {
            font-size: 1.25rem;
            text-align: justify;
            color: rgba(4, 57, 21, 0.9);
        }

        .matrix-block-profile-footer {
            display: flex;
            align-items: center;
            gap: 20px;
            border-top: 1px solid rgba(4, 57, 21, 0.08);
            padding-top: 25px;
        }

        .matrix-profile-circle-image {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid var(--bg-olive);
            flex-shrink: 0;
        }

        .matrix-profile-circle-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .matrix-profile-meta-data h4 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .matrix-profile-meta-data span {
            font-family: var(--font-para);
            font-weight: 700;
            font-size: 0.95rem;
            color: var(--bg-olive);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* ================================================================= */
        /* SECTION 6: FIXED IMAGE + TEXT SCRAPE SPLIT INFRASTRUCTURE */
        /* ================================================================= */
        .fixed-split-pane-layout {
            display: flex;
            width: 100%;
            min-height: 100vh;
            border-bottom: 1px solid rgba(4, 57, 21, 0.1);
        }

        .pane-fixed-visual-left {
            width: 45%;
            position: sticky;
            top: 90px;
            height: calc(100vh - 90px);
            overflow: hidden;
        }

        .pane-fixed-visual-left img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(20%) contrast(1.05);
        }

        .pane-scrollable-content-right {
            width: 55%;
            background-color: var(--white);
            padding: 120px 80px;
            display: flex;
            flex-direction: column;
            gap: 80px;
        }

        .editorial-content-node h3 {
            font-size: 2.4rem;
            margin-bottom: 25px;
            letter-spacing: -0.02em;
        }

        .editorial-content-node p {
            font-size: 1.3rem;
            text-align: justify;
            line-height: 1.65;
            color: var(--text-dark-green);
        }

        /* ================================================================= */
        /* SECTION 7: IMMERSIVE PARALLAX KNOWLEDGE SCROLL & REGISTER PODS */
        /* ================================================================= */
        .immersive-parallax-environment {
            background-image: linear-gradient(rgba(4, 57, 21, 0.88), rgba(4, 57, 21, 0.88)), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1600&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            padding: 140px 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .parallax-scrolling-text-viewport {
            max-width: 900px;
            max-height: 280px;
            overflow-y: auto;
            padding-right: 30px;
            margin-bottom: 90px;
            border-left: 4px solid var(--bg-olive);
            padding-left: 30px;
        }

        .parallax-scrolling-text-viewport::-webkit-scrollbar {
            width: 5px;
        }
        .parallax-scrolling-text-viewport::-webkit-scrollbar-thumb {
            background-color: var(--bg-olive);
        }

        .parallax-scrolling-text-viewport p {
            color: var(--white);
            font-size: 1.5rem;
            text-align: justify;
            line-height: 1.7;
        }

        /* CONTROL POD SYSTEM FOR REVERSIBLE SUBSCRIPTIONS */
        .subscription-interface-pod {
            background-color: var(--white);
            width: 100%;
            max-width: 700px;
            padding: 60px;
            border: 1px solid rgba(131, 151, 5, 0.25);
            box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        }

        .pod-navigation-tabs {
            display: flex;
            gap: 30px;
            margin-bottom: 40px;
            border-bottom: 2px solid var(--neutral-grey);
            padding-bottom: 15px;
        }

        .pod-tab-toggle {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 1.1rem;
            text-transform: uppercase;
            color: rgba(4, 57, 21, 0.35);
            cursor: pointer;
            transition: var(--transition-fluid);
            letter-spacing: 0.05em;
        }

        .pod-tab-toggle.tab-state-active {
            color: var(--text-dark-green);
            position: relative;
        }

        .pod-tab-toggle.tab-state-active::after {
            content: '';
            position: absolute;
            bottom: -17px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--bg-olive);
        }

        .system-form-module {
            display: none;
            flex-direction: column;
            gap: 25px;
        }

        .system-form-module.form-state-active {
            display: flex;
        }

        .form-structural-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .form-structural-group label {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .form-structural-group input[type="email"],
        .form-structural-group select,
        .form-structural-group textarea {
            width: 100%;
            padding: 16px;
            border: 1px solid rgba(4, 57, 21, 0.15);
            background-color: var(--neutral-grey);
            font-family: var(--font-para);
            font-size: 1.1rem;
            outline: none;
            transition: var(--transition-fluid);
        }

        .form-structural-group input:focus,
        .form-structural-group select:focus,
        .form-structural-group textarea:focus {
            border-color: var(--bg-olive);
            background-color: var(--white);
        }

        .form-dispatch-button {
            background-color: var(--text-dark-green);
            color: var(--white);
            border: none;
            padding: 18px;
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 1.1rem;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--transition-fluid);
            letter-spacing: 0.05em;
        }

        .form-dispatch-button:hover {
            background-color: var(--btn-green);
        }

        /* ================================================================= */
        /* DEEP LEGAL CONTENT TEMPLATE HOUSES (PRIVACY & TERMS) */
        /* ================================================================= */
        .legal-charter-container {
            background-color: var(--neutral-grey);
            border-bottom: 1px solid rgba(4, 57, 21, 0.1);
        }

        .legal-charter-shield {
            background-color: var(--white);
            border: 1px solid rgba(4, 57, 21, 0.1);
            padding: 80px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.02);
        }

        .legal-charter-shield h2 {
            font-size: 3.5rem;
            margin-bottom: 10px;
        }

        .legal-charter-shield h4 {
            font-family: var(--font-para);
            font-weight: 700;
            text-transform: uppercase;
            color: var(--bg-olive);
            margin-bottom: 50px;
            font-size: 1rem;
            letter-spacing: 0.05em;
        }

        .legal-charter-section-node {
            margin-bottom: 45px;
        }

        .legal-charter-section-node h3 {
            font-size: 1.6rem;
            margin-bottom: 15px;
        }

        .legal-charter-section-node p {
            font-size: 1.2rem;
            text-align: justify;
            color: rgba(4, 57, 21, 0.85);
            margin-bottom: 15px;
        }

        /* ================================================================= */
        /* GLOBAL SYSTEM FOOTER ARTIFACT */
        /* ================================================================= */
        .global-footer {
            background-color: var(--white);
            border-top: 1px solid rgba(4, 57, 21, 0.15);
            padding: 50px 60px;
        }

        .footer-boundary-row {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-copyright-note {
            font-family: var(--font-head);
            font-weight: 600;
            font-size: 0.95rem;
            letter-spacing: 0.03em;
        }

        .footer-regulatory-links {
            display: flex;
            gap: 40px;
        }

        .footer-regulatory-links a {
            font-family: var(--font-para);
            font-weight: 600;
            font-size: 1.05rem;
            color: var(--text-dark-green);
            cursor: pointer;
            transition: var(--transition-fluid);
        }

        .footer-regulatory-links a:hover {
            color: var(--bg-olive);
        }

        /* ================================================================= */
        /* RESPONSIVE LAYOUT MATRIX & MEDIA QUERIES */
        /* ================================================================= */
        @media (max-width: 1250px) {
            .gallery-grid-architecture { grid-template-columns: repeat(2, 1fr); }
            .asymmetric-split-container { grid-template-columns: 1fr; gap: 60px; }
            .split-right-stack-system { grid-template-columns: repeat(3, 1fr); }
            .matrix-quadrant-layout { grid-template-columns: 1fr; }
            .fixed-split-pane-layout { flex-direction: column; }
            .pane-fixed-visual-left { width: 100%; height: 450px; position: relative; top: 0; }
            .pane-scrollable-content-right { width: 100%; padding: 80px 40px; }
        }

        @media (max-width: 950px) {
            .header-nav-container { display: none; }
            .hamburger-menu-trigger { display: flex; }
            
            /* MOBILE NAV DRAWER ACTIVE ENGINE */
            .header-nav-container.drawer-state-open {
                display: flex;
                flex-direction: column;
                position: fixed;
                top: 90px;
                left: 0;
                width: 100%;
                background-color: var(--white);
                border-bottom: 3px solid var(--bg-olive);
                padding: 50px 40px;
                gap: 30px;
                box-shadow: 0 30px 60px rgba(0,0,0,0.1);
                z-index: 1999;
                align-items: flex-start;
            }

            .hamburger-menu-trigger.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
            .hamburger-menu-trigger.is-active span:nth-child(2) { opacity: 0; }
            .hamburger-menu-trigger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }

            .floating-academic-card { grid-template-columns: 1fr; padding: 40px; }
            .hero-image-stack-canvas { width: 100%; max-width: 480px; height: 380px; }
            .image-layer-base { width: 85%; height: 80%; }
            .image-layer-center-overlap { width: 80%; height: 80%; left: 70px; }
            .hero-giant-typography { font-size: 5rem; }
            
            .universal-hero-system.course-hero-spec .hero-image-stack-canvas {
                position: relative;
                top: 0;
                left: 0;
                transform: none;
                margin: 40px auto;
            }
        }

        @media (max-width: 650px) {
            .universal-hero-system { padding: 30px; min-height: 650px; }
            .hero-top-row { flex-direction: column; gap: 30px; }
            .hero-top-right { text-align: left; align-items: flex-start; }
            .hero-giant-typography { font-size: 3.6rem; }
            .split-right-stack-system { grid-template-columns: 1fr; gap: 40px; }
            .subscription-interface-pod { padding: 30px 20px; }
            .legal-charter-shield { padding: 40px 20px; }
            .legal-charter-shield h2 { font-size: 2.2rem; }
            .footer-boundary-row { flex-direction: column; gap: 25px; text-align: center; }
        }