/* =========================================================
   🧈 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;
 }

 /* =========================================================
   🔥 PREMIUM NAVBAR — Transparent → reveal-on-scroll
   Flat, refined top bar. Transparent over the hero (light text);
   on scroll it becomes a crisp frosted DARK-text bar with a 1px
   hairline. Hides on scroll-down, reveals on scroll-up.
   GPU-only: only transform / opacity / background / color / filter
   transition — never width/top/padding (no layout thrash).
   JS (index.js) toggles: .nav-solid, .nav-hidden, .nav-over-hero,
   .nav-dark-glass, .menu-open.
========================================================= */

 /* SHELL — fixed full-width band. Translate-only show/hide. */
 #main-nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     width: 100%;

     /* DEFAULT = frosted solid bar. Pages without the transparent hero
        (contact / coming-soon — which don't load index.js) get a clean,
        readable bar with zero JS. index.html opts INTO transparency via
        [data-nav-transparent] and the JS .nav-solid toggle below. */
     background: rgba(255, 255, 255, 0.72);
     backdrop-filter: blur(18px) saturate(180%);
     -webkit-backdrop-filter: blur(18px) saturate(180%);
     border: 0;
     border-bottom: 1px solid rgba(15, 15, 15, 0.08);
     box-shadow: 0 1px 24px rgba(17, 17, 17, 0.06);

     /* hidden state slides up by its own height; reveal slides back */
     transform: translate3d(0, 0, 0);
     will-change: transform;
     z-index: 50;
     /* NB: backdrop-filter is intentionally NOT transitioned (re-blurring
        every frame stutters); the white bg/shadow fade, the blur snaps. */
     transition:
         transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
         background-color 0.4s ease,
         border-color 0.4s ease,
         box-shadow 0.4s ease;
 }

 /* TRANSPARENT over the hero — only on index.html (opt-in attr) and
    only before the JS marks the bar .nav-solid. */
 #main-nav[data-nav-transparent]:not(.nav-solid) {
     background: transparent;
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
     border-bottom-color: transparent;
     box-shadow: none;
 }

 /* Over the dark hero (transparent state) text + logo must be LIGHT from
    the first paint — not dependent on the hero ScrollTrigger firing. */
 #main-nav[data-nav-transparent]:not(.nav-solid) .nav-link,
 #main-nav[data-nav-transparent]:not(.nav-solid) .nav-mobile-btn,
 #main-nav[data-nav-transparent]:not(.nav-solid) #theme-toggle { color: rgba(255, 255, 255, 0.82); }
 #main-nav[data-nav-transparent]:not(.nav-solid) .nav-link:hover { color: #fff; }
 #main-nav[data-nav-transparent]:not(.nav-solid) .nav-cta {
     color: #fff;
     border-color: rgba(255, 255, 255, 0.45);
 }
 #main-nav[data-nav-transparent]:not(.nav-solid) .nav-cta:hover {
     color: #0a0a0a;
     background: #fff;
     border-color: #fff;
 }
 #main-nav[data-nav-transparent]:not(.nav-solid) #main-logo { filter: invert(1) brightness(10); }

 /* CTA visibility — md:inline-flex is PURGED from tailwind-generated.css,
    so the display is driven here: desktop shown, mobile hidden. */
 .nav-cta { display: inline-flex; }
 @media (max-width: 767px) { .nav-cta { display: none; } }

 /* INNER — the actual padded content row. Padding eases on scroll
    (cheap: this element is not the fixed/translated layer). */
 #main-nav .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 2rem;
     padding: 1.7rem 5rem;
     transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* SOLID — frosted crisp bar once scrolled off the hero top */
 #main-nav.nav-solid {
     background: rgba(255, 255, 255, 0.72);
     backdrop-filter: blur(18px) saturate(180%);
     -webkit-backdrop-filter: blur(18px) saturate(180%);
     border-bottom-color: rgba(15, 15, 15, 0.08);
     box-shadow: 0 1px 24px rgba(17, 17, 17, 0.06);
 }

 #main-nav.nav-solid .nav-inner {
     padding-top: 1.05rem;
     padding-bottom: 1.05rem;
 }

 /* Responsive horizontal rhythm */
 @media (max-width: 1024px) {
     #main-nav .nav-inner { padding-left: 2.5rem; padding-right: 2.5rem; }
 }
 @media (max-width: 767px) {
     #main-nav .nav-inner {
         padding: 1.25rem 1.5rem;
         gap: 1rem;
     }
     #main-nav.nav-solid .nav-inner { padding-top: 1rem; padding-bottom: 1rem; }
 }

 /* HIDDEN — reveal-on-scroll: slide the whole bar up out of view */
 #main-nav.nav-hidden {
     transform: translate3d(0, -100%, 0);
 }

 /* Reduced motion: the JS already skips hide-on-scroll; here we also
    neutralize the bar's own transitions and force the underline/CTA
    micro-interactions to be instant rather than animated. */
 @media (prefers-reduced-motion: reduce) {
     #main-nav,
     #main-nav .nav-inner,
     #main-nav .nav-link > span::after,
     #main-nav .nav-cta,
     #main-nav .nav-cta-arrow {
         transition-duration: 0.01ms !important;
     }
     #main-nav.nav-hidden { transform: none; }
 }

 /* Logo */
 #main-logo {
     height: 24px;
     width: auto;
     display: block;
     transition: filter 0.4s ease;
 }
 .nav-logo-link { display: inline-flex; align-items: center; }

 /* =========================================================
   🔗 NAV LINKS — animated underline, refined active state
========================================================= */
 .nav-links {
     gap: 0.35rem;
     font-family: inherit;
     font-weight: 500;
     font-size: 0.98rem;
     letter-spacing: -0.005em;
 }

 .nav-link {
     position: relative;
     display: inline-flex;
     align-items: center;
     padding: 0.4rem 0.9rem;
     color: rgba(20, 20, 20, 0.72);
     text-decoration: none;
     transition: color 0.25s ease;
 }
 .nav-link:hover { color: #0a0a0a; }

 /* underline that wipes in from the left on hover / active */
 .nav-link > span { position: relative; }
 .nav-link > span::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -4px;
     height: 1.5px;
     width: 100%;
     background: currentColor;
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .nav-link:hover > span::after,
 .nav-link.is-active > span::after { transform: scaleX(1); }
 .nav-link.is-active { color: #0a0a0a; }

 /* =========================================================
   ✨ RIGHT CLUSTER + REFINED OUTLINED CTA
========================================================= */
 .nav-actions { display: flex; align-items: center; gap: 1rem; }

 .nav-cta {
     align-items: center;
     gap: 0.5rem;
     padding: 0.55rem 1.15rem;
     font-weight: 600;
     font-size: 0.9rem;
     letter-spacing: -0.005em;
     color: #0a0a0a;
     text-decoration: none;
     border: 1.5px solid rgba(10, 10, 10, 0.22);
     border-radius: 999px;
     background: transparent;
     transition:
         color 0.25s ease,
         background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
         border-color 0.3s ease,
         transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .nav-cta:hover {
     color: #ffffff;
     background: #0a0a0a;
     border-color: #0a0a0a;
     transform: translateY(-1px);
 }
 .nav-cta:active { transform: translateY(0); }
 .nav-cta-arrow {
     display: inline-flex;
     transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .nav-cta:hover .nav-cta-arrow { transform: translate(2px, -2px); }

 .nav-mobile-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #111;
     background: none;
     border: 0;
     cursor: pointer;
     padding: 2px;
 }

 /* 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;
 }

 /* (Pill morph removed: the .nav-scrolled pill, the --np scroll-linked
    morph and its dark variant are gone — replaced by the flat
    transparent → reveal-on-scroll bar above.) */

 /* =========================================================
   🌑 CONTRAST FLIP — light-on-dark (hero + #dark-section)
   JS toggles .nav-dark-glass on #main-nav and .logo-invert on the
   logo over dark regions. Over the HERO (.nav-over-hero) the bar is
   transparent, so the flip is pure text/icon recolor — no glass.
   Once the bar is .nav-solid over a dark area it wears a dark frost.
========================================================= */

 /* white text + icons over any dark region */
 .nav-dark-glass .nav-link,
 .nav-dark-glass a,
 .nav-dark-glass .nav-mobile-btn,
 .nav-dark-glass #mobile-menu-btn,
 .nav-dark-glass #theme-toggle { color: #ffffff !important; }

 .nav-dark-glass .nav-link { color: rgba(255, 255, 255, 0.82) !important; }
 .nav-dark-glass .nav-link:hover,
 .nav-dark-glass .nav-link.is-active { color: #ffffff !important; }

 /* outlined CTA, light variant over dark */
 .nav-dark-glass .nav-cta {
     color: #ffffff !important;
     border-color: rgba(255, 255, 255, 0.45) !important;
 }
 .nav-dark-glass .nav-cta:hover {
     color: #0a0a0a !important;
     background: #ffffff !important;
     border-color: #ffffff !important;
 }

 /* Frosted dark glass only when the bar is also SOLID over a dark
    section (e.g. #dark-section). Transparent over the hero. */
 .nav-dark-glass.nav-solid {
     background: rgba(20, 20, 22, 0.55) !important;
     backdrop-filter: blur(20px) saturate(180%) !important;
     -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
     border-bottom-color: rgba(255, 255, 255, 0.14) !important;
     box-shadow: 0 1px 24px rgba(0, 0, 0, 0.28) !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 — the bar docks into the open mobile card.
   It must always be visible (override .nav-hidden) and shed any
   frosted/solid background so the card's glass shows through. */
#main-nav.menu-open {
    top: 10px;
    left: 12px;
    right: 12px;
    width: auto;
    transform: none !important;       /* beat .nav-hidden translate */
    border-radius: 20px 20px 0 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: none !important;
}
#main-nav.menu-open .nav-inner {
    padding: 1.1rem 1.5rem;
}

 #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 (dark theme) ──────────────────────────────────
   Stay transparent over the hero; frosted dark only when solid. */
html.dark #main-nav {
    background: transparent;
}

html.dark #main-nav.nav-solid {
    background: rgba(13, 13, 13, 0.72) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.4) !important;
}

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

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

/* Nav links (dark theme) */
html.dark .nav-link,
html.dark .nav-links a,
html.dark header nav a {
    color: rgba(235, 235, 235, 0.72) !important;
}

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

/* CTA (dark theme) */
html.dark .nav-cta {
    color: #f5f5f5 !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
html.dark .nav-cta:hover {
    color: #0a0a0a !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

html.dark #mobile-menu-btn,
html.dark .nav-mobile-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;
}

/* Edge case: in DARK theme the #dark-section inverts to a WHITE
   background, but the JS still puts .nav-dark-glass (white text) on
   the bar. Force a light bar + DARK text/CTA here so it stays legible. */
html.dark #dark-section.dark-active #main-nav.nav-solid {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
html.dark #dark-section.dark-active #main-nav .nav-link,
html.dark #dark-section.dark-active #main-nav .nav-cta,
html.dark #dark-section.dark-active #main-nav .nav-mobile-btn,
html.dark #dark-section.dark-active #main-nav #theme-toggle {
    color: #0a0a0a !important;
}
html.dark #dark-section.dark-active #main-nav .nav-cta {
    border-color: rgba(10, 10, 10, 0.22) !important;
}
html.dark #dark-section.dark-active #main-logo {
    filter: none !important;   /* black logo on the white bar */
}

/* ── 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; }


/* =========================================================
   CORE FRAMEWORK — oryzo homage (brand-blue bloom, scrub)
   Self-contained, hardcoded dark. Does NOT use global .dark-active.
   ID-scoped !important bg so html.dark `section{#0d0d0d!important}`
   cannot repaint it.
========================================================= */
#cf-section.cf-section {
  --cf-cream: #f5f5f5;
  --cf-accent: #2b8fff;
  --cf-blue: #0071e3;
  --cf-muted: rgba(245, 245, 245, 0.5);
  --cf-dot: rgba(245, 245, 245, 0.18);
  color: var(--cf-cream);
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 0%, #0a0a0a 0%, #08090b 55%, #060709 100%) !important;
}
.cf-track { height: 700vh; }

#cf-section .cf-pin {
  perspective: 1400px;
  background:
    radial-gradient(120% 90% at 50% 0%, #0a0a0a 0%, #08090b 55%, #060709 100%) !important;
}

/* ---- Bloom (brand blue lighting) ---- */
#cf-section .cf-bloom {
  position: absolute;
  top: -25%;
  left: 50%;
  width: 120vw;
  height: 95vh;
  transform: translate3d(-50%, 0, 0);
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(120,180,255,0.35) 0%, transparent 60%),
    radial-gradient(85% 70% at 50% 0%, rgba(0,113,227,0.55) 0%, rgba(0,113,227,0.14) 35%, transparent 65%);
  filter: blur(90px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

/* ---- Grain overlay ---- */
#cf-section .cf-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Meta row ---- */
#cf-section .cf-meta {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
#cf-section .cf-meta-mobile { width: 100%; justify-items: center; }
#cf-section .cf-meta-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-muted);
}
#cf-section .cf-meta-left { justify-self: start; }
#cf-section .cf-meta-right { justify-self: end; }
#cf-section .cf-meta-stat {
  justify-self: center;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cf-cream);
  white-space: nowrap;
}
#cf-section .cf-stars { color: var(--cf-accent); letter-spacing: 0.12em; }
#cf-section .cf-progress { color: var(--cf-muted); }

/* ---- Dotted dividers ---- */
#cf-section .cf-divider {
  height: 1px;
  margin: 1.1rem 0 2rem;
  background-image: radial-gradient(circle, var(--cf-dot) 1px, transparent 1.5px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}
#cf-section .cf-divider-bottom { margin: 2rem 0 0; }

/* ---- 3-col grid ---- */
#cf-section .cf-grid {
  grid-template-columns: 1fr minmax(260px, 0.85fr) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
}
#cf-section .cf-col { position: relative; }

/* LEFT features (stacked, crossfaded) */
#cf-section .cf-left { min-height: 360px; }
#cf-section .cf-feature {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}
#cf-section .cf-rating {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--cf-accent);
  margin-bottom: 1.1rem;
}
#cf-section .cf-rating-num { color: var(--cf-muted); letter-spacing: 0.1em; }
#cf-section .cf-quote {
  font-size: clamp(1.5rem, 2.1vw, 2.05rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cf-cream);
  margin: 0 0 1.4rem;
}
#cf-section .cf-hl { color: var(--cf-accent); }
#cf-section .cf-bullets {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.5rem;
}
#cf-section .cf-bullets li {
  font-size: 0.82rem;
  color: var(--cf-muted);
  letter-spacing: 0.01em;
  position: relative;
  padding-left: 0.95rem;
  line-height: 1.3;
}
#cf-section .cf-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--cf-accent);
}
#cf-section .cf-name {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-cream);
  padding-top: 1.1rem;
  border-top: 1px dotted var(--cf-dot);
}
#cf-section .cf-role { color: var(--cf-muted); }

/* CENTER giant letter + word */
#cf-section .cf-center { display: flex; align-items: center; justify-content: center; }
#cf-section .cf-center-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform: translateZ(0);
}
#cf-section .cf-letter-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate3d(-50%, -55%, 0);
  background: radial-gradient(circle at 50% 45%, rgba(43,143,255,0.4) 0%, rgba(0,113,227,0.18) 35%, transparent 65%);
  filter: blur(50px);
  pointer-events: none;
  z-index: -1;
}
#cf-section .cf-letters {
  position: relative;
  width: 1em;
  height: 1em;
  font-size: clamp(8rem, 16vw, 17rem);
  line-height: 1;
}
#cf-section .cf-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--cf-cream);
  text-shadow: 0 0 60px rgba(0,113,227,0.45);
  opacity: 0;
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}
#cf-section .cf-words {
  position: relative;
  height: 2.6em;
  width: 100%;
  margin-top: 0.4rem;
}
#cf-section .cf-word {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  white-space: nowrap;
  font-size: clamp(1.25rem, 2vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cf-accent);
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity, filter;
}

/* RIGHT image stack */
#cf-section .cf-right { display: flex; flex-direction: column; }
#cf-section .cf-right-head {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-muted);
  text-align: right;
  margin-bottom: 1rem;
}
#cf-section .cf-image-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
}
#cf-section .cf-image {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}
#cf-section .cf-image img {
  width: 100%;
  height: calc(100% - 1.8rem);
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(245,245,245,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: block;
}
#cf-section .cf-cap {
  margin-top: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cf-muted);
  text-align: right;
  border-top: 1px dotted var(--cf-dot);
  padding-top: 0.6rem;
}

/* ===================== MOBILE ===================== */
#cf-section .cf-mobile {
  grid-template-columns: 1fr;
  gap: 1.6rem;
  justify-items: center;
  width: 100%;
  text-align: center;
}
#cf-section .cf-m-center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#cf-section .cf-letter-glow-m { width: 200px; height: 200px; filter: blur(40px); }
#cf-section .cf-m-letters {
  position: relative;
  width: 1em;
  height: 1em;
  font-size: 7rem;
  line-height: 1;
}
#cf-section .cf-m-letter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--cf-cream);
  text-shadow: 0 0 40px rgba(0,113,227,0.5);
  opacity: 0;
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}
#cf-section .cf-m-words { position: relative; height: 2.4em; width: 100%; margin-top: 0.3rem; }
#cf-section .cf-m-word {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) translateZ(0);
  white-space: nowrap;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cf-accent);
  opacity: 0;
  filter: blur(6px);
  will-change: transform, opacity, filter;
}
#cf-section .cf-m-image-stack { position: relative; width: 78%; aspect-ratio: 4 / 3; }
#cf-section .cf-m-image {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; filter: blur(6px);
  will-change: transform, opacity, filter;
  transform: translateZ(0);
}
#cf-section .cf-m-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 12px;
  border: 1px solid rgba(245,245,245,0.10);
}
#cf-section .cf-m-bullets-stack { position: relative; width: 100%; min-height: 130px; }
#cf-section .cf-m-bullets {
  position: absolute; inset: 0;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  opacity: 0; filter: blur(6px);
  will-change: opacity, filter;
}
#cf-section .cf-m-bullets li { font-size: 0.8rem; color: var(--cf-muted); letter-spacing: 0.02em; }

@media (max-width: 1023px) {
  .cf-track { height: 480vh; }
  #cf-section .cf-divider { margin: 0.9rem 0 1.6rem; }
}

/* prefers-reduced-motion: show everything statically */
@media (prefers-reduced-motion: reduce) {
  #cf-section .cf-feature, #cf-section .cf-image, #cf-section .cf-word, #cf-section .cf-letter,
  #cf-section .cf-m-letter, #cf-section .cf-m-word, #cf-section .cf-m-image, #cf-section .cf-m-bullets {
    position: relative;
    opacity: 1;
    filter: none;
  }
  #cf-section .cf-feature[data-i]:not([data-i="0"]),
  #cf-section .cf-image[data-i]:not([data-i="0"]),
  #cf-section .cf-word[data-i]:not([data-i="0"]),
  #cf-section .cf-letter[data-i]:not([data-i="0"]),
  #cf-section .cf-m-letter[data-i]:not([data-i="0"]),
  #cf-section .cf-m-word[data-i]:not([data-i="0"]),
  #cf-section .cf-m-image[data-i]:not([data-i="0"]),
  #cf-section .cf-m-bullets[data-i]:not([data-i="0"]) { opacity: 0; }
  #cf-section .cf-left, #cf-section .cf-image-stack, #cf-section .cf-words, #cf-section .cf-letters,
  #cf-section .cf-m-letters, #cf-section .cf-m-words, #cf-section .cf-m-image-stack, #cf-section .cf-m-bullets-stack {
    height: auto;
    min-height: 0;
  }
  #cf-section .cf-bloom { opacity: 0.5; }
}


/* =========================================================
   CORE FRAMEWORK — self-contained structure (PURGE-PROOF)
   The site's tailwind-generated.css is purged; utilities that
   weren't used elsewhere (.grid, .md:grid, max-w-[1400px], ...)
   are absent, so .cf-grid.hidden.md:grid was stuck display:none.
   These ID-scoped rules (specificity beats single-class utils)
   guarantee layout + responsive visibility without Tailwind.
========================================================= */
#cf-section { position: relative; overflow: hidden; }
#cf-section .cf-track { position: relative; width: 100%; }
#cf-section .cf-pin {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
  display: flex; flex-direction: column;
}
#cf-section .cf-inner {
  position: relative; z-index: 10;
  width: 100%; max-width: 1400px; margin: 0 auto;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 5vw, 5rem);
}
/* responsive show/hide — overrides the purged .hidden / .md:* gaps */
#cf-section .cf-meta { display: none; }
#cf-section .cf-meta-mobile { display: grid; }
#cf-section .cf-grid { display: none; }
#cf-section .cf-mobile { display: grid; }
#cf-section .cf-divider-bottom { display: none; }
@media (min-width: 1024px) {
  #cf-section .cf-meta { display: grid; }
  #cf-section .cf-meta-mobile { display: none; }
  #cf-section .cf-grid { display: grid; }
  #cf-section .cf-mobile { display: none; }
  #cf-section .cf-divider-bottom { display: block; }
}


/* =========================================================
   CORE FRAMEWORK v2 — oryzo continuous feed + 3D glass center
   Appended last so it overrides the earlier crossfade layout.
========================================================= */
/* feed columns = fixed-height clipped windows */
#cf-section .cf-left,
#cf-section .cf-right {
  position: relative;
  height: min(62vh, 620px);
  min-height: 420px;
  overflow: hidden;
  display: block;
}
/* soft top/bottom edge fades (items dissolve in/out like oryzo) */
#cf-section .cf-left::before, #cf-section .cf-left::after,
#cf-section .cf-right::before, #cf-section .cf-right::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18%;
  z-index: 4; pointer-events: none;
}
#cf-section .cf-left::before, #cf-section .cf-right::before { top: 0;    background: linear-gradient(to bottom, #0a0a0a 5%, transparent); }
#cf-section .cf-left::after,  #cf-section .cf-right::after  { bottom: 0; background: linear-gradient(to top,    #060709 5%, transparent); }

/* the translating feed wrapper (JS sets transform y) */
#cf-section .cf-feed {
  position: absolute; top: 0; left: 0; right: 0;
  will-change: transform;
}

/* LEFT slots — JS sets height; content vertically centred */
#cf-section .cf-left .cf-feature {
  position: relative; inset: auto;
  opacity: 1; filter: none;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box; padding: 1rem 0;
  will-change: transform, opacity, filter;
}

/* RIGHT image slots */
#cf-section .cf-right .cf-image {
  position: relative; inset: auto;
  opacity: 1; filter: none; margin: 0;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box; padding: 0.5rem 0;
  will-change: transform, opacity, filter;
}
#cf-section .cf-right .cf-image img {
  width: 100%; height: calc(100% - 1.9rem); object-fit: cover;
  border-radius: 12px; border: 1px solid rgba(245,245,245,0.10);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

/* CENTER — 3D glass logo (replaces the old letter) */
#cf-section .cf-center { display: flex; align-items: center; justify-content: center; height: min(62vh, 620px); }
#cf-section .cf-center-stack {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
}
#cf-section .cf-logo3d { position: absolute; inset: 0; z-index: 2; }
#cf-section .cf-logo3d canvas { width: 100% !important; height: 100% !important; display: block; }
#cf-section .cf-logo-flat {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60%; height: auto; z-index: 2;
  filter: invert(1) drop-shadow(0 0 46px rgba(0,113,227,0.55));
  opacity: 0.95;
}
#cf-section.cf-3d-active .cf-logo-flat { display: none; }   /* hide fallback once WebGL is live */
#cf-section .cf-center-counter {
  position: absolute; bottom: -2.4rem; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cf-accent); white-space: nowrap; z-index: 3;
}
/* brand-blue bloom behind the glass logo */
#cf-section .cf-center .cf-letter-glow {
  width: 150%; height: 150%;
}

/* ===================== MOBILE STATIC STACK ===================== */
@media (max-width: 1023px) {
  .cf-track { height: auto; }
  #cf-section .cf-pin { position: static; height: auto; overflow: visible; }
  #cf-section .cf-inner { padding: 4rem 1.4rem 3rem; height: auto; display: block; }
  /* below the desktop feed breakpoint there is NO pin, so drop the pin-only
     negative margin + huge top padding; centre the stacked heading instead */
  #cf-section .cf-head {
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(3.5rem, 7vh, 5rem) 1.4rem 0.5rem;
  }
  /* the 3D canvas lives in the hidden desktop grid, so on the stacked layout
     always show the flat brand mark (it's otherwise hidden by .cf-3d-active) */
  #cf-section.cf-3d-active .cf-logo-flat-m { display: block; }
  #cf-section .cf-logo-flat-m { width: clamp(120px, 15vw, 180px); }
  /* keep the stacked column from going full-bleed on tablets */
  #cf-section .cf-mobile { max-width: 680px; margin-inline: auto; }
}
#cf-section .cf-mobile { gap: 2.6rem; text-align: left; justify-items: stretch; }
#cf-section .cf-m-logo { display: flex; justify-content: center; margin: 0.5rem 0 1.4rem; }
#cf-section .cf-logo-flat-m {
  position: static; transform: none; width: 110px; opacity: 1;
}
#cf-section .cf-m-pillar {
  display: flex; flex-direction: column; gap: 0.9rem;
  padding-top: 1.6rem; border-top: 1px dotted var(--cf-dot);
}
#cf-section .cf-m-name {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cf-cream);
}
#cf-section .cf-m-image {
  position: relative; inset: auto; opacity: 1; filter: none; margin: 0;
  width: 100%; aspect-ratio: 4 / 3;
}
#cf-section .cf-m-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 12px; border: 1px solid rgba(245,245,245,0.10);
}
#cf-section .cf-m-bullets {
  position: relative; inset: auto; opacity: 1; filter: none;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
}
#cf-section .cf-m-bullets li { font-size: 0.85rem; color: var(--cf-muted); letter-spacing: 0.01em; }

/* reduced-motion: ensure feeds/center read statically (no pin/scrub from JS) */
@media (prefers-reduced-motion: reduce) {
  #cf-section .cf-left, #cf-section .cf-right { height: auto; min-height: 0; overflow: visible; }
  #cf-section .cf-feed { position: relative; }
  #cf-section .cf-feature, #cf-section .cf-image { height: auto !important; opacity: 1 !important; filter: none !important; }
  #cf-section .cf-left::before, #cf-section .cf-left::after,
  #cf-section .cf-right::before, #cf-section .cf-right::after { display: none; }
}


/* =========================================================
   CORE FRAMEWORK v3 — visible multi-item feed + dotted dividers
   (oryzo: 2-3 items visible, white dotted line between each)
========================================================= */
/* taller feed windows so ~2.5 items show at once */
#cf-section .cf-left,
#cf-section .cf-right { height: min(72vh, 680px); min-height: 440px; }

/* per-item DOTTED divider (belongs to the item -> travels with the feed)
   + clip so variable content ends cleanly at the divider line */
#cf-section .cf-left .cf-feature,
#cf-section .cf-right .cf-image {
  overflow: hidden;
  border-top: 1px dotted rgba(255, 255, 255, 0.14);
}

/* compact the feature content so the active item fits the slot */
#cf-section .cf-left .cf-feature { padding: 0.7rem 0; }
#cf-section .cf-rating { margin-bottom: 0.8rem; }
#cf-section .cf-quote { font-size: clamp(1.35rem, 1.85vw, 1.9rem); margin-bottom: 1rem; }
#cf-section .cf-bullets { margin-bottom: 1rem; gap: 0.3rem 1.4rem; }
#cf-section .cf-bullets li { line-height: 1.22; }
#cf-section .cf-name { padding-top: 0.85rem; }

/* RIGHT image slot: keep room for the dotted divider above the image */
#cf-section .cf-right .cf-image { padding: 0.55rem 0 0; }
#cf-section .cf-right .cf-image img { height: calc(100% - 1.9rem); }

/* mobile per-pillar divider -> same white dotted token */
#cf-section .cf-m-pillar { border-top: 1px dotted rgba(255, 255, 255, 0.14); }


/* =========================================================
   CORE FRAMEWORK v4 — spread columns to the edges
   (kill the big empty L/R gutters; oryzo space-between feel:
    left column hugs left, right hugs right, logo centred)
========================================================= */
#cf-section .cf-inner {
  max-width: 1860px;
  padding-left: clamp(1.25rem, 2.6vw, 3rem);
  padding-right: clamp(1.25rem, 2.6vw, 3rem);
}
/* flexible side columns + a centre that KEEPS a minimum so the logo never
   collapses on narrower laptops (sides previously grew to 460 and starved it) */
#cf-section .cf-grid {
  grid-template-columns: minmax(300px, 1fr) minmax(250px, 0.75fr) minmax(300px, 1fr);
  gap: clamp(1.5rem, 3.5vw, 4rem);
}


/* =========================================================
   CORE FRAMEWORK v5 — continuous dotted rails behind the logo
   + remove per-item dividers + remove glow behind logo + faster scroll
========================================================= */
/* rails layer spans the whole grid, sits BEHIND the columns/logo */
#cf-section .cf-grid { position: relative; }
#cf-section .cf-col { position: relative; z-index: 1; }
#cf-section .cf-rails {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  overflow: hidden; z-index: 0; pointer-events: none;
}
#cf-section .cf-rails-inner { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
#cf-section .cf-rail {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dotted rgba(255, 255, 255, 0.14);
}

/* drop the old per-column dividers — the full-width rails replace them */
#cf-section .cf-left .cf-feature,
#cf-section .cf-right .cf-image { border-top: none; }

/* remove the glow/shadow behind the centre logo (oryzo: clean float) */
#cf-section .cf-center .cf-letter-glow { display: none; }

/* faster scroll-through (desktop only; mobile stays normal flow) */
@media (min-width: 768px) { #cf-section .cf-track { height: 480vh; } }

/* reduced-motion: rails JS doesn't run -> restore per-item dotted dividers */
@media (prefers-reduced-motion: reduce) {
  #cf-section .cf-rails { display: none; }
  #cf-section .cf-left .cf-feature,
  #cf-section .cf-right .cf-image { border-top: 1px dotted rgba(255, 255, 255, 0.14); }
}


/* =========================================================
   CORE FRAMEWORK v6 — restore the oryzo top lighting +
   push the glass logo into the background
========================================================= */
/* Prominent top-centre lighting (was too faint). Hot near-white core
   fading through brand blue -> clearly lit like the reference. */
#cf-section .cf-bloom {
  top: -32%;
  width: 135vw;
  height: 115vh;
  background:
    radial-gradient(46% 42% at 50% 4%, rgba(214, 232, 255, 0.55) 0%, transparent 55%),
    radial-gradient(72% 62% at 50% 0%, rgba(43, 143, 255, 0.7) 0%, rgba(0, 113, 227, 0.30) 40%, transparent 72%);
  filter: blur(80px);
}

/* Logo recedes: slightly transparent so it reads as a background element
   the scrolling items sit in front of. */
#cf-section .cf-logo3d { opacity: 0.8; }

/* v6b — stronger, oryzo-prominent top glow */
#cf-section .cf-bloom {
  top: -28%;
  width: 140vw;
  height: 122vh;
  background:
    radial-gradient(42% 40% at 50% 6%, rgba(226, 239, 255, 0.62) 0%, transparent 56%),
    radial-gradient(80% 68% at 50% 2%, rgba(50, 150, 255, 0.78) 0%, rgba(0, 113, 227, 0.34) 42%, transparent 74%);
  filter: blur(74px);
}


/* =========================================================
   CORE FRAMEWORK v7 — Helvena, sharp images, taller feed,
   WARM oryzo lighting/palette
========================================================= */
/* 1. enforce Helvena on the whole section */
#cf-section,
#cf-section .cf-quote,
#cf-section .cf-meta,
#cf-section .cf-meta-stat,
#cf-section .cf-name,
#cf-section .cf-bullets,
#cf-section .cf-rating,
#cf-section .cf-cap,
#cf-section .cf-center-counter,
#cf-section .cf-m-name,
#cf-section .cf-m-bullets {
  font-family: "Helvena", "Manrope", sans-serif;
}

/* 2. sharp image edges (no curve), like oryzo */
#cf-section .cf-right .cf-image img,
#cf-section .cf-m-image img { border-radius: 0; }

/* 3. taller feed area -> more room between the dotted lines */
#cf-section .cf-left,
#cf-section .cf-right,
#cf-section .cf-center { height: min(78vh, 720px); }
#cf-section .cf-inner {
  padding-top: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
}

/* 4. WARM oryzo lighting + palette (accent -> amber; bg -> warm dark) */
#cf-section.cf-section {
  --cf-accent: #e8902f;          /* amber highlights / stars / bullets */
  background: radial-gradient(120% 90% at 50% 0%, #140d08 0%, #0b0807 55%, #070605 100%) !important;
}
#cf-section .cf-pin {
  background: radial-gradient(120% 90% at 50% 0%, #140d08 0%, #0b0807 55%, #070605 100%) !important;
}
#cf-section .cf-bloom {
  background:
    radial-gradient(42% 40% at 50% 6%, rgba(255, 236, 210, 0.60) 0%, transparent 56%),
    radial-gradient(82% 70% at 50% 2%, rgba(255, 146, 64, 0.62) 0%, rgba(190, 84, 26, 0.30) 42%, transparent 74%);
}


/* =========================================================
   CORE FRAMEWORK v8 — WHITE THEME
   (overrides the warm-dark palette; dark text on white,
    dark dotted lines, no glow, dark glass logo)
========================================================= */
#cf-section.cf-section {
  --cf-cream: #14110d;                 /* primary text -> near-black */
  --cf-muted: rgba(20, 17, 13, 0.55);  /* muted text */
  --cf-dot:   rgba(0, 0, 0, 0.16);     /* dotted dividers -> dark */
  --cf-accent: #e8902f;                /* amber accent stays */
  color: #14110d;
  background: #ffffff !important;
}
#cf-section .cf-pin { background: #ffffff !important; }

/* no glow / grain on white */
#cf-section .cf-bloom { display: none; }
#cf-section .cf-grain { display: none; }

/* feed edge-fades -> fade to white */
#cf-section .cf-left::before, #cf-section .cf-right::before { background: linear-gradient(to bottom, #ffffff 6%, transparent); }
#cf-section .cf-left::after,  #cf-section .cf-right::after  { background: linear-gradient(to top,    #ffffff 6%, transparent); }

/* hardcoded-white dotted lines -> dark */
#cf-section .cf-rail,
#cf-section .cf-m-pillar { border-top-color: rgba(17, 17, 17, 0.18); }
@media (prefers-reduced-motion: reduce) {
  #cf-section .cf-left .cf-feature,
  #cf-section .cf-right .cf-image { border-top-color: rgba(17, 17, 17, 0.18); }
}

/* images: dark hairline border + soft light-theme shadow */
#cf-section .cf-right .cf-image img,
#cf-section .cf-m-image img {
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* flat-logo fallback (no-WebGL): SVG is black -> do NOT invert on white */
#cf-section .cf-logo-flat,
#cf-section .cf-logo-flat-m { filter: none; opacity: 0.92; }

/* keep the WebGL logo fully opaque on white (no wash-out) */
#cf-section .cf-logo3d { opacity: 1; }

/* v9 — taller top/bottom edge fade so items dissolve smoothly (oryzo) */
#cf-section .cf-left::before, #cf-section .cf-left::after,
#cf-section .cf-right::before, #cf-section .cf-right::after { height: 26%; }

/* v10 — smaller edge fade (premium: present, not washed out) */
#cf-section .cf-left::before, #cf-section .cf-left::after,
#cf-section .cf-right::before, #cf-section .cf-right::after { height: 13%; }

/* v11 — logo to the BACKSIDE: dotted line + text/images render in FRONT
   of the centre logo (line crosses over it, like the oryzo product shot) */
#cf-section .cf-center { z-index: 0; }   /* logo -> back */
#cf-section .cf-rails  { z-index: 1; }   /* dotted line -> in front of logo */
#cf-section .cf-left,
#cf-section .cf-right  { z-index: 2; }   /* text + images -> front */

/* v12 — accent (highlighted words + bullet dots): orange -> ash grey */
#cf-section.cf-section { --cf-accent: #4d4d4d; }


/* =========================================================
   CORE FRAMEWORK v13 — headings + sub-options match the
   "We Merge Ideas... Seamless System" heading style
   (Helvena, regular 400, text-3xl->text-5xl, tight) + remove fade
========================================================= */
#cf-section .cf-quote {
  font-family: "Helvena", "Manrope", sans-serif;
  font-size: clamp(1.875rem, 2.5vw, 3rem);   /* text-3xl -> text-5xl */
  font-weight: 400;                           /* font-regular (like the heading) */
  line-height: 1.2;
  letter-spacing: -0.025em;                   /* tracking-tight */
  margin-bottom: 1.5rem;
}
/* sub-options sized to match/complement the bigger heading */
#cf-section .cf-bullets li {
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* remove the top/bottom fade (edge dissolve) */
#cf-section .cf-left::before,  #cf-section .cf-left::after,
#cf-section .cf-right::before, #cf-section .cf-right::after { display: none; }


/* =========================================================
   CORE FRAMEWORK v14 — clear the fixed navbar
   The pinned panel fills the viewport from top:0, so the fixed
   nav (~76px) was covering the meta row. Push the centred content
   below the nav and shrink the feed columns so it all fits.
========================================================= */
#cf-section .cf-inner {
  padding-top: clamp(5rem, 6vh, 5.5rem);       /* clears nav, less gap */
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
#cf-section .cf-left,
#cf-section .cf-right,
#cf-section .cf-center { height: min(70vh, 620px); }


/* =========================================================
   CLIENTS — terminal marquee, FULL-HEIGHT moving columns
   Vertical lines span the whole section (faded top/bottom) and
   MOVE with the logos. Static horizontal band lines bound the
   logo band. Hover = blue box (band height) + blue column line.
========================================================= */
.clients-section {
  position: relative;
  height: clamp(460px, 66vh, 660px);
  background: #ffffff;
  overflow: hidden;
  font-family: "Helvena", "Manrope", sans-serif;
  --col: clamp(210px, 19vw, 290px);
  --line: rgba(17, 17, 17, 0.11);
  --band-h: clamp(190px, 30vh, 260px);
}
/* static horizontal band lines (continuous, fade at the far ends) */
.clients-section::before,
.clients-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--line) 6%, var(--line) 94%, transparent);
}
.clients-section::before { top: calc(50% - var(--band-h) / 2); }
.clients-section::after  { top: calc(50% + var(--band-h) / 2); }

.clients-marquee { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.clients-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: clients-scroll 60s linear infinite;
  will-change: transform;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
@keyframes clients-scroll {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.client-cell {
  position: relative;
  flex: 0 0 var(--col);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* FULL-HEIGHT faded vertical line — lives on the cell, so it MOVES with the logo */
.client-cell::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 0%, var(--line) 9%, var(--line) 91%, transparent 100%);
  transition: background 0.35s ease;
}
/* the logo box (band height) — also the CLIP FRAME for the per-cell glow,
   so the hover stays inside this one column and inside the centre band */
.client-box {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--band-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 2rem);
  overflow: clip;
  transition: box-shadow 0.3s ease;
}
.client-box img {
  max-width: 76%;
  max-height: 50%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter 0.45s ease, opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* soft blue fill, CLIPPED to the cell (column × centre band) and biased toward
   the cursor — injected by JS, only shown on the column the cursor is over.
   No round spill into neighbouring columns or the empty outer rows. */
.cb-glow {
  position: absolute;
  top: 0; left: 0;
  width: 300px; height: 300px;
  margin: -150px 0 0 -150px;        /* centre the blob on its translate origin */
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;                      /* behind the logo, in front of the cell bg */
  opacity: 0;
  background: radial-gradient(circle closest-side,
              rgba(0,174,239,0.20) 0%,
              rgba(0,174,239,0.10) 45%,
              transparent 78%);
  transition: opacity 0.3s ease;
  will-change: transform, opacity;
}

/* only the hovered column lights up: a small soft fill + the TWO cell edges
   nearest the cursor (the corner you're in) + the logo comes to full colour.
   --cb-shadow is set per quadrant in JS; box-shadow transitions when it flips. */
.client-cell.is-hot .cb-glow { opacity: 1; }
.client-cell.is-hot .client-box { box-shadow: var(--cb-shadow, none); }
.client-cell.is-hot .client-box img { filter: none; opacity: 1; transform: scale(1.04); }

@media (max-width: 640px) { .clients-section { --col: 58vw; --band-h: clamp(150px, 40vw, 210px); } }
@media (prefers-reduced-motion: reduce) { .clients-track { animation: none; } }

html.dark .clients-section { background: #0d0d0d; --line: rgba(255, 255, 255, 0.12); }
html.dark .client-box img  { filter: grayscale(1) invert(0.92); }
html.dark .client-cell.is-hot .client-box img { filter: none; }

/* v15 — pinned cf panel must sit ABOVE the following (non-pinned) clients
   section during its pin, else clients paints over it (DOM order). */
#cf-section .cf-pin { z-index: 5; }

/* v16 — cf-section is a stacking context (isolation:isolate); raise the
   WHOLE section above the following clients section so its pinned panel
   covers clients until the pin ends (z on .cf-pin alone is trapped inside). */
#cf-section { position: relative; z-index: 2; }

/* v17 — proper GSAP pin (pinSpacing:true). The pin-spacer now provides
   the scroll, so the cf-track must NOT carry a manual 480/700vh height,
   and the pinned panel must not be CSS-sticky (GSAP pins it). */
#cf-section .cf-track { height: auto !important; }
#cf-section .cf-pin { position: relative; top: auto; }


/* =========================================================
   CORE FRAMEWORK v15 — fill the pinned panel (remove the empty
   white area below the feed). Keeps the centred spinning logo +
   left text / right images exactly as before; the feed windows
   just grow to the viewport height instead of a fixed 620px.
========================================================= */
/* feed sits at the TOP of the panel (not vertically centred) so the feed's
   top line lands right under the CORE FRAMEWORK label, and the 5.5rem pad
   clears the fixed nav while the panel is pinned. */
#cf-section .cf-inner {
  justify-content: flex-start;
  padding-top: 5.5rem;                          /* nav clearance — matched by .cf-head -margin */
  padding-bottom: clamp(1rem, 3vh, 1.75rem);
}
#cf-section .cf-left,
#cf-section .cf-right,
#cf-section .cf-center {
  height: max(440px, calc(100vh - 7rem));       /* fill the panel top-to-bottom */
}
/* drop the bottom dotted divider — feed reads as complete without it */
#cf-section .cf-divider-bottom { display: none; }

/* CORE FRAMEWORK label scrolls in normal flow (NOT pinned). The negative
   margin-bottom cancels the panel's nav-clearance padding so the label sits
   right above the feed's top line with no white gap; z-index keeps the label
   above the (white) pinned panel it now overlaps. */
#cf-section .cf-head {
  position: relative;
  z-index: 30;
  width: 100%;
  max-width: 1860px;                                            /* match the feed (.cf-inner) */
  margin: 0 auto -5.5rem;
  /* left pad = feed pad + 5px so the label's "C" lands on the headline's "W"
     (the feed text is inset ~5px by its scale-focus transform) */
  padding: clamp(5rem, 9vh, 6.25rem) clamp(1.25rem, 2.6vw, 3rem) 0.5rem
           calc(clamp(1.25rem, 2.6vw, 3rem) + 5px);
}

/* =========================================================
   CORE FRAMEWORK — SOLID navbar while this section is in view.
   The default scrolled navbar is frosted glass (rgba white .72 +
   backdrop blur), so the feed's photos bleed through it as they
   scroll up. Over this section make it fully opaque white so the
   six images tuck cleanly BEHIND the bar (no bleed-through).
========================================================= */
#main-nav.nav-cf-solid {
  background-color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* =========================================================
   CORE FRAMEWORK — MOBILE / TABLET (< 1024): oryzo-style.
   The 3D glass logo spins as a CENTRED FIXED BACKGROUND; the feed
   rows scroll OVER it, each with a small rounded image on the LEFT.
========================================================= */
@media (max-width: 1023px) {
  /* host the 3D logo (the grid is otherwise display:none here) but hide the
     desktop feed columns + rails — we only want the centre logo */
  #cf-section .cf-grid { display: block; }
  #cf-section .cf-left,
  #cf-section .cf-right,
  #cf-section .cf-rails { display: none; }

  /* spinning logo = fixed, centred, behind the content; fades with the section */
  #cf-section .cf-center {
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(72vw, 300px);
    height: min(72vw, 300px);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  #cf-section.cf-inview .cf-center { opacity: 0.9; }
  #cf-section .cf-center-stack { width: 100%; height: 100%; }
  #cf-section .cf-logo3d { position: absolute; inset: 0; }
  /* the flat header logo is replaced by the spinning 3D background */
  #cf-section .cf-m-logo { display: none; }

  /* feed rows OVER the logo */
  #cf-section .cf-mobile { position: relative; z-index: 1; }
  #cf-section .cf-m-pillar {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-areas: "img name" "img bullets";
    column-gap: 1rem;
    row-gap: 0.4rem;
    align-items: start;
  }
  #cf-section .cf-m-image {
    grid-area: img;
    width: 64px; height: 64px; margin: 0;
    border-radius: 50%;
    overflow: hidden;
    align-self: center;
  }
  #cf-section .cf-m-image img { width: 100%; height: 100%; object-fit: cover; }
  #cf-section .cf-m-name { grid-area: name; align-self: end; }
  #cf-section .cf-m-bullets { grid-area: bullets; align-self: start; }
}