/* === STYLE 0 === */

    :root {
      /* Universal Dynamic Manifest Variables */
      --primary-color: #035f75;
      --color-primary-color: #035f75;
      --primary-color-full: #035f75;

      --primary-color: #035f75;
      
      
      
      /* Full values (can be gradients) */
      --primary-full: #035f75;
      

      /* Link globals.css semantic variables to these dynamic variables */
      --color-primary: var(--primary-color);
      --color-primary-dark: color-mix(in srgb, var(--primary-color) 80%, black);
      --color-primary-contrast: #FFFFFF;
      
      

      /* Custom Graph colors derived from primary color but keeping distinct base hues */
      --color-graph-appeared: color-mix(in srgb, var(--primary-color) 30%, #38bdf8);
      --color-graph-passed: color-mix(in srgb, var(--primary-color) 30%, #10b981);
      --color-graph-aplus: color-mix(in srgb, var(--primary-color) 30%, #f59e0b);
      --color-graph-avg: color-mix(in srgb, var(--primary-color) 30%, #8b5cf6);
    }
    
    html:not(.dark) {
      
      
      
      
      
    }

    html.dark {
      
      
      
      
      
    }
    
    /* Font Override */
    body {
      font-family: inherit;
    }

    /* Primary Background Overrides - Use full value (supports gradients) */
    
    .bg-primary, 
    .bg-blue-950,
    .bg-blue-900,
    .bg-blue-800,
    .bg-blue-950-dark,
    .bg-\(--color-primary\) { 
      background: var(--primary-full); 
      color: var(--color-primary-contrast, #FFFFFF) !important;
    }
    .bg-primary *, 
    .bg-blue-950 *,
    .bg-blue-900 *,
    .bg-blue-800 *,
    .bg-blue-950-dark *,
    .bg-\(--color-primary\) * { 
      color: inherit;
    }
    
    
    /* Secondary Background Overrides - Use full value (supports gradients) */
    
    
    /* Page Background Overrides */
    

    /* Card / Surface Overrides */
    

    /* Footer Background Overrides */
    
    
    /* Text Color Overrides */
    
    .text-primary,
    .text-blue-950,
    .text-blue-900 {
      color: var(--primary-color);
    }
    
    
    

    /* Heading Color Overrides */
    

    /* Body Text Color Overrides - Exclude primary background containers */
    

    /* Typography Overrides */
    
      
      :root {
        
        
        
        
        
        
      }

      

      body, p, span:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), li, a:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), input, textarea, select, button {
        
      }

      h1, h2, h3, h4, h5, h6, .font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
        
        
        
      }

      
      h1 { font-size: calc(1.8rem * 1.25) !important; }
      h2 { font-size: calc(1.4rem * 1.25) !important; }
      h3 { font-size: calc(1.15rem * 1.25) !important; }
      

      
      

    /* Border Radius Overrides */
    

    /* Accent & Border Overrides */
    
    .border-blue-950, 
    .border-blue-900,
    .border-blue-950-dark,
    .border-primary {
      border-color: var(--primary-color);
    }
    

    

    

    /* Ring Color Overrides */
    

    /* Dynamic Button Overrides */
    

    

    /* Dynamic Active Navigation Link Overrides */
    
  
/* === STYLE 1 === */

              html.translating-wait body {
                opacity: 0.94 !important;
              }
              body {
                transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1);
              }
            
/* === STYLE 2 === */

    :root {
      /* Universal Dynamic Manifest Variables */
      --primary-color: #035f75;
      --color-primary-color: #035f75;
      --primary-color-full: #035f75;

      --primary-color: #035f75;
      
      
      
      /* Full values (can be gradients) */
      --primary-full: #035f75;
      

      /* Link globals.css semantic variables to these dynamic variables */
      --color-primary: var(--primary-color);
      --color-primary-dark: color-mix(in srgb, var(--primary-color) 80%, black);
      --color-primary-contrast: #FFFFFF;
      
      

      /* Custom Graph colors derived from primary color but keeping distinct base hues */
      --color-graph-appeared: color-mix(in srgb, var(--primary-color) 30%, #38bdf8);
      --color-graph-passed: color-mix(in srgb, var(--primary-color) 30%, #10b981);
      --color-graph-aplus: color-mix(in srgb, var(--primary-color) 30%, #f59e0b);
      --color-graph-avg: color-mix(in srgb, var(--primary-color) 30%, #8b5cf6);
    }
    
    html:not(.dark) {
      
      
      
      
      
    }

    html.dark {
      
      
      
      
      
    }
    
    /* Font Override */
    body {
      font-family: inherit;
    }

    /* Primary Background Overrides - Use full value (supports gradients) */
    
    .bg-primary, 
    .bg-blue-950,
    .bg-blue-900,
    .bg-blue-800,
    .bg-blue-950-dark,
    .bg-\(--color-primary\) { 
      background: var(--primary-full); 
      color: var(--color-primary-contrast, #FFFFFF) !important;
    }
    .bg-primary *, 
    .bg-blue-950 *,
    .bg-blue-900 *,
    .bg-blue-800 *,
    .bg-blue-950-dark *,
    .bg-\(--color-primary\) * { 
      color: inherit;
    }
    
    
    /* Secondary Background Overrides - Use full value (supports gradients) */
    
    
    /* Page Background Overrides */
    

    /* Card / Surface Overrides */
    

    /* Footer Background Overrides */
    
    
    /* Text Color Overrides */
    
    .text-primary,
    .text-blue-950,
    .text-blue-900 {
      color: var(--primary-color);
    }
    
    
    

    /* Heading Color Overrides */
    

    /* Body Text Color Overrides - Exclude primary background containers */
    

    /* Typography Overrides */
    
      
      :root {
        
        
        
        
        
        
      }

      

      body, p, span:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), li, a:not(.font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *), input, textarea, select, button {
        
      }

      h1, h2, h3, h4, h5, h6, .font-heading, h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
        
        
        
      }

      
      h1 { font-size: calc(1.8rem * 1.25) !important; }
      h2 { font-size: calc(1.4rem * 1.25) !important; }
      h3 { font-size: calc(1.15rem * 1.25) !important; }
      

      
      

    /* Border Radius Overrides */
    

    /* Accent & Border Overrides */
    
    .border-blue-950, 
    .border-blue-900,
    .border-blue-950-dark,
    .border-primary {
      border-color: var(--primary-color);
    }
    

    

    

    /* Ring Color Overrides */
    

    /* Dynamic Button Overrides */
    

    

    /* Dynamic Active Navigation Link Overrides */
    
  
/* === STYLE 3 === */

              #zenova-header {
                background-color: var(--color-bg-white, #ffffff);
              }
              html.dark #zenova-header, .dark #zenova-header {
                background-color: #0f172a;
              }
              #zenova-branding {
                background-color: var(--color-bg-white, #ffffff) !important;
              }
              html.dark #zenova-branding, .dark #zenova-branding {
                background-color: #0f172a !important;
              }
              #zenova-nav {
                background-color: var(--color-bg-white, #ffffff) !important;
              }
              html.dark #zenova-nav, .dark #zenova-nav {
                background-color: #0f172a !important;
              }

              @keyframes slideInFromLeft {
                from { transform: translateX(-100%); }
                to  { transform: translateX(0); }
              }
              @keyframes fadeInBackdrop {
                from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
                to   { opacity: 1; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
              }
              .drawer-panel {
                animation: slideInFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
              }
              #mobile-drawer {
                width: 75% !important;
                max-width: 340px !important;
                z-index: 60 !important;
              }
              .drawer-acc-icon.rotate-180 {
                transform: rotate(180deg);
              }
              #drawer-backdrop {
                z-index: 55 !important;
                background-color: rgba(0, 0, 0, 0.55) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
              }
              .drawer-backdrop {
                animation: fadeInBackdrop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
              }
            
/* === STYLE 4 === */

        @keyframes float-gentle-1 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-7px); }
        }
        @keyframes float-gentle-2 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-11px); }
        }
        @keyframes float-gentle-3 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-5px); }
        }
        .float-1 { animation: float-gentle-1 5s ease-in-out infinite; }
        .float-2 { animation: float-gentle-2 6s ease-in-out infinite; }
        .float-3 { animation: float-gentle-3 7s ease-in-out infinite; }

        .card-gloss-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: radial-gradient(circle 140px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.12), transparent 75%);
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: 15;
        }
        .group:hover .card-gloss-overlay {
          opacity: 1;
        }

        .vertical-text {
          writing-mode: vertical-rl;
          transform: rotate(180deg);
        }
        
/* === STYLE 5 === */

        @keyframes teamCardEntrance {
          0% {
            opacity: 0;
            transform: translateY(36px) scale(0.95);
          }
          65% {
            opacity: 0.9;
            transform: translateY(-2px) scale(1.005);
          }
          100% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        .team-card-animate {
          opacity: 0;
          transform: translateY(36px) scale(0.95);
          will-change: opacity, transform;
        }

        .team-grid-visible .team-card-animate {
          animation: teamCardEntrance 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        @media (prefers-reduced-motion: reduce) {
          .team-card-animate {
            opacity: 1 !important;
            transform: none !important;
            animation: none !important;
          }
        }
      
/* === STYLE 6 === */

        @keyframes float-gentle-1 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-8px); }
        }
        @keyframes float-gentle-2 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-14px); }
        }
        @keyframes float-gentle-3 {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-6px); }
        }
        .float-1 { animation: float-gentle-1 5s ease-in-out infinite; }
        .float-2 { animation: float-gentle-2 6s ease-in-out infinite; }
        .float-3 { animation: float-gentle-3 7s ease-in-out infinite; }

        .glass-container {
          background: rgba(15, 23, 42, 0.25);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .card-gloss-overlay {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: radial-gradient(circle 180px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.12), transparent 75%);
          opacity: 0;
          transition: opacity 0.3s ease;
        }
        .group:hover .card-gloss-overlay {
          opacity: 1;
        }

        .vertical-text {
          writing-mode: vertical-rl;
          text-orientation: mixed;
          transform: rotate(180deg);
        }
      
/* === STYLE 7 === */

        @keyframes evSlideIn {
          from { opacity: 0; transform: translateY(16px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes evImgIn {
          from { opacity: 0; transform: scale(0.97) translateY(14px); }
          to   { opacity: 1; transform: scale(1)    translateY(0); }
        }
        @keyframes evProgress {
          from { height: 0%; }
          to   { height: 100%; }
        }
        @keyframes galleryFadeIn {
          from { opacity: 0; transform: scale(1.04); }
          to   { opacity: 1; transform: scale(1); }
        }
        @keyframes lbFadeIn {
          from { opacity: 0; }
          to   { opacity: 1; }
        }

        /* ── Lightbox responsive ── */
        @media (max-width: 640px) {
          /* On small screens, tighten padding so nav arrows don't overlap the image */
          .lb-nav-btn {
            padding: 8px 10px !important;
            font-size: 22px !important;
          }
          .lb-prev-btn {
            left: 8px !important;
          }
          .lb-next-btn {
            right: 8px !important;
          }
          .lb-close-btn {
            top: 10px !important;
            right: 10px !important;
            width: 34px !important;
            height: 34px !important;
            font-size: 18px !important;
          }
        }

        .heg-sub-btn {
          display: none;
        }

        /* ── Layout ── */
        .heg-header {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          margin-bottom: var(--space-10);
          flex-wrap: wrap;
          gap: var(--space-4);
        }

        .heg-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--space-8);
          align-items: start;
        }

        /* Strip heights (desktop)
           Aligned to 500px to match the right-hand Bento box perfectly.
           85px ghost-prev + 330px (16:9 ratio at 580px width) + 85px ghost-next = 500px */
        .heg-strip       { height: 500px; }
        .heg-ghost-prev  { height: 85px; }
        .heg-main-img    { top: 85px; height: calc(500px - 85px - 85px); } /* 330px -> ~16:9 aspect ratio */
        .heg-ghost-next  { height: 85px; }

        /* Bento height (desktop) */
        .heg-bento { height: 500px; }

        /* ── Tablet (≤ 1024px) ── */
        @media (max-width: 1024px) {
          .heg-grid {
            grid-template-columns: 1fr;
            gap: var(--space-10);
          }
          .heg-strip      { height: 490px; }
          .heg-ghost-prev { height: 75px; }
          .heg-main-img   { top: 75px; height: calc(490px - 75px - 75px); } /* 340px */
          .heg-ghost-next { height: 75px; }
          .heg-bento      { height: 440px; }
        }

        /* ── Mobile (≤ 640px) ── */
        @media (max-width: 640px) {
          .heg-header {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: var(--space-6);
          }
          /* Mobile slider: ghost+main heights sum to 340px */
          .heg-strip      { height: 340px; }
          .heg-ghost-prev { height: 50px; }
          .heg-main-img   { top: 50px; height: calc(340px - 50px - 50px); } /* 240px -> 16:10 ratio at ~380px */
          .heg-read-story-btn {
            left: auto !important;
            right: var(--space-3) !important;
            transform: none !important;
            bottom: var(--space-3) !important;
            padding: 4px 10px !important;
            font-size: 10px !important;
            gap: 4px !important;
          }

          .heg-header-btn {
            display: none !important;
          }
          .heg-sub-btn {
            display: inline-flex !important;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            border: 1px solid var(--color-primary);
            border-radius: 99px;
            font-size: 9px;
            font-weight: var(--fw-bold);
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: transparent;
            text-decoration: none;
            transition: all 0.2s ease;
            white-space: nowrap;
          }
          .heg-sub-btn:hover {
            background: var(--color-primary);
            color: white;
          }
          .heg-moments-title-container {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: var(--space-2) !important;
          }
          .heg-latest-btn {
            display: inline-flex !important;
            align-items: center;
            gap: 4px;
            padding: 3px 10px !important;
            border: 1px solid var(--color-primary) !important;
            border-radius: 99px !important;
            font-size: 9px !important;
            font-weight: var(--fw-bold) !important;
            color: var(--color-primary) !important;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: transparent !important;
            text-decoration: none;
            transition: all 0.2s ease;
            white-space: nowrap;
            box-shadow: none !important;
            transform: none !important;
          }
          .heg-latest-btn:hover {
            background: var(--color-primary) !important;
            color: white !important;
            transform: none !important;
          }

          /* Bento: single-column, full-width tiles with dynamic heights to display full images without cropping */
          .heg-bento {
            height: auto !important;
            grid-template-columns: 1fr !important;
            gap: var(--space-3) !important;
          }
          /* Large tile (first child) */
          .heg-bento > :first-child {
            width: 100% !important;
            height: auto !important;
          }
          /* Right column wrapper becomes single column */
          .heg-bento > div:last-child {
            display: grid !important;
            grid-template-columns: 1fr !important;
            grid-template-rows: unset !important;
            gap: var(--space-3) !important;
            height: auto !important;
            width: 100% !important;
          }
          /* Two smaller tiles */
          .heg-bento > div:last-child > * {
            width: 100% !important;
            height: auto !important;
          }

          /* Keep images full, no cuts, no side spaces on small devices */
          .heg-tile-wrapper {
            height: auto !important;
            width: 100% !important;
          }
          .heg-tile-inner {
            height: auto !important;
            width: 100% !important;
          }
          .heg-tile-img {
            position: relative !important;
            width: 100% !important;
            height: auto !important;
            inset: auto !important;
            object-fit: contain !important;
          }
        }

        /* ── Small mobile (≤ 400px) ── */
        @media (max-width: 400px) {
          .heg-strip      { height: 300px; }
          .heg-ghost-prev { height: 46px; }
          .heg-main-img   { top: 46px; height: calc(300px - 46px - 46px); } /* 208px */
          .heg-ghost-next { height: 46px; }
        }
      

/* ================= HEADER FIXED & SCROLL TRANSFORMATION ================= */
#zenova-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--color-bg-white, #ffffff);
    transition: box-shadow 0.4s ease, background-color 0.4s ease;
    will-change: transform;
}

#zenova-header-spacer {
    display: block;
    width: 100%;
    height: var(--header-h, 175px);
    pointer-events: none;
    overflow-anchor: none;
    transition: height 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: height;
}

body.scrolled #zenova-header {
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -1px rgba(0, 0, 0, 0.08);
}

/* 1. Green Topbar: Collapses smoothly on scroll */
#zenova-topbar {
    max-height: 48px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.75s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.45s ease;
    will-change: max-height, opacity;
}

body.scrolled #zenova-topbar {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* 2. Middle Branding Bar */
#zenova-branding {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    transition: padding 0.75s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
    will-change: padding;
}

@media (max-width: 1023px) {
    #zenova-header-spacer {
        height: var(--header-h, 195px);
    }
    body.scrolled #zenova-header-spacer {
        height: var(--header-scrolled-h, 54px) !important;
    }
}

@media (min-width: 1024px) {
    #zenova-header-spacer {
        height: var(--header-h, 175px);
    }
    body.scrolled #zenova-header-spacer {
        height: var(--header-scrolled-h, 92px) !important;
    }

    /* Force hide mobile view on desktop so it NEVER takes up space */
    #zenova-mobile-view {
        display: none !important;
    }

    /* Desktop 3-Column Balanced Horizontal Grid (Logo Left, Name Center, Button Right) */
    #zenova-branding-inner {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    #zenova-logo-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
    }

    #zenova-logo-image {
        height: 72px !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: height 0.75s cubic-bezier(0.25, 1, 0.5, 1), width 0.75s cubic-bezier(0.25, 1, 0.5, 1);
        will-change: height, width;
    }

    #zenova-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    #zenova-enroll-lg {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    #zenova-branding {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        transition: padding 0.75s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
    }

    body.scrolled #zenova-branding {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

    body.scrolled #zenova-logo-image {
        height: 42px !important;
    }

    #zenova-h1 {
        transition: font-size 0.75s cubic-bezier(0.25, 1, 0.5, 1), line-height 0.75s ease;
    }

    body.scrolled #zenova-h1 {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
    }

    #zenova-details-desktop {
        max-height: 120px;
        opacity: 1;
        overflow: hidden;
        transition: max-height 0.65s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, margin 0.65s ease;
    }

    body.scrolled #zenova-details-desktop {
        max-height: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        display: none !important;
    }

    body.scrolled #zenova-enroll-lg a {
        padding: 0.45rem 1.25rem !important;
        font-size: 12px !important;
    }
}

/* Mobile Crossfade Architecture (Silky Smooth Dissolve & Glide) */
@media (max-width: 1023px) {
    /* Force hide desktop inner on mobile */
    #zenova-branding-inner {
        display: none !important;
    }
    #zenova-mobile-view {
        display: flex !important;
    }
    #zenova-branding {
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
        transition: padding 0.75s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease !important;
    }

    #zenova-mobile-view {
        position: relative !important;
        width: 100% !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* 1. Full Mobile Branding (Unscrolled State: Fully Visible with Full Name & All Details) */
    #zenova-mobile-full {
        opacity: 1 !important;
        transform: translateY(0) scale(1) !important;
        transition: opacity 0.38s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), max-height 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
        pointer-events: auto !important;
        max-height: 600px !important;
        overflow: visible !important;
        will-change: opacity, transform, max-height;
    }

    #zenova-details {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* 2. Compact Mobile Branding (Unscrolled State: Hidden) */
    #zenova-mobile-compact {
        opacity: 0 !important;
        transform: translateY(6px) !important;
        pointer-events: none !important;
        transition: opacity 0.28s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        will-change: opacity, transform;
    }

    /* 3. Hamburger Toggle Button */
    #zenova-mobile-toggle {
        position: absolute !important;
        right: 0.25rem !important;
        top: 0.4rem !important;
        z-index: 20 !important;
        transition: top 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* === SCROLLED STATE: Smooth Crossfade === */
    body.scrolled #zenova-branding {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }

    /* Big logo & centered title smoothly dissolve out upwards */
    body.scrolled #zenova-mobile-full {
        opacity: 0 !important;
        transform: translateY(-8px) scale(0.97) !important;
        pointer-events: none !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: opacity 0.28s ease, transform 0.35s ease, max-height 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* Compact bar with small left logo smoothly fades in */
    body.scrolled #zenova-mobile-compact {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1) 0.18s, transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) 0.18s !important;
    }

    /* Hamburger smoothly glides to vertical center */
    body.scrolled #zenova-mobile-toggle {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* 3. Navigation Bar: Stays separate below the branding bar */
#zenova-nav {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.25s ease;
}

/* ================= RESPONSIVE HERO SECTION ON MOBILE ================= */
@media (max-width: 768px) {
    .hero-section,
    .hero-section.hero-section--full {
        min-height: 380px !important;
        height: auto !important;
        aspect-ratio: auto !important;
    }
    
    .hero-content-wrap {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .hero-content-wrap > div {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        gap: 0.6rem !important;
    }

    .hero-cta-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: nowrap !important;
    }
}

/* ================= HERO PROMO CAROUSEL SLIDE IN/OUT ANIMATIONS ================= */
.hero-promo-deck {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
}

.hero-promo-card-wrapper {
    will-change: transform, opacity;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.hero-promo-card-wrapper.promo-slide-hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 1;
    transform: translateY(-100%);
}

.hero-promo-card-wrapper.promo-slide-active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 10;
    transform: translateY(0);
}

.hero-promo-card-wrapper.promo-slide-enter-down {
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
    animation: promoSlideEnterDown 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-promo-card-wrapper.promo-slide-exit-down {
    visibility: visible;
    pointer-events: none;
    z-index: 5;
    animation: promoSlideExitDown 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-promo-card-wrapper.promo-slide-enter-up {
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
    animation: promoSlideEnterUp 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.hero-promo-card-wrapper.promo-slide-exit-up {
    visibility: visible;
    pointer-events: none;
    z-index: 5;
    animation: promoSlideExitUp 0.65s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes promoSlideEnterDown {
    0% { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes promoSlideExitDown {
    0% { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(100%); }
}

@keyframes promoSlideEnterUp {
    0% { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes promoSlideExitUp {
    0% { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-100%); }
}



/* ================= 2. SECTION 2 (CAMPUS FOCUS & STATS & NOTICES) EXACT FROM AL-FURQAN ================= */
.sb-statsbar-section{width:100%;background:var(--color-bg-white);padding:clamp(1rem,2vw,1.5rem)0}.dark .sb-statsbar-section{background:var(--color-bg-white)}.empty-state-wrapper{padding:24px 16px;text-align:center;border:1.5px dashed var(--sb-panel-divider);border-radius:16px;color:var(--sb-notice-snippet);font-size:14px}.sb-statsbar-section{--sb-card-bg:var(--color-card-bg, #FFFFFF);--sb-card-border:var(--color-card-border, #E2EBF3);--sb-card-shadow:0 4px 24px 0 color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 18%, transparent);--sb-icon-color:var(--color-primary, #0EA5E9);--sb-stat-value:var(--color-text-main, #0F172A);--sb-stat-label:var(--color-text-muted, #64748B);--sb-panel-bg:var(--color-card-bg, #FFFFFF);--sb-panel-border:var(--color-card-border, #E2EBF3);--sb-panel-shadow:0 10px 30px -5px color-mix(in srgb, var(--color-primary, #0EA5E9) 6%, transparent);--sb-panel-title:var(--color-text-main, #0F172A);--sb-panel-divider:var(--color-card-border, #E2EBF3);--sb-panel-action:var(--color-primary, #0EA5E9);--sb-title-icon:var(--color-primary, #0EA5E9);--sb-notice-bg:var(--color-card-bg, #FFFFFF);--sb-notice-border:var(--color-card-border, #E2EBF3);--sb-notice-hover-shadow:0 6px 20px color-mix(in srgb, var(--color-primary, #0EA5E9) 12%, transparent);--sb-date-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 10%, transparent);--sb-date-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 20%, transparent);--sb-date-color:var(--color-primary, #0EA5E9);--sb-notice-title:var(--color-text-main, #0F172A);--sb-notice-snippet:var(--color-text-muted, #475569);--sb-board-bg:var(--color-card-bg, #FFFFFF);--sb-board-border:var(--color-card-border, #E2EBF3);--sb-board-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 10%, transparent);--sb-board-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 20%, transparent);--sb-board-icon-color:var(--color-primary, #0EA5E9);--sb-board-text:var(--color-text-main, #0F172A);--sb-campus-bg:var(--color-card-bg, #FFFFFF);--sb-campus-border:var(--color-card-border, #E2EBF3);--sb-campus-shadow:0 10px 30px -5px color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-campus-badge-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-campus-badge-text:var(--color-primary-dark, #0284C7);--sb-campus-title:var(--color-text-main, #0F172A);--sb-campus-accent:var(--color-primary, #0EA5E9);--sb-campus-desc:var(--color-text-muted, #475569);--sb-campus-meta-bg:var(--color-subcard-bg, #F8FAFC);--sb-campus-meta-border:var(--color-card-border, #E2EBF3);--sb-campus-meta-label:var(--color-text-muted, #64748B);--sb-campus-meta-value:var(--color-text-main, #0F172A);--sb-campus-meta-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 8%, transparent);--sb-campus-meta-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 18%, transparent);--sb-campus-meta-icon-color:var(--color-primary, #0EA5E9);--sb-campus-btn-bg:var(--color-primary, #0EA5E9);--sb-campus-btn-text:var(--color-bg-white, #FFFFFF);--sb-img-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 4%, transparent)}.dark .sb-statsbar-section{--sb-card-bg:var(--color-card-bg, #1E293B);--sb-card-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-card-shadow:0 4px 24px 0 rgba(0,0,0,0.2);--sb-icon-bg:color-mix(in srgb, var(--color-primary, #38BDF8) 10%, transparent);--sb-icon-border:color-mix(in srgb, var(--color-primary, #38BDF8) 20%, transparent);--sb-icon-color:var(--color-primary, #38BDF8);--sb-stat-value:var(--color-text-main, #F8FAFC);--sb-stat-label:var(--color-text-muted, #94A3B8);--sb-panel-bg:var(--color-card-bg, #1E293B);--sb-panel-border:var(--color-card-border, rgba(255,255,255,0.04));--sb-panel-shadow:0 10px 30px -5px rgba(0,0,0,0.25);--sb-panel-title:var(--color-text-main, #E2E8F0);--sb-panel-divider:var(--color-card-border, rgba(255,255,255,0.06));--sb-panel-action:var(--color-primary, #38BDF8);--sb-title-icon:var(--color-primary, #38BDF8);--sb-notice-bg:var(--color-subcard-bg, #0F172A);--sb-notice-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-notice-hover-shadow:0 6px 20px rgba(0,0,0,0.4);--sb-date-bg:color-mix(in srgb, var(--color-primary, #38BDF8) 10%, transparent);--sb-date-border:color-mix(in srgb, var(--color-primary, #38BDF8) 20%, transparent);--sb-date-color:var(--color-primary, #38BDF8);--sb-notice-title:var(--color-text-main, #F8FAFC);--sb-notice-snippet:var(--color-text-muted, #94A3B8);--sb-board-bg:var(--color-subcard-bg, #0F172A);--sb-board-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-board-icon-bg:color-mix(in srgb, var(--color-primary, #38BDF8) 10%, transparent);--sb-board-icon-border:color-mix(in srgb, var(--color-primary, #38BDF8) 20%, transparent);--sb-board-icon-color:var(--color-primary, #38BDF8);--sb-board-text:var(--color-text-main, #E2E8F0);--sb-campus-bg:var(--color-card-bg, #1E293B);--sb-campus-border:var(--color-card-border, rgba(255,255,255,0.05));--sb-campus-shadow:0 10px 30px -5px rgba(0,0,0,0.3);--sb-campus-badge-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 15%, transparent);--sb-campus-badge-text:var(--color-primary, #38BDF8);--sb-campus-title:var(--color-text-main, #F8FAFC);--sb-campus-accent:var(--color-primary, #38BDF8);--sb-campus-desc:var(--color-text-muted, #94A3B8);--sb-campus-meta-bg:var(--color-subcard-bg, rgba(255,255,255,0.02));--sb-campus-meta-border:var(--color-card-border, rgba(255,255,255,0.06));--sb-campus-meta-label:var(--color-text-muted, #64748B);--sb-campus-meta-value:var(--color-text-main, #E2E8F0);--sb-campus-meta-icon-bg:color-mix(in srgb, var(--color-primary, #0EA5E9) 10%, transparent);--sb-campus-meta-icon-border:color-mix(in srgb, var(--color-primary, #0EA5E9) 20%, transparent);--sb-campus-meta-icon-color:var(--color-primary, #38BDF8);--sb-campus-btn-bg:var(--color-primary, #0EA5E9);--sb-campus-btn-text:var(--color-text-main, #FFFFFF);--sb-img-bg:color-mix(in srgb, var(--color-text-main, #FFFFFF) 3%, transparent)}.stat-card{flex:1 1 0;background:var(--sb-card-bg);border-radius:16px;border:1.5px solid var(--sb-card-border);box-shadow:var(--sb-card-shadow);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px;padding:24px 20px;min-width:0;transition:background.3s ease,border-color.3s ease}.stat-icon-bubble{border-radius:50%;background:var(--sb-icon-bg);border:1.5px solid var(--sb-icon-border);color:var(--sb-icon-color);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;margin-bottom:0px}.stat-content-wrapper{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}.stat-value{font-size:1.75rem;font-weight:800;color:var(--sb-stat-value);line-height:1.1;letter-spacing:-.02em;transition:color.3s ease;white-space:nowrap}.stat-label{margin-top:4px;font-size:10.5px;font-weight:700;color:var(--sb-stat-label);text-transform:uppercase;letter-spacing:.07em;transition:color.3s ease}.sb-stats-row{display:flex;gap:var(--space-6);--stats-gap:var(--space-6);align-items:stretch;margin-bottom:var(--space-12)}.sb-stats-row--count-2 .stat-card,.sb-stats-row--count-3 .stat-card{padding:24px 24px;gap:24px;justify-content:center}.sb-stats-row--count-4 .stat-card{padding:20px 20px;gap:18px;justify-content:center}.sb-stats-row--count-4 .stat-icon-bubble{width:44px;height:44px;margin-bottom:0px}.sb-stats-row--count-4 .stat-value{font-size:1.55rem}.sb-stats-row--count-4 .stat-label{font-size:9.5px;margin-top:3px}.sb-stats-row--count-5 .stat-card{padding:16px 16px;gap:14px;justify-content:center}.sb-stats-row--count-5 .stat-icon-bubble{width:38px;height:38px;margin-bottom:0px}.sb-stats-row--count-5 .stat-value{font-size:1.35rem}.sb-stats-row--count-5 .stat-label{font-size:8.5px;margin-top:2px}.sb-stats-row--count-more-5 .stat-card{flex:0 0 calc((100% - 4*var(--stats-gap))/5);min-width:calc((100% - 4*var(--stats-gap))/5);padding:16px 16px;gap:14px;justify-content:center}.sb-stats-row--count-more-5 .stat-icon-bubble{width:38px;height:38px;margin-bottom:0px}.sb-stats-row--count-more-5 .stat-value{font-size:1.35rem}.sb-stats-row--count-more-5 .stat-label{font-size:8.5px;margin-top:2px}.sb-stats-row--scroll{overflow-x:scroll;-webkit-overflow-scrolling:touch;padding-bottom:14px;flex-wrap:nowrap;scroll-snap-type:x mandatory;scrollbar-width:auto;scrollbar-color:rgba(14,165,233,.6)rgba(14,165,233,.12)}.sb-stats-row--scroll .stat-card{scroll-snap-align:start}.sb-stats-row--scroll::-webkit-scrollbar{height:8px;display:block}.sb-stats-row--scroll::-webkit-scrollbar-track{background:rgba(14,165,233,.12);border-radius:4px}.sb-stats-row--scroll::-webkit-scrollbar-thumb{background:rgba(14,165,233,.55);border-radius:4px}.sb-stats-row--scroll::-webkit-scrollbar-thumb:hover{background:rgba(14,165,233,.75)}.sb-main-grid{display:grid;grid-template-columns:2.7fr 1.3fr;gap:var(--space-8)}.sb-campus-col{min-width:0;height:100%}.sb-notices-col{display:flex;flex-direction:column;gap:var(--space-4);min-width:0;height:100%}.sb-notices-col .notice-panel{flex:0 0 auto;display:flex;flex-direction:column}.sb-notices-col .notice-panel:last-child{flex:1;min-height:0}.dark-campus-card-wrapper{background:var(--sb-campus-bg);border-radius:24px;border:1.5px solid var(--sb-campus-border);box-shadow:var(--sb-campus-shadow);overflow:hidden;transition:background.3s ease,border-color.3s ease;height:100%;display:flex;flex-direction:column}.campus-focus-badge{align-self:flex-start;background:var(--sb-campus-badge-bg);color:var(--sb-campus-badge-text);font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}.campus-card-title{font-size:clamp(18px,2.5vw,26px);font-weight:800;color:var(--sb-campus-title);margin-bottom:12px;line-height:1.25;transition:color.3s ease}.campus-card-title-accent{color:var(--sb-campus-accent)}.campus-card-desc{color:var(--sb-campus-desc);font-size:clamp(13px,1.5vw,15px);line-height:1.75;margin-bottom:20px;transition:color.3s ease}.campus-meta-item{background:var(--sb-campus-meta-bg);border-radius:12px;padding:clamp(10px,2vw,14px)clamp(12px,2vw,16px);border:1.5px solid var(--sb-campus-meta-border);display:flex;align-items:center;gap:10px;transition:background.3s ease,border-color.3s ease}.campus-meta-icon{width:34px;height:34px;border-radius:8px;flex-shrink:0;background:var(--sb-campus-meta-icon-bg);border:1px solid var(--sb-campus-meta-icon-border);color:var(--sb-campus-meta-icon-color);display:flex;align-items:center;justify-content:center}.campus-meta-label{font-size:9.5px;font-weight:700;color:var(--sb-campus-meta-label);text-transform:uppercase;letter-spacing:.06em}.campus-meta-value{font-size:clamp(14px,1.8vw,16px);font-weight:800;color:var(--sb-campus-meta-value);line-height:1.2;margin-top:2px;transition:color.3s ease}.campus-profile-link{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--sb-campus-btn-bg);color:var(--sb-campus-btn-text);padding:clamp(11px,2vw,15px)clamp(20px,3vw,28px);border-radius:16px;font-weight:700;text-decoration:none;font-size:clamp(13px,1.5vw,14px);width:100%;box-sizing:border-box;transition:opacity.2s ease;margin-top:auto}.campus-profile-link:hover{opacity:.9}.notice-panel{background:var(--sb-panel-bg);border-radius:24px;border:1.5px solid var(--sb-panel-border);box-shadow:var(--sb-panel-shadow);padding:20px 16px;transition:background.3s ease,border-color.3s ease;display:flex;flex-direction:column}.notice-panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1.5px solid var(--sb-panel-divider);margin-bottom:10px}.notice-panel-title{font-size:20px;font-weight:800;color:var(--sb-panel-title);margin:0;display:flex;align-items:center;gap:10px;transition:color.3s ease}.notice-title-icon-wrapper{display:inline-flex;align-items:center;color:var(--sb-title-icon)}.notice-panel-action{font-size:13px;font-weight:700;color:var(--sb-panel-action);text-decoration:none;transition:opacity.2s}.notice-panel-action:hover{opacity:.8}.notice-panel-content{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}.scrollable-notices-container,.scrollable-board-container{height:278px!important;overflow-y:auto!important;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:var(--color-primary)transparent;padding-right:4px}.scrollable-notices-container::-webkit-scrollbar,.scrollable-board-container::-webkit-scrollbar{width:5px}.scrollable-notices-container::-webkit-scrollbar-track,.scrollable-board-container::-webkit-scrollbar-track{background:transparent}.scrollable-notices-container::-webkit-scrollbar-thumb,.scrollable-board-container::-webkit-scrollbar-thumb{background-color:var(--color-primary);border-radius:3px}.notice-item-row{display:flex;align-items:center;gap:16px;padding:8px 10px;text-decoration:none;background:var(--sb-notice-bg);border:none;box-shadow:none!important;border-radius:16px;transition:transform.2s,background.3s;flex-shrink:0!important}.notice-item-row:hover{transform:translatey(-2px);box-shadow:none!important}.notice-date-badge{flex-shrink:0;width:48px;height:48px;border-radius:12px;border:1.5px solid var(--sb-date-border);background:var(--sb-date-bg);display:flex;flex-direction:column;align-items:center;justify-content:center}.notice-date-day{font-size:15px;font-weight:800;color:var(--sb-date-color);line-height:1.1}.notice-date-month{font-size:9px;font-weight:800;color:var(--sb-date-color);text-transform:uppercase;letter-spacing:.02em}.notice-item-details{flex:1;min-width:0}.notice-item-title{font-size:14px;font-weight:700;color:var(--sb-notice-title);margin:0 0 4px;line-height:1.3;word-break:break-word}.notice-item-snippet{font-size:13.5px;color:var(--sb-notice-snippet);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-item-row{display:flex;align-items:center;gap:16px;padding:8px 10px;text-decoration:none;background:var(--sb-board-bg);border:none;box-shadow:none!important;border-radius:16px;transition:transform.2s,background.3s;flex-shrink:0!important}.board-item-row:hover{transform:translatey(-2px);box-shadow:none!important}.board-item-icon-bubble{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:var(--sb-board-icon-bg);border:1.5px solid var(--sb-board-icon-border);color:var(--sb-board-icon-color);display:flex;align-items:center;justify-content:center}.board-item-icon-bubble svg{width:20px!important;height:20px!important}.board-item-text{font-size:14px;color:var(--sb-board-text);font-weight:700;line-height:1.45;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.campus-meta-grid{width:100%}@media(max-width:1100px){.campus-meta-grid{grid-template-columns:repeat(2,1fr)!important}.campus-meta-grid.has-scroll{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;gap:12px!important;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.campus-meta-grid.has-scroll .campus-meta-item{flex:0 0 calc((100% - 12px)/2)!important;min-width:calc((100% - 12px)/2)!important;scroll-snap-align:start}}@media(min-width:769px)and (max-width:1100px){.sb-stats-row{gap:var(--space-4);--stats-gap:var(--space-4);margin-bottom:var(--space-8)}.stat-card{padding:16px 16px;gap:18px;justify-content:center}.stat-icon-bubble{width:44px;height:44px;margin-bottom:0px}.stat-value{font-size:1.45rem}.stat-label{font-size:9.5px}.sb-main-grid{grid-template-columns:1fr}.sb-notices-col{display:flex;flex-direction:column;gap:var(--space-6)}}@media(max-width:768px){.sb-stats-row{overflow-x:scroll!important;-webkit-overflow-scrolling:touch;padding-bottom:14px;display:flex!important;flex-wrap:nowrap!important;gap:12px!important;margin-bottom:var(--space-6)}.sb-stats-row .stat-card{flex:0 0 165px!important;min-width:165px!important;box-sizing:border-box!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;padding:14px 16px!important;gap:14px!important;border-radius:12px}.sb-stats-row .stat-icon-bubble{width:36px!important;height:36px!important;margin-bottom:0px!important}.sb-stats-row .stat-icon-bubble svg{width:16px!important;height:16px!important}.sb-stats-row .stat-value{font-size:1.15rem!important}.sb-stats-row .stat-label{font-size:8px!important;margin-top:2px!important}.sb-main-grid{grid-template-columns:1fr;gap:var(--space-6)}.notice-panel{padding:16px 12px;border-radius:20px}.notice-item-row,.board-item-row{gap:10px;padding:8px 10px}.notice-date-badge,.board-item-icon-bubble{width:44px;height:44px;min-width:44px;border-radius:10px}.notice-date-day{font-size:14px}.notice-date-month{font-size:8.5px}.board-item-text{font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding:0;margin:0}.notice-item-title{font-size:13.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin:0 0 2px}.notice-item-snippet{font-size:12px}}@media(max-width:480px){.sb-stats-row{margin-bottom:var(--space-5)}}

/* ================= LEADERSHIP & SPEECH DETAIL PAGE LAYOUT ================= */
.message-detail-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    padding: 2.5rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
}

.dark .message-detail-card {
    background: #0f172a;
    border-color: #1e293b;
}

.message-profile-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8fafc;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    border: 1px solid #f1f5f9;
}

.dark .message-profile-col {
    background: #1e293b;
    border-color: #334155;
}

.message-profile-img {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffffff;
    margin-bottom: 1rem;
}

.message-content-col {
    min-width: 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #334155;
}

.dark .message-content-col {
    color: #cbd5e1;
}

@media (max-width: 899px) {
    .message-detail-card {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .message-profile-col {
        padding: 1.5rem;
    }
}

/* ================= COMPLETE RESPONSIVE GRID & COLUMN ENGINE ================= */
.contact-layout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    width: 100%;
}

.two-column-layout-8-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    width: 100%;
}

@media (min-width: 1024px) {
    .contact-layout-grid {
        grid-template-columns: 5fr 7fr;
        gap: 2.5rem;
    }
    .two-column-layout-8-4 {
        grid-template-columns: 8fr 4fr;
        gap: 2.5rem;
    }

    /* Universal 12-Column Grid Fallbacks for all blade files */
    .lg\:grid-cols-12 {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        width: 100% !important;
    }
    .lg\:col-span-12 { grid-column: span 12 / span 12 !important; }
    .lg\:col-span-10 { grid-column: span 10 / span 10 !important; }
    .lg\:col-span-9  { grid-column: span 9 / span 9 !important; }
    .lg\:col-span-8  { grid-column: span 8 / span 8 !important; }
    .lg\:col-span-7  { grid-column: span 7 / span 7 !important; }
    .lg\:col-span-6  { grid-column: span 6 / span 6 !important; }
    .lg\:col-span-5  { grid-column: span 5 / span 5 !important; }
    .lg\:col-span-4  { grid-column: span 4 / span 4 !important; }
    .lg\:col-span-3  { grid-column: span 3 / span 3 !important; }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Contact Page Map & Grid Styling */
.contact-map-container iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 240px !important;
    border: 0 !important;
    display: block;
}

/* ================= EXECUTIVE LEADERSHIP CARD LAYOUT ================= */
.executive-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    align-items: center !important;
    background: #ffffff !important;
    border-radius: 1.25rem !important;
    padding: 1.5rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.25s ease-in-out !important;
    text-decoration: none !important;
    color: inherit !important;
}

.dark .executive-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

.executive-card:hover {
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.12) !important;
    border-color: var(--color-primary, #035f75) !important;
    transform: translateY(-2px) !important;
}

.executive-photo-wrapper {
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    background: #f1f5f9 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    border: 2px solid #f8fafc !important;
    flex-shrink: 0 !important;
}

.dark .executive-photo-wrapper {
    background: #1e293b !important;
    border-color: #334155 !important;
}

.executive-photo-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    transition: transform 0.35s ease !important;
}

.executive-card:hover .executive-photo-wrapper img {
    transform: scale(1.04) !important;
}

.executive-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
}

/* Tablet & Desktop layout: Side-by-side fixed photo column & flexible text column */
@media (min-width: 640px) {
    .executive-card {
        grid-template-columns: 160px 1fr !important;
        gap: 1.5rem !important;
        align-items: stretch !important;
        padding: 1.5rem !important;
        text-align: left !important;
    }
    .executive-photo-wrapper {
        width: 160px !important;
        max-width: 160px !important;
        height: 213px !important; /* 3:4 of 160px */
        margin: 0 !important;
    }
    .executive-content {
        text-align: left !important;
    }
}

@media (min-width: 1280px) {
    .executive-card {
        grid-template-columns: 180px 1fr !important;
        gap: 1.75rem !important;
    }
    .executive-photo-wrapper {
        width: 180px !important;
        max-width: 180px !important;
        height: 240px !important; /* 3:4 of 180px */
    }
}

/* ================= LEADERSHIP SHOWCASE CARDS (TOP IMAGE / BOTTOM CONTENT) ================= */
.leadership-showcase-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 1.5rem !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.06) !important;
    text-decoration: none !important;
    color: inherit !important;
    /* Primed for scroll-triggered reveal (Gentle, soft entrance without visual snap or distortion) */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.75s cubic-bezier(0.25, 1, 0.5, 1), transform 0.75s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
    will-change: opacity, transform;
}

.dark .leadership-showcase-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3) !important;
}

/* Revealed when scrolled into view: pure smooth fade in */
.leadership-showcase-card.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.leadership-showcase-card:nth-child(1).is-revealed {
    transition-delay: 0.06s !important;
}

.leadership-showcase-card:nth-child(2).is-revealed {
    transition-delay: 0.18s !important;
}

/* Smooth Interactive Hover (only after revealed) */
.leadership-showcase-card.is-revealed:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 38px -10px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--color-primary, #035f75) !important;
    border-color: var(--color-primary, #035f75) !important;
    transition-delay: 0s !important;
}

/* Image container: Natural 1:1 (Square) Aspect Ratio (Ensures full body & cap are never chopped!) */
.leadership-showcase-image-box {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 520px !important;
    background: #f1f5f9 !important;
    overflow: hidden !important;
}

.dark .leadership-showcase-image-box {
    background: #1e293b !important;
}

.leadership-showcase-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.leadership-showcase-card:hover .leadership-showcase-image-box img {
    transform: scale(1.05) !important;
}

/* Subtle Vignette at bottom of image */
.leadership-image-gradient {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Glass Badge */
.leadership-glass-badge {
    position: absolute !important;
    top: 1.15rem !important;
    left: 1.15rem !important;
    z-index: 10 !important;
    padding: 0.45rem 1rem !important;
    border-radius: 9999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--color-primary, #035f75) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.dark .leadership-glass-badge {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(51, 65, 85, 0.6) !important;
    color: #38bdf8 !important;
}

.leadership-showcase-card:hover .leadership-glass-badge {
    background: var(--color-primary, #035f75) !important;
    color: #ffffff !important;
    border-color: var(--color-primary, #035f75) !important;
}

/* Content Container */
.leadership-showcase-content {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    padding: 1.75rem !important;
}

@media (min-width: 640px) {
    .leadership-showcase-content {
        padding: 2rem !important;
    }
}

/* ================= FLOATING & STAGGERED TEACHERS SECTION ================= */
.floating-teachers-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
    padding-bottom: 2.5rem !important;
    align-items: start !important;
}

@media (min-width: 640px) {
    .floating-teachers-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
        padding-bottom: 3rem !important;
    }
}

@media (min-width: 1024px) {
    .floating-teachers-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 1.75rem !important;
        padding-bottom: 3.5rem !important;
    }
}

/* Teacher Float Pod (Sequential Reveal + Continuous Smooth Floating) */
.teacher-float-pod {
    position: relative !important;
    width: 100% !important;
    opacity: 0;
    transform: translateY(28px) scale(0.95);
    transition: opacity 0.75s cubic-bezier(0.25, 1, 0.5, 1), transform 0.75s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: opacity, transform;
}

/* Once revealed into view */
.teacher-float-pod.is-revealed {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* Staggered Vertical Offset on Pod */
@media (max-width: 639px) {
    .teacher-float-pod:nth-child(2n) {
        margin-top: 1.5rem !important;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .teacher-float-pod:nth-child(3n + 2) {
        margin-top: 2rem !important;
    }
    .teacher-float-pod:nth-child(3n) {
        margin-top: 0.75rem !important;
    }
}

@media (min-width: 1024px) {
    .teacher-float-pod:nth-child(4n + 2) {
        margin-top: 2.25rem !important;
    }
    .teacher-float-pod:nth-child(4n + 4) {
        margin-top: 2.25rem !important;
    }
    .teacher-float-pod:nth-child(4n + 3) {
        margin-top: 0.75rem !important;
    }
}

/* Continuous Floating Animations on Pod */
@keyframes teacherFloatPodA {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes teacherFloatPodB {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0px);
    }
}

.teacher-float-pod.is-revealed:nth-child(4n + 1) {
    animation: teacherFloatPodA 4.4s ease-in-out infinite 0.75s !important;
}

.teacher-float-pod.is-revealed:nth-child(4n + 2) {
    animation: teacherFloatPodB 5s ease-in-out infinite 1.2s !important;
}

.teacher-float-pod.is-revealed:nth-child(4n + 3) {
    animation: teacherFloatPodA 4.8s ease-in-out infinite 0.9s !important;
}

.teacher-float-pod.is-revealed:nth-child(4n + 4) {
    animation: teacherFloatPodB 5.2s ease-in-out infinite 1.4s !important;
}

/* Teacher Interactive Card (Inside Pod: Pure Silky Smooth Hover!) */
.teacher-interactive-card {
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 1.25rem !important;
    padding: 1.25rem !important;
    text-align: center !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.05) !important;
    cursor: pointer !important;
    outline: none !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.dark .teacher-interactive-card {
    background: #0f172a !important;
    border-color: #1e293b !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.25) !important;
}

/* Butter Smooth Hover: No frame snapping! */
.teacher-interactive-card:hover {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: 0 20px 38px -8px rgba(0, 0, 0, 0.14), 0 0 0 1px var(--color-primary, #035f75) !important;
    border-color: var(--color-primary, #035f75) !important;
    z-index: 10 !important;
}

.teacher-float-pod:hover {
    z-index: 20 !important;
}

@media (prefers-reduced-motion: reduce) {
    .teacher-float-pod {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .leadership-showcase-card {
        opacity: 1 !important;
        transform: none !important;
    }
}