/* =========================================================
   🧈 LENIS SMOOTH SCROLL BASE
========================================================= */

 html.lenis,
 html.lenis body {
     height: auto;
 }

 .lenis.lenis-smooth {
     scroll-behavior: auto !important;
 }

 .lenis.lenis-smooth [data-lenis-prevent] {
     overscroll-behavior: contain;
 }

 .lenis.lenis-stopped {
     overflow: hidden;
 }

 /* =========================================================
   ✨ REVEAL ANIMATION BASE STATES
========================================================= */

 .reveal-up {
     opacity: 0;
     transform: translateY(60px);
     transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
         transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal-up.revealed {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-fade {
     opacity: 0;
     transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal-fade.revealed {
     opacity: 1;
 }

 .reveal-scale {
     opacity: 0;
     transform: scale(0.95);
     transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
         transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal-scale.revealed {
     opacity: 1;
     transform: scale(1);
 }

 /* Staggered children */
 .reveal-stagger>* {
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
         transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .reveal-stagger.revealed>* {
     opacity: 1;
     transform: translateY(0);
 }

 .reveal-stagger.revealed>*:nth-child(1) {
     transition-delay: 0s;
 }

 .reveal-stagger.revealed>*:nth-child(2) {
     transition-delay: 0.1s;
 }

 .reveal-stagger.revealed>*:nth-child(3) {
     transition-delay: 0.15s;
 }

 .reveal-stagger.revealed>*:nth-child(4) {
     transition-delay: 0.2s;
 }

 .reveal-stagger.revealed>*:nth-child(5) {
     transition-delay: 0.25s;
 }

 .reveal-stagger.revealed>*:nth-child(6) {
     transition-delay: 0.3s;
 }

 .reveal-stagger.revealed>*:nth-child(7) {
     transition-delay: 0.35s;
 }

 /* =========================================================
   🔥 MAIN NAVBAR – BASE STATE (Wolff Olins Style)
========================================================= */

 #main-nav {
     position: fixed;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 100%;

     padding: 2rem 5rem;
     background: #ffffff;
     border-radius: 0;
     border: 1px solid transparent;

     will-change: width, border-radius, padding, background, top;
     transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* Logo default — Wolff Olins style: 24px */
 #main-logo {
     height: 24px;
     transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* Mobile sequence mask height */
 #sequence-text-wrapper-mobile {
     height: 50px;
     width: 200px;
 }


 /* Mobile sticky section — always visible text */
 @media (max-width: 767px) {
     #dark-section .flex.md\\:hidden {
         color: inherit;
     }

     /* Force words visible regardless of dark/light state */
     #sequence-text-wrapper-mobile .sequence-word-mobile {
         color: currentColor;
     }
 }


 /* Hide ALL sticky text when background is white (not dark-active) */
 #dark-section:not(.dark-active) #sequence-pin-panel {
     opacity: 0;
     pointer-events: none;
 }

 /* Show when dark */
 #dark-section.dark-active #sequence-pin-panel {
     opacity: 1;
     pointer-events: auto;
 }

 /* Smooth transition */
 #sequence-pin-panel {
     transition: opacity 0.4s ease;
 }

 /* =========================================================
   💎 WOLFF OLINS PILL – SCROLLED STATE (Never Hides)
========================================================= */

 .nav-scrolled {
     top: 1.25rem;

     width: 65%;
     max-width: 860px;

     padding: 0.65rem 2rem;

     border-radius: 999px !important;
     /* full pill like Wolff Olins */

     background: rgba(255, 255, 255, 0.82);
     backdrop-filter: blur(20px) saturate(180%);
     -webkit-backdrop-filter: blur(20px) saturate(180%);

     border: 1px solid rgba(255, 255, 255, 0.5);
     box-shadow:
         0 4px 24px rgba(0, 0, 0, 0.06),
         0 1px 3px rgba(0, 0, 0, 0.04);
 }

 .nav-scrolled #main-logo {
     padding-top: 5px;
     height: 26px;
 }

 /* Logo & nav margins — only in normal state (Wolff Olins: ~48px total) */
 .nav-logo-wrap {
     margin-left: 0;
     transition: margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .nav-links {
     margin-right: 0;
     transition: margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .nav-scrolled .nav-logo-wrap {
     margin-left: 0;
 }

 .nav-scrolled .nav-links {
     margin-right: 0;
 }

 /* =========================================================
   🌑 DARK LIQUID GLASS – FOR DARK SECTIONS
========================================================= */

 .nav-dark-glass {
     background: rgba(62, 61, 61, 0.6) !important;
     backdrop-filter: blur(24px) saturate(180%) !important;
     -webkit-backdrop-filter: blur(24px) saturate(180%) !important;

     border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
     box-shadow: 0 2px 10px rgba(114, 114, 114, 0.4);
 }

 .nav-dark-glass a,
 .nav-dark-glass #mobile-menu-btn {
     color: #ffffff !important;
 }

 .logo-invert {
     filter: invert(1) brightness(10);
 }

 #wrapper {
     will-change: transform;
 }


 #happy-spotlights {
     transition: opacity 0.3s ease, transform 0.3s ease;
     will-change: opacity, transform;
 }

 /* =========================================================
   🔄 SPIN ANIMATION
========================================================= */

 @keyframes spin-slow {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .animate-spin-slow {
     animation: spin-slow 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }


 /* =========================================================
   � SKELETON LOADER — Instagram/Facebook Style
========================================================= */

 body.skeleton-loading {
     overflow: hidden !important;
 }

 /* Hide real content initially */
 body.skeleton-loading main,
 body.skeleton-loading footer {
     opacity: 0;
 }

 /* Reveal real content */
 main,
 footer {
     transition: opacity 0.5s ease;
 }

 /* Shimmer animation */
 @keyframes shimmer {
     0% {
         background-position: -400px 0;
     }

     100% {
         background-position: 400px 0;
     }
 }

 .skeleton {
     background: linear-gradient(90deg,
             #f0f0f0 25%,
             #e0e0e0 37%,
             #f0f0f0 63%);
     background-size: 800px 100%;
     animation: shimmer 1.4s ease-in-out infinite;
     border-radius: 6px;
 }

 .skeleton-circle {
     background: linear-gradient(90deg,
             #f0f0f0 25%,
             #e0e0e0 37%,
             #f0f0f0 63%);
     background-size: 800px 100%;
     animation: shimmer 1.4s ease-in-out infinite;
     border-radius: 50%;
 }

 .skeleton-screen {
     position: fixed;
     inset: 0;
     z-index: 90;
     background: #fff;
     transition: opacity 0.4s ease, visibility 0.4s ease;
 }

 .skeleton-screen.hidden {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;
 }


 /* =========================================================
   🎨 HERO & LAYOUT STYLES
========================================================= */

 .hero-gradient-text {
     background: linear-gradient(to right, #ffffff, #cccccc);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .cta-gradient {
     background: linear-gradient(135deg, #468fe2 0%, #4d69e5 50%, #004bc3 100%);
 }

 /* Grey hover — missing from generated Tailwind CSS */
 .hover\:text-gray-400:hover {
     --tw-text-opacity: 1;
     color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }

 .group:hover .group-hover\:text-gray-400 {
     --tw-text-opacity: 1;
     color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }

 .footer-huge-text {
     font-size: 20vw;
     line-height: 0.8;
     letter-spacing: -0.05em;
     opacity: 0.1;
 }

 .play-button-hover:hover .play-icon {
     transform: scale(1.1);
 }

 .dark-active {
     background-color: #000 !important;
     color: #fff !important;
 }

 #sequence-text-wrapper {
     will-change: transform;
 }

 /* =========================================================
   🎞 Sticky scroll section
========================================================= */

 .sequence-word {
     display: block;
     margin: 0;
     padding: 0;
     will-change: transform;
     line-height: 50px;
 }

 .sequence-mask {
     height: 50px;
     overflow: hidden;
 }

 @media (min-width: 768px) {
     .sequence-word {
         line-height: 120px;
     }

     .sequence-mask {
         height: 120px;
     }

     .desktop-pad {
         padding-left: 4rem;
     }
 }




 /* =========================================================
   🎞 SWIPER CUSTOMIZATION
========================================================= */

 .swiper-pagination-bullet {
     background: #fff !important;
     opacity: 0.5;
     width: 12px;
     height: 12px;
     transition: opacity 0.45s ease;
 }

 .swiper-pagination-bullet-active {
     opacity: 1;
     background: #fff !important;
 }

 .core-framework-card {
     background: #ffffff;
     border: 1px solid #f1f1f1;
 }

/* =========================================================
   📱 MOBILE MENU — Wolff Olins floating card style
========================================================= */

/* Dimmed background overlay behind the card */
.mobile-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

@media (max-width: 767px) {
    .mobile-menu-backdrop {
        display: block;
    }
}

.mobile-menu-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Floating card — sits over the dimmed backdrop */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 45;

    /* Liquid glass */
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);

    flex-direction: column;
    justify-content: flex-start;
    padding: 0 1.2rem 1.8rem;
    border-radius: 20px;

    /* Slide-down animation */
    transform: translateY(-105%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease;
}

@media (max-width: 767px) {
    .mobile-menu-overlay {
        display: flex;
    }
}

.mobile-menu-overlay.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Fake navbar row inside the card (logo + close btn spacing) */
.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* space for the real navbar sitting on top (z-50) */
    padding-top: 4.5rem;
}

.mobile-nav-link {
    display: block;
    font-size: 1.55rem;
    font-family: inherit;
    font-weight: 400;
    color: #555;
    padding: 0.65rem 0;
    text-decoration: none;
    letter-spacing: -0.01em;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.mobile-nav-link:last-child {
    border-bottom: none;
}

.mobile-nav-link.link-visible {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-link:hover {
    color: #111;
}

/* When menu is open — style the navbar to match the card */
#main-nav.menu-open {
    top: 10px;
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    border-radius: 20px 20px 0 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border: none;
}

 #icon-close {
     display: none;
 }

 #mobile-menu-btn {
     position: relative;
     z-index: 50;
 }
/* =========================================================
   🖐 HERO SWIPER — hide arrows on mobile, swipe-only
========================================================= */
@media (max-width: 767px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/* =========================================================
   🎬 SHOWREEL — cursor-follow image
========================================================= */
.showreel-cursor-img {
    position: absolute;
    width: 340px;
    height: auto;
    top: 50%;
    left: 50%;
    opacity: 1;
    z-index: 10;
    will-change: transform;
    filter: drop-shadow(0 6px 32px rgba(0,0,0,0.30));
    pointer-events: none;
}

/* =========================================================
   🌙 DARK MODE — html.dark class-based theming
========================================================= */

/* ── Base ─────────────────────────────────────────────── */
html.dark body {
    background-color: #0d0d0d;
    color: #e8e8e8;
}

/* ── Navbar ───────────────────────────────────────────── */
html.dark #main-nav {
    background: #0d0d0d;
}

html.dark .nav-scrolled {
    background: rgba(15, 15, 15, 0.85) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html.dark .nav-dark-glass {
    background: rgba(0,0,0,0.75) !important;
}

/* Logo — dark mode uses white version via invert */
html.dark #main-logo {
    filter: invert(1) brightness(10);
}

/* Nav links */
html.dark .nav-links a,
html.dark header nav a {
    color: #bbb !important;
}

html.dark .nav-links a:hover,
html.dark header nav a:hover {
    color: #fff !important;
}

html.dark #mobile-menu-btn {
    color: #e8e8e8;
}

/* ── Sections & backgrounds ───────────────────────────── */
html.dark section,
html.dark .bg-white {
    background-color: #0d0d0d !important;
}

html.dark .bg-gray-50\/80,
html.dark [class*="bg-gray-50"] {
    background-color: #141414 !important;
}

/* Core Framework cards */
html.dark .group.rounded-2xl {
    background: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

/* Section headings with borders */
html.dark h3.border-b,
html.dark h3.border-t {
    border-color: #2a2a2a !important;
    background-color: #0d0d0d !important;
}

html.dark #happy-spotlights h3 {
    background-color: #0d0d0d !important;
}

/* ── Sticky scroll section (inverted: white bg in dark mode) ── */
html.dark #dark-section.dark-active {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
}

html.dark #dark-section.dark-active #sequence-pin-panel,
html.dark #dark-section.dark-active .sequence-word,
html.dark #dark-section.dark-active .sequence-word-mobile,
html.dark #dark-section.dark-active p,
html.dark #dark-section.dark-active span {
    color: #0a0a0a !important;
}

html.dark #dark-section.dark-active #main-nav {
    background: rgba(255,255,255,0.85) !important;
}

/* ── Text colours ─────────────────────────────────────── */
html.dark .text-gray-600 { color: #999 !important; }
html.dark .text-gray-500 { color: #888 !important; }
html.dark .text-gray-400 { color: #666 !important; }
html.dark .text-brandDark { color: #e8e8e8 !important; }
html.dark h1, html.dark h2, html.dark h4 { color: #e8e8e8; }

/* ── Mobile menu overlay ──────────────────────────────── */
html.dark .mobile-menu-overlay {
    background: rgba(15, 15, 15, 0.82) !important;
    border-bottom-color: rgba(255,255,255,0.08) !important;
}

html.dark .mobile-nav-link {
    color: #aaa !important;
}

html.dark .mobile-nav-link:hover {
    color: #fff !important;
}

html.dark .mobile-menu-backdrop {
    background: rgba(0,0,0,0.5) !important;
}

/* ── Footer (already dark — minor accent tweaks) ──────── */
html.dark footer {
    background-color: #050505 !important;
}

/* ── Contact & coming-soon page specifics ─────────────── */
html.dark .contact-hero,
html.dark [style*="background-color:#f3f4f6"],
html.dark [style*="background-color: #f3f4f6"] {
    background-color: #141414 !important;
}

html.dark .form-field {
    background: #1a1a1a;
    color: #e8e8e8;
    border-color: #333;
}

html.dark .form-field::placeholder {
    color: #666;
}

html.dark .cs-hero {
    background-color: #0d0d0d !important;
}

html.dark .cs-milestone-row {
    border-color: #2a2a2a !important;
}

html.dark .cs-milestone-title { color: #e8e8e8; }

html.dark .cs-count-num { color: #e8e8e8; }

html.dark .cs-bottom-cta,
html.dark .cs-progress-section,
html.dark .cs-milestones {
    border-color: #2a2a2a !important;
}

/* ── Dark mode toggle button ──────────────────────────── */
#theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 4px;
    border-radius: 50%;
    transition: opacity 0.2s ease;
}

#theme-toggle:hover { opacity: 0.6; }