:root {
    /* Colors */
    --primary-blue: #008CBC;
    --accent-tan: #E1B260;
    --dark-grey: rgb(37, 51, 58);
    --light-grey: #f7f7f7;
    --white: #ffffff;
    --black: #000000;
    --text-highlight-color: #E1B260;
    /*    --menu-btn-bg: #1f2937; dark blue */
    --menu-btn-bg: #B8893A;
    /* #A67C2A;*/
    /* darker one #A67C2A;*/
    /* Darker gold for white text contrast */
    /* #1f2937;*/
    /*var(--white);*/

    /* Fonts */
    --font-primary: 'Montserrat', sans-serif;

    /* Font Sizes (Exact) */
    --fs-h1: 65.92px;
    --fs-h2: 65.4px;
    --fs-h3: 36px;
    --fs-h4: 26px;
    --fs-body: 18px;
    /*16.48px;*/

    /* Layout */
    --header-height: 147px;
    --header-height-mobile: 80px;
    --wrapper-padding: 21.12px 38.4px;
    --section-padding: 80px 20px;
    --max-width: 1200px;
    --max-width-medium: 900px;
    --max-width-narrow: 700px;

    /* Animations */
    --transition-smooth: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/*  not needed
html {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-grey) var(--white);
}
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Accessibility - Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    /* background: var(--primary-blue); */
    color: var(--white);
    padding: 8px 16px;
    z-index: 9999;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

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

/* Typography */
h1 {
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.2;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.2;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.2;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 400;
    line-height: 1.2;
}

p {
    font-size: var(--fs-body);
    font-weight: 400;
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
    /* Reduced from 40px to match standard Squarespace gutter defaults better */
}

.text-center {
    text-align: center;
}

.section-padding {
    padding: var(--section-padding);
}

.mt-small {
    margin-top: 26px;
}

.mt-medium {
    margin-top: 52px;
}

.mt-large {
    margin-top: 79px;
}

.spacer-small {
    height: 20px;
}

.opacity-70 {
    opacity: 0.7;
}

.bold {
    font-weight: 700;
}

.red-text {
    color: #d11b1b;
}

.text-uppercase {
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

/* Scroll Animations */
.pre-fade {
    opacity: 0 !important;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.pre-fade.fade-in {
    opacity: 1 !important;
    transform: translateY(0);
}

/* Fade only modifier - removes position change from pre-fade */
.pre-fade.only-alpha {
    transform: none;
}

.pre-fade.only-alpha.fade-in {
    transform: none;
}

/* Page Loader Overlay */
.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-wrapper.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    text-align: center;
}

.loader-ring {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(0, 140, 188, 0.1);
    border-top: 3px solid var(--primary-blue);
    border-radius: 50%;
    animation: loader-spin 1s linear infinite;
    margin: 0 auto 20px;
}

.loader-text {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--primary-blue);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 14px;
    animation: loader-pulse 1.5s ease-in-out infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loader-pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* FOUC Prevention */
html.js-loading body {
    overflow: hidden !important;
}

html.js-loading main,
html.js-loading header,
html.js-loading footer {
    opacity: 0 !important;
}

/* Backgrounds */
.bg-blue {
    background-color: var(--primary-blue);
    color: var(--white);
}

/* for links on blue colors*/
.bg-blue a:not(.btn):not(.btn-primary):not(.styled-menu-btn) {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: opacity 0.2s ease;
}

.bg-blue a:not(.btn):not(.btn-primary):not(.styled-menu-btn):hover {
    opacity: 0.85;
}

.bg-tan {
    background-color: var(--accent-tan);
    color: var(--black);
}

.bg-white {
    background-color: var(--white);
    color: var(--black);
}

.bg-dark {
    background-color: var(--dark-grey);
    color: var(--white);
}

.white-text {
    color: var(--white);
}

.container-narrow {
    max-width: var(--max-width-narrow);
}

.container-medium {
    max-width: var(--max-width-medium);
}

.grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.align-center {
    align-items: center;
}

.underline {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--primary-blue);
    border-radius: 60% 10% 40% 10%;
    transform: rotate(-1.5deg);
    opacity: 0.7;
}

.highlight-box {
    background-color: var(--accent-tan);
    color: var(--white);
    padding: 5px 15px;
    display: inline-block;
}

.circle-highlight {
    position: relative;
    padding: 0 10px;
    display: inline-block;
}

.highlight-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /*height: 57px;*/
    z-index: -1;
    pointer-events: none;
    stroke-width: max(1px, 0.1em);
    stroke-linecap: square;
    stroke-linejoin: bevel;
}

.underline-curve {
    position: relative;
    display: inline-block;
}

.underline-svg {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    /*height: 20px;*/
    z-index: -1;
    pointer-events: none;
    font-size: 65px;
    stroke: var(--text-highlight-color);
    stroke-width: max(1px, 0.1em);
    stroke-linecap: square;
    stroke-linejoin: bevel;
}

/* Hand-drawn underline for "change" in success section */
.success-section .underline::after {
    background-color: var(--primary-blue);
    height: 6px;
    bottom: -10px;
}

/* Match example font sizes for Student Success section */
#success h2 {
    font-size: 46px;
    line-height: 1.3;
}

/* Header */
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: transparent;
    z-index: 1000;
    display: flex;
    align-items: center;
    transition: var(--transition-smooth);
    color: var(--white);
}

.main-header.scrolled {
    position: fixed;
    top: 0;
    height: calc(var(--header-height) / 2);
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--black);
}

body.force-solid-header .main-header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--black);
}

.main-header.scrolled .dropdown-trigger,
body.force-solid-header .dropdown-trigger {
    color: var(--black);
}

.main-header.scrolled .hamburger-icon span,
body.force-solid-header .hamburger-icon span {
    background-color: var(--dark-grey);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;
    /* Override container max-width to span full screen */
}

.left-nav,
.right-nav {
    flex: 1;
}

.left-nav {
    display: flex;
    justify-content: flex-start;
}

.right-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.header-logo {
    flex: 0 0 auto;
}

.header-logo img {
    width: 111px;
    height: 105px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.main-header.scrolled .header-logo img {
    height: 60px;
    width: auto;
}

/* Dropdown Nav */
.dropdown-nav {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    background: none;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    font-size: 14.88px;
    padding: 20px 0;
    /* Ensure visibility: White with shadow when transparent, inherit (black) when scrolled */
    color: var(--black);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Styled Menu Button (injected via JS) */
.styled-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #d49f3d 0%, #bd8e2b 100%);
    /* Rich Gold Gradient */
    color: var(--white) !important;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-transform: none;
    /* "Menu" vs "MENU" */
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.styled-menu-btn svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}


/* Focus state for keyboard navigation */
.styled-menu-btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
    background-color: #8B6914;
}

/* Ensure inherit color works for scrolled state only if needed, 
   but specific button style usually overrides. 
   Let's keep the button dark even when scrolled for contrast? 
   Or invert? The screenshot implies a dark button. */
.main-header.scrolled .styled-menu-btn {
    color: var(--white) !important;
    /* Keep white text */
    background: linear-gradient(to bottom, #d49f3d 0%, #bd8e2b 100%);
}

.main-header.scrolled .styled-menu-btn:hover,
.styled-menu-btn:hover {
    background: linear-gradient(to bottom, #bd8e2b 0%, #d49f3d 100%) !important;
    /* Inverted Gold Gradient */
    filter: brightness(1.1);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: -20px;
    /* Compensate for parent padding */
    background: var(--white);
    min-width: 250px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 20px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* Timing controlled by JavaScript for resettable hide delay */
    transition: opacity 0.3s, transform 0.3s, visibility 0s 0.3s;
    z-index: 1001;
    pointer-events: none;
}

.dropdown-nav:hover .dropdown-menu,
.dropdown-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s, visibility 0s 0s;
    pointer-events: auto;
}

/* Extend clickable area of dropdown trigger for easier hover */
.dropdown-nav {
    padding-bottom: 20px;
    margin-bottom: -20px;
    padding-right: 20px;
    margin-right: -20px;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 30px;
    color: var(--black);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: 0.2s;
}

.dropdown-menu li a:hover {
    color: var(--primary-blue);
}

/* Active Page Highlighting */
.dropdown-menu li a.active-page,
.mobile-root-menu a.active-page,
.mobile-sub-menu ul li a.active-page {
    color: var(--primary-blue) !important;
    font-weight: 700;
}

.dropdown-trigger.active-trigger,
.mobile-folder-trigger.active-trigger {
    /*color: var(--primary-blue) !important; optinal blue color if needed*/
}

.dropdown-trigger,
.mobile-folder-trigger {
    transition: color 0.3s ease;
}

u {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Add a small dot indicator for desktop active links */
.dropdown-menu li a.active-page {
    position: relative;
    padding-left: 35px;
}

.dropdown-menu li a.active-page::before {
    content: '•';
    position: absolute;
    left: 20px;
    color: var(--primary-blue);
    font-size: 20px;
    line-height: 1;
    animation: fadeInIcon 0.5s ease;
}

/* Add '>' indicator for mobile active links */
.mobile-root-menu a.active-page,
.mobile-sub-menu ul li a.active-page {
    position: relative;
    padding-left: 30px !important;
    /* Make space for the arrow */
}

.mobile-root-menu a.active-page::before,
.mobile-sub-menu ul li a.active-page::before {
    content: '>';
    position: absolute;
    left: 10px;
    /* Adjust as needed */
    color: var(--primary-blue);
    font-weight: 700;
    font-size: 22px;
    /* Match text size approximate */
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
    animation: fadeInIcon 0.5s ease;
}

@keyframes fadeInIcon {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Wavy Divider */
.has-wave {
    position: relative;
    padding-top: 120px !important;
}

.section-divider-top {
    box-sizing: content-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 0;
}

.section-divider-top svg {
    width: 100%;
    height: 100px;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 11.9px 20px;
    border-radius: 300px;
    font-size: 14.88px;
    font-weight: 700;
    transition: 0.3s;
    display: inline-block;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
}

.btn-primary.large {
    padding: 24px 40px;
    font-size: var(--fs-body);
    /* 16.48px */
    height: 71px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary.white {
    background-color: var(--white);
    color: var(--primary-blue);
}

/* Pondering Man Image Logic */
.relative-wrapper {
    position: relative;
    z-index: 1;
}

.ponder-man-img {
    display: block;
    margin: 0 auto -25px auto;
    /* Overlap the button by 25px */
    width: 180px;
    max-width: 100%;
    position: relative;
    z-index: 1;
    pointer-events: none;
    /* Let clicks pass near edges */
}

.relative-wrapper .btn-primary {
    position: relative;
    z-index: 10;
    /* Ensure button is click-able and on top */
}

/* Ready to Enrol Section Image */
#ready-enrol .image-area img {
    max-height: 400px;
    width: auto;
    display: block;
    margin: 0 auto;
}

.btn-primary.dark {
    background-color: var(--dark-grey);
}

.btn-primary:hover {
    opacity: 0.8;
}

/* Nav Overlay */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(225, 178, 96, 0.98);
    z-index: 2000;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 100px;
    /* Allow scrolling if menu is tall */
    overflow-y: auto;
    overflow-x: hidden;
}

.nav-overlay.active {
    visibility: visible;
    opacity: 1;
}

/* When menu is open, elevate header but hide background and unrelated items */
body.menu-open .main-header {
    z-index: 2001;
    background-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    /* Let clicks pass through empty spaces */
}

/* Keep logo visible and clickable */
.nav-overlay.active~.main-header .header-logo,
body.menu-open .header-logo {
    z-index: 2005;
    position: relative;
    pointer-events: auto;
}

/* Hide other header elements but keep layout matching - specifically for hamburger menu */
body.menu-open .left-nav,
body.menu-open .right-nav {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 40px;
    background: none;
    border: none;
    cursor: pointer;
}

.desktop-side-nav ul {
    text-align: center;
}

.desktop-side-nav li {
    margin: 10px 0;
}

.desktop-side-nav a {
    font-size: 32px;
    font-weight: 400;
    transition: opacity 0.3s;
}

.desktop-side-nav a:hover {
    opacity: 0.6;
}

/* Main Sections */
main {
    margin-top: var(--header-height);
}

/* Full-bleed hero utility - for heroes that extend behind header */
.hero-fullbleed {
    margin-top: calc(-1 * var(--header-height));
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 60px;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1024px) {
    .hero-fullbleed {
        margin-top: calc(-1 * var(--header-height-mobile));
        padding-top: calc(var(--header-height-mobile) + 50px);
        padding-bottom: 50px;
        min-height: 35vh;
    }
}

.hero-section {
    padding: 120px 20px;
    /*background-image: url('assets/pondering_future.png');*/
    background-size: cover;
    background-position: center;
    position: relative;
    color: var(--white);
    /* Welcome text is white in hero */
}

/* .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 1;
} */

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section h2 {
    color: var(--dark-grey);
    /* "Take our Tour" is dark grey/black */
}

.video-container {
    max-width: 900px;
    margin: 40px auto;
    background-color: #000;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    aspect-ratio: 16 / 9;
}

/* Enrollment Section */
.enrollment-section {
    background-image: url('assets/ready_enrol_bg.jpg');
    background-size: cover;
    background-position: center;
    min-height: 482px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Student Success Section */
.success-section {
    background-color: var(--accent-tan);
}

.success-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    text-align: left;
}

.success-image img {
    width: 518px;
    height: 545px;
    object-fit: cover;
}

/* History Section */
.history-section {
    background-color: var(--primary-blue);
    color: var(--white);
}

/* Partners Grid */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: calc(2vw - 11px);
    justify-items: center;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}

.partners-grid img {
    width: 224px;
    height: 160px;
    object-fit: contain;
    margin: 0 auto;
}

/* Testimonials */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    text-align: left;
}

.testimonial-card {
    background-color: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* FAQs */
.faq-header {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 80px 20px;
}

.faq-content {
    background-color: var(--white);
    padding: 80px 20px;
}

.faq-list {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.faq-item {
    margin-bottom: 40px;
}

.faq-question {
    font-size: 26.4px;
    font-weight: 400;
    color: var(--dark-grey);
    margin-bottom: 8px;
    /* Refined spacing */
}

.faq-answer {
    font-size: var(--fs-body);
    color: var(--dark-grey);
    line-height: 1.6;
}

/* Contact Section */
.contact-section {
    background-color: var(--white);
    padding: 80px 20px;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info h1 {
    font-size: 46.08px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--dark-grey);
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
}

.form-group label span {
    font-style: italic;
    opacity: 0.6;
}

.name-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.field small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.7;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid rgb(169, 169, 169);
    background-color: rgb(250, 250, 250);
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    color: var(--dark-grey);
    border-radius: 0;
}

.contact-form .btn-primary {
    width: auto;
    min-width: 104px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

/* Footer */
.main-footer {
    padding: 60px 20px 50px;
    background-color: var(--dark-grey);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
}


.footer-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    padding-top: 5px;
}

.footer-links-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 15px;
    color: var(--white);
}

.footer-right a {
    color: var(--primary-blue);
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s;
    line-height: 1.8;
}

.footer-right a:hover {
    opacity: 0.7;
}

.footer-logo {
    width: 120px;
    height: auto;
    margin-top: 15px;
    /* Space from social icons */
}

/* Brand & Copyright */
.brand-name {
    font-size: 16px;
    font-style: italic;
    color: var(--white);
    margin-top: 5px;
}

.copyright-text {
    font-size: 13px;
    font-style: italic;
    opacity: 0.8;
    margin-top: 0;
}

/* Social Icons */
.social-links {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--white);
    transition: color 0.3s;
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

.social-icon:hover {
    color: var(--primary-blue);
}

/* Mobile Specific */
.mobile-nav {
    display: none;
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 500px;
}

.hamburger-icon {
    display: none;
    background: none;
    border: none;
    width: 30px;
    height: 24px;
    /* Increased for 3 lines */
    cursor: pointer;
    z-index: 3000;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--dark-grey);
    transition: 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* Student Success Desktop Tweaks */
#success h1 {
    white-space: nowrap;
}

#success .grid-two-col {
    align-items: start;
    /* Align content to top */
}

#success .image-area {
    margin-top: -50px;
    /* Move image up */
}

/* Helping Students Text Polish */
#helping-students p {
    font-size: 24px;
    margin-bottom: 40px;
}

/* Helping Students Video Constraint */
#helping-students .video-container {
    max-width: var(--max-width-narrow);
    /* 700px (Matches Tour section) */
    margin: 0 auto;
}

/* Academy Section Text */
#academy p {
    font-size: 24px;
}

@media (max-width: 1024px) {

    /* Mobile Typography */
    h1 {
        font-size: clamp(28px, 6vw, 42px) !important;
        /* Scales between 28px and 42px */
    }

    /* Mobile Padding Overrides */
    .section-padding {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .grid-two-col {
        gap: 30px !important;
    }

    .mt-large {
        margin-top: 40px !important;
    }

    .mt-medium {
        margin-top: 20px !important;
    }

    /* Mobile Button Tweaks */
    .btn-primary.large {
        padding: 18px 25px !important;
        /* Reduced padding */
        /*font-size: 14px !important;*/
        /* Smaller font to fit */
        height: auto !important;
        min-height: 55px;
        /* Reasonable touch target */
        white-space: normal;
        /* Allow text wrap on narrow screens */
        width: auto;
        /* Allow shrinking */
        max-width: 100%;
    }

    /* Hide desktop dropdown on mobile, keep hamburger visible */
    .left-nav {
        display: none;
    }

    .hamburger-icon {
        display: block;
    }

    /* Mobile Header - Logo left, hamburger right */
    .header-inner {
        justify-content: space-between;
    }

    .main-header {
        position: fixed;
        /* Keep header fixed on mobile */
        height: 80px;
        /* Reduced from 147px */
        background-color: var(--white);
        /* Ensure visible bg on mobile */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        /* Ensure visible separation */
    }

    .main-header.scrolled {
        height: 80px;
        /* Prevent shrinking on mobile */
    }

    main {
        margin-top: 80px;
        /* Match reduced header height */
    }

    .header-logo {
        order: -1;
        margin-right: auto;
        z-index: 2005;
        position: relative;
    }

    .header-logo img {
        width: 70px;
        height: auto;
    }

    .right-nav {
        flex: 0 0 auto;
        gap: 35px;
        /* Increased to separate button from hamburger */
    }

    .hamburger-icon {
        display: flex;
        /* Enable flex for 3-line spacing */
    }

    /* Hide Student Login button on very small screens */
    @media (max-width: 480px) {
        .right-nav .btn-primary:not(.large) {
            display: none;
        }
    }

    /* Grid stacking for two-column layouts */
    .grid-two-col {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    h2 {
        font-size: clamp(24px, 5vw, 32px);
        line-height: 1.3;
    }

    /* Button wrapper - ensure button takes full width */
    .button-wrapper {
        width: 100%;
    }

    .button-wrapper .btn-primary.large {
        display: block;
        width: 100%;
        max-width: 350px;
        /* Removed min-width: 280px - was causing overflow on narrow screens */
        margin: 0 auto;
        text-align: center;
    }

    /* All large buttons - removed min-width which caused overflow */
    .btn-primary.large {
        /* min-width: 280px; - REMOVED: caused horizontal scroll on 320px screens */
    }

    /* Contact section adjustments */
    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-info h1 {
        font-size: 48px;
    }

    /* Mobile Footer Layout */
    .footer-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    .footer-left {
        display: contents;
    }

    .footer-left .social-links {
        order: 1;
        width: 100%;
        justify-content: center;
    }

    .footer-right {
        order: 2;
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .footer-left .footer-logo {
        order: 3;
        margin-top: 10px;
    }

    .footer-left .brand-name {
        order: 4;
    }

    .footer-left .copyright-text {
        order: 5;
    }

    /* ===== MOBILE MENU REBUILD with Grid Stacking ===== */
    .mobile-nav {
        display: grid;
        grid-template-areas: "stack";
        width: 100%;
        max-width: 500px;
        /* limit width nicely */
        margin: 0 auto;
        padding-bottom: 40px;
        /* No fixed height needed, grid expands to tallest item */
        height: auto;
        min-height: 500px;
        overflow: hidden;
        /* Mask the sliding */
    }

    .mobile-root-menu {
        grid-area: stack;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
        transition: transform 0.35s ease-in-out;
        transform: translateX(0);
    }

    .mobile-root-menu a {
        font-size: 26px;
        font-weight: 500;
        color: var(--dark-grey);
        padding: 5px 20px;
        display: inline-block;
        transition: opacity 0.3s;
    }

    .mobile-root-menu .mobile-folder-trigger {
        color: var(--primary-blue);
        font-weight: 700;
    }

    .mobile-root-menu a:hover {
        opacity: 0.7;
    }

    .mobile-root-menu .btn-primary {
        margin-top: 20px;
    }

    .mobile-root-menu .mobile-login-btn {
        background-color: var(--primary-blue);
        color: var(--white) !important;
        padding: 14px 32px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 700;
        margin-top: 20px;
        text-transform: uppercase;
    }

    .mobile-root-menu .mobile-login-btn:hover {
        opacity: 0.9;
    }

    .mobile-root-menu .enrol-link {
        /* optional to make it stand out
        color: var(--primary-blue) !important;
        font-weight: 700;
        */
    }

    .mobile-root-menu.hidden {
        /* Slide out to left when sub-menu enters */
        transform: translateX(-100%);
        /* Keep display block/flex so it holds its height in grid if needed, 
           though typically sub-menu is taller. Pointer events disabled? */
        pointer-events: none;
        opacity: 0;
    }

    /* Mobile sub-menu with slide transition */
    .mobile-sub-menu {
        grid-area: stack;
        /* Position relative implicit in grid flow */
        width: 100%;
        background-color: rgba(225, 178, 96, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        /* No top padding needed if aligned well */
        transform: translateX(100%);
        transition: transform 0.35s ease-in-out;
        z-index: 10;
        pointer-events: none;
        /* Ignore clicks when hidden */
    }

    .mobile-sub-menu.active {
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Section element order on mobile (image first, then text) */
    #success .grid-two-col {
        display: flex;
        flex-direction: column;
    }

    #success .image-area {
        order: 1;
    }

    #success .content-area {
        order: 2;
    }

    .mobile-sub-menu .back-to-main {
        background: none;
        border: none;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 30px;
        color: var(--dark-grey);
    }

    .mobile-sub-menu ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .mobile-sub-menu ul a {
        font-size: 22px;
        font-weight: 500;
        color: var(--dark-grey);
        transition: opacity 0.3s;
    }

    .mobile-sub-menu ul a:hover {
        opacity: 0.7;
    }


    /* Academy Section Typography */
    #academy p {
        font-size: 22px;
        line-height: 1.5;
    }


    /* Restore Success Section Mobile Layout */
    #success .grid-two-col {
        display: flex;
        flex-direction: column;
    }

    #success .content-area {
        display: contents;
        /* Ungroup content so children can be ordered with image */
    }

    #success h1 {
        order: 1;
        text-align: center !important;
        /* Force center */
        margin-bottom: 40px !important;
        /* Larger gap */
        white-space: normal !important;
        /* Allow wrap */
        width: 100%;
    }

    #success .image-area {
        order: 2;
        margin-bottom: 20px;
    }

    #success h2 {
        order: 3;
        text-align: center;
    }

    #success .button-wrapper {
        order: 4;
    }

    /* Academy Section Mobile Layout */
    #academy .grid-two-col {
        display: flex;
        flex-direction: column;
    }

    #academy .content-area {
        display: contents;
    }

    #academy h1 {
        order: 1;
        text-align: center;
        margin-bottom: 10px;
        /* Reduced gap above image */
        padding-top: 60px;
        /* Extra space above title */
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    #academy .image-area {
        order: 2;
        margin-bottom: 10px;
        /* Reduced gap below image */
    }

    #academy .image-area img {
        max-height: 280px;
        width: auto;
        margin: 0 auto;
        display: block;
    }

    #academy p {
        order: 3;
        text-align: center;
    }

    #academy .mt-large {
        order: 4;
        text-align: center;
    }

    /* Ready to Enrol Section Mobile Layout */
    #ready-enrol .grid-two-col {
        display: flex !important;
        flex-direction: column !important;
    }

    #ready-enrol .content-area {
        display: contents !important;
        /* Ungroup content */
    }

    #ready-enrol h1 {
        order: 1 !important;
        /* Title First */
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    #ready-enrol .image-area {
        order: 2 !important;
        /* Image Middle */
        margin-bottom: 20px !important;
    }

    #ready-enrol .mt-medium {
        /* Button Wrapper */
        order: 3 !important;
        /* Button Last */
        text-align: center !important;
    }

}

/* Mobile Margin Adjustment for small screens */
@media (max-width: 450px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Fix for button text overflow on mobile */
@media (max-width: 480px) {

    .btn-primary {
        white-space: normal !important;
        height: auto !important;
        padding: 15px 15px !important;
        line-height: 1.3 !important;
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        text-align: center;
    }

    /* Large buttons take full width on mobile */
    .btn-primary.large {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix Partners grid overflow - stack to single column */
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .partners-grid img {
        width: 100%;
        max-width: 180px;
        height: auto;
    }

    /* Fix Contact form name inputs - stack vertically */
    .name-inputs {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Reduce contact info h1 font size */
    .contact-info h1 {
        font-size: 32px;
    }

    /* Fix long email/text overflow in contact-info */
    .contact-info {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .contact-info p,
    .contact-info a {
        word-break: break-all;
        overflow-wrap: anywhere;
    }
}

/* ==========================================================================
   AJAX Form Message Styles
   ========================================================================== */
.form-message {
    padding: 15px 20px;
    border-radius: 8px;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    display: none;
    animation: fadeInMessage 0.3s ease-out;
}

.form-message.success,
.form-message.error {
    display: block;
}

.form-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disabled button state during form submission */
.ajax-form button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}