/* 1. SHARED ROOT DESIGN TOKENS */
        :root {
            --primaryFont: "Be Vietnam Pro", sans-serif;
            --secondaryFont: "Inter", "Neue Montreal", sans-serif;

            --primaryColor: #111111;
            --secondaryColor: #FF6200;
            --accentOrbColor: #FF6A00;
            --bgColor: #FFF4E6;
            --whiteColor: #FFFFFF;
            --footerColor: #111111;

            --borderColor: #11111126;
            --borderColorLight: #1111111A;
            --offwhiteColor: #FFFFFFB3;
            --mutedWhiteColor: #FFFFFF4D;

            --fontSize: 16px;
            --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            --transition-fast: all 0.3s ease;

            /* Kept from original to preserve component styles & exact visual parity */
            --borderColorWhite: #FFFFFF26;
            --hairlineWhiteColor: #FFFFFF1A;
            --circleBorderColor: #11111133;
            --ringBorderColor: #FFFFFF33;
            --paraColor: #111111B3;
            --introColor: #111111CC;
            --labelColor: #11111180;
            --numColor: #11111166;
            --footerTextColor: #FFFFFF80;
            --storyOverlayColor: #ff6200;
            --missionOverlayColor: #FF6200D9;
            --glowColor: #FF620033;
            --glowColorHover: #FF62004D;
            --ctaGlowColor: #FF440066;
            --shadowColor: #00000040;
        }

        /* 2. GLOBAL RESET & BASE */
        html { scroll-behavior: smooth; }
        body {
            background-color: var(--bgColor);
            color: var(--primaryColor);
            font-family: var(--secondaryFont);
            font-size: var(--fontSize);
            line-height: 1.65;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            margin: 0;
            padding: 0;
        }
        @media (min-width: 768px) { body { font-size: 1.125rem; } }

        a { text-decoration: none; color: inherit; }
        ul { list-style: none; padding: 0; margin: 0; }
        p { font-family: var(--secondaryFont); margin-bottom: 0; }
        button { font-family: var(--primaryFont); border: none; background: none; padding: 0; cursor: pointer; }
        img { display: block; max-width: 100%; height: auto; }

        /* Typography */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--primaryFont);
            text-transform: uppercase;
            margin-bottom: 0;
            font-weight: 900;
        }
        h1, h2, h3, h4, h5, h6, p { overflow-wrap: break-word; word-wrap: break-word; }

        /* 3. UTILITIES & REUSABLE COMPONENTS */
        .hairline-t { border-top: 1px solid var(--borderColor); }
        .hairline-b { border-bottom: 1px solid var(--borderColor); }
        .hairline-l { border-left: 1px solid var(--borderColor); }
        .hairline-r { border-right: 1px solid var(--borderColor); }
        .hairline-white-b { border-bottom: 1px solid var(--borderColorWhite); }
        .hairline-white-t { border-top: 1px solid var(--borderColorWhite); }
        .hairline-white-r { border-right: 1px solid var(--borderColorWhite); }

        .px-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
        @media (min-width: 768px) { .px-fluid { padding-left: 3rem; padding-right: 3rem; } }

        .py-section { padding-top: 8rem; padding-bottom: 8rem; }
        @media (min-width: 768px) { .py-section { padding-top: 8rem; padding-bottom: 8rem; } }

        /* Additional Custom Utilities */
        .text-accent { color: var(--secondaryColor) !important; }
        .text-white { color: var(--whiteColor) !important; }
        .text-black { color: var(--primaryColor) !important; }
        .bg-custom-black { background-color: var(--primaryColor) !important; }
        .bg-accent { background-color: var(--secondaryColor) !important; }
        .lg-ml-15 { margin-left: 0; }
        @media (min-width: 1024px) { .lg-ml-15 { margin-left: 15%; } }
        .lg-ml-5 { margin-left: 0; }
        @media (min-width: 1024px) { .lg-ml-5 { margin-left: 5%; } }
        .container-custom { max-width: 1440px; margin: 0 auto; width: 100%; }
        .content-section { padding: 5rem 1.5rem; background-color: var(--bgColor); position: relative; overflow: hidden; }
        @media (min-width: 768px) { .content-section { padding: 8rem 3rem; } }

        /* Standardized Orb Logic anchored to the first word */
        .orb-relative { position: relative; display: inline-block; }
        .orb-text-front { position: relative; z-index: 10; }

        .common-orb {
            position: absolute;
            background-color: var(--accentOrbColor);
            border-radius: 50%;
            z-index: 0;
            width: 3rem; height: 3rem;
            top: -0.5rem; left: -0.75rem;
        }
        @media (min-width: 768px) {
            .common-orb {
                width: 4.5rem; height: 4.5rem;
                top: -1rem; left: -1rem;
            }
        }

        /* Animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: opacity, transform;
        }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .delay-100 { transition-delay: 100ms; }
        .delay-200 { transition-delay: 200ms; }
        .delay-300 { transition-delay: 300ms; }

        .img-editorial {
            filter: grayscale(100%) contrast(1.1);
            transition: var(--transition);
            width: 100%; height: 100%; object-fit: cover;
        }
        .image-hover-wrapper:hover .img-editorial {
            filter: grayscale(0%) contrast(1);
            transform: scale(1.03);
        }

        /* Minimal scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bgColor); }
        ::-webkit-scrollbar-thumb { background: var(--primaryColor); }

        /* Global mobile tweak (shared padding rule) */
        @media (max-width: 767px) {
            .py-section {
                padding-top: 5rem;
                padding-bottom: 5rem;
            }
        }

        /* Core sizing and typography for main section headings (H2) */
        .global-h2 {
            font-family: var(--primaryFont);
            font-size: clamp(2rem, 3.5vw + 1rem, 4.5rem);
            line-height: 1.1em;
            letter-spacing: -0.05em;
            text-transform: uppercase;
            font-weight: 900;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
            hyphens: none;
            max-width: 65rem;
        }
        /* Subheadings directly under H2s */
        .global-h2-sub {
            font-size: clamp(1.1rem, 3vw + 0.5rem, 1.5rem);
            font-weight: 500;
            color: rgba(17, 17, 17, 0.7);
            margin-top: 1.5rem;
            max-width: 48rem;
        }
        /* Standardized sizing for inner section headings (H3) */
        .global-h3 {
            font-family: var(--primaryFont);
            font-size: clamp(1.5rem, 2.5vw + 1rem, 2.75rem);
            line-height: 1.1em;
            letter-spacing: -0.05em;
            text-transform: uppercase;
            font-weight: 900;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }
        /* Text/paragraphs directly under H3s */
        .global-h3-sub {
            font-size: clamp(1rem, 2vw + 0.75rem, 1.125rem);
            font-weight: 500;
            color: rgba(17, 17, 17, 0.7);
            margin-top: 1rem;
            margin-bottom: 0;
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        .hero-title { 
            font-size: clamp(2.5rem, 6vw + 1rem, 7.5rem);
            line-height: 1.1em;
            letter-spacing: -0.05em;
            margin-bottom: 0;
        }
        /* ==========================================================================
           END: 00-global.css
           ========================================================================== */
        /* Hero Section */
        .hero-section { position: relative; width: 100%; height: 100svh; min-height: 800px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .hero-bg-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1440px; margin: 0 auto; width: 100%; padding: 0 1.5rem; pointer-events: none; }
        @media (min-width: 768px) { .hero-bg-grid { padding: 0 3rem; } }
        @media (min-width: 992px) { .hero-bg-grid { grid-template-columns: repeat(12, 1fr); } }
        .hero-bg-grid > div:first-child { grid-column: 1 / span 1; height: 100%; opacity: 0.5; }
        @media (min-width: 992px) { .hero-bg-grid > div:first-child { grid-column: 4 / span 1; } }
        .hero-bg-grid > div:last-child { grid-column: 9 / span 1; height: 100%; opacity: 0.5; }

        .hero-content { max-width: 1440px; margin: 0 auto; width: 100%; padding: 8rem 1.5rem; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 100%; z-index: 10; }
        @media (min-width: 768px) { .hero-content { padding: 8rem 3rem; } }
        @media (min-width: 992px) { .hero-content { grid-template-columns: repeat(12, 1fr); } }
        .hero-text-block { grid-column: 1 / span 4; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
        @media (min-width: 992px) { .hero-text-block { grid-column: 2 / span 10; } }

        .orb-relative { position: relative; display: inline-block; }
        .orb-text-front { position: relative; z-index: 10; }
        .common-orb { position: absolute; background-color: var(--secondaryColor); border-radius: 50%; z-index: 0; width: 3rem; height: 3rem; top: -0.5rem; left: -0.75rem; }
        .common-orb {
            width: 4.5rem;
            height: 4.5rem;
            top: -1rem;
            left: -1rem;
        }
        @media (max-width: 768px) { .common-orb { width: 3.5rem; height: 3.5rem; top: 3px; left: -13px; } }

        .hero-bottom-left { position: absolute; bottom: 3rem; left: 1.5rem; }
        @media (min-width: 768px) { .hero-bottom-left { left: 3rem; } }
        .start-growing { display: flex; flex-direction: column; gap: 1rem; }
        .start-growing .icon-circle { width: 4rem; height: 4rem; background-color: var(--primaryColor); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--whiteColor); transition: background-color 0.5s; }
        .start-growing:hover .icon-circle { background-color: var(--secondaryColor); }
        .start-growing svg { width: 1.5rem; height: 1.5rem; transform: rotate(-45deg); transition: transform 0.5s; }
        .start-growing:hover svg { transform: rotate(0deg); }
        .start-growing span { font-family: var(--primaryFont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; }
        @media (min-width: 768px) { .start-growing span { font-size: 0.75rem; } }

        .hero-bottom-right { position: absolute; bottom: 3rem; right: 1.5rem; max-width: 300px; }
        @media (min-width: 768px) { .hero-bottom-right { right: 3rem; max-width: 28rem; } }
        .hero-desc { font-family: var(--secondaryFont); font-size: clamp(1.1rem, 3vw + 0.5rem, 1.5rem); color: var(--paraColor); line-height: 1.65; font-weight: 500; }
        .hero-desc-right { text-align: right; border-right: 2px solid var(--secondaryColor); padding-right: 1.5rem; }
        .hero-desc-mobile { border-left: 2px solid var(--secondaryColor); padding-left: 1rem; grid-column: 1 / span 4; margin-top: auto; margin-bottom: 3rem; }

        /* Marquee */
        .marquee-container { width: 100%; overflow: hidden; white-space: nowrap; position: relative; display: flex; padding: 4rem 0; background-color: var(--primaryColor); color: var(--whiteColor); border-bottom: 1px solid var(--hairlineWhiteColor); }
        @media (min-width: 768px) { .marquee-container { padding: 6rem 0; } }
        .marquee-content { display: inline-flex; animation: marquee 40s linear infinite; will-change: transform; }
        .marquee-container:hover .marquee-content { animation-play-state: paused; }
        .marquee-item { flex: 0 0 auto; padding: 0 5rem; display: flex; flex-direction: column; justify-content: center; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .marquee-text { font-family: var(--primaryFont); font-weight: 900; font-size: 2.25rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: -0.02em; }
        @media (min-width: 768px) { .marquee-text { font-size: 3rem; } }

        /* Image Effects */
        .grayscale-hover-scale { filter: grayscale(100%); transition: transform 0.7s; object-fit: cover; }
        .grayscale-hover-scale:hover { transform: scale(1.05); }
        .grayscale-contrast-hover-scale { filter: grayscale(100%) contrast(1.25); transition: transform 0.7s; object-fit: cover; }
        .grayscale-contrast-hover-scale:hover { transform: scale(1.05); }

        /* Section Layout Utilities */
        .custom-grid-12 { display: grid; grid-template-columns: 1fr; gap: 1rem; height: 300px; }
        @media (min-width: 768px) { .custom-grid-12 { grid-template-columns: repeat(12, 1fr); height: 500px; } }
        .col-span-5-md { grid-column: span 1 / span 1; height: 100%; width: 100%; }
        @media (min-width: 768px) { .col-span-5-md { grid-column: span 5 / span 5; } }
        .col-span-7-md { grid-column: span 1 / span 1; height: 100%; width: 100%; }
        @media (min-width: 768px) { .col-span-7-md { grid-column: span 7 / span 7; } }

        /* Specific Blocks */
        .accent-text-block { background-color: var(--secondaryColor); padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; text-align: justify; }
        @media (min-width: 768px) { .accent-text-block { padding: 3rem; } }
        .accent-block-text { color: var(--whiteColor); font-weight: 500; }

        .story-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; height: auto; }
        @media (min-width: 768px) { .story-grid { grid-template-columns: repeat(12, 1fr); height: 500px; } }
        .story-left { grid-column: span 1 / span 1; height: 300px; width: 100%; }
        @media (min-width: 768px) { .story-left { grid-column: span 4 / span 4; height: 100%; } }
        .story-right { grid-column: span 1 / span 1; height: auto; width: 100%; position: relative; background-color: var(--primaryColor); display: flex; }
        @media (min-width: 768px) { .story-right { grid-column: span 8 / span 8; height: 100%; } }

        .story-overlay { width: 100%; background-color: var(--storyOverlayColor); padding: 2rem; position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 25px 50px -12px var(--shadowColor); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
        @media (min-width: 768px) { .story-overlay { width: 88%; padding: 2rem; } }
        @media (min-width: 1024px) { .story-overlay { width: 100%; padding: 4rem; } }

        .mono-tag { font-family: monospace; font-weight: 700; text-transform: uppercase; color: var(--offwhiteColor); font-size: 0.75rem; letter-spacing: 0.2em; margin-bottom: 1.5rem; display: block; }
		
        .vision-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; height: auto; }
        @media (min-width: 768px) { .vision-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

        @media (min-width: 1024px) { .vision-grid { height: 500px; } }
        .vision-img-col { grid-column: span 1 / span 1; height: 300px; width: 100%; }
        @media (min-width: 1024px) { .vision-img-col { height: 100%; } }
        .vision-text-col { grid-column: span 1 / span 1; background-color: var(--secondaryColor); padding: 2rem; display: flex; flex-direction: column; justify-content: center; height: 100%; box-shadow: 0 25px 50px -12px var(--shadowColor); }
        @media (min-width: 768px) { .vision-text-col { grid-column: span 2 / span 2; padding: 3rem; } }
        @media (min-width: 1024px) { .vision-text-col { padding: 4rem; } }

        .mission-layout { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; height: auto; }
        @media (min-width: 768px) { .mission-layout { height: 500px; align-items: flex-end; } }
        .mission-bg { width: 100%; height: 300px; z-index: 0; }
        @media (min-width: 768px) { .mission-bg { width: 85%; height: 85%; } }
        .mission-overlay { width: 90%; background-color: var(--missionOverlayColor); padding: 2rem; margin-top: -3rem; z-index: 10; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); box-shadow: 0 25px 50px -12px var(--shadowColor); }
        @media (min-width: 768px) { .mission-overlay { position: absolute; left: 0; top: 0; bottom: 0; width: 65%; margin-top: 0; padding: 3rem; display: flex; flex-direction: column; justify-content: center; } }
        @media (min-width: 1024px) { .mission-overlay { width: 40%; padding: 4rem; } }

        /* Fearless Pillars */
        .border-t-4-accent { border-top: 4px solid var(--secondaryColor); }
        .border-b-4-accent { border-bottom: 4px solid var(--secondaryColor); }
        .aspect-square { aspect-ratio: 1 / 1; }
        .pillar-name { font-family: var(--primaryFont); font-weight: 900; font-size: clamp(1.5rem, 2.5vw + 1rem, 2.75rem); text-transform: uppercase; letter-spacing: -0.05em; color: var(--primaryColor); margin-bottom: 0.25rem; }
        .pillar-role { font-family: monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--secondaryColor); font-weight: 700; margin-bottom: 1rem; display: block; }
        .pillar-desc { color: var(--paraColor); font-size: 0.875rem; }

        /* Roots Section & Accordion */
        .roots-header-row { display: flex; flex-direction: column; gap: 3rem; margin-bottom: 4rem; align-items: flex-start; }
        @media (min-width: 1024px) { .roots-header-row { flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 6rem; } }
        .roots-left { width: 100%; }
        .roots-right { width: 100%; padding-bottom: 0.5rem; }
        @media (min-width: 1024px) { .roots-left { width: 50%; } .roots-right { width: 40%; } }
        .culture-tag { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
        @media (min-width: 768px) { .culture-tag { margin-bottom: 2rem; } }
        .pulse-dot { width: 0.5rem; height: 0.5rem; background-color: var(--secondaryColor); border-radius: 50%; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
        .culture-label { font-family: monospace; font-size: 10px; color: var(--labelColor); text-transform: uppercase; letter-spacing: 0.2em; }
        @media (min-width: 768px) { .culture-label { font-size: 0.75rem; } }
        .roots-intro { color: var(--introColor); font-size: 1.125rem; font-weight: 500; }
        @media (min-width: 768px) { .roots-intro { font-size: 1.25rem; } }

        .roots-accordion { border-top: 1px solid var(--borderColor); display: flex; flex-direction: column; margin-left: -1.5rem; margin-right: -1.5rem; }
        @media (min-width: 768px) { .roots-accordion { margin-left: -3rem; margin-right: -3rem; } }
        .acc-item { border-bottom: 1px solid var(--borderColor); cursor: pointer; background-color: transparent; transition: background-color 0.5s; position: relative; }
        .acc-item:hover { background-color: var(--primaryColor); }
        .acc-visible { padding: 2rem 1.5rem; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1600px; margin: 0 auto; z-index: 10; position: relative; gap: 1rem; }
        @media (min-width: 768px) { .acc-visible { padding: 3rem 3rem; } }
        .acc-title-group { display: flex; align-items: baseline; gap: 1rem; }
        @media (min-width: 768px) { .acc-title-group { gap: 2rem; } }
        @media (min-width: 1024px) { .acc-title-group { gap: 3rem; } }
        .acc-num { font-family: monospace; font-size: 0.875rem; color: var(--numColor); font-weight: 700; transition: color 0.5s; flex-shrink: 0; }
        @media (min-width: 768px) { .acc-num { font-size: 1rem; } }
        .acc-item:hover .acc-num { color: var(--secondaryColor); }
        .acc-title { font-family: var(--primaryFont); font-weight: 900; font-size: clamp(1.5rem, 2.5vw + 1rem, 2.75rem); text-transform: uppercase; letter-spacing: -0.05em; color: var(--primaryColor); transition: color 0.5s; line-height: 1.1; margin: 0; }
        .acc-item:hover .acc-title { color: var(--whiteColor); }
        .acc-icon-box { flex-shrink: 0; margin-left: 1rem; }
        .acc-circle { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--circleBorderColor); display: flex; align-items: center; justify-content: center; color: var(--primaryColor); transition: all 0.5s; }
        @media (min-width: 768px) { .acc-circle { width: 4rem; height: 4rem; } }
        .acc-item:hover .acc-circle { border-color: var(--secondaryColor); background-color: var(--secondaryColor); color: var(--whiteColor); }
        .arrow-icon-rotate { width: 1.25rem; height: 1.25rem; transform: rotate(-45deg); transition: transform 0.5s; }
        @media (min-width: 768px) { .arrow-icon-rotate { width: 1.5rem; height: 1.5rem; } }
        .acc-item:hover .arrow-icon-rotate { transform: rotate(0deg); }
        .acc-hidden { display: grid; grid-template-rows: 0fr; transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
        .acc-item:hover .acc-hidden { grid-template-rows: 1fr; }
        .acc-hidden-inner { overflow: hidden; }
        .acc-content-flex { padding: 0 1.5rem 3rem 1.5rem; display: flex; flex-direction: column; gap: 2rem; max-width: 1600px; margin: 0 auto; transform: translateY(2rem); opacity: 0; transition: all 0.7s; transition-delay: 100ms; }
        @media (min-width: 768px) { .acc-content-flex { padding: 0 3rem 4rem 3rem; } }
        @media (min-width: 1024px) { .acc-content-flex { flex-direction: row; gap: 4rem; } }
        .acc-item:hover .acc-content-flex { transform: translateY(0); opacity: 1; }
        .acc-img-box { width: 100%; height: 250px; overflow: hidden; position: relative; border-radius: 0.125rem; }
        @media (min-width: 1024px) { .acc-img-box { width: 45%; height: 350px; } }
        .acc-img-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1s; filter: grayscale(100%) contrast(1.1); }
        .acc-item:hover .acc-img-box img { transform: scale(1); filter: grayscale(0%) contrast(1); }
        .acc-text-box { width: 100%; display: flex; flex-direction: column; justify-content: center; }
        @media (min-width: 1024px) { .acc-text-box { width: 55%; } }
        .acc-desc { color: var(--offwhiteColor); max-width: 42rem; font-weight: 300; }

        /* Join Section */
        .join-section { position: relative; z-index: 20; width: 100%; overflow: hidden; background-color: var(--primaryColor); }
        
        .join-box { padding: 5rem 1.5rem; max-width: 1440px; margin: 0 auto; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; z-index: 10; width: 100%; }
        @media (min-width: 768px) { .join-box { padding: 8rem 3rem; } }
        @media (min-width: 1024px) { .join-box { padding: 10rem 3rem; gap: 4rem; } }
        
        .join-bg-effects { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
        .join-bg-image { width: 100%; height: 100%; object-fit: cover; opacity: 0.15; filter: grayscale(100%); }
        
        .join-glow-orb { position: absolute; top: -10%; right: 15%; width: 600px; height: 600px; background-color: var(--glowColor); border-radius: 50%; filter: blur(100px); mix-blend-mode: screen; transition: background-color 1s; }
        .join-section:hover .join-glow-orb { background-color: var(--glowColorHover); }
        
        .text-muted-white { color: var(--mutedWhiteColor); }
        .join-cta-wrapper { position: relative; z-index: 20; flex-shrink: 0; margin-top: 1rem; align-self: flex-end; }
        @media (min-width: 1024px) { .join-cta-wrapper { margin-top: 2rem; } }
        .join-cta-btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem 3rem; background-color: var(--secondaryColor); color: var(--whiteColor); transition: all 0.5s; box-shadow: 0 20px 50px var(--ctaGlowColor); position: relative; border-radius: 0.25rem; text-decoration: none; }
        @media (min-width: 768px) { .join-cta-btn { padding: 1.5rem 4rem; } }
        .join-cta-btn:hover { background-color: var(--whiteColor); color: var(--primaryColor); transform: scale(1.05); }
        .cta-label { font-family: monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--offwhiteColor); margin-bottom: 0; transition: color 0.3s; }
        .join-cta-btn:hover .cta-label { color: var(--labelColor); }
        .cta-text { font-family: var(--primaryFont); font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; font-size: 1rem; line-height: 1.25; margin: 0; }
        @media (min-width: 768px) { .cta-text { font-size: 1.125rem; } }
        .cta-border-ring { position: absolute; inset: -10px; width: auto; height: auto; border: 1px solid var(--ringBorderColor); border-radius: 0.25rem; transform: scale(1); transition: all 0.7s; pointer-events: none; }
        .join-cta-btn:hover .cta-border-ring { inset: -15px; border-color: var(--ctaGlowColor); transform: scale(1); }

       .pillar-name{display:block;}
  .pillar-role{color:#e2691f;font-weight:700;letter-spacing:.5px;font-size:13px;text-transform:uppercase;display:block;margin-bottom:14px;}
  .pillar-desc{color:#333;font-size:15px;line-height:1.6;}
  .aspect-square{aspect-ratio:1/1;}
  .border-b-4-accent{border-bottom:4px solid #e2691f;}
  .grayscale{filter:grayscale(100%);}
  .object-fit-cover{object-fit:cover;}
  .w-100{width:100%;} .h-100{height:100%;}
  .mb-4{margin-bottom:16px;} .pb-4{padding-bottom:16px;}
  * {box-sizing:border-box;}
 
  /* ---- arrow positioning: default (desktop) sits just outside the cards ---- */
  #teamPrev, #teamNext{ width:44px; height:44px; font-size:20px; }
  #teamPrev{ left:-38px; }
  #teamNext{ right:-38px; }
 
  /* tablet: pull arrows inward so they don't overflow the viewport edge */
  @media (max-width: 1000px){
    #teamPrev{ left:6px; }
    #teamNext{ right:6px; }
  }
 
  /* mobile: smaller buttons, tucked fully inside the slider */
  @media (max-width: 700px){
    #teamPrev, #teamNext{
      width:36px;
      height:36px;
      font-size:16px;
      top:32%;
    }
    #teamPrev{ left:6px; }
    #teamNext{ right:6px; }
  }

@media (max-width: 767px) {
  .common-orb {
    position: absolute;
    background-color: var(--secondaryColor);
    border-radius: 50%;
    z-index: 0;
    width: 40px;
    height: 40px;
    top: -1px;
    left: -12px;
}
}