:root {
            /* Colour Pallet */
            --color-primary: #1B66CF;
            /* Bright Blue */
            --color-secondary: #335F9C;
            /* Blue */
            --color-dark-blue: #0B203D;
            /* Dark Blue */
            --color-dark-gray: #272D36;
            /* Dark Gray Blue */
            --color-heading: #374D69;
            /* Darker Blue (New Heading color) */
            --color-text: #222;
            --color-light: #F5F5F5;
            /* Gray */
            --color-white: #fff;
            /* Spacing Scale (Modular Scale - based on 1rem = 16px) */
            --spacing-1: 0.25rem;
            /* 4px */
            --spacing-2: 0.5rem;
            /* 8px */
            --spacing-3: 1rem;
            /* 16px */
            --spacing-4: 1.5rem;
            /* 24px */
            --spacing-5: 2rem;
            /* 32px */
            --spacing-6: 3rem;
            /* 48px */
            --spacing-7: 4rem;
            /* 64px */
            --spacing-8: 6rem;
            /* 96px */
            --spacing-9: 8rem;
            /* 128px */
            /* Font Size Scale (Modular Scale) */
            --font-size-base: 1.125rem;
            /* 18px */
            --font-size-sm: 0.875rem;
            /* 14px */
            --font-size-lg: 1.25rem;
            /* 20px */
            --font-size-xl: 1.5rem;
            /* 24px */
            /* Heading Sizes */
            --font-size-h1: 3rem;
            /* 48px */
            --font-size-h2: 2.25rem;
            /* 36px */
            --font-size-h3: 1.75rem;
            /* 28px */
            --font-size-h4: 1.5rem;
            /* 24px */
        }
        
        @media (min-width: 768px) {
             :root {
                --font-size-h1: 4rem;
                /* 64px on desktop */
                --font-size-h2: 3rem;
                /* 48px on desktop */
                --font-size-h3: 2rem;
                /* 32px on desktop */
            }
        }
        /* General Reset */
        
        body {
            margin: 0;
            font-family: 'Roboto', sans-serif;
            line-height: 1.5;
            /* Consistent body line height */
            background: var(--color-white);
            color: var(--color-text);
            scroll-behavior: smooth;
            font-size: var(--font-size-base);
            /* Using base variable */
        }
        
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            line-height: 1.2;
            margin-block-start: 0;
            margin-block-end: 0;
            color: var(--color-heading);
        }
        
        h1 {
            font-size: var(--font-size-h1);
        }
        
        h2 {
            font-size: var(--font-size-h2);
        }
        
        h3 {
            font-size: var(--font-size-h3);
            color: var(--color-secondary);
        }
        /* h3 a bit lighter */
        
        h4 {
            font-size: var(--font-size-h4);
        }
        /* --- 🧱 Custom Utility/Helper Classes --- */
        /* Text Alignment */
        
        .text-left {
            text-align: left !important;
        }
        
        .text-center {
            text-align: center !important;
        }
        
        .text-right {
            text-align: right !important;
        }
        /* Font Sizes */
        
        .fs-sm {
            font-size: var(--font-size-sm) !important;
        }
        
        .fs-lg {
            font-size: var(--font-size-lg) !important;
        }
        
        .fs-xl {
            font-size: var(--font-size-xl) !important;
        }
        /* Colors */
        
        .text-white {
            color: var(--color-white) !important;
        }
        
        .text-primary {
            color: var(--color-primary) !important;
        }
        
        .bg-primary {
            background: var(--color-primary) !important;
        }
        
        .bg-secondary {
            background: var(--color-secondary) !important;
        }
        
        .bg-light {
            background: var(--color-light) !important;
        }
        /* Padding Utilities (p = padding, y = y-axis, x = x-axis, t = top, b = bottom) */
        
        .p-0 {
            padding: 0 !important;
        }
        
        .py-4 {
            padding-top: var(--spacing-4) !important;
            padding-bottom: var(--spacing-4) !important;
        }
        
        .py-6 {
            padding-top: var(--spacing-6) !important;
            padding-bottom: var(--spacing-6) !important;
        }
        
        .py-8 {
            padding-top: var(--spacing-8) !important;
            padding-bottom: var(--spacing-8) !important;
        }
        
        .pt-6 {
            padding-top: var(--spacing-6) !important;
        }
        
        .pb-6 {
            padding-bottom: var(--spacing-6) !important;
        }
        /* Margin Utilities (m = margin, t = top, b = bottom) */
        
        .mt-0 {
            margin-top: 0 !important;
        }
        
        .mt-5 {
            margin-top: var(--spacing-5) !important;
        }
        
        .mt-7 {
            margin-top: var(--spacing-7) !important;
        }
        
        .mb-2 {
            margin-bottom: var(--spacing-2) !important;
        }
        
        .mb-3 {
            margin-bottom: var(--spacing-3) !important;
        }
        
        .mb-4 {
            margin-bottom: var(--spacing-4) !important;
        }
        
        .mb-5 {
            margin-bottom: var(--spacing-5) !important;
        }
        
        .mb-7 {
            margin-bottom: var(--spacing-7) !important;
        }
        /* Helper Classses */
        
        .logo {
            max-width: 130px;
            height: auto;
        }
        /* Base Wrapper - Use this class for all main content inside sections */
        
        .text-wrapper {
            padding-left: var(--spacing-4);
            padding-right: var(--spacing-4);
            max-width: 1280px;
            margin: 0 auto;
        }
        /* Call to Action Button */
        
        .cta-button {
            background: var(--color-primary);
            border: 2px solid var(--color-secondary);
            color: var(--color-white);
            padding: var(--spacing-3) var(--spacing-5);
            font-size: var(--font-size-xl);
            border-radius: 8px;
            border: 2px solid var(--color-white);
            margin-top: var(--spacing-4);
            cursor: pointer;
            text-decoration: none;
            transition: background 0.3s, transform 0.2s;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            display: inline-block;
        }
        
        .button-container {
            display: flex;
            justify-content: center;
            gap: var(--spacing-3);
        }
        
        .button-container button,
        .button-container a {
            flex: 1;
            width: auto;
            margin: var(--spacing-3) var(--spacing-4);
            /
        }
        
        .cta-button:hover {
            background: var(--color-heading);
            transform: scale(1.05);
        }
        
        @media screen and (max-width: 768px) {
            .text-wrapper {
                padding-left: var(--spacing-4);
                padding-right: var(--spacing-4);
            }
            .button-container button,
            .button-container a {
                margin: var(--spacing-3);
                vertical-align: middle;
                display: table-cell;
            }
        }
        /* --- 🌐 Navigation --- */
        
        .header {
            background: var(--color-primary);
            color: var(--color-white);
            padding: var(--spacing-2) var(--spacing-4);
            /* Consistent padding */
        }
        
        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .nav-links {
            list-style: none;
            display: flex;
            gap: var(--spacing-3);
        }
        
        .nav-links li {
            margin: 0;
        }
        
        .nav-links a {
            color: var(--color-white);
            text-decoration: none;
            font-size: var(--font-size-lg);
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--color-light);
            text-decoration: underline;
        }
        
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }
        
        .hamburger div {
            width: var(--spacing-5);
            height: 3px;
            background: var(--color-white);
            margin: var(--spacing-1);
        }
        
        @media screen and (max-width: 768px) {
            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                background: var(--color-primary);
                position: absolute;
                top: 53px;
                left: 0;
                text-align: center;
                z-index: 10;
                padding: var(--spacing-3) 0;
            }
            .nav-links.active {
                display: flex;
            }
            .hamburger {
                display: flex;
            }
            .hamburger.is-active {
                display: none;
            }
            .hamburger-close {
                display: flex;
                position: absolute;
                top: var(--spacing-4);
                right: var(--spacing-4);
                background: none;
                color: var(--color-white);
                font-size: var(--font-size-xl);
                border: none;
                cursor: pointer;
                z-index: 15;
            }
        }
        /* --- 🖼️ Hero Sections --- */
        /* The main section styles now use a utility class for padding, e.g., .py-8 */
        
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/index/WellandPicket.jpg') center/cover no-repeat;
            color: var(--color-white);
            text-align: center;
            /* Padding is now managed by a utility class like .py-6 or .py-8 added to the HTML */
            padding: var(--spacing-8) var(--spacing-4);
            /* Default padding for all heros */
            position: relative;
        }
        
        .hero-action-section {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/action/action-hero-full.webp') center/cover no-repeat;
            color: var(--color-white);
            text-align: center;
            /* Padding is now managed by a utility class like .py-6 or .py-8 added to the HTML */
            padding: var(--spacing-7) var(--spacing-4);
            /* Default padding for all heros */
            position: relative;
        }
        
        .hero-action-section h1,
        .hero-section h1 {
            font-size: var(--font-size-h1);
            font-weight: 800;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            color: var(--color-white);
            /* Override heading color */
        }
        
        .hero-action-section h2,
        .hero-section h2 {
            margin-top: 0;
            line-height: 1;
            color: var(--color-white);
        }
        
        .hero-action-section p,
        .hero-section p {
            font-size: var(--font-size-xl);
        }
        
        .hero-action-section .text-wrapper,
        .hero-section .text-wrapper {
            padding-top: 0;
            padding-bottom: 0;
        }
        
        @media screen and (min-width: 768px) {
            .hero,
            .hero-section {
                padding: var(--spacing-9) var(--spacing-7);
            }
            .hero-action-section {
                padding: var(--spacing-9) var(--spacing-7);
            }
            .hero h1,
            .hero-action-section h1,
            .hero-section h1 {
                font-size: var(--font-size-h1);
                max-width: 1000px;
                margin: 0 auto;
                margin-block-start: 0;
                margin-block-end: 0;
            }
        }
        /* --- 📰 Info Section (Standard Content Section) --- */
        
        .info-section {
            padding: var(--spacing-8) var(--spacing-4);
            /* Consistent section padding: py-8 */
            text-align: center;
            background: var(--color-white);
        }
        
        .info-section h2 {
            margin-top: 0;
        }
        
        .info-section img {
            max-width: 100%;
            height: auto;
            margin-top: var(--spacing-4);
            /* Consistent spacing for images/blocks */
            border-radius: 10px;
            max-height: 400px;
        }
        /* --- 💙 Support Section (Primary Color Background) --- */
        
        .support-email-section,
        .support-section {
            background: var(--color-secondary);
            color: var(--color-white);
            padding: var(--spacing-8) var(--spacing-4);
            /* Consistent section padding: py-8 */
            text-align: center;
        }
        
        .support-section {
            background: var(--color-primary);
            /* Primary color for this specific section */
        }
        
        .support-email-section h2,
        .support-section h2 {
            margin-top: 0;
            color: var(--color-white);
            /* Force white heading color */
        }
        /* --- Original 4-Card Layout (kept for use in other parts, e.g. Executive highlights) --- */
        
        .support-cards {
            display: flex;
            justify-content: center;
            gap: var(--spacing-4);
            flex-wrap: wrap;
            margin-top: var(--spacing-5);
        }
        
        .support-card,
        .support-email-card {
            background: rgba(0, 0, 0, 0.3);
            padding: var(--spacing-4) var(--spacing-3);
            border-radius: 10px;
            flex: 1 1 200px;
            max-width: 300px;
            transition: transform 0.3s;
        }
        
        .support-card p,
        .support-email-card p {
            margin-top: var(--spacing-3);
            margin-bottom: 0px;
        }
        
        .support-email-card {
            text-decoration: none;
            text-decoration-thickness: 0px;
            border: 2px solid;
        }
        
        .support-email-card:hover {
            text-decoration: underline;
            text-decoration-thickness: 3px;
            background-color: var(--color-dark-blue);
            transform: translateY(-5px);
        }
        /* --- Stewards/Leadership List Component --- */
        
        .steward-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--spacing-5);
            max-width: 1200px;
            margin: var(--spacing-5) auto var(--spacing-5) auto;
            text-align: left;
        }
        
        .steward-item {
            background: rgba(255, 255, 255, 0.1);
            padding: var(--spacing-4);
            border-radius: 8px;
            border-left: 5px solid var(--color-light);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
        }
        
        .steward-item:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
        
        .steward-item h4 {
            color: var(--color-white);
            margin-bottom: var(--spacing-1);
            font-size: var(--font-size-lg);
        }
        
        .steward-item p {
            font-size: var(--font-size-base);
            margin: 0;
            line-height: 1.4;
            color: var(--color-light);
        }
        
        .steward-item .unit-tag {
            display: inline-block;
            font-size: var(--font-size-sm);
            color: var(--color-white);
            background: var(--color-dark-blue);
            padding: var(--spacing-1) var(--spacing-2);
            border-radius: 4px;
            margin-top: var(--spacing-2);
            font-weight: bold;
        }
        
        @media screen and (max-width: 1024px) {
            .steward-list {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--spacing-4);
                margin-top: var(--spacing-5);
            }
        }
        
        @media screen and (max-width: 640px) {
            .steward-list {
                grid-template-columns: repeat(1, 1fr);
                gap: var(--spacing-2);
                margin-top: var(--spacing-2);
            }
            .steward-item {
                padding: 0.25rem;
            }
        }
        /* Updates */
        
        .updates-section {
            padding: var(--spacing-8) var(--spacing-4);
            background: var(--color-light);
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
            /* Is this shadow desired on light background? Consider removing or adjusting opacity */
        }
        
        .updates-section h2 {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            margin-top: 0;
            color: var(--color-text);
        }
        
        .updates-feed {
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
            margin-top: var(--spacing-5);
        }
        
        .update {
            background: var(--color-white);
            padding: var(--spacing-4);
            margin-bottom: var(--spacing-4);
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        
        .update h3 {
            margin-top: 0;
            color: var(--color-secondary);
        }
        /* Action Section */
        
        .action-section {
            color: var(--color-white);
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/common/OPSEU-flag.webp') center/cover no-repeat;
            filter: brightness(90%);
            padding: var(--spacing-8) var(--spacing-4);
            text-align: center;
        }
        
        .CEC-section {
            color: var(--color-white);
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/common/SaveOurColleges.webp') repeat;
            filter: brightness(90%);
            padding: var(--spacing-8) var(--spacing-4);
            text-align: center;
        }
        
        .CEC-section a,
        .action-section a {
            color: var(--color-white);
        }
        
        .CEC-section h2,
        .action-section h2 {
            margin-top: 0;
            font-size: var(--font-size-h2);
            font-weight: 600;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
            margin-bottom: var(--spacing-3);
            color: var(--color-white);
        }
        
        .CEC-section p,
        .action-section p {
            font-size: var(--font-size-xl);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        
        .action-section .cta-button {
            margin-bottom: 0;
        }
        /* Contact Section */
        
        .contact-section {
            padding: var(--spacing-8) var(--spacing-4);
            text-align: center;
            background: var(--color-white);
        }
        
        .contact-form {
            max-width: 1000px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-3);
            margin-top: var(--spacing-5);
        }
        
        .contact-form input,
        .contact-form textarea {
            padding: var(--spacing-3);
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: var(--font-size-base);
        }
        
        .contact-section h2 {
            margin-top: 0;
        }
        
        .contact-form a,
        .contact-form button {
            border-radius: 6px;
            border: 2px solid;
            border-color: var(--color-text);
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
        }
        
        .contact-form a:hover,
        .contact-form button:hover {
            background: var(--color-heading);
            transform: scale(1.02);
        }
        /* --- Footer --- */
        
        .footer {
            background: var(--color-dark-blue);
            color: var(--color-white);
            text-align: center;
            padding: var(--spacing-8) var(--spacing-4);
        }
        
        .footer a {
            text-decoration: none;
            color: var(--color-white);
            margin: 0;
        }
        
        .footer a:hover {
            text-decoration: underline;
            text-shadow: 1px 1px 3px var(--color-primary);
            font-weight: 400;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
            gap: var(--spacing-4);
            max-width: 1100px;
            margin: 0 auto;
            text-align: left;
            margin-bottom: var(--spacing-4);
        }
        
        .footer h3 {
            font-size: var(--font-size-xl);
            color: var(--color-white);
            margin-bottom: var(--spacing-3);
        }
        
        .footer ul {
            list-style: none;
            padding: 0;
            margin-block-start: 0px;
            margin-block-end: 0;
        }
        
        .footer ul li {
            margin: var(--spacing-1) 0;
        }
        
        .footer ul li a {
            color: var(--color-white);
            text-decoration: none;
            transition: color 0.3s;
            font-size: var(--font-size-base);
        }
        
        .footer ul li a:hover {
            color: var(--color-white);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }
        
        .footer p {
            font-size: var(--font-size-sm);
            margin-top: var(--spacing-5);
        }