@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&display=swap');

/* ========================================
   COLOR PALETTE & CSS VARIABLES
   ======================================== */
/* Define custom CSS variables for consistent theming throughout the website */
:root {
    --bg-base: #f5f0fa;
    --primary-purple: #9b72c8;
    --primary-purple-dark: #6b3a6e;
    --primary-purple-light: #e8d8f8;
    --text-dark: #3d2465;
    --text-light: #7a5c9e;
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(196, 168, 224, 0.35);
    --glass-shadow: 0 8px 32px rgba(61, 36, 101, 0.08);
}

/* ========================================
   GLOBAL STYLES
   ======================================== */
/* Reset all default margins, padding, and set border-box sizing for consistency */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Responsive layout scaling and smooth scrolling */
html {
    scroll-behavior: smooth;
    /* Automatically scales layout down slightly on smaller displays */
    font-size: clamp(14px, 0.95vw, 16px);
}

/* Base body styles with radial gradients for depth */
body {
    background-color: var(--bg-base);
    background-image: 
        radial-gradient(circle at 10% 10%, rgba(155, 114, 200, 0.15), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(107, 58, 110, 0.08), transparent 40%);
    font-family: 'DM Sans', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* Subtle Noise Texture Overlay - instantly makes the site feel premium */
body::before {
    content: "";
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04; /* Very subtle grain */
    z-index: -3; /* Stays at the very back */
    pointer-events: none;
}

/* Paragraph styling for better readability */
p {
    font-size: 1.05rem;
    line-height: 1.7;
    letter-spacing: 0.3px;
    margin-bottom: 1.2rem;
    font-weight: 400;
}

/* Strong/bold text emphasis */
strong, b {
    font-weight: 600;
}

/* All headings and logo */
h1, h2, h3, h4, .logo { 
    font-family: 'Fraunces', serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

h1 {
    font-size: 3.5rem;
    font-weight: 800; /* Extra bold for hero sections */
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0.8rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0px;
    margin-bottom: 0.6rem;
}

h4 {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ========================================
   KEYFRAME ANIMATIONS
   ======================================== */
/* Fade in animation with upward movement - creates elegant entrance effect for elements */
@keyframes fadeInUp {
    from {
        opacity: 0; /* Start invisible */
        transform: translateY(30px); /* Start 30px lower */
    }
    to {
        opacity: 1; /* End fully visible */
        transform: translateY(0); /* Move to normal position */
    }
}

/* Simple fade in animation - just changes opacity without movement */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide in from left - element enters from the left side */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px); /* Start 30px to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Move to normal position */
    }
}

/* Slide in from right - element enters from the right side */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(30px); /* Start 30px to the right */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* Move to normal position */
    }
}

/* ========================================
   ANIMATION TRANSITIONS
   ======================================== */
/* Apply fadeInUp animation to all main sections - creates smooth page transitions */
main > section {
    animation: fadeInUp 0.8s ease-out;
}

/* Smooth transition for glass cards when hovering or being interacted with */
.glass-card, .hub-card {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ========================================
   DYNAMIC INTERCONNECTED BACKGROUND
   ======================================== */
/* Container for the interactive particles canvas */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Stays behind all page content */
    pointer-events: none; /* Doesn't interfere with user interactions */
}

/* ========================================
   DYNAMIC BACKGROUND (Canvas & Soft Blobs)
   ======================================== */
/* Container for the interactive interconnected particles */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Above the noise, below the content */
    pointer-events: none; 
}

/* Container for floating background blobs */
.bg-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; /* Behind the canvas */
    pointer-events: none; 
}

/* Individual blob element - softened for depth */
.blob {
    position: absolute;
    filter: blur(100px); /* Heavier blur for a softer, glowing effect */
    opacity: 0.55; /* Lower opacity so it doesn't wash out text */
    animation: float 15s infinite alternate ease-in-out; 
    border-radius: 50%; 
}

/* First blob - purple tint */
.blob-1 {
    width: 50vw;
    height: 50vw;
    background: #e8d8f8;
    top: -10%;
    left: -10%;
}

/* Second blob - white tint */
.blob-2 {
    width: 60vw;
    height: 60vw;
    background: #ffffff;
    bottom: -20%;
    right: -10%;
    animation-delay: 4s; 
}

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(50px, 80px) scale(1.1); }
}

/* ========================================
   GLASSMORPHISM DESIGN SYSTEM
   ======================================== */
/* Core glassmorphism classes - creates the frosted glass effect for cards, nav, footer */
.glass-panel, .glass-card, .glass-nav, .glass-footer {
    background: var(--glass-bg); /* Semi-transparent white background */
    backdrop-filter: blur(16px); /* Blur effect for glass appearance */
    -webkit-backdrop-filter: blur(16px); /* Safari compatibility for blur effect */
    border: 1px solid var(--glass-border); /* Light border for definition */
    box-shadow: var(--glass-shadow); /* Subtle purple shadow for depth */
}

/* ========================================
   NAVIGATION BAR (RESTORED TO ORIGINAL)
   ======================================== */
.glass-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 5%;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    animation: slideInFromLeft 0.6s ease-out;
}

.logo { font-size: 1.8rem; color: var(--primary-purple); font-weight: 700; letter-spacing: -0.5px; }

.nav-links { display: flex; list-style: none; gap: 2rem; }
.nav-links a { text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 0.95rem; transition: all 0.3s ease; }
.nav-links a:hover { color: var(--primary-purple); transform: translateY(-2px); }

/* Navigation link hover state - changes color and moves up slightly */
.nav-links a:hover { color: var(--primary-purple); transform: translateY(-2px); }

/* ========================================
   BUTTON STYLES
   ======================================== */
/* Primary button - solid black, used for main CTAs (Call To Action) */
.btn-primary {
    background-color: #000000; 
    color: #ffffff !important; 
    padding: 0.8rem 1.8rem; 
    border-radius: 30px; 
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    display: inline-block; 
}

/* Primary button hover state */
.btn-primary:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 12px 24px rgba(0,0,0,0.2); 
}

/* Secondary button - transparent with crisp black border */
.btn-secondary {
    background-color: transparent;
    color: #000000 !important; 
    padding: 0.8rem 1.8rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #000000 !important; 
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

/* Secondary button hover state - fills with black */
.btn-secondary:hover { 
    background-color: #000000 !important; 
    color: #ffffff !important; 
    transform: translateY(-3px); 
}

/* ========================================
   HERO SECTION
   ======================================== */
/* Hero container - centered intro section at top of page */
.hero-container {
    max-width: 900px;
    margin: 5rem auto; /* Center horizontally, space from top */
    padding: 4rem 2rem;
    text-align: center;
    border-radius: 32px;
    animation: fadeInUp 0.8s ease-out; /* Smooth entrance animation */
}

/* Hero heading - large, bold main title */
.hero h1 {
    font-size: 3.5rem;
    line-height: 1.2; /* Tight line height for large text */
    margin-bottom: 1.5rem;
    letter-spacing: -1px; /* Tighter spacing for large text */
    font-family: big-caslon, serif; /* Elegant serif font for hero heading */
}

/* Subtext - supporting text below main heading */
.subtext {
    font-size: 1.15rem;
    color: var(--text-light); /* Lighter color for secondary text */
    max-width: 700px;
    margin: 0 auto 2.5rem;
}

/* Hero button container - holds multiple buttons side by side */
.hero-buttons {
    display: flex;
    justify-content: center; /* Center buttons horizontally */
    gap: 1rem; /* Space between buttons */
    margin-bottom: 1.5rem;
}

/* Micro text - small supporting text below buttons */
.micro-text {
    font-size: 0.85rem;
    color: var(--text-light);
    opacity: 0.8; /* Slightly transparent */
}

/* ========================================
   SECTION LAYOUTS
   ======================================== */
/* Split section - two columns side by side with content and imagery */
.split-section {
    display: flex;
    gap: 3rem; /* Space between columns */
    max-width: 1200px;
    margin: 6rem auto;
    padding: 0 5%;
    align-items: center;
    animation: fadeInUp 0.8s ease-out;
}

/* Split section items - both columns get flex layout and hover effects */
.split-section > * {
    flex: 1; /* Equal width columns */
    border-radius: 24px;
    padding: 3rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Split section hover - lifts up on hover */
.split-section > *:hover {
    transform: translateY(-5px);
}

/* Grid section - container for card grids and major content areas */
.grid-section {
    max-width: 1200px;
    margin: 6rem auto;
    padding: 0 5%;
    animation: fadeInUp 0.8s ease-out;
}

/* Section title - large centered heading for each major section */
.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: -0.5px;
}

/* ========================================
   CARD STYLES
   ======================================== */
/* Card grid - responsive grid layout for cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Auto-responsive columns */
    gap: 2rem;
}

/* Glass card - individual card with glassmorphism effect */
.glass-card {
    padding: 2rem;
    border-radius: 24px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Floating card hover - lifts and adds shadow on hover */
.floating-card:hover {
    transform: translateY(-10px); /* Move up 10px on hover */
    box-shadow: 0 20px 40px rgba(192, 124, 212, 0.15); /* Enhanced shadow */
}

/* Card headings - bold text for card titles */
.glass-card h2, .glass-card h3 {
    margin-bottom: 1rem;
}

/* Card paragraph text - lighter color for body text */
.glass-card p {
    color: var(--text-light);
}

/* Center button wrapper - centers buttons within cards */
.center-btn-wrapper {
    text-align: center;
    margin-top: 3rem;
}

/* ========================================
   OPPORTUNITIES HUB SECTION
   ======================================== */
/* Hub section - container for opportunities grid and content */
.hub-section {
    max-width: 1200px;
    margin: 6rem auto;
    padding: 4rem;
    border-radius: 32px;
}

/* Hub grid - responsive grid for opportunity cards */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: 1.5rem;
}

/* Hub card - individual opportunity card */
.hub-card {
    display: flex;
    flex-direction: column; /* Stack content vertically */
}

/* Tags container - holds multiple tags for categorization */
.tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap; /* Wrap tags to next line if needed */
}

/* Individual tag - category or deadline label */
.tag {
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600; /* Bold for prominence */
    text-transform: uppercase; /* All caps for tags */
}

/* Category tag - purple background for category tags */
.tag.category {
    background: rgba(192, 124, 212, 0.2); /* Light purple background */
    color: var(--primary-purple);
}

/* Deadline tag - subtle dark background for deadline tags */
.tag.deadline {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-dark);
}

/* Text link - clickable link within cards, grows to fill space */
.text-link {
    margin-top: auto; /* Push to bottom of card */
    font-weight: 600;
    color: var(--primary-purple);
    text-decoration: none;
    padding-top: 1rem;
}

/* Text link hover - adds underline on hover */
.text-link:hover {
    text-decoration: underline;
}

/* ========================================
   FOOTER
   ======================================== */
/* Glass footer - main footer container with glassmorphism style */
.glass-footer {
    padding: 3rem 5%;
    margin-top: 6rem;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    animation: fadeInUp 0.8s ease-out 0.2s both; /* Delayed entrance animation */
}

/* Footer content - horizontal layout for logo and links */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    margin-bottom: 2rem;
}

/* Footer logo - branding in footer */
.footer-logo {
    font-size: 1.5rem;
    color: var(--primary-purple);
    font-weight: 700;
    transition: all 0.3s;
}

/* Footer logo link - new logo image style */
.footer-logo-link {
    display: inline-block;
    transition: all 0.3s ease;
}

/* Footer logo link hover - scales up on hover */
.footer-logo-link:hover {
    transform: scale(1.1);
}

/* Footer logo hover - scales up on hover */
.footer-logo:hover {
    transform: scale(1.05); /* Slightly enlarge */
}

/* Footer links - horizontal list of footer navigation */
.footer-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* Footer link - individual footer link styling */
.footer-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Footer link hover - changes color and lifts up */
.footer-links a:hover {
    color: var(--primary-purple);
    transform: translateY(-2px);
}

/* Footer bottom - copyright text and divider */
.footer-bottom {
    text-align: center;
    color: var(--text-light);
    font-size: 0.85rem;
    border-top: 1px solid rgba(0,0,0,0.1); /* Subtle divider line */
    padding-top: 2rem;
}

/* ========================================
   INTERACTIVE EFFECTS
   ======================================== */
/* Interactive hover for photos */
.hover-photo-container {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    cursor: pointer;
    display: block; /* For anchor tags */
}

.hover-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.hover-photo-container:hover img {
    transform: scale(1.04);
}

/* Scroll-up reveal animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Ripple effect - creates circular ripple animation on element click */
.ripple {
    position: absolute;
    border-radius: 50%; /* Circular shape */
    background: rgba(155, 114, 200, 0.3);
    transform: scale(0); /* Start at center point */
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none; /* Doesn't block user interactions */
}

/* Ripple animation - expands and fades out */
@keyframes rippleEffect {
    to {
        transform: scale(4); /* Expand to 4x size */
        opacity: 0; /* Fade to invisible */
    }
}

/* ========================================
   SCROLLBAR CUSTOMIZATION
   ======================================== */
/* Scrollbar width - controls width of vertical scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

/* Scrollbar track - background area of scrollbar */
::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* Subtle light background */
}

/* Scrollbar thumb - draggable portion of scrollbar */
::-webkit-scrollbar-thumb {
    background: var(--primary-purple); /* Purple color matching brand */
    border-radius: 4px;
}

/* Scrollbar thumb hover - darker on hover */
::-webkit-scrollbar-thumb:hover {
    background: #3d2465;
}

/* ========================================
   IMAGE CONTAINERS & PLACEHOLDERS
   ======================================== */
/* Image placeholder - styled box shown while images load or as fallback */
.img-placeholder {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, rgba(192, 124, 212, 0.2), rgba(232, 176, 255, 0.2)); /* Purple gradient */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--primary-purple);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    border: 2px dashed rgba(192, 124, 212, 0.3); /* Dashed border */
    transition: all 0.3s ease;
}

/* Image placeholder hover - enhances visibility on hover */
.img-placeholder:hover {
    background: linear-gradient(135deg, rgba(192, 124, 212, 0.3), rgba(232, 176, 255, 0.3)); /* More opaque gradient */
    border-color: var(--primary-purple);
    transform: scale(1.02); /* Slight enlarge */
}

/* Split image - larger placeholder for layout images */
.split-image {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, rgba(192, 124, 212, 0.15), rgba(232, 176, 255, 0.15)); /* Subtle gradient */
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--primary-purple);
    border: 2px dashed rgba(192, 124, 212, 0.3);
    font-size: 1rem;
}

/* Image card - container for card with image */
.image-card {
    display: flex;
    flex-direction: column;
}

/* Image card placeholder spacing - adds margin below image */
.image-card .img-placeholder {
    margin-bottom: 1rem;
}

/* ========================================
   RESPONSIVE IMAGES
   ======================================== */
/* General image styling - all images are responsive and rounded */
img {
    max-width: 100%; /* Never wider than container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 16px;
    display: block; /* Remove inline spacing */
}

/* ========================================
   ADVANCED IMAGE INTEGRATION (Background Images with Overlay)
   ======================================== */
/* Image hero section - full-width hero with background image and overlay */
.image-hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    overflow: hidden; /* Clip rounded corners */
}

/* Image hero section overlay - glassmorphic layer over background image */
.image-hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(192, 124, 212, 0.35), rgba(235, 169, 255, 0.25)); /* Purple gradient overlay */
    backdrop-filter: blur(4px); /* Slight blur for glass effect */
    -webkit-backdrop-filter: blur(4px);
    z-index: 1; /* Sits above background image */
}

/* Hero content - text content that appears above overlay */
.image-hero-content {
    position: relative;
    z-index: 2; /* Above overlay */
    text-align: center;
    color: black;
    font-family: abril-fatface, serif;
}

/* Image card background - base for cards with background images */
.image-card-background {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    overflow: hidden;
}

/* Image card background overlay - glassmorphic layer for cards */
.image-card-background::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(192, 124, 212, 0.35); /* Purple overlay */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
    border-radius: 24px;
}

/* Card content wrapper - content that sits above background and overlay */
.card-content-wrapper {
    position: relative;
    z-index: 2; /* Above overlay */
    padding: 2rem;
}

/* Card image - image inside a card */
.card-image {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Crop to fill without stretching */
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

/* ========================================
   IMAGE CARDS WITH BACKGROUND IMAGES
   ======================================== */
/* Image card with background - card that uses background image as backdrop */
.image-card-with-bg {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Content at bottom */
    padding: 2rem;
    background-size: cover;
    background-position: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Image card with background overlay - glassmorphic layer */
.image-card-with-bg::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(192, 124, 212, 0.4); /* Purple overlay */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

/* Image card with background hover - lifts on hover */
.image-card-with-bg:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(192, 124, 212, 0.2);
}

/* Image card content - text content above overlay */
.image-card-content {
    position: relative;
    z-index: 2; /* Above overlay */
}

/* ========================================
   RESPONSIVE DESIGN (Mobile & Tablet)
   ======================================== */
@media (max-width: 768px) {
    /* Scale down base text size */
    html { font-size: 14px; }

    /* De-cluster layouts with more breathing room */
    .hero-container { padding: 2rem 1.5rem; margin: 2rem 1rem; }
    .split-section { flex-direction: column; gap: 2.5rem; padding: 0 1.5rem; text-align: center; }
    .split-section .hero-text { padding-right: 0; }
    .split-section .hero-text p { text-align: center !important; margin-bottom: 2rem; }
    .split-section .hero-text div { justify-content: center; flex-wrap: wrap; }
    .grid-section { padding: 0 1.5rem; }

    /* Bulletproof Mobile Navbar Stacking */
    .glass-nav { 
        flex-direction: column; 
        padding: 1.5rem; 
        gap: 1.5rem; 
    }
    .glass-nav > a.logo { flex: unset; justify-content: center; width: 100%; margin: 0; }
    .glass-nav > nav { flex: unset; width: 100%; }
    .nav-links { 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 1rem; 
        width: 100%;
    }
    .glass-nav > .nav-btn { 
        flex: unset; 
        width: 100% !important; 
        text-align: center; 
        margin: 0; 
    }

    /* Mobile "Hover" Fixes - Forces content to be visible on touch screens */
    .image-card-with-bg { min-height: 250px; justify-content: center; }
    .image-card-with-bg::before { background: rgba(107, 58, 110, 0.6); } /* Darker overlay so text is readable */
    .hover-photo-container img { transform: scale(1.02); } /* Gives a slight tapped/zoomed feel automatically */
}
/* ========================================
   HAMBURGER MENU & NAV FIX (BULLETPROOF)
   ======================================== */
/* --- DESKTOP RULES --- */
.glass-nav { 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
}
.nav-top-row { 
    display: flex !important; 
    justify-content: space-between; 
    align-items: center; 
    width: auto !important; 
}
.hamburger { 
    display: none; 
    cursor: pointer; 
    color: var(--primary-purple); 
}
.glass-nav > .nav-menu { 
    display: block !important; 
}
.glass-nav > .nav-btn { 
    display: inline-block !important; 
    white-space: nowrap !important; /* Forces text onto one line */
    flex-shrink: 0 !important; /* Stops the button from being squished */
    width: auto !important; 
}

/* --- MOBILE RULES --- */
@media (max-width: 768px) {
    .glass-nav { flex-direction: column !important; align-items: flex-start !important; padding: 1.5rem !important; }
    .nav-top-row { width: 100% !important; }
    .hamburger { display: block !important; } 
    
    /* Hide menu/button by default */
    .glass-nav > .nav-menu, 
    .glass-nav > .nav-btn { display: none !important; width: 100% !important; margin-top: 1.5rem; }
    
    /* Show when clicked */
    .glass-nav > .nav-menu.active { display: block !important; }
    .glass-nav > .nav-btn.active { display: inline-block !important; text-align: center !important; margin: 1.5rem 0 0 0 !important; }
    
    .nav-links { flex-direction: column !important; gap: 1.5rem; text-align: center; width: 100%; }
    .nav-links li { width: 100%; }
}