/* --- HERO SECTION --- */
       /* 1. SETUP: Tell the browser these variables are colors so they can fade smoothly */
       @property --hero-c1 {
           syntax: '<color>';
           inherits: false;
           initial-value: #006bab;
       }

       @property --hero-c2 {
           syntax: '<color>';
           inherits: false;
           initial-value: #f7f9fa;
       }

       @property --hero-c3 {
           syntax: '<color>';
           inherits: false;
           initial-value: #C7F2A7;
       }

       @property --blob-c1 {
           syntax: '<color>';
           inherits: false;
           initial-value: #C7F2A7;
       }

       @property --blob-c2 {
           syntax: '<color>';
           inherits: false;
           initial-value: #006bab;
       }

       .hero {
           min-height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           /* background: linear-gradient(135deg, var(--mv-blue) 0%, var(--bg-light) 50%, var(--mv-accent) 100%); */
           position: relative;
           overflow: hidden;
           padding-top: 80px;

           /* New Animated Gradient */
           /* We map the gradient to the animated variables defined above */
           background: linear-gradient(135deg,
                   var(--hero-c1) 0%,
                   var(--hero-c2) 50%,
                   var(--hero-c3) 100%);

           /* This runs the 'moodShift' animation over 20 seconds */
           animation: moodShift 5s infinite alternate ease-in-out;
       }

       .hero::before,
       .hero::after {
           content: '';
           position: absolute;
           border-radius: 50%;
           filter: blur(80px);
           /* Reduced slightly for better performance */
           z-index: 0;
           opacity: 0.5;
       }

       .hero::before {
           width: 400px;
           height: 400px;
           background: var(--mv-accent);
           top: -100px;
           left: -100px;
           /* Moves the blob gently */
           animation: floatBlob1 5s infinite alternate ease-in-out;
       }

       .hero::after {
           width: 500px;
           height: 500px;
           background: var(--pastel-blue);
           bottom: -150px;
           right: -100px;

           /* Moves and introduces the RED sparingly */
           animation: floatBlob2 8s infinite alternate ease-in-out;
       }

       .hero-content {
           position: relative;
           z-index: 1;
           max-width: 900px;
       }

       .hero-text h1 span {
           color: var(--mv-blue);
       }

       .hero-text p {
           max-width: 650px;
           margin: 0 auto 2.5rem;
       }

       /* 4. ANIMATIONS */

       /* The Main Background Shift (Subtle breathing) */
       @keyframes moodShift {
           0% {
               --hero-c1: var(--mv-blue);
               --hero-c2: var(--bg-light);
               --hero-c3: var(--mv-accent);
           }

           50% {
               --hero-c1: var(--mv-tertiary);
               /* Shift to sage green */
               --hero-c2: var(--bg-white);
               --hero-c3: var(--mv-blue);
           }

           100% {
               --hero-c1: var(--mv-blue);
               --hero-c2: #e6eef5;
               /* A slightly darker cool grey */
               --hero-c3: var(--mv-tertiary);
           }
       }

       /* Top Left Blob Motion */
       @keyframes floatBlob1 {
           0% {
               transform: translate(0, 0) scale(1);
               --blob-c1: var(--mv-accent);
           }

           100% {
               transform: translate(50px, 100px) scale(1.1);
               --blob-c1: var(--mv-tertiary);
           }
       }

       /* Bottom Right Blob Motion - Contains the Red Hint */
       @keyframes floatBlob2 {
           0% {
               transform: translate(0, 0) scale(1);
               --blob-c2: var(--mv-blue);
           }

           50% {
               /* Here is the SPARING use of Red. 
           It blends with the blur to create a warm purple/sunset vibe 
           before fading back to blue. */
               --blob-c2: var(--mv-red);
               opacity: 0.4;
               /* Lower opacity so the red isn't harsh */
               transform: translate(-100px, -50px) scale(0.9);
           }

           100% {
               transform: translate(-50px, 20px) scale(1.2);
               --blob-c2: var(--mv-blue);
           }
       }

       /* --- RESPONSIVE HOME STYLES --- */

       /* Tablet & Large Mobile (Under 968px) */
       @media (max-width: 968px) {
           /* .hero {
               padding: 20px 0;
           } */

           .section-spacer {
               padding: 250px 0;
               /* Reduced from 200px  */
           }

           .pillars-grid {
               grid-template-columns: repeat(2, 1fr);
               /* 3 columns to 2  */
               gap: 24px;
           }

           .zigzag-layout {
               grid-template-columns: 1fr;
               /* Stack images and text  */
               gap: 40px;
           }

           .division-grid {
               grid-template-columns: 1fr;
               /* Stack division cards  */
           }

           .quote-text {
               font-size: 1.5rem;
               /* Downsized from 2rem for readability  */
           }
       }

       /* Small Mobile (Under 600px) */
       @media (max-width: 600px) {
           .section-spacer {
               padding: 150px 0;
               /* Tighten up spacing further  */
           }

           .pillars-grid {
               grid-template-columns: 1fr;
               /* Single column for pillars  */
           }

           .pillar-card {
               padding: 30px 20px;
               /* Reduced padding for small screens  */
           }

           .division-card {
               height: 350px;
               /* Shorter cards on mobile  */
           }

           /* Reverse Zig-Zag order for mobile so text always follows image (Optional) */
           /* To use this, ensure your HTML structure is consistent */
           .zigzag-layout>*:nth-child(1) {
               order: 2;
           }

           .zigzag-layout>*:nth-child(2) {
               order: 1;
           }

           .logo-cloud {
               gap: 20px;
           }

           .logo-cloud img {
               height: 30px;
               /* Smaller partner logos  */
           }
       }