/* Inversive Labs Theme - Color Overrides Only */
/* This file ONLY overrides colors from taran.space Webflow CSS */
/* All layout, positioning, and structure comes from Webflow CSS */

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    scroll-padding-top: 100px;
}

body {
    overflow-x: hidden;
}

/* Font Override */
*:not(code):not(pre) {
    font-family: 'Raleway', sans-serif !important;
}

/* Code blocks font override */
code,
pre,
pre *,
code *,
.highlight code,
.highlight pre,
pre code,
kbd,
samp,
tt,
.container article code,
.container article pre,
.container article pre code,
.container article .highlight,
.container article .highlight pre,
.container article .highlight code,
.container article .highlight *,
div[style*="color: rgba(209, 213, 219"] code,
div[style*="color: rgba(209, 213, 219"] pre {
    font-family: 'Ubuntu Mono', Monaco, 'Courier New', Consolas, monospace !important;
}

:root {
    /* Primary Colors - Grey */
    --primary: #808080;
    --primary-light: #a0a0a0;
    --primary-dark: #606060;
    --primary-glow: rgba(128, 128, 128, 0.3);

    /* Secondary Colors - Light Grey */
    --secondary: #999999;
    --secondary-light: #b3b3b3;
    --secondary-dark: #666666;

    /* Accent - Medium Grey */
    --accent: #888888;
    --accent-light: #9a9a9a;

    /* Backgrounds */
    --bg-primary: #000000;
    --bg-secondary: transparent;
    --bg-tertiary: transparent;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
}

/* Override yellow gradient with blue gradient */
.h1-yellow {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Body background */
.body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* WebGL Shader Canvas */
#shader-canvas,
#instant-paths {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/* Section backgrounds */
.section {
    background: transparent !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

/* Sections that will animate on scroll */
.section:not(.first) {
    opacity: 0;
    transform: translateY(30px);
}

/* Portfolio page: fade in on load */
#portfolio-page {
    opacity: 1;
    min-height: auto !important;
    height: auto !important;
}

/* Portfolio page container should expand */
#portfolio-page .container {
    min-height: auto !important;
    height: auto !important;
}

/* Portfolio page title appears first */
#portfolio-page h2,
#portfolio-page h2 + .paragraph-4 {
    animation: fadeInPage 0.8s ease-out 0.2s forwards;
    opacity: 0;
}

/* Portfolio page content appears after title */
#portfolio-page h3,
#portfolio-page table,
#portfolio-page h3 + .paragraph-4 {
    animation: fadeInPage 0.8s ease-out 0.6s forwards;
    opacity: 0;
}

/* Ensure nested elements are visible once parent animates */
#portfolio-page table * {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Page titles - Team, Tooling, Blog, Portfolio pages */
.section > .container > h2:first-child {
    margin-top: 2rem !important;
    margin-bottom: 0.5rem !important;
}

/* When h2 is followed by subtitle paragraph */
.section > .container > h2:first-child + .paragraph-4 {
    margin-top: 0 !important;
    margin-bottom: 4rem !important;
}

/* Services page - h2 without subtitle needs more bottom margin */
#services > .container > h2:first-child {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/* Scroll offset for anchor links to account for fixed navbar */
#services,
#contact,
#portfolio-page,
#team-page,
#tooling-page,
#blog-page,
.section.first {
    scroll-margin-top: 80px;
}

/* Portfolio page section spacing */
#portfolio-page {
    padding-top: 5rem !important;
}

#portfolio-page h2 {
    margin-bottom: 0.5rem !important;
    margin-top: 3rem !important;
}

#portfolio-page h2 + .paragraph-4 {
    margin-bottom: 4rem !important;
}

#portfolio-page h3 {
    margin-top: 5rem !important;
    margin-bottom: 1rem !important;
}

#portfolio-page h3:first-of-type {
    margin-top: 0 !important;
}

/* Mobile adjustments for portfolio, team, tooling, blog */
@media (max-width: 768px) {
    #portfolio-page h2,
    #team-page h2,
    #tooling-page h2,
    #blog-page h2 {
        font-size: 2rem !important;
        margin-top: 2rem !important;
        margin-bottom: 0 !important;
        padding-top: 2rem !important;
    }

    #portfolio-page h2 + .paragraph-4,
    #team-page h2 + .paragraph-4,
    #tooling-page h2 + .paragraph-4,
    #blog-page h2 + .paragraph-4 {
        margin-bottom: 3rem !important;
    }

    #portfolio-page h3 {
        margin-top: 3.5rem !important;
        font-size: 1.5rem !important;
    }
}

@keyframes fadeInPage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.section.first {
    background: transparent !important;
    padding-top: 5rem !important;
    padding-bottom: 2rem !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Hero section on home page needs no top padding - must come after .section.first */
#hero {
    padding-top: 0 !important;
    padding-bottom: 5rem !important;
}

.section.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger children within sections (but not first sections) */
.section:not(.first) > * {
    opacity: 0;
    transform: translateY(15px);
}


/* Make first section children visible immediately - but not hero or portfolio */
.section.first:not(#hero):not(#portfolio-page) *,
.section.first:not(#hero):not(#portfolio-page) > *,
.section.first:not(#hero):not(#portfolio-page) .container *,
.section.first:not(#hero):not(#portfolio-page) .container > *,
.section.first:not(#hero):not(#portfolio-page) .container > * > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

.section.animate-in:not(.first) > *:nth-child(1) {
    animation: fadeInUpChild 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

.section.animate-in:not(.first) > *:nth-child(2) {
    animation: fadeInUpChild 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.section.animate-in:not(.first) > *:nth-child(3) {
    animation: fadeInUpChild 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.45s forwards;
}

.section.animate-in:not(.first) > *:nth-child(4) {
    animation: fadeInUpChild 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

@keyframes fadeInUpChild {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero section animations - only for #hero */
#hero .hero-cont > * {
    opacity: 0;
    transform: translateY(20px);
}

#hero .hero-cont .heading {
    animation: fadeInUpHero 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
}

#hero .hero-cont .paragraph-4 {
    animation: fadeInUpHero 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

#hero .hero-cont .button-big-copy {
    animation: fadeInUpHero 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

#hero .hero-cont .logo-carousel {
    animation: fadeInUpCarousel 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

@keyframes fadeInUpHero {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUpCarousel {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Carousel animations */
.logo-carousel {
    position: relative;
    overflow: hidden;
}

.carousel-track {
    animation: scroll 20s linear infinite;
    animation-delay: 1.5s;
}

.carousel-logo {
    filter: grayscale(1) brightness(0.5);
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* One-time wave effect on page load - each logo bounces with a delay */
.carousel-logo:nth-child(1) { animation: waveOnce 0.6s ease-out 1s forwards; }
.carousel-logo:nth-child(2) { animation: waveOnce 0.6s ease-out 1.1s forwards; }
.carousel-logo:nth-child(3) { animation: waveOnce 0.6s ease-out 1.2s forwards; }
.carousel-logo:nth-child(4) { animation: waveOnce 0.6s ease-out 1.3s forwards; }
.carousel-logo:nth-child(5) { animation: waveOnce 0.6s ease-out 1.4s forwards; }
.carousel-logo:nth-child(6) { animation: waveOnce 0.6s ease-out 1.5s forwards; }
.carousel-logo:nth-child(7) { animation: waveOnce 0.6s ease-out 1.6s forwards; }
.carousel-logo:nth-child(8) { animation: waveOnce 0.6s ease-out 1.7s forwards; }
.carousel-logo:nth-child(9) { animation: waveOnce 0.6s ease-out 1.8s forwards; }

/* Duplicate logos for seamless loop */
.carousel-logo:nth-child(10) { animation: waveOnce 0.6s ease-out 1s forwards; }
.carousel-logo:nth-child(11) { animation: waveOnce 0.6s ease-out 1.1s forwards; }
.carousel-logo:nth-child(12) { animation: waveOnce 0.6s ease-out 1.2s forwards; }
.carousel-logo:nth-child(13) { animation: waveOnce 0.6s ease-out 1.3s forwards; }
.carousel-logo:nth-child(14) { animation: waveOnce 0.6s ease-out 1.4s forwards; }
.carousel-logo:nth-child(15) { animation: waveOnce 0.6s ease-out 1.5s forwards; }
.carousel-logo:nth-child(16) { animation: waveOnce 0.6s ease-out 1.6s forwards; }
.carousel-logo:nth-child(17) { animation: waveOnce 0.6s ease-out 1.7s forwards; }
.carousel-logo:nth-child(18) { animation: waveOnce 0.6s ease-out 1.8s forwards; }

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

.carousel-logo:hover {
    transform: scale(1.1) translateY(-2px);
    filter: grayscale(0) brightness(1);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Tooling page animations */
.tooling-grid {
    opacity: 0;
    transform: translateY(20px);
}

.section.animate-in .tooling-grid {
    animation: fadeInUpHero 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

/* Wave effect for tooling card icons */
.tooling-card .product-icon svg {
    animation: toolingIconWave 0.6s ease-out forwards;
}

.tooling-card:nth-child(1) .product-icon svg {
    animation-delay: 0.6s;
}

.tooling-card:nth-child(2) .product-icon svg {
    animation-delay: 0.75s;
}

.tooling-card:nth-child(3) .product-icon svg {
    animation-delay: 0.9s;
}

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


/* Hide old animation wrapper background */
.animation-wrapper {
    display: none !important;
}

.div-block-7,
.html-embed {
    display: none !important;
}

/* Navbar */
.navbar {
    background: #000000 !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3) !important;
    min-height: 80px !important;
}

.navbar .container {
    min-height: 80px !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.navbar__logo {
    display: flex !important;
    align-items: center !important;
}

/* Desktop logo sizing - larger on desktop */
@media (min-width: 769px) {
    .brand .navbar__logo,
    img.navbar__logo,
    .navbar__logo {
        height: 80px !important;
        width: auto !important;
    }
}

.navlink {
    color: var(--text-secondary) !important;
}

.navlink:hover,
.navlink.w--current {
    color: var(--primary) !important;
}

/* Buttons */
.button-big,
.button-big-copy,
.button-regular {
    background: rgba(0, 0, 0, 1) !important;
    border: 2px solid rgba(128, 128, 128, 0.3) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
}

.button-big:hover,
.button-big-copy:hover,
.button-regular:hover {
    background: rgba(0, 0, 0, 1) !important;
    border-color: rgba(128, 128, 128, 0.5) !important;
    box-shadow: 0 8px 24px rgba(128, 128, 128, 0.1) !important;
    transform: translateY(-2px) !important;
    color: var(--text-primary) !important;
}

.button.w-button {
    background: rgba(128, 128, 128, 0.15) !important;
    border: 1px solid rgba(128, 128, 128, 0.5) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.button.w-button:hover {
    background: rgba(128, 128, 128, 0.25) !important;
    box-shadow: 0 0 25px rgba(128, 128, 128, 0.2) !important;
    transform: translateY(-2px) !important;
    border-color: rgba(128, 128, 128, 0.8) !important;
}

/* Links */
.email,
.link-block-2,
.cv-company {
    color: var(--primary) !important;
}

.email {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
}

.email:hover,
.link-block-2:hover,
.cv-company:hover {
    color: var(--primary-light) !important;
    text-shadow: 0 0 20px var(--primary-glow) !important;
}

/* Tabs */
.tab-1,
.tab {
    color: var(--text-muted) !important;
    border-bottom: 2px solid transparent !important;
    text-decoration: none !important;
}

.tab-1 div,
.tab div {
    text-decoration: none !important;
    border-bottom: none !important;
}

.tab-1:hover,
.tab:hover {
    color: var(--text-secondary) !important;
}

.tab-1.w--current,
.tab.w--current {
    color: var(--text-primary) !important;
    border-bottom-color: var(--primary) !important;
    background: transparent !important;
}

/* Mobile tab fixes */
@media (max-width: 768px) {
    .tab-1,
    .tab,
    .w-tab-link {
        text-decoration: none !important;
        border-bottom: none !important;
        border: none !important;
    }

    .tab-1.w--current,
    .tab.w--current,
    .w-tab-link.w--current {
        border-bottom: 2px solid var(--primary) !important;
    }

    .tab-1 div,
    .tab div,
    .w-tab-link div {
        text-decoration: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Reduce spacing between Services title and tabs on mobile */
    #services .tabs {
        margin-top: 1.25rem !important;
    }

    #services h2 {
        margin-bottom: 0 !important;
        font-size: 2rem !important;
    }

    #contact h2 {
        font-size: 2rem !important;
    }

    #services .tabs-menu {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Improve hero section typography on mobile */
    #hero .hero-cont .heading,
    #hero .hero-cont h1.heading,
    .section.first .hero-cont .heading,
    .section.first .hero-cont h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.25rem !important;
        letter-spacing: -0.02em !important;
        max-width: 100% !important;
    }

    #hero .hero-cont .paragraph-4,
    #hero .hero-cont p.paragraph-4,
    .section.first .hero-cont .paragraph-4,
    .section.first .hero-cont p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
        max-width: 100% !important;
    }

    /* Adjust Contact Us button in hero */
    #hero .hero-cont .button-big-copy,
    .section.first .hero-cont .button-big-copy {
        font-size: 0.9rem !important;
        padding: 0.75rem 1.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Extra mobile optimization for very small screens */
    #hero .hero-cont .heading,
    #hero .hero-cont h1.heading,
    .section.first .hero-cont .heading {
        font-size: 1.5rem !important;
    }
}

/* Tab panes with enhanced animations */
.w-tabs .w-tab-pane {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    transform: translateX(-30px) !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0s 0.4s !important;
    will-change: opacity, transform;
    position: absolute !important;
    width: 100%;
}

.w-tabs .w-tab-pane.w--tab-active {
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    transform: translateX(0) !important;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0s !important;
    position: relative !important;
}

/* Tab content wrapper positioning */
.w-tabs .tabs-content,
.w-tabs .w-tab-content {
    position: relative !important;
    min-height: 300px;
}

/* Service title styling - only for tab panes on index */
.w-tab-pane .service-title {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-align: left !important;
}

/* Staggered animation for tab content children */
.w-tab-pane .service-title,
.w-tab-pane .tab-text,
.w-tab-pane .buttons {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.w-tab-pane.w--tab-active .service-title {
    animation: fadeInUp 0.6s ease-out 0s forwards;
}

.w-tab-pane.w--tab-active .tab-text:nth-child(2) {
    animation: fadeInUp 0.6s ease-out 0.15s forwards;
}

.w-tab-pane.w--tab-active .tab-text:nth-child(3) {
    animation: fadeInUp 0.6s ease-out 0.3s forwards;
}

.w-tab-pane.w--tab-active .buttons {
    animation: fadeInUp 0.6s ease-out 0.45s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab button animations */
.tabs-menu .tab-1,
.tabs-menu .tab,
.tabs-menu .w-tab-link {
    position: relative !important;
    transition: all 0.25s ease-out !important;
    transform: translateY(0) !important;
    overflow: visible !important;
}

.tabs-menu .tab-1:hover,
.tabs-menu .tab:hover,
.tabs-menu .w-tab-link:hover {
    transform: translateY(-3px) !important;
    filter: brightness(1.2) !important;
}

.tabs-menu .tab-1.w--current,
.tabs-menu .tab.w--current,
.tabs-menu .w-tab-link.w--current {
    transform: translateY(0) !important;
}

/* Glow effect on active tab */
.tabs-menu .tab-1.w--current::before,
.tabs-menu .tab.w--current::before,
.tabs-menu .w-tab-link.w--current::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--primary), transparent) !important;
    animation: glow 2s ease-in-out infinite !important;
}

@keyframes glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Scale effect on tab text */
.tabs-menu .tab-1 div,
.tabs-menu .tab div,
.tabs-menu .w-tab-link div {
    transition: transform 0.25s ease-out !important;
    display: inline-block !important;
}

.tabs-menu .tab-1:hover div,
.tabs-menu .tab:hover div,
.tabs-menu .w-tab-link:hover div {
    transform: scale(1.05) !important;
}

/* Forms */
.text-field,
.textarea {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(128, 128, 128, 0.25) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.9rem !important;
    transition: all 0.25s ease !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
    max-width: 280px !important;
}

.text-field:hover,
.textarea:hover {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(128, 128, 128, 0.4) !important;
}

.text-field:focus,
.textarea:focus {
    border-color: rgba(128, 128, 128, 0.6) !important;
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.08) !important;
    outline: none !important;
}

.text-field::placeholder,
.textarea::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.5 !important;
    font-weight: 400 !important;
}

.textarea {
    min-height: 120px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
}

/* Cards */
.service-card,
.case-study-card,
.diagram-block {
    background: transparent !important;
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.service-card:hover,
.case-study-card:hover,
.diagram-block:hover {
    background: transparent !important;
    border-color: rgba(128, 128, 128, 0.6) !important;
    box-shadow: 0 0 30px rgba(128, 128, 128, 0.1) !important;
    transform: translateY(-4px) !important;
}

/* Tags */
.tag,
.category,
.category-text {
    background: transparent !important;
    border: 1px solid rgba(128, 128, 128, 0.4) !important;
    color: var(--text-secondary) !important;
}

/* Numbers */
.number {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Yellow text -> blue */
.diagram-text-yellow {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Logo Carousel */
.logo-carousel {
    width: 100%;
    margin: 3rem 0 0;
    overflow: hidden;
    position: relative;
    padding: 1.5rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 100px, black calc(100% - 100px), transparent 100%);
}

.carousel-track {
    display: flex;
    gap: 3rem;
    animation: scroll 35s linear infinite;
    width: fit-content;
    align-items: center;
}

.carousel-logo {
    height: 40px;
    width: 40px;
    object-fit: contain;
    filter: grayscale(100%) brightness(1.2) invert(0.8);
    opacity: 0.7;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.carousel-logo:hover {
    filter: grayscale(50%) brightness(1.4) invert(0.9);
    opacity: 1;
    transform: scale(1.1);
}

.carousel-logo-large {
    height: 50px !important;
    width: 50px !important;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logo-carousel:hover .carousel-track {
    animation-play-state: paused;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .section {
        padding-top: 2.5rem !important;
        padding-bottom: 4rem !important;
    }

    .section.first {
        padding-top: 5rem !important;
        padding-bottom: 2rem !important;
    }

    #portfolio-page.section.first {
        padding-top: 8rem !important;
    }

    #hero {
        padding-top: 0 !important;
        padding-bottom: 2rem !important;
    }

    .navbar {
        background: rgba(0, 0, 0, 0.95) !important;
        padding: 0.35rem 0 !important;
    }

    .navbar .container.nav {
        padding: 0.35rem 0.75rem !important;
    }

    .navbar__logo {
        height: 28px !important;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .logo-carousel {
        margin: 2rem 0 0;
        padding: 1rem 0;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(100% - 50px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(100% - 50px), transparent 100%);
    }

    .carousel-track {
        gap: 2rem;
        animation: scroll 25s linear infinite;
    }

    .carousel-logo {
        height: 32px;
        width: 32px;
    }

    .carousel-logo-large {
        height: 40px !important;
        width: 40px !important;
    }
}

/* Old logo effects - kept for other pages */
.logo-hero:hover {
    transform: translateY(-5px) scale(1.05) !important;
}

.logo-hero:hover img {
    filter: drop-shadow(0 0 15px var(--primary-glow)) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.heading {
    color: var(--text-primary) !important;
    font-weight: 300 !important;
    text-transform: none !important;
}

/* Paragraphs */
.paragraph-4,
.tab-text,
p {
    color: var(--text-secondary) !important;
}

/* Add spacing to bullet points in tab text */
.tab-text {
    line-height: 1.6 !important;
}

.tab-text strong {
    display: block;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Style the bullet list in tabs */
.tab-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
    margin-bottom: 0;
}

.tab-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary) !important;
}

.tab-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
}

/* Footer */
.footer {
    background: #000000 !important;
    border-top: 1px solid rgba(128, 128, 128, 0.3) !important;
}

/* Accordion */
.accordion-header.opened {
    border-left: 3px solid var(--primary) !important;
}

/* Checkboxes */
.w-checkbox-input--inputType-custom.w--redirected-checked {
    background: var(--gradient-primary) !important;
    border-color: var(--primary) !important;
}

/* Social icons */
.social-media:hover {
    transform: translateY(-3px) !important;
    filter: drop-shadow(0 4px 12px var(--primary-glow)) !important;
}

/* Selection */
::selection {
    background: rgba(128, 128, 128, 0.3) !important;
    color: var(--text-primary) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 6px;
    border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-accent);
}

/* Portfolio table hover */
.portfolio-table tbody tr:hover {
    background: transparent !important;
    border-bottom-color: rgba(128, 128, 128, 0.5) !important;
}

.table-link {
    color: var(--primary) !important;
}

.table-link:hover {
    color: var(--primary-light) !important;
}

.table-link svg {
    display: none;
}

/* Text logo */
.text-logo {
    color: var(--text-muted) !important;
}

.logo-hero:hover .text-logo {
    color: var(--primary-light) !important;
}

/* Field labels */
.field-label {
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
    margin-top: 0 !important;
    display: block !important;
    letter-spacing: 0.01em !important;
}

.optional {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    opacity: 0.7 !important;
}

/* Mobile menu */
.w-nav-button {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    display: none !important;
    position: relative;
    z-index: 1001;
    width: 20px;
    height: 20px;
    padding: 0 !important;
    align-self: center !important;
}

.w-nav-button:hover {
    color: var(--primary) !important;
}

/* Hamburger icon animation */
.w-icon-nav-menu {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
}

.w-icon-nav-menu::before,
.w-icon-nav-menu::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.w-icon-nav-menu::before {
    top: 0;
    box-shadow: 0 6px 0 #ffffff;
}

.w-icon-nav-menu::after {
    bottom: 0;
}

/* Hover effect */
.w-nav-button:hover .w-icon-nav-menu::before,
.w-nav-button:hover .w-icon-nav-menu::after {
    background: var(--primary);
}

.w-nav-button:hover .w-icon-nav-menu::before {
    box-shadow: 0 6px 0 var(--primary);
}

/* Active state - transform to X */
.w-nav-button.w--open .w-icon-nav-menu::before {
    top: 6px;
    transform: rotate(45deg);
    box-shadow: none;
    background: var(--primary);
}

.w-nav-button.w--open .w-icon-nav-menu::after {
    bottom: 6px;
    transform: rotate(-45deg);
    background: var(--primary);
}

/* Show hamburger on mobile */
@media (max-width: 991px) {
    .w-nav-button {
        display: block !important;
        margin-right: 0.5rem !important;
    }

    .w-nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        height: 100vh !important;
        width: 220px !important;
        background: rgba(0, 0, 0, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-left: 1px solid rgba(128, 128, 128, 0.3) !important;
        padding: 4rem 1.5rem 1.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        transition: right 0.3s ease !important;
        z-index: 1000 !important;
        margin: 0 !important;
    }

    .w-nav-menu.w--open {
        right: 0 !important;
    }

    .navlink {
        font-size: 0.95rem !important;
        padding: 0.6rem 0 !important;
        border-bottom: 1px solid rgba(128, 128, 128, 0.15) !important;
        display: block !important;
    }

    .button-big.request,
    .button-big-copy.request {
        display: none !important;
    }

    .w-icon-nav-menu {
        color: var(--text-primary) !important;
    }
}

/* Team page styles */
.team-content {
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    align-items: start;
}

.team-member {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(128, 128, 128, 0.3) !important;
    border-radius: 12px;
}

.team-member:hover {
    background: transparent !important;
    border-color: rgba(128, 128, 128, 0.6) !important;
    box-shadow: 0 0 30px rgba(128, 128, 128, 0.1) !important;
    transform: translateY(-4px) !important;
}

.member-photo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.member-photo img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid rgba(128, 128, 128, 0.3);
}

.social-icons {
    display: flex;
    gap: 0.75rem;
    margin-top: 0;
    justify-content: center;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 8px;
    color: var(--text-secondary);
}

.social-link:hover {
    background: transparent;
    border-color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(128, 128, 128, 0.2);
}

.member-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem;
}

.member-title {
    font-size: 0.9rem;
    color: var(--primary) !important;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.member-description {
    font-size: 0.95rem;
    color: var(--text-secondary) !important;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Portfolio table */
.portfolio-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
}

.portfolio-table thead {
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.portfolio-table th {
    padding: 0.2rem 0.4rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.portfolio-table tbody tr {
    border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}

.portfolio-table td {
    padding: 0.3rem 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary) !important;
    line-height: 1.3;
}

.portfolio-table td:first-child {
    font-weight: 500;
    color: var(--text-primary) !important;
}

/* Blog posts */
.blog-posts {
    display: grid;
    gap: 0;
    margin-top: 2rem;
}

.blog-post-preview {
    padding: 2rem 0;
    background: transparent !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    transition: all 0.3s ease;
}

.blog-post-preview:last-child {
    border-bottom: none;
}

.blog-post-preview:hover {
    background: transparent !important;
}

.blog-post-header {
    margin-bottom: 1rem;
}

.blog-post-preview h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.blog-post-preview h3 a {
    color: var(--text-primary) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-post-preview h3 a:hover {
    color: var(--primary) !important;
}

.blog-post-meta {
    font-size: 0.85rem;
    color: var(--text-muted) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.blog-post-date {
    color: var(--text-muted) !important;
}

.blog-post-excerpt {
    font-size: 0.95rem;
    color: var(--text-secondary) !important;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.blog-post-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.blog-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 4px;
    color: var(--text-muted) !important;
    text-transform: lowercase;
}

.blog-read-more {
    font-size: 0.9rem;
    color: var(--primary) !important;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.blog-read-more:hover {
    color: var(--primary-light) !important;
    transform: translateX(4px);
}

/* Contact form layout */
.flex-contact {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    margin-top: 2.5rem;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 6rem;
}

.contact-info h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    margin-bottom: 0;
    line-height: 1.2;
}

.contact-info p {
    color: var(--text-secondary) !important;
    line-height: 1.7;
    font-size: 0.95rem;
}

.form-block {
    width: 100%;
    background: rgba(0, 0, 0, 1);
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.div-block-13 {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-start;
}

/* Tooling Grid */
.tooling-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.tooling-card {
    display: block;
    background: rgba(0, 0, 0, 1);
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
    height: 100%;
}

.tooling-card:hover {
    border-color: rgba(128, 128, 128, 0.5);
    box-shadow: 0 8px 24px rgba(128, 128, 128, 0.1);
    transform: translateY(-4px);
}

.tooling-card-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tooling-card .product-icon {
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
}

.tooling-card .product-icon svg {
    color: var(--text-secondary);
}

.tooling-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary) !important;
    margin: 0;
    text-align: center;
}

.tooling-card p {
    font-size: 0.95rem;
    color: var(--text-secondary) !important;
    line-height: 1.7;
    margin: 0;
    flex-grow: 1;
}

.tooling-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tooling-card .product-tag {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 4px;
    color: var(--text-muted) !important;
}

@media (max-width: 991px) {
    .tooling-grid {
        grid-template-columns: 1fr;
    }

    /* On mobile, reduce vertical centering to prevent too much whitespace */
    #tooling-page {
        min-height: auto !important;
        align-items: flex-start !important;
    }

    #tooling-page h2 {
        margin-top: 2rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tooling-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Very Large Screens - Maintain proper proportions */
@media (min-width: 1920px) {
    /* Constrain container to prevent excessive stretching */
    .container {
        max-width: 1400px !important;
    }

    /* Ensure sections maintain proper proportions */
    .section {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 2560px) {
    /* 2K/4K displays - further constrain for readability */
    .container {
        max-width: 1600px !important;
    }

    /* Scale up fonts proportionally on very large screens */
    html {
        font-size: 18px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .team-member {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .flex-contact {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info {
        position: static;
    }

    .form-block {
        padding: 2rem 1.5rem;
        background: rgba(0, 0, 0, 1) !important;
        border-color: rgba(128, 128, 128, 0.3) !important;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .portfolio-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .portfolio-table table {
        width: auto;
        min-width: 100%;
    }

    .portfolio-table th {
        padding: 0.4rem 0.6rem;
        font-size: 0.65rem;
        white-space: nowrap;
        min-width: 80px;
    }

    .portfolio-table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
        white-space: normal;
        min-width: 100px;
        max-width: 250px;
    }

    .portfolio-table td:first-child {
        min-width: 120px;
        white-space: nowrap;
    }

    .portfolio-table th:first-child {
        min-width: 120px;
    }

    .portfolio-table td:nth-child(2) {
        min-width: 100px;
    }

    .portfolio-table td:nth-child(3) {
        min-width: 200px;
        max-width: 300px;
        white-space: normal;
        line-height: 1.5;
    }

    .portfolio-table td:last-child {
        min-width: 80px;
        text-align: center;
    }
}

/* Blog Post Styles */
.blog-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.blog-post-preview {
    background: #000 !important;
    outline: 1px solid rgba(128, 128, 128, 0.3);
    outline-offset: -1px;
    border-radius: 12px;
    transition: outline-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    opacity: 1 !important;
}

.blog-post-preview * {
    background-color: transparent !important;
}

.blog-post-preview:hover {
    background: #000 !important;
    opacity: 1 !important;
    outline-color: rgba(128, 128, 128, 0.6);
    box-shadow: 0 0 30px rgba(128, 128, 128, 0.1);
    transform: translateY(-4px);
}

.blog-post-image {
    width: 100%;
    aspect-ratio: 24 / 9;
    overflow: hidden;
    background: #000 !important;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.5s ease;
    opacity: 0.7;
    filter: brightness(0.8);
}

.blog-post-preview:hover .blog-post-image img {
    transform: scale(1.05);
    opacity: 0.85;
    filter: brightness(0.9);
}

.blog-post-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.blog-post-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
}

.blog-post-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 300;
}

.blog-post-excerpt {
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    flex: 1;
    font-size: 0.85rem;
}

.blog-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.blog-tag {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 4px;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.blog-tag:hover {
    border-color: rgba(128, 128, 128, 0.6);
    color: var(--text-secondary);
}


/* Tablet and mobile responsive */
@media (max-width: 1024px) {
    .blog-posts {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .blog-posts {
        gap: 1rem;
    }

    .blog-post-content {
        padding: 1rem;
    }

    .blog-post-header h3 {
        font-size: 1rem;
        padding-top: 0.5rem !important;
    }

    .blog-post-excerpt {
        font-size: 0.75rem;
    }

    .blog-post-image {
        aspect-ratio: 16 / 9;
    }
}

/* Team page spacing */
#team-page {
    padding-top: 5rem !important;
    padding-bottom: 8rem !important;
}

#team-page h2 {
    margin-top: 3rem !important;
}

/* Blog page spacing */
#blog-page {
    padding-top: 5rem !important;
}

#blog-page h2 {
    margin-top: 3rem !important;
}

/* Tooling page spacing */
#tooling-page {
    padding-top: 5rem !important;
}

#tooling-page h2 {
    margin-top: 3rem !important;
}

/* Team member expandable cards */
.team-member-card {
    background: rgba(0, 0, 0, 1);
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: auto;
}

.team-member-card:hover {
    border-color: rgba(128, 128, 128, 0.5);
    box-shadow: 0 8px 24px rgba(128, 128, 128, 0.1);
}

.team-member-card .member-photo {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 0.75rem;
    border: 2px solid rgba(128, 128, 128, 0.2);
}

.team-member-card .member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-card .member-header {
    text-align: center;
    margin-bottom: 0.75rem;
}

.team-member-card .member-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 0.3rem 0;
    text-align: center;
}

.team-member-card .member-title {
    font-size: 0.8rem;
    color: rgba(128, 128, 128, 0.9);
    margin: 0 0 0.6rem 0;
}

.team-member-card .social-icons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.team-member-card .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.2);
    transition: all 0.3s ease;
}

.team-member-card .social-link:hover {
    background: rgba(128, 128, 128, 0.2);
    border-color: rgba(128, 128, 128, 0.4);
    transform: translateY(-2px);
}

.team-member-card .social-link svg {
    fill: rgba(255, 255, 255, 0.8);
    width: 16px;
    height: 16px;
}

.team-member-card .member-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-member-card .member-details p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.6rem;
}

.team-member-card .expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.55rem 1rem;
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-member-card .expand-btn:hover {
    background: rgba(128, 128, 128, 0.15);
    border-color: rgba(128, 128, 128, 0.3);
}

.team-member-card .expand-btn .btn-text-less {
    display: none;
}

.team-member-card.expanded .expand-btn .btn-text-more {
    display: none;
}

.team-member-card.expanded .expand-btn .btn-text-less {
    display: inline;
}

.team-member-card .expand-icon {
    transition: transform 0.3s ease;
}

.team-member-card.expanded .expand-icon {
    transform: rotate(180deg);
}

/* Mobile adjustments for team cards */
@media (max-width: 768px) {
    #team-page {
        padding-bottom: 6rem !important;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .team-member-card {
        padding: 1rem;
        background: rgba(0, 0, 0, 1);
    }

    .team-member-card .member-photo {
        width: 95px;
        height: 95px;
    }

    .team-member-card .member-header h3 {
        font-size: 1.05rem;
        text-align: center;
    }

    .team-member-card .member-title {
        font-size: 0.75rem;
    }

    .team-member-card .social-link {
        width: 26px;
        height: 26px;
    }

    .team-member-card .social-link svg {
        width: 14px;
        height: 14px;
    }

    .team-member-card .member-summary p {
        font-size: 0.8rem;
    }

    .team-member-card .member-details p {
        font-size: 0.78rem;
    }

    .team-member-card .expand-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.85rem;
    }
}

/* Simple: Just push the navbar down a bit and make it opaque */
.navbar {
    margin-top: 12px;
    background: #000000 !important;
    background-color: #000000 !important;
    opacity: 1 !important;
}


/* Black box to fill the 12px gap at the top - ensures no content shows through */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 12px;
    background: #000000;
    z-index: 10000; /* High z-index to cover everything */
    pointer-events: none;
}

/* Ensure black bar appears on blog post pages above the overlay */
body.post-page::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 12px;
    background: #000000;
    z-index: 10001;
    pointer-events: none;
}