/* Font Face */
@font-face {
    font-family: 'Neue Montreal';
    src: url('assets/fonts/NeueMontreal-Medium.woff2') format('woff2'),
         url('assets/fonts/NeueMontreal-Medium.woff') format('woff'),
         url('assets/fonts/NeueMontreal-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Prevent FOUC and ensure hero is full height from start */
.hero {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
}

.hero-video {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
}

.hero-video video {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
}

:root {
    /* Color Palette */
    --charcoal-black: #1E1E1E;
    --ivory-white: #F6F4EF;
    --champagne-gold: #C6A664;
    --warm-sand: #D8CFC0;
    --deep-sage: #A5B89C;
    
    /* Typography */
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Inter', sans-serif;
    
    /* Spacing */
    --section-padding: 120px 0;
    --container-padding: 0 40px;
    
    /* Transitions */
    --transition-smooth: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    background-color: var(--ivory-white);
    color: var(--charcoal-black);
    line-height: 1.6;
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 100%;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    margin-bottom: 3rem;
    color: var(--charcoal-black);
}

/* Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--container-padding);
}

.hero .container {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Force hero to take full viewport height */
.hero {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
}

/* Ensure video maintains full height from load */
.hero-video,
.hero-video video {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: transparent;
    transition: var(--transition-smooth);
}

.nav-container {
    width: 100%;
    padding: 0 60px;
    display: flex;
    align-items: center;
    height: 80px;
    z-index: 9998;
    position: relative;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nav-left {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.nav-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-center .nav-logo {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--ivory-white);
    text-decoration: none;
    transition: var(--transition-fast);
    z-index: 10000;
    position: relative;
}

.nav-center .nav-logo:hover {
    color: var(--champagne-gold);
}

.nav-logo-text {
    display: inline;
}

.nav-logo-img {
    height: 45px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1);
}

.nav-center .nav-logo:hover .nav-logo-img {
    transform: rotate(180deg);
}

.nav-mobile-logo {
    display: none;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav-cta {
    background: transparent;
    color: var(--ivory-white);
    padding: 12px 24px;
    border: 2px solid var(--ivory-white);
    border-radius: 0;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/* Language Selector */
.lang-selector {
    position: relative;
    margin-left: 20px;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 12px;
    color: var(--ivory-white);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: var(--transition-fast);
}

.lang-toggle:hover {
    border-color: var(--champagne-gold);
    color: var(--champagne-gold);
}

.lang-toggle svg {
    transition: transform 0.3s ease;
}

.lang-selector.active .lang-toggle svg:last-child {
    transform: rotate(180deg);
}

.lang-current {
    min-width: 20px;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--charcoal-black);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.lang-selector.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 8px;
    transform: translateY(10px);
}

.lang-selector.active .lang-dropdown-up {
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--ivory-white);
    text-decoration: none;
    transition: var(--transition-fast);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lang-option:last-child {
    border-bottom: none;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--champagne-gold);
}

.lang-option.active {
    background: rgba(198, 166, 100, 0.1);
    color: var(--champagne-gold);
}

.lang-code {
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 24px;
}

.lang-name {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Footer Language Selector */
/* lang-selector-footer styles moved to footer section below */

.nav-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--ivory-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
    z-index: -1;
}

.nav-cta:hover::before {
    width: 300px;
    height: 300px;
}

.nav-cta:hover {
    color: var(--charcoal-black);
    transform: translateY(-2px);
}

.nav-link {
    color: var(--ivory-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    padding: 8px 16px;
    border-radius: 0;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ivory-white);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: -1;
}

.nav-link:hover::before {
    transform: scaleX(1);
}

.nav-link:hover {
    color: var(--charcoal-black);
}

.nav-link.active {
    color: var(--champagne-gold);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--champagne-gold);
    transition: var(--transition-fast);
}

.nav-link.active::after {
    width: 100%;
}

/* Dropdown Menu */
.nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--ivory-white);
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(30, 30, 30, 0.15);
    padding: 1rem 0;
    min-width: 344px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition-smooth);
    z-index: 1000;
}

.dropdown-menu-small {
    min-width: 180px;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: block;
    padding: 12px 24px;
    color: var(--charcoal-black);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.dropdown-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--charcoal-black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: -1;
}

.dropdown-link:hover::before {
    transform: scaleX(1);
}

.dropdown-link:hover {
    color: var(--ivory-white);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--ivory-white);
    transition: var(--transition-fast);
}

/* Hero Section */
.hero {
    height: 100vh;
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    min-height: 100vh;
    isolation: isolate;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    min-height: 100vh;
}

.hero-video video {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(30,30,30,0.45) 0%, rgba(30,30,30,0.25) 45%, rgba(30,30,30,0.6) 100%);
    z-index: 1;
}

.hero-vignette-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

/* Homepage hero content - specific to avoid service page override */
.hero .hero-content {
    text-align: center;
    color: var(--ivory-white);
    z-index: 100;
    max-width: 800px;
    padding: 0 40px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    opacity: 0;
    animation: heroContentFadeIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards;
    position: relative;
}

.hero-cta {
    display: inline-block;
    padding: 18px 40px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--ivory-white);
    border: 2px solid var(--ivory-white);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 100;
    backdrop-filter: blur(10px);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    opacity: 1 !important;
    animation: heroButtonFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards;
    overflow: hidden;
}

.hero-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--ivory-white);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.5s ease;
    z-index: -1;
    clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
}

.hero-cta:hover::before {
    width: 1418px;
    height: 1418px;
}

@keyframes heroContentFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroButtonFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    font-size: clamp(2.1rem, 5.6vw, 4.2rem);
    font-weight: 500;
    margin-bottom: 2rem;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.hero-title-small {
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.hero-title-large {
    font-size: clamp(2.1rem, 5.6vw, 4.2rem);
    font-weight: 500;
    line-height: 1;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 300;
    margin-bottom: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}


.hero-cta:hover {
    color: var(--charcoal-black);
    transform: translateY(-2px);
    text-shadow: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Hero Logo Animation */
.hero-logo-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200000; /* above overlay (100000) — transparent container, pointer-events:none */
    pointer-events: none;
}

.hero-logo-o {
    position: fixed;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    opacity: 1;
    animation: logoOAnimation 3s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
    pointer-events: none;
    z-index: 999999;
}

.hero-logo-x {
    position: fixed;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    opacity: 1;
    animation: logoXAnimation 3s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards;
    pointer-events: none;
    z-index: 999999;
}

.hero-logo-o img,
.hero-logo-x img {
    width: 124px;
    height: auto;
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.9));
}

@keyframes logoOAnimation {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    33% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(25vw) translateY(-37px) scale(0.8);
    }
    66% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(25vw) translateY(-37px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(25vw) translateY(-50vh) translateY(40px) scale(0.425);
    }
}

@keyframes logoXAnimation {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    33% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(-25vw) translateY(37px) scale(0.8);
    }
    66% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(-25vw) translateY(37px) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(-25vw) translateY(-50vh) translateY(40px) scale(0.425);
    }
}

/* After animation, position letters in header */
.hero-logo-o.animation-complete,
.hero-logo-x.animation-complete {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) translateY(-50vh) translateY(40px) scale(0.5) !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.hero-logo-o.animation-complete {
    transform: translate(-50%, -50%) translateX(25vw) translateY(-50vh) translateY(40px) scale(0.425) !important;
}

.hero-logo-x.animation-complete {
    transform: translate(-50%, -50%) translateX(-25vw) translateY(-50vh) translateY(40px) scale(0.425) !important;
}

/* HOSPITALITY text in header */
.hero-hospitality {
    position: fixed;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Neue Montreal', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--ivory-white);
    text-transform: uppercase;
    opacity: 0;
    z-index: 999998;
    pointer-events: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-hospitality.show {
    animation: fadeInHospitality 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes fadeInHospitality {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.hero-bottom-fade {
    display: none;
}

.philosophy-top-fade {
    display: none;
}

@media (max-width: 768px) {
    .philosophy-top-fade {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background: linear-gradient(to bottom, var(--charcoal-black) 0%, transparent 100%);
        pointer-events: none;
        z-index: 10;
    }
}

@media (max-width: 768px) {
    .hero-bottom-fade {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: linear-gradient(to top, var(--charcoal-black) 0%, transparent 100%);
        pointer-events: none;
        z-index: 100;
    }
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: var(--ivory-white);
    opacity: 0.6;
    animation: scrollPulse 2s ease-in-out infinite;
}

/* Philosophy Section */
.philosophy {
    padding: 120px 0 0 0;
    background: var(--ivory-white);
    position: relative;
}

.philosophy-content {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.philosophy-intro {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
    opacity: 0.9;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-cta-button {
    display: inline-block;
    padding: 18px 50px;
    background: var(--charcoal-black);
    color: var(--ivory-white);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-radius: 0;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.philosophy-cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--champagne-gold);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.5s ease;
    z-index: -1;
    clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
}

.philosophy-cta-button:hover::before {
    width: 1418px;
    height: 1418px;
}

.philosophy-cta-button:hover {
    color: var(--charcoal-black);
    transform: translateY(-2px);
}

.slow-fade {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}

.founders {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.founder-card {
    text-align: center;
    background: var(--ivory-white);
    padding: 3rem 2rem;
    border-radius: 0;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 30px rgba(30, 30, 30, 0.08);
}

.founder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(30, 30, 30, 0.12);
}

.founder-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.founder-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--warm-sand), var(--champagne-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--ivory-white);
    font-family: var(--font-serif);
}

.founder-quote {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
    max-width: 300px;
    margin: 0 auto;
}

.ox-motif {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--champagne-gold);
    opacity: 0.1;
    z-index: 0;
}

.motif-o, .motif-x {
    animation: rotate 20s linear infinite;
}

.motif-connector {
    animation: pulse 3s ease-in-out infinite;
}

/* Expertise Section */
.expertise {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.expertise-carousel-wrapper {
    margin-top: 4rem;
    position: relative;
}

.expertise-carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.expertise-carousel {
    display: flex;
    gap: 40px;
    cursor: grab;
    user-select: none;
    position: relative;
}

.expertise-carousel:active {
    cursor: grabbing;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 4rem;
}

/* Carousel card styling */
.expertise-carousel .expertise-card {
    flex: 0 0 calc((100% - 80px) / 3);
    min-width: 0;
    max-width: calc((100% - 80px) / 3);
    scroll-snap-align: start;
}

.expertise-carousel-container {
    scroll-snap-type: x mandatory;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.carousel-btn {
    background: var(--charcoal-black);
    color: var(--ivory-white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.carousel-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--champagne-gold);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.5s ease;
    z-index: -1;
    clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
}

.carousel-btn:hover::before {
    width: 1418px;
    height: 1418px;
}

.carousel-btn:hover {
    color: var(--charcoal-black);
    transform: scale(1.1);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.carousel-btn:disabled:hover::before {
    width: 0;
    height: 0;
}

.carousel-pagination {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.3);
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
}

.carousel-dot.active {
    background: var(--champagne-gold);
    width: 32px;
    border-radius: 6px;
}

.carousel-dot:hover {
    background: rgba(198, 166, 100, 0.6);
}

.expertise-card {
    background: var(--ivory-white);
    border-radius: 0;
    overflow: visible;
    transition: var(--transition-smooth);
    cursor: pointer;
    position: relative;
    height: auto;
    min-height: 400px;
}

.expertise-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(30, 30, 30, 0.1);
}

.card-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.card-image-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition-smooth);
}

.expertise-card:hover .card-image-bg {
    transform: scale(1.1);
}

/* Animated Service Icons */
.card-icon {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem 0 2rem;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.card-icon svg {
    width: 100px;
    height: 100px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.expertise-card:hover .card-icon svg {
    transform: scale(1.1);
}

.card-icon .icon-line {
    stroke: var(--champagne-gold);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card-icon .icon-dot {
    fill: var(--champagne-gold);
    transform-origin: center;
}

.card-content {
    padding: 2rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-content h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
}

.card-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.card-link {
    color: var(--champagne-gold);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: var(--transition-fast);
    align-self: flex-start;
}

.card-link:hover {
    color: var(--charcoal-black);
}

.card-link::after {
    content: '→';
    margin-left: 8px;
    transition: var(--transition-fast);
}

.card-link:hover::after {
    transform: translateX(5px);
}

/* Global Network Section */
.global-network {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
    overflow-x: hidden;
}

.global-network .section-title {
    font-weight: 300;
    margin-bottom: 1.5rem;
    color: var(--ivory-white);
}

.network-content {
    text-align: center;
}

.global-network .network-subtitle {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 4rem;
    opacity: 0.9;
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ivory-white);
}

.network-marquee {
    overflow: hidden;
    border-top: 1px solid rgba(246,244,239,0.15);
    border-bottom: 1px solid rgba(246,244,239,0.15);
    margin-top: 3rem;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.marquee-track {
    display: flex;
    gap: 60px;
    list-style: none;
    padding: 20px 0;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
}

.marquee-track li {
    color: var(--ivory-white);
    opacity: 0.85;
    font-family: var(--font-serif);
    letter-spacing: 1px;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Manifesto Section */
.manifesto {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.manifesto-quotes {
    max-width: 1000px;
    margin: 0 auto;
}

.manifesto-quote {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-family: var(--font-serif);
    font-style: italic;
    text-align: center;
    margin-bottom: 0;
    color: var(--charcoal-black);
    opacity: 0.9;
    line-height: 1.4;
}

/* Contact Section */
.contact {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.contact-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-subtitle {
    font-size: 1.1rem;
    margin-bottom: 3rem;
    opacity: 0.8;
}

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

.form-group {
    position: relative;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 18px 24px;
    border: 2px solid transparent;
    background: #fff;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--charcoal-black);
    transition: var(--transition-fast);
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--champagne-gold);
    box-shadow: 0 0 0 3px rgba(198, 166, 100, 0.1);
}

.form-submit {
    padding: 18px 40px;
    background: var(--charcoal-black);
    color: var(--ivory-white);
    border: none;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition-smooth);
    align-self: center;
    position: relative;
    overflow: hidden;
}

/* Debug: Make sure form-submit has the X cross animation */
.form-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--ivory-white);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.5s ease;
    z-index: -1;
    clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
}

.form-submit:hover::before {
    width: 1418px;
    height: 1418px;
}

.form-submit:hover {
    color: var(--charcoal-black);
    transform: translateY(-2px);
}


/* Footer */
/* ================================================
   FOOTER — Premium dark design, aligned with mobile overlay
   ================================================ */

.footer {
    background: #0A0A0A;
    color: var(--ivory-white);
    position: relative;
}

.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 60px 60px;
    position: relative;
}

/* Left gold accent line */
.footer-inner::before {
    content: '';
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 60px;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(198, 166, 100, 0.3) 15%,
        rgba(198, 166, 100, 0.3) 85%,
        transparent 100%
    );
    pointer-events: none;
}

/* ---- Brand row ---- */
.footer-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.footer-logo-img {
    height: 54px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.footer-logo-link:hover .footer-logo-img {
    opacity: 1;
}

.footer-tagline {
    font-family: var(--font-serif);
    font-size: 1.68rem;
    font-weight: 400;
    color: var(--champagne-gold);
    letter-spacing: 0.02em;
    font-style: italic;
    text-align: right;
    flex: 1;
    padding-left: 40px;
}

.footer-desc {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.8;
    color: rgba(246, 244, 239, 0.45);
    letter-spacing: 0.03em;
    max-width: 680px;
}

/* ---- Divider ---- */
.footer-rule {
    height: 1px;
    background: rgba(246, 244, 239, 0.07);
    margin: 48px 0;
}

/* ---- Grid ---- */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 48px;
    align-items: start;
}

/* ---- Column ---- */
.footer-col-index {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--champagne-gold);
    opacity: 1;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}

.footer-col-label {
    font-family: var(--font-sans);
    font-size: 0.845rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ivory-white);
    opacity: 1;
    display: block;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(246, 244, 239, 0.07);
}

.footer-col-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col-links li,
.footer-col-links a {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 300;
    letter-spacing: 0.06em;
    color: rgba(246, 244, 239, 0.45);
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: block;
}

.footer-col-links a:hover {
    color: var(--champagne-gold);
    padding-left: 5px;
}

.footer-social {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(246, 244, 239, 0.06);
}

.footer-social-link {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(246, 244, 239, 0.38);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-social-link:hover {
    color: var(--champagne-gold);
}

/* ---- CTA ---- */
.footer-cta-wrap {
    display: flex;
    justify-content: stretch;
}

.footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 22px 40px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--champagne-gold);
    text-decoration: none;
    border: 1px solid rgba(198, 166, 100, 0.45);
    position: relative;
    overflow: hidden;
    transition: color 0.45s ease, border-color 0.45s ease;
}

.footer-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--champagne-gold);
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.footer-cta > * {
    position: relative;
    z-index: 1;
}

.footer-cta:hover::before {
    transform: translateX(0);
}

.footer-cta:hover {
    color: #090909;
    border-color: var(--champagne-gold);
}

.footer-cta svg {
    transition: transform 0.35s ease;
}

.footer-cta:hover svg {
    transform: translateX(5px);
}

/* ---- Bottom bar ---- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-copy {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: rgba(246, 244, 239, 0.25);
    text-transform: uppercase;
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-legal a {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(246, 244, 239, 0.25);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--champagne-gold);
}

.footer-legal-sep {
    color: rgba(246, 244, 239, 0.12);
    font-size: 0.45rem;
}

/* Language row — mirrors mobile overlay */
.footer-lang-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-lang {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(246, 244, 239, 0.25);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-lang:hover,
.footer-lang.is-active {
    color: var(--champagne-gold);
}

.footer-lang-dot {
    color: rgba(246, 244, 239, 0.1);
    font-size: 0.45rem;
}

/* Animations */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scaleY(1);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.2);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.3;
    }
}

@keyframes mapPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Service Pages Styles */
.service-hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: var(--transition-smooth);
    opacity: 0.8;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(30, 30, 30, 0.7) 0%,
        rgba(30, 30, 30, 0.4) 50%,
        rgba(30, 30, 30, 0.8) 100%
    );
    z-index: 2;
}

.hero-content {
    text-align: center;
    color: var(--ivory-white);
    z-index: 3;
    max-width: 900px;
    padding: 0 40px;
    animation: serviceHeroFadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes serviceHeroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Service Page Hero Typography */
.service-hero .hero-title {
    font-size: clamp(3.5rem, 8vw, 6rem) !important;
    font-weight: 500;
    margin-bottom: 2.5rem;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    line-height: 1.1;
    opacity: 1 !important;
    transform: none !important;
}

.service-hero .hero-quote {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-style: italic;
    font-weight: 300;
    opacity: 0.95;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    line-height: 1.4;
    max-width: 700px;
    margin: 0 auto;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 500;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1.2s ease-out 0.5s forwards;
}

.hero-quote {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-style: italic;
    font-weight: 300;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.2s ease-out 1s forwards;
}

/* Service Overview */
.service-overview {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.overview-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.overview-text {
    max-width: 600px;
}

.overview-description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--charcoal-black);
    opacity: 0.9;
}

.overview-image {
    height: 400px;
    border-radius: 0;
    overflow: hidden;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: var(--transition-smooth);
}

/* Our Approach */
.our-approach {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    margin-top: 4rem;
}

.approach-item {
    text-align: center;
}

.approach-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

.approach-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
}

.approach-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Our Process */
.our-process {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.process-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--champagne-gold);
    opacity: 0.3;
}

.process-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4rem;
    position: relative;
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--champagne-gold);
    color: var(--ivory-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 2rem;
    flex-shrink: 0;
    z-index: 1;
}

.step-content {
    flex: 1;
    padding-top: 10px;
}

.step-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
}

.step-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Collaborations */
.collaborations {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
}

.collaboration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 4rem;
}

.collaboration-item {
    background: var(--ivory-white);
    border-radius: 0;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.collaboration-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.collab-image {
    height: 200px;
    overflow: hidden;
}

.collab-placeholder {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: var(--transition-smooth);
}

.collaboration-item:hover .collab-placeholder {
    transform: scale(1.1);
}

.collab-content {
    padding: 2rem;
    color: var(--charcoal-black);
}

.collab-content h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
}

.collab-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Service CTA */
.service-cta {
    padding: var(--section-padding);
    background: var(--warm-sand);
    text-align: center;
}

.cta-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
    color: var(--charcoal-black);
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: var(--charcoal-black);
    opacity: 0.8;
}

.cta-button {
    display: inline-block;
    padding: 18px 40px;
    background: var(--charcoal-black);
    color: var(--ivory-white);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 0;
    transition: var(--transition-smooth);
}

/* Background Variations for Service Pages */
.fb-detail-bg,
.operations-detail-bg,
.wellness-detail-bg,
.marketing-detail-bg,
.financial-detail-bg,
.partnerships-detail-bg {
    background: url('assets/images/texture1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.luxury-restaurant-bg {
    background: linear-gradient(135deg, #8B4513, #A0522D);
}

.boutique-hotel-bg {
    background: linear-gradient(135deg, #D2B48C, #DEB887);
}

.chef-partnership-bg {
    background: linear-gradient(135deg, #CD853F, #D2691E);
}

.luxury-hotel-bg {
    background: linear-gradient(135deg, #708090, #2F4F4F);
}

.resort-chain-bg {
    background: linear-gradient(135deg, #20B2AA, #008B8B);
}

.boutique-brand-bg {
    background: linear-gradient(135deg, #D8BFD8, #DDA0DD);
}

.spa-resort-bg {
    background: linear-gradient(135deg, var(--deep-sage), #90EE90);
}

.corporate-wellness-bg {
    background: linear-gradient(135deg, #F0E68C, #DDA0DD);
}

.retreat-center-bg {
    background: linear-gradient(135deg, #98FB98, #90EE90);
}

.luxury-brand-bg {
    background: linear-gradient(135deg, #9370DB, #4B0082);
}

.restaurant-group-bg {
    background: linear-gradient(135deg, #CD853F, #8B4513);
}

.wellness-brand-bg {
    background: linear-gradient(135deg, var(--deep-sage), #98FB98);
}

.hotel-group-bg {
    background: linear-gradient(135deg, var(--champagne-gold), #DAA520);
}

.restaurant-chain-bg {
    background: linear-gradient(135deg, #8B4513, #A0522D);
}

.investment-fund-bg {
    background: linear-gradient(135deg, #4682B4, #191970);
}

.international-expansion-bg {
    background: linear-gradient(135deg, #4682B4, #4169E1);
}

.chef-collaboration-bg {
    background: linear-gradient(135deg, #CD853F, #D2691E);
}

.tech-partnership-bg {
    background: linear-gradient(135deg, #9370DB, #8A2BE2);
}

/* New Pages Styles */
.about-hero, .network-hero, .philosophy-hero, .contact-hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.about-hero-bg,
.about-bg {
    background: url('assets/images/texture1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.network-hero-bg,
.network-bg,
.philosophy-hero-bg,
.philosophy-bg,
.contact-hero-bg,
.contact-bg,
.fb-bg,
.operations-bg,
.wellness-bg,
.marketing-bg,
.financial-bg,
.partnerships-bg {
    background: url('assets/images/texture1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Philosophy Full Section */
.philosophy-full {
    padding: 140px 0;
    background: var(--charcoal-black);
    color: var(--ivory-white);
}

/* About page specific: remove padding on philosophy section */
body.about-page .philosophy {
    padding-top: 0 !important;
}

body.about-page .philosophy .container {
    padding-left: 0;
    padding-right: 0;
}

body.about-page .philosophy .philosophy-content {
    padding-left: 0;
    padding-right: 0;
}

/* Homepage: remove padding left/right for staff section */
body.homepage .philosophy .container {
    padding-left: 0;
    padding-right: 0;
}

body.homepage .philosophy .philosophy-content {
    padding-left: 0;
    padding-right: 0;
}

.philosophy-text {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Founders Section */
.founders-section {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.founders-section .founder-card {
    text-align: center;
    background: var(--ivory-white);
    padding: 3rem 2rem;
    border-radius: 0;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 30px rgba(30, 30, 30, 0.08);
}

.founders-section .founder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(30, 30, 30, 0.12);
}

.founders-section .founder-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.founders-section .founder-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--warm-sand), var(--champagne-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--ivory-white);
    font-family: var(--font-serif);
}

.founders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-top: 4rem;
}

.founders-grid .founder-card {
    text-align: center;
    background: var(--ivory-white);
    padding: 3rem 2rem;
    border-radius: 0;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 30px rgba(30, 30, 30, 0.08);
}

.founders-grid .founder-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(30, 30, 30, 0.12);
}

.founders-grid .founder-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.founders-grid .founder-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--warm-sand), var(--champagne-gold));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--ivory-white);
    font-family: var(--font-serif);
}

/* Staff Images Separator */
.staff-separator {
    height: 80px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background: linear-gradient(to bottom, var(--ivory-white), #000000);
}

/* Staff Images Layout */
.staff-images {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 0;
    height: 500px;
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    gap: 10vw;
    background: #000000;
}

.staff-image-container {
    width: 20vw;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.staff-image-container:nth-child(2) {
    width: 26.4vw;
}

.staff-image-container:last-child {
    width: 23vw;
}

.staff-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    max-height: 100%;
    transition: none;
}

.staff-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    opacity: 0;
    transition: none;
    z-index: 1;
}

.staff-image-container:hover .staff-image {
    opacity: 0;
}

.staff-image-container:hover .staff-video {
    opacity: 1;
}

/* Staff Hover Description */
.staff-hover-description {
    position: relative;
    height: 200px;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    background: var(--charcoal-black);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 175px 0;
}

.hover-description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
    color: var(--ivory-white);
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px 80px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
}

.hover-description.active {
    opacity: 1;
}

.hover-description p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--ivory-white);
    opacity: 0.95;
}

.hover-description p:last-child {
    margin-bottom: 0;
}

.staff-name {
    font-size: 1.8rem;
    font-weight: 300;
    color: var(--ivory-white);
    margin-bottom: 0.5rem;
    text-align: center;
    letter-spacing: 0.5px;
}

.staff-role {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--champagne-gold);
    margin-bottom: 1.5rem;
    text-align: center;
    font-style: italic;
    opacity: 0.9;
}

/* Mobile Staff Descriptions - Hidden on Desktop */
.staff-mobile-description {
    display: none;
    margin-top: 20px;
    text-align: center;
    padding: 0 20px;
}

.staff-mobile-name {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--ivory-white);
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.staff-mobile-role {
    font-size: 1rem;
    font-weight: 400;
    color: var(--champagne-gold);
    margin-bottom: 1rem;
    font-style: italic;
    opacity: 0.9;
}

.staff-mobile-description p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ivory-white);
    opacity: 0.9;
}

.founder-meta {
    margin-top: 1.5rem;
}

.founder-name {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--charcoal-black);
    margin-bottom: 0.5rem;
    font-family: var(--font-serif);
}

.founder-role {
    font-size: 1rem;
    color: var(--champagne-gold);
    font-weight: 500;
    margin-bottom: 1rem;
    font-style: italic;
}

.founder-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
    margin-top: 1rem;
}

.founder-reveal {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--charcoal-black);
    opacity: 0.7;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(30, 30, 30, 0.1);
    font-family: var(--font-serif);
}

/* About Story Section */
.about-story {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.story-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.story-text {
    max-width: 800px;
    margin: 0 auto;
}

.story-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--charcoal-black);
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.story-text p:last-child {
    margin-bottom: 0;
}

/* Team Section */
.team-section {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-top: 4rem;
}

.team-member {
    background: var(--ivory-white);
    color: var(--charcoal-black);
    border-radius: 0;
    overflow: hidden;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.team-member:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.member-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.member-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition-smooth);
}

.team-member:hover .member-photo {
    transform: scale(1.1);
}

.member-info {
    padding: 2.5rem 2rem;
    text-align: center;
}

.member-info h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--charcoal-black);
    margin-bottom: 0.5rem;
    font-family: var(--font-serif);
}

.member-role {
    font-size: 1rem;
    color: var(--champagne-gold);
    font-weight: 500;
    margin-bottom: 1rem;
    font-style: italic;
}

.member-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Journey Timeline */
.journey-section {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--champagne-gold);
    opacity: 0.3;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4rem;
    position: relative;
}

.timeline-year {
    width: 60px;
    height: 60px;
    background: var(--champagne-gold);
    color: var(--ivory-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 2rem;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-content {
    flex: 1;
    padding-top: 10px;
}

.timeline-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
}

.timeline-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Values Section */
.values-section {
    padding: 60px 0 120px 0;
    background: var(--ivory-white);
    color: var(--charcoal-black);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 4rem;
}

.value-item {
    background: rgba(30, 30, 30, 0.03);
    border: 1px solid rgba(30, 30, 30, 0.1);
    padding: 3rem 2.5rem;
    text-align: center;
    transition: var(--transition-smooth);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.value-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--champagne-gold), var(--warm-sand));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease;
}

.value-item:hover::before {
    transform: scaleX(1);
}

.value-item:hover {
    background: rgba(30, 30, 30, 0.05);
    border-color: rgba(198, 166, 100, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.value-icon {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    transition: var(--transition-smooth);
    position: relative;
}

.value-icon svg {
    width: 100%;
    height: 100%;
    transition: var(--transition-smooth);
}

.value-icon svg .icon-path {
    stroke: #C6A664;
    stroke-width: 1.5;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-icon svg .icon-fill {
    fill: #C6A664;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.value-item:hover .value-icon {
    transform: scale(1.2) rotate(5deg);
}

.value-item:hover .value-icon svg .icon-path {
    stroke-width: 2;
    stroke: #DAA520;
    filter: drop-shadow(0 0 12px rgba(198, 166, 100, 0.8));
}

.value-item:hover .value-icon svg .icon-fill {
    fill: #DAA520;
    filter: drop-shadow(0 0 8px rgba(198, 166, 100, 1));
    transform: scale(1.2);
}

.value-item h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
    font-family: var(--font-serif);
    font-weight: 500;
}

.value-item p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Network Overview */
.network-overview {
    padding: 100px 0 80px;
    background: var(--ivory-white);
}

.network-overview .network-content {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.network-overview .section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 2.5rem;
    color: var(--charcoal-black);
}

.network-quote {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.6;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    color: var(--charcoal-black);
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    border: none;
    padding: 0;
}

.network-intro,
.network-subtitle {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.7;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    color: var(--charcoal-black);
    font-family: var(--font-serif);
    font-weight: 400;
}

/* Network Why Section */
.network-why,
.network-benefits {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.network-why .section-title,
.network-benefits .section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.network-benefits .benefits-grid,
.network-why .network-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* Alias for PHP version grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.benefit-item {
    text-align: center;
    padding: 2rem;
    background: var(--ivory-white);
    transition: var(--transition-smooth);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.benefit-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
}

.benefit-icon svg {
    width: 100%;
    height: 100%;
}

.benefit-icon .icon-line {
    stroke: var(--champagne-gold);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.benefit-icon .icon-dot {
    fill: var(--champagne-gold);
}

.benefit-item:hover .benefit-icon .icon-line {
    stroke: #DAA520;
    filter: drop-shadow(0 0 6px rgba(198, 166, 100, 0.5));
}

.benefit-item:hover .benefit-icon .icon-dot {
    fill: #DAA520;
    filter: drop-shadow(0 0 4px rgba(198, 166, 100, 0.6));
}

.benefit-item h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
    font-family: var(--font-serif);
}

.benefit-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Partner Cards */
.partner-card {
    background: var(--ivory-white);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: var(--transition-smooth);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.partner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.partner-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
}

.partner-icon svg {
    width: 100%;
    height: 100%;
}

.partner-icon .icon-line {
    stroke: var(--champagne-gold);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.partner-icon .icon-dot {
    fill: var(--champagne-gold);
}

.partner-card:hover .partner-icon .icon-line {
    stroke: #DAA520;
    filter: drop-shadow(0 0 6px rgba(198, 166, 100, 0.5));
}

.partner-card:hover .partner-icon .icon-dot {
    fill: #DAA520;
    filter: drop-shadow(0 0 4px rgba(198, 166, 100, 0.6));
}

.partner-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
    font-family: var(--font-serif);
}

.partner-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Partner Spotlight Section (PHP version) */
.partner-spotlight {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.partner-spotlight .section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.partner-spotlight .partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Partners Section */
.partners-section {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.partners-section .section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.partner-category h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--charcoal-black);
}

.partner-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.partner-logo {
    padding: 12px 24px;
    background: var(--ivory-white);
    border-radius: 0;
    font-size: 0.9rem;
    color: var(--charcoal-black);
    opacity: 0.8;
    transition: var(--transition-fast);
}

.partner-logo:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Global Reach */
.global-reach {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
}

.reach-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 4rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3rem;
    font-family: var(--font-serif);
    color: var(--champagne-gold);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    opacity: 0.8;
}

/* Testimonials */
.testimonials-section {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 4rem;
}

.testimonial-item {
    text-align: center;
}

.testimonial-item blockquote {
    font-size: 1.1rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--charcoal-black);
    margin-bottom: 1.5rem;
}

.testimonial-item cite {
    font-size: 0.9rem;
    color: var(--champagne-gold);
    font-weight: 500;
}

/* Philosophy Pages */
.manifesto-section,
.philosophy-manifesto {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.manifesto-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.manifesto-text {
    text-align: left;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.manifesto-text p {
    font-size: 1.15rem;
    line-height: 1.9;
    color: var(--charcoal-black);
    margin-bottom: 1.5rem;
}

.manifesto-text p:last-child {
    margin-bottom: 0;
}

.manifesto-intro {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--charcoal-black);
    opacity: 0.9;
}

/* Philosophy Pillars */
.philosophy-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 3rem;
}

.pillar {
    background: var(--warm-sand);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: var(--transition-smooth);
}

.pillar:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.pillar h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
    font-family: var(--font-serif);
}

.pillar p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.8;
}

/* Founders Quotes */
.founders-quotes {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
}

.founders-quotes .section-title {
    color: var(--ivory-white);
    text-align: center;
    margin-bottom: 4rem;
}

.quotes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.quote-item {
    text-align: center;
    padding: 2rem;
}

.quote-item blockquote {
    font-size: 1.2rem;
    line-height: 1.7;
    font-style: italic;
    font-family: var(--font-serif);
    color: var(--ivory-white);
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.quote-item cite {
    font-size: 0.95rem;
    color: var(--champagne-gold);
    font-style: normal;
    font-weight: 500;
}

/* Approach Section */
.approach-section {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.approach-section .section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.approach-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.step {
    text-align: center;
    padding: 2rem;
    background: var(--ivory-white);
    transition: var(--transition-smooth);
}

.step:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.step-number {
    font-size: 2.5rem;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--champagne-gold);
    margin-bottom: 1rem;
}

.step h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
    font-family: var(--font-serif);
}

.step p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.8;
}

.principles-section {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.principles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
    margin-top: 4rem;
}

.principle-item {
    text-align: center;
}

.principle-icon {
    width: 120px;
    height: 120px;
    background: var(--champagne-gold);
    color: var(--ivory-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-family: var(--font-serif);
    margin: 0 auto 2rem;
}

.principle-item h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--charcoal-black);
}

.principle-item p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.8;
}

.philosophy-quotes {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
}

.quotes-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.philosophy-quote {
    font-size: 1.1rem;
    font-family: var(--font-serif);
    font-style: italic;
    text-align: center;
    margin-bottom: 0;
    color: var(--ivory-white);
    line-height: 1.6;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-smooth);
}

.philosophy-quote:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--champagne-gold);
    transform: translateY(-5px);
}

.approach-section {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.approach-content {
    max-width: 1000px;
    margin: 0 auto;
}

.approach-text {
    margin-bottom: 3rem;
}

.approach-text h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--charcoal-black);
}

.approach-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.8;
}

.vision-section {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.vision-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.vision-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--charcoal-black);
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* Contact Form Styles */
.contact-form-section {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.contact-intro {
    font-size: 1.2rem;
    line-height: 1.8;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
    color: var(--charcoal-black);
    opacity: 0.9;
}

.contact-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.contact-subtitle {
    font-size: 1.15rem;
    color: var(--charcoal-black);
    opacity: 0.8;
    margin-bottom: 3rem;
}

/* Contact Info Section */
.contact-info {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.info-item {
    text-align: center;
    padding: 2rem;
}

.info-item h3 {
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--champagne-gold);
    margin-bottom: 1rem;
}

.info-item p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--ivory-white);
    opacity: 0.9;
}

.info-item a {
    color: var(--ivory-white);
    text-decoration: none;
    transition: var(--transition-fast);
}

.info-item a:hover {
    color: var(--champagne-gold);
}

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

.form-group select {
    width: 100%;
    padding: 18px 24px;
    border: 2px solid transparent;
    background-color: #fff;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--charcoal-black);
    transition: var(--transition-fast);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 16px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--charcoal-black);
    opacity: 0.8;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--champagne-gold);
    border-radius: 0;
    position: relative;
    transition: var(--transition-fast);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--champagne-gold);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ivory-white);
    font-size: 12px;
    font-weight: bold;
}

/* Contact Methods */
.contact-methods {
    padding: var(--section-padding);
    background: var(--warm-sand);
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 4rem;
}

.method-item {
    text-align: center;
    background: var(--ivory-white);
    padding: 3rem 2rem;
    border-radius: 0;
    transition: var(--transition-smooth);
}

.method-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(30, 30, 30, 0.1);
}

.method-icon {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--champagne-gold);
}

.method-icon svg {
    width: 48px;
    height: 48px;
    transition: var(--transition-smooth);
}

.method-item:hover .method-icon svg {
    transform: scale(1.1);
}

.method-item h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
}

.method-item p {
    font-size: 1rem;
    color: var(--charcoal-black);
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

.method-link {
    color: var(--champagne-gold);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: var(--transition-fast);
}

.method-link:hover {
    color: var(--charcoal-black);
}

/* Office Locations */
.office-locations {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    margin-top: 4rem;
}

.location-item {
    text-align: center;
}

.location-item h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--charcoal-black);
}

.location-item p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--charcoal-black);
    opacity: 0.8;
    margin-bottom: 1rem;
}

.location-email {
    color: var(--champagne-gold);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.location-email:hover {
    color: var(--charcoal-black);
}

/* Response Time */
.response-time {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    color: var(--ivory-white);
    text-align: center;
}

.response-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--ivory-white);
}

.response-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--ivory-white);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

/* Shader Hero Mount — replaces the old hero-image background layer */
#shader-hero-mount {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* Legal Pages */
.legal-hero {
    padding: 180px 0 80px;
    background: var(--charcoal-black);
    text-align: center;
}

.legal-hero--shader {
    position: relative;
    overflow: hidden;
}

.legal-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--ivory-white);
    margin-bottom: 1rem;
    font-family: var(--font-serif);
}

.legal-updated {
    font-size: 0.95rem;
    color: var(--champagne-gold);
    letter-spacing: 0.1em;
}

.legal-content {
    padding: var(--section-padding);
    background: var(--ivory-white);
}

.legal-container {
    max-width: 800px;
    margin: 0 auto;
}

.legal-section {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(30, 30, 30, 0.1);
}

.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.legal-section h2 {
    font-size: 1.6rem;
    color: var(--charcoal-black);
    margin-bottom: 1.5rem;
    font-family: var(--font-serif);
}

.legal-section h3 {
    font-size: 1.2rem;
    color: var(--charcoal-black);
    margin: 2rem 0 1rem;
    font-weight: 600;
}

.legal-section p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--charcoal-black);
    opacity: 0.85;
    margin-bottom: 1rem;
}

.legal-section ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.legal-section ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--charcoal-black);
    opacity: 0.85;
}

.legal-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 6px;
    height: 6px;
    background: var(--champagne-gold);
    border-radius: 50%;
}

.legal-contact {
    background: var(--warm-sand);
    padding: 2rem;
    margin-top: 1.5rem;
}

.legal-contact p {
    margin-bottom: 0.5rem;
}

.legal-contact a {
    color: var(--champagne-gold);
    text-decoration: none;
    transition: var(--transition-fast);
}

.legal-contact a:hover {
    color: var(--charcoal-black);
}

/* Cookie Table */
.cookie-table {
    margin: 1.5rem 0;
    border: 1px solid rgba(30, 30, 30, 0.1);
}

.cookie-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(30, 30, 30, 0.1);
}

.cookie-row:last-child {
    border-bottom: none;
}

.cookie-row.cookie-header {
    background: var(--warm-sand);
    font-weight: 600;
}

.cookie-row span {
    font-size: 0.9rem;
    color: var(--charcoal-black);
}
}

/* CTA Sections */
.about-cta, .network-cta {
    padding: var(--section-padding);
    background: var(--warm-sand);
    text-align: center;
}

.philosophy-cta {
    padding: var(--section-padding);
    background: var(--charcoal-black);
    text-align: center;
}

.philosophy-cta .cta-content h2,
.philosophy-cta .cta-content p {
    color: var(--ivory-white);
}

.philosophy-cta .cta-button {
    background: var(--champagne-gold);
    color: var(--charcoal-black);
}

.philosophy-cta .cta-button:hover {
    background: var(--ivory-white);
}

.cta-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
    color: var(--charcoal-black);
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: var(--charcoal-black);
    opacity: 0.8;
}

.cta-button {
    display: inline-block;
    padding: 18px 40px;
    background: var(--charcoal-black);
    color: var(--ivory-white);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 0;
    transition: var(--transition-smooth);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .expertise-carousel .expertise-card {
        flex: 0 0 calc(50% - 20px);
    }
    
    .card-icon {
        height: 160px;
    }
    
    .card-icon svg {
        width: 90px;
        height: 90px;
    }
    
    .carousel-controls {
        gap: 1.5rem;
    }
    
    .carousel-btn {
        width: 45px;
        height: 45px;
    }
    
    .philosophy-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .founders {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }
    
    .overview-content {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .collaboration-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .founders-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .member-image {
        height: 300px;
    }
    
    /* Remove container padding so staff divs can reach page edges */
    .philosophy .container,
    .philosophy > .container {
        padding: 0 !important;
    }

    .staff-separator {
        height: 60px;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .staff-images {
        flex-direction: column;
        height: auto;
        gap: 60px;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 20px;
    }
    
    /* Disable CSS hover on mobile (JS IntersectionObserver handles it instead) */
    .staff-image-container:hover .staff-image {
        opacity: 1;
    }
    .staff-image-container:hover .staff-video {
        opacity: 0;
    }

    /* Active state triggered by scroll into viewport centre */
    .staff-image-container.active .staff-image {
        opacity: 0;
    }
    .staff-image-container.active .staff-video {
        opacity: 1;
    }

    .staff-image-container {
        width: 100%;
        max-width: 300px;
        height: auto;
        position: relative; /* needed so absolute video overlays the image */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Gradient overlay at the bottom of the image/video area */
    .staff-image-container::after {
        content: '';
        position: absolute;
        top: calc(420px - 100px); /* pinned to last 100px of the 420px media area */
        left: 0;
        width: 100%;
        height: 100px;
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
        z-index: 2;
        pointer-events: none;
    }

    .staff-image-container:nth-child(2) {
        width: 100%;
        max-width: 300px;
    }
    
    .staff-image-container:last-child {
        width: 100%;
        max-width: 300px;
    }
    
    .staff-image {
        width: 100%;
        height: 420px;
        object-fit: cover;
        object-position: top center;
        display: block;
        flex-shrink: 0;
    }

    /* Video must match the exact pixel height of the image */
    .staff-image-container .staff-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 420px;
        object-fit: cover;
        object-position: top center;
    }
    
    .staff-image-container:last-child .staff-mobile-description {
        margin-bottom: 40px;
    }

    /* Show mobile descriptions on mobile */
    .staff-mobile-description {
        display: block;
        width: 100%;
        max-width: 280px;
        margin-top: 20px;
        text-align: center;
        padding: 0;
    }
    
    /* Hide hover descriptions on mobile */
    .staff-hover-description {
        display: none;
    }
    
    .staff-hover-description {
        height: 300px;
        padding: 135px 0;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .hover-description {
        padding: 30px 15px 70px 15px;
    }
    
    .hover-description p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .staff-name {
        font-size: 1.5rem;
        margin-bottom: 0.3rem;
    }
    
    .staff-role {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    @media (max-width: 768px) {
        .values-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }
    }
    
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .network-benefits .benefits-grid,
    .network-why .network-benefits,
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .partner-spotlight .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .reach-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .principles-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .locations-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Philosophy Page Responsive */
    .philosophy-pillars {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .quotes-grid,
    .quotes-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .approach-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    /* Contact Page Responsive */
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Service Page Content Styles */
.service-approach,
.service-expertise,
.service-cta {
    padding: 120px 0;
}

.service-approach {
    background: var(--ivory-white);
}

.service-expertise {
    background: var(--warm-sand);
}

.service-approach .approach-content,
.service-expertise .expertise-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.approach-text {
    max-width: 800px;
    margin: 0 auto;
}

.approach-text p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--charcoal-black);
    font-weight: 300;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 4rem;
    margin-top: 5rem;
}

.expertise-item {
    text-align: center;
    background: var(--ivory-white);
    padding: 3rem 2rem;
    border-radius: 0;
    transition: var(--transition-smooth);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.expertise-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.expertise-image {
    height: 250px;
    margin-bottom: 2.5rem;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

.expertise-placeholder {
    width: 100%;
    height: 100%;
    background: var(--deep-sage);
    opacity: 0.8;
    transition: var(--transition-smooth);
}

.expertise-item:hover .expertise-placeholder {
    opacity: 1;
    transform: scale(1.05);
}

/* Service Page Expertise Icons */
.expertise-icon {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.expertise-icon svg {
    width: 80px;
    height: 80px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.expertise-item:hover .expertise-icon svg {
    transform: scale(1.15);
}

.expertise-icon .icon-line {
    stroke: var(--champagne-gold);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.expertise-icon .icon-dot {
    fill: var(--champagne-gold);
    transform-origin: center;
}

.expertise-content h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--charcoal-black);
    font-weight: 500;
}

.expertise-content p {
    color: var(--charcoal-black);
    line-height: 1.7;
    font-size: 1.1rem;
    font-weight: 300;
}

.service-cta {
    background: var(--charcoal-black);
    color: var(--ivory-white);
    padding: 100px 0;
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-content h2 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: 2rem;
    color: var(--ivory-white);
    font-weight: 500;
    line-height: 1.2;
}

.cta-content p {
    font-size: 1.3rem;
    margin-bottom: 3rem;
    color: var(--ivory-white);
    opacity: 0.9;
    font-weight: 300;
    line-height: 1.6;
}

.cta-button {
    display: inline-block;
    padding: 20px 50px;
    background: var(--champagne-gold);
    color: var(--charcoal-black);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 0;
    transition: var(--transition-smooth);
    font-size: 1.1rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    :root {
        --container-padding: 0 20px;
        --section-padding: 80px 0;
    }
    
    /* Ensure full width on mobile */
    * {
        max-width: 100%;
    }
    
    html, body {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 20px !important;
        margin: 0 !important;
    }
    
    .philosophy .container {
        max-width: none !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .philosophy-content {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    /* Pad only the text elements above the staff divs */
    .philosophy-content .section-title,
    .philosophy-content .philosophy-intro,
    .philosophy-content > div:not(.staff-separator):not(.staff-images):not(.staff-hover-description) {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Hero mobile fixes */
    .hero {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    
    .hero-video {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
    }
    
    .hero-video video {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
    }
    
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
    }
    
    /* Force all elements to full width */
    .philosophy, .expertise, .network, .manifesto, .contact, .footer {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }
    
    .expertise .container, .network .container,
    .manifesto .container, .contact .container, .footer .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin: 0 !important;
    }
    .philosophy .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .nav-container {
        padding: 0 20px;
    }
    
    /* Old slide-in menu replaced by premium mobile overlay */
    .nav-menu {
        display: none !important;
    }

    .nav-mobile-logo {
        display: block;
        position: fixed;
        top: 24px;
        left: 40px;
        z-index: 10000;
    }

    .nav-mobile-logo-img {
        height: 32px;
        width: auto;
        display: block;
        filter: brightness(0) invert(1);
        opacity: 0.8;
    }
    
    .nav-toggle {
        display: flex;
        position: fixed;
        top: 16px;
        right: 30px;
        z-index: 10000;
        background: transparent;
        padding: 15px;
        transition: all 0.3s ease;
        transform: scale(1.3);
    }
    
    .nav-toggle:hover {
        transform: scale(1.3) scale(1.1);
    }
    
    .nav-toggle {
        gap: 7px;
    }

    .nav-toggle span {
        width: 26px;
        height: 1px;
        background: var(--ivory-white);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0;
    }
    
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(10px, 10px);
        background: var(--champagne-gold);
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(10px, -10px);
        background: var(--champagne-gold);
    }
    
    .expertise-grid {
        grid-template-columns: 1fr;
    }
    
    .expertise-carousel .expertise-card {
        flex: 0 0 calc(100% - 20px);
    }
    
    .card-icon {
        height: 150px;
        padding: 1.5rem 1.5rem 0 1.5rem;
    }
    
    .card-icon svg {
        width: 80px;
        height: 80px;
    }
    
    .expertise-carousel-container {
        overflow: visible;
    }
    
    .carousel-controls {
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .carousel-dot {
        width: 10px;
        height: 10px;
    }
    
    .carousel-dot.active {
        width: 24px;
    }
    
    .founders {
        flex-direction: column;
        gap: 40px;
    }
    
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .methods-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .reach-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .network-benefits .benefits-grid,
    .network-why .network-benefits,
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .partners-grid,
    .partner-spotlight .partners-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .benefit-item,
    .partner-card {
        padding: 1.5rem;
    }
    
    .benefit-icon,
    .partner-icon {
        width: 60px;
        height: 60px;
    }
    
    .network-quote {
        font-size: 1.3rem;
        padding: 0 20px;
    }
    
    .footer-inner {
        padding: 60px 24px 50px;
    }

    .footer-brand-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 1rem;
    }

    .footer-tagline {
        text-align: left;
        padding-left: 0;
        font-size: 1.32rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px 24px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    /* Philosophy Page Mobile */
    .philosophy-pillars {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .pillar {
        padding: 2rem 1.5rem;
    }
    
    .quotes-grid,
    .quotes-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .philosophy-quote {
        padding: 2rem 1.5rem;
        font-size: 1rem;
    }
    
    .quote-item {
        padding: 1.5rem;
    }
    
    .quote-item blockquote {
        font-size: 1.05rem;
    }
    
    .approach-steps {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .step {
        padding: 1.5rem;
    }
    
    .step-number {
        font-size: 2rem;
    }
    
    .manifesto-text p {
        font-size: 1rem;
    }
    
    /* Contact Page Mobile */
    .info-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .info-item {
        padding: 1.5rem;
    }
    
    .contact-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    /* Legal Pages Mobile */
    .legal-hero {
        padding: 140px 0 60px;
    }
    
    .legal-section h2 {
        font-size: 1.4rem;
    }
    
    .legal-section h3 {
        font-size: 1.1rem;
    }
    
    .cookie-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .cookie-row.cookie-header {
        display: none;
    }
    
    .cookie-row span:first-child {
        font-weight: 600;
        color: var(--champagne-gold);
    }
}

@media (max-width: 480px) {
    .hero-content {
        padding: 0 20px;
    }
    
    /* Mobile OX logo font size reduction */
    .hero-logo-o img,
    .hero-logo-x img {
        width: 86px;
    }
    
    /* Mobile OX logo movement distance */
    @keyframes logoOAnimation {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        33% {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(25vw) translateY(-26px) scale(0.8);
        }
        66% {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(25vw) translateY(-26px) scale(0.8);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(25vw) translateY(-50vh) translateY(44px) scale(0.425);
        }
    }
    
    @keyframes logoXAnimation {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        33% {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(-25vw) translateY(26px) scale(0.8);
        }
        66% {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(-25vw) translateY(26px) scale(0.8);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%) translateX(-25vw) translateY(-50vh) translateY(44px) scale(0.425);
        }
    }
    
    .hero-logo-o.animation-complete {
        transform: translate(-50%, -50%) translateX(25vw) translateY(-50vh) translateY(44px) scale(0.425) !important;
    }
    
    .hero-logo-x.animation-complete {
        transform: translate(-50%, -50%) translateX(-25vw) translateY(-50vh) translateY(44px) scale(0.425) !important;
    }
    
    .expertise-card {
        height: auto;
        min-height: 350px;
        overflow: visible;
    }
    
    .expertise-carousel .expertise-card {
        overflow: visible;
    }
}


/* ═══════════════════════════════════════════════════════════
   EXPERTISE — ALTERNATIVE CONCEPTS
   ═══════════════════════════════════════════════════════════ */

/* ── Shared scaffold ── */
.ecl-section { width: 100%; }

.ecl-concept { padding: 120px 0; width: 100%; }
.ecl-dark  { background: var(--charcoal-black); color: var(--ivory-white); }
.ecl-light { background: var(--ivory-white); color: var(--charcoal-black); }

.ecl-header { text-align: center; margin-bottom: 0; }
.ecl-c1-hd  { text-align: left; }

@media (max-width: 900px) {
    .ecl-header { margin-bottom: 2rem; }
    .ecl-c1-hd  { text-align: center; }
}
.ecl-eyebrow {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--champagne-gold);
    display: block;
    margin-bottom: 0.75rem;
}
.ecl-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 400;
    margin-bottom: 0.75rem;
    color: inherit;
}
.ecl-subtitle {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    opacity: 0.55;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ══════════════════════════════════════════════
   CONCEPT 1 — THE OX CONSTELLATION
   ══════════════════════════════════════════════ */
.ecl-c1-layout {
    display: grid;
    grid-template-columns: min(650px, 58vw) 380px;
    grid-template-rows: auto 1fr;
    column-gap: 60px;
    row-gap: 3rem;
    justify-content: center;
    padding: 0 40px;
}
.ecl-c1-circle-wrap {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: 100%;
    position: relative;
}
.ecl-c1-hd {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}
.ecl-c1-panel {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}
.ecl-c1-svg { width: 100%; height: auto; display: block; }

/* Segments */
.ecl-seg {
    fill: transparent;
    cursor: pointer;
    transition: fill 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ecl-seg:hover,
.ecl-seg.active {
    fill: rgba(198, 166, 100, 0.12);
}

/* Outer ring — draws in on scroll */
.ecl-ring {
    fill: none;
    stroke: var(--champagne-gold);
    stroke-width: 0.8;
    stroke-dasharray: 1131;
    stroke-dashoffset: 1131;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.ecl-ring.drawn { stroke-dashoffset: 0; }

/* Countdown arc — shrinks over 6s to signal auto-advance */
.ecl-progress-arc {
    fill: none;
    stroke: var(--champagne-gold);
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.85;
    pointer-events: none;
    stroke-dashoffset: 0;
}
@keyframes ecl-progress-shrink {
    from { stroke-dasharray: 161.57 969.4; }
    to   { stroke-dasharray: 0 1131; }
}

/* Radial dividers */
.ecl-div {
    stroke: rgba(198, 166, 100, 0.25);
    stroke-width: 0.6;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ecl-divs-visible .ecl-div { opacity: 1; }

/* Inner circle background */
.ecl-inner-bg {
    fill: var(--charcoal-black);
    transition: fill 0.4s ease;
}

/* X lines */
.ecl-xl {
    stroke: var(--champagne-gold);
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.6s ease, stroke-width 0.3s ease;
}
.ecl-xl.visible { opacity: 0.8; }
.ecl-c1-svg:hover .ecl-xl { stroke-width: 1.5; opacity: 1; }

/* Center dot */
.ecl-cdot {
    fill: var(--champagne-gold);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.ecl-cdot.visible { opacity: 1; }

/* Ring dots */
.ecl-rdot {
    fill: var(--champagne-gold);
    opacity: 0.4;
}

/* Labels */
.ecl-lbl {
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.08em;
    fill: rgba(246, 244, 239, 0.5);
    text-transform: uppercase;
    cursor: pointer;
    transition: fill 0.3s ease;
}
.ecl-lbl:hover,
.ecl-lbl.active { fill: var(--champagne-gold); }

/* Panel */
.ecl-c1-panel {
    width: 100%;
}
.ecl-c1-default {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
.ecl-c1-ox {
    font-family: var(--font-serif);
    font-size: 4rem;
    color: rgba(198, 166, 100, 0.2);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ecl-c1-hint {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.3;
    line-height: 1.8;
}
.ecl-c1-detail {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.ecl-c1-detail.visible {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    opacity: 1;
    transform: translateY(0);
}
.ecl-c1-num {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    color: var(--champagne-gold);
    text-transform: uppercase;
}
.ecl-c1-name {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--ivory-white);
    line-height: 1.2;
    margin: 0;
}
.ecl-c1-desc {
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.75;
    opacity: 0.6;
    margin: 0;
}
.ecl-c1-link {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--champagne-gold);
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(198, 166, 100, 0.3);
    padding-bottom: 2px;
    transition: border-color 0.3s ease;
    align-self: flex-start;
}
.ecl-c1-link:hover { border-color: var(--champagne-gold); }

/* ══════════════════════════════════════════════
   CONCEPT 2 — THE ORBITAL SYSTEM
   ══════════════════════════════════════════════ */
.ecl-c2-universe {
    position: relative;
    width: min(520px, 90vw);
    height: min(520px, 90vw);
    margin: 0 auto;
}
.ecl-c2-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ecl-c2-dashed-ring {
    fill: none;
    stroke: rgba(198, 166, 100, 0.2);
    stroke-width: 0.8;
    stroke-dasharray: 6 10;
    stroke-dashoffset: 0;
    animation: ecl-ring-spin 40s linear infinite;
}
@keyframes ecl-ring-spin {
    to { stroke-dashoffset: -1068; }
}
.ecl-c2-spoke {
    stroke: rgba(198, 166, 100, 0.12);
    stroke-width: 0.6;
}
/* Nodes wrapper */
.ecl-c2-nodes {
    position: absolute;
    inset: 0;
}
/* Each node is absolutely positioned by JS */
.ecl-c2-node {
    position: absolute;
    width: 0;
    height: 0;
}
.ecl-c2-node-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid rgba(198, 166, 100, 0);
    transition: border-color 0.3s ease, background 0.3s ease;
    background: transparent;
    white-space: nowrap;
}
.ecl-c2-node-inner:hover {
    border-color: rgba(198, 166, 100, 0.3);
    background: rgba(198, 166, 100, 0.04);
}
.ecl-c2-n-num {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--champagne-gold);
    text-transform: uppercase;
}
.ecl-c2-n-name {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--charcoal-black);
    text-transform: uppercase;
}
/* Center OX */
.ecl-c2-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}
.ecl-c2-ox {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    color: var(--charcoal-black);
    line-height: 1;
    letter-spacing: -0.02em;
}
.ecl-c2-tag {
    font-family: var(--font-sans);
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--champagne-gold);
}
/* Tooltip */
.ecl-c2-tooltip {
    display: none;
    position: absolute;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--charcoal-black);
    color: var(--ivory-white);
    padding: 20px 28px;
    min-width: 280px;
    text-align: center;
    pointer-events: none;
}
.ecl-c2-tooltip.visible { display: block; }
.ecl-c2-tooltip h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
}
.ecl-c2-tooltip p {
    font-size: 0.78rem;
    opacity: 0.6;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.ecl-c2-tooltip a {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--champagne-gold);
    text-decoration: none;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════
   CONCEPT 3 — THE INTERSECTION GRID
   ══════════════════════════════════════════════ */
.ecl-c3-grid {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    grid-template-rows: 1fr 120px 1fr;
    gap: 2px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}
.ecl-c3-bg-x {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(18rem, 28vw, 28rem);
    font-weight: 400;
    color: rgba(198, 166, 100, 0.04);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    letter-spacing: -0.06em;
}
.ecl-c3-cell { padding: 32px; }
.ecl-c3-top-left  { grid-column: 1; grid-row: 1; }
.ecl-c3-top-right { grid-column: 3; grid-row: 1; }
.ecl-c3-mid-left  { grid-column: 1; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; }
.ecl-c3-center    { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; }
.ecl-c3-mid-right { grid-column: 3; grid-row: 2; display: flex; align-items: center; }
.ecl-c3-bot-left  { grid-column: 1; grid-row: 3; }
.ecl-c3-bot-right { grid-column: 3; grid-row: 3; }

.ecl-c3-item {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(198, 166, 100, 0.12);
    padding: 24px 28px;
    transition: border-color 0.3s ease, background 0.3s ease;
    height: 100%;
}
.ecl-c3-item:hover {
    border-color: rgba(198, 166, 100, 0.5);
    background: rgba(198, 166, 100, 0.05);
}
.ecl-c3-item-right { text-align: right; }
.ecl-c3-num {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--champagne-gold);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ecl-c3-item h4 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--ivory-white);
    margin-bottom: 0.5rem;
}
.ecl-c3-item p {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    line-height: 1.65;
    opacity: 0.5;
    margin: 0;
}
.ecl-c3-ox {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    color: var(--champagne-gold);
    line-height: 1;
    letter-spacing: -0.03em;
    opacity: 0.5;
    display: flex;
    gap: 0;
}
.ecl-c3-mid-left .ecl-c3-item h4,
.ecl-c3-mid-left .ecl-c3-item p { color: var(--ivory-white); }

/* ══════════════════════════════════════════════
   CONCEPT 4 — THE SPLIT CIRCLE
   ══════════════════════════════════════════════ */
.ecl-c4-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}
.ecl-c4-axis-label {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--champagne-gold);
    margin-bottom: 1.5rem;
    opacity: 0.8;
}
.ecl-c4-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}
.ecl-c4-list li a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    text-decoration: none;
    color: var(--charcoal-black);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 10px 0;
    border-bottom: 1px solid rgba(30, 30, 30, 0.1);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.ecl-c4-list li a:hover { color: var(--champagne-gold); border-color: var(--champagne-gold); }
.ecl-c4-list li a span {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--champagne-gold);
    flex-shrink: 0;
}
.ecl-c4-list-right { text-align: right; }
.ecl-c4-list-right li a { flex-direction: row-reverse; }
.ecl-c4-circle-wrap { position: relative; flex-shrink: 0; }
.ecl-c4-svg { width: min(240px, 35vw); height: auto; display: block; }

/* Split halves */
.ecl-c4-half { stroke: none; }
.ecl-c4-left-half  { fill: rgba(198, 166, 100, 0.08); }
.ecl-c4-right-half { fill: rgba(30, 30, 30, 0.06); }
.ecl-c4-ring {
    fill: none;
    stroke: rgba(30, 30, 30, 0.25);
    stroke-width: 0.8;
}
.ecl-c4-divider {
    stroke: rgba(30, 30, 30, 0.2);
    stroke-width: 0.6;
}
.ecl-c4-xl {
    stroke: var(--champagne-gold);
    stroke-width: 1;
    opacity: 0.6;
}
.ecl-c4-cdot { fill: var(--champagne-gold); }
.ecl-c4-mask { fill: var(--ivory-white); }
.ecl-c4-center-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--charcoal-black);
    letter-spacing: -0.02em;
    pointer-events: none;
}

/* ══════════════════════════════════════════════
   RESPONSIVE — ALL CONCEPTS
   ══════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* C1: header → pie → panel */
    .ecl-c1-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 0 24px;
    }
    .ecl-c1-hd          { order: 1; width: 100%; text-align: center; }
    .ecl-c1-circle-wrap {
        order: 2;
        width: min(384px, 70vw);
        overflow: visible;  /* let labels bleed outside the box */
        margin: 0 auto;
    }
    /* Allow labels to render outside the SVG rect */
    .ecl-c1-svg         { overflow: visible; }
    .ecl-concept        { overflow: visible; }
    .ecl-xl             { stroke-width: 2; }
    .ecl-xl.visible     { opacity: 0.8; }
    .ecl-c1-panel       { order: 3; width: 100%; }
    .ecl-lbl            { font-size: 31px; }
    .ecl-c1-link        { align-self: center; }
    .ecl-c1-default,
    .ecl-c1-detail { align-items: center; text-align: center; }

    /* C2 */
    .ecl-c2-universe { width: min(420px, 88vw); height: min(420px, 88vw); }
    .ecl-c2-node-inner { padding: 6px 10px; }
    .ecl-c2-n-name { font-size: 0.62rem; }

    /* C3: collapse to 2 columns */
    .ecl-c3-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: unset;
    }
    .ecl-c3-bg-x { display: none; }
    .ecl-c3-top-left  { grid-column: 1; grid-row: 1; }
    .ecl-c3-top-right { grid-column: 2; grid-row: 1; }
    .ecl-c3-mid-left  { grid-column: 1; grid-row: 2; justify-content: flex-start; }
    .ecl-c3-center    { display: none; }
    .ecl-c3-mid-right { grid-column: 2; grid-row: 2; }
    .ecl-c3-bot-left  { grid-column: 1; grid-row: 3; }
    .ecl-c3-bot-right { grid-column: 2; grid-row: 3; }
    .ecl-c3-item-right { text-align: left; }

    /* C4: stack vertically */
    .ecl-c4-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .ecl-c4-list-right { text-align: center; }
    .ecl-c4-list-right li a { flex-direction: row; justify-content: center; }
    .ecl-c4-circle-wrap { order: -1; margin: 0 auto; }
    .ecl-c4-svg { width: min(200px, 55vw); }
    .ecl-c4-axis-label { text-align: center; }
}

@media (max-width: 600px) {
    .ecl-concept { padding: 80px 0; }
    .ecl-title { font-size: 2rem; }

    /* C2 nodes smaller */
    .ecl-c2-universe { width: 88vw; height: 88vw; }
    .ecl-c2-node-inner { padding: 4px 7px; }
    .ecl-c2-n-name { font-size: 0.55rem; }
    .ecl-c2-n-num { display: none; }

    /* C3 single column */
    .ecl-c3-grid { grid-template-columns: 1fr; }
    .ecl-c3-top-left  { grid-column: 1; grid-row: 1; }
    .ecl-c3-top-right { grid-column: 1; grid-row: 2; }
    .ecl-c3-mid-left  { grid-column: 1; grid-row: 3; justify-content: flex-start; }
    .ecl-c3-mid-right { grid-column: 1; grid-row: 4; }
    .ecl-c3-bot-left  { grid-column: 1; grid-row: 5; }
    .ecl-c3-bot-right { grid-column: 1; grid-row: 6; }
    .ecl-c3-cell { padding: 16px; }
}

/* Universal Button Hover Effect - X Cross Fill */
.cta-button,
.form-submit {
    position: relative;
    overflow: hidden;
}

.cta-button::before,
.form-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--ivory-white);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.5s ease;
    z-index: -1;
    clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
}

.cta-button:hover::before,
.form-submit:hover::before {
    width: 1418px;
    height: 1418px;
}

.cta-button:hover,
.form-submit:hover {
    color: var(--charcoal-black);
}


/* ============================================================
   PREMIUM MOBILE OVERLAY
   Full-screen, elegant navigation overlay for mobile devices
   ============================================================ */

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000; /* above nav (9999) and nav-toggle (10000) */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: rgba(9, 9, 9, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    /* GSAP controls visibility */
    opacity: 0;
    visibility: hidden;
}

.mobile-overlay-inner {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 0 36px 100px;
    position: relative;
}

/* Thin gold accent line on the left */
.mobile-overlay-inner::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(198, 166, 100, 0.35) 20%,
        rgba(198, 166, 100, 0.35) 80%,
        transparent 100%
    );
    pointer-events: none;
}

/* ---- Header ---- */
.mobile-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    flex-shrink: 0;
    padding-left: 4px;
}

.mobile-overlay-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.mobile-overlay-logo-img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.mobile-overlay-logo:hover .mobile-overlay-logo-img {
    opacity: 1;
}

/* Close button */
.mobile-overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--ivory-white);
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 8px 4px;
}

.mobile-overlay-close:hover {
    opacity: 1;
    color: var(--champagne-gold);
}

/* ---- Navigation ---- */
.mobile-overlay-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 0 16px 4px;
}

.mobile-overlay-group {
    display: flex;
    flex-direction: column;
}

.mobile-overlay-item {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 22px 0;
    text-decoration: none;
    border: none;
    border-bottom: 1px solid rgba(246, 244, 239, 0.06);
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.item-index {
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--champagne-gold);
    opacity: 0.55;
    flex-shrink: 0;
    line-height: 1;
    padding-bottom: 0.2rem;
    transition: opacity 0.35s ease;
    text-transform: uppercase;
}

.item-label {
    font-family: var(--font-serif);
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--ivory-white);
    letter-spacing: 0.01em;
    line-height: 1;
    flex: 1;
    transition: color 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.item-chevron {
    flex-shrink: 0;
    color: var(--champagne-gold);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
    align-self: center;
    margin-left: 12px;
}

/* Hover & active states */
.mobile-overlay-item:hover .item-label,
.mobile-overlay-item.is-active .item-label {
    color: var(--champagne-gold);
}

.mobile-overlay-item:hover .item-index,
.mobile-overlay-item.is-active .item-index {
    opacity: 1;
}

.mobile-overlay-item:hover .item-label {
    transform: translateX(6px);
}

.mobile-overlay-toggle.is-open .item-chevron {
    transform: rotate(180deg);
    color: var(--champagne-gold);
}

.mobile-overlay-toggle.is-open .item-label {
    color: var(--champagne-gold);
}

.mobile-overlay-toggle.is-open .item-index {
    opacity: 1;
}

/* ---- Sub-menu accordion ---- */
.mobile-overlay-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-overlay-sub.is-open {
    max-height: 520px;
}

.mobile-sub-item {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(246, 244, 239, 0.42);
    text-decoration: none;
    padding: 11px 0 11px 46px;
    border-bottom: 1px solid rgba(246, 244, 239, 0.04);
    transition: color 0.3s ease, padding-left 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-sub-item:last-child {
    border-bottom: none;
    padding-bottom: 18px;
}

.mobile-sub-item:hover,
.mobile-sub-item.is-active {
    color: var(--champagne-gold);
    padding-left: 52px;
}

/* ---- CTA Section ---- */
.mobile-overlay-cta-wrap {
    padding: 28px 4px 20px;
    flex-shrink: 0;
}

.mobile-overlay-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 20px 32px;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--champagne-gold);
    text-decoration: none;
    border: 1px solid rgba(198, 166, 100, 0.5);
    position: relative;
    overflow: hidden;
    transition: color 0.45s ease, border-color 0.45s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-overlay-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--champagne-gold);
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.mobile-overlay-cta > * {
    position: relative;
    z-index: 1;
}

.mobile-overlay-cta:hover::before {
    transform: translateX(0);
}

.mobile-overlay-cta:hover {
    color: #090909;
    border-color: var(--champagne-gold);
}

.mobile-overlay-cta svg {
    transition: transform 0.35s ease;
}

.mobile-overlay-cta:hover svg {
    transform: translateX(4px);
}

/* ---- Footer / Language ---- */
.mobile-overlay-foot {
    padding: 16px 4px 40px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.mobile-lang-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mobile-lang {
    font-family: var(--font-sans);
    font-size: 0.775rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(246, 244, 239, 0.28);
    text-decoration: none;
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-lang:hover,
.mobile-lang.is-active {
    color: var(--champagne-gold);
}

.mobile-lang-dot {
    color: rgba(246, 244, 239, 0.12);
    font-size: 0.5625rem;
    line-height: 1;
}

/* ---- Show on mobile only ---- */
@media (max-width: 768px) {
    .mobile-overlay {
        display: block;
    }

    /* On homepage, the big OX hero letters replace the overlay logo */
    .homepage .mobile-overlay-logo-img {
        display: none;
    }
}

/* ===================================================
   Mobile Scroll Curves — golden wavy lines
   Drawn on scroll during hero → expertise transition
   Mobile only (≤768px)
   =================================================== */

/* Expertise-end curves — mirrors hero curves, left→right, black */
#expertise-curves-mobile {
    display: none;
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 500;
}

@media (max-width: 768px) {
    #expertise-curves-mobile {
        display: block;
    }
}

#ecm-svg {
    position: absolute;
    bottom: -265px;
    left: 0;
    width: 100%;
    height: 40vh;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}

.ecm-path { opacity: 0; }

.ecm-path:nth-child(1)  { stroke-width: 2.8; }
.ecm-path:nth-child(2)  { stroke-width: 1.1; }
.ecm-path:nth-child(3)  { stroke-width: 0.75; }
.ecm-path:nth-child(4)  { stroke-width: 2.3; }
.ecm-path:nth-child(5)  { stroke-width: 1.6; }
.ecm-path:nth-child(6)  { stroke-width: 0.9; }
.ecm-path:nth-child(7)  { stroke-width: 1.9; }
.ecm-path:nth-child(8)  { stroke-width: 2.5; }
.ecm-path:nth-child(9)  { stroke-width: 0.65; }
.ecm-path:nth-child(10) { stroke-width: 1.7; }
.ecm-path:nth-child(11) { stroke-width: 1.05; }
.ecm-path:nth-child(12) { stroke-width: 1.4; }

/* Sits at the hero / expertise junction; SVG extends upward into the hero bottom */
#scroll-curves-mobile {
    display: none;
    position: relative;
    height: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 500;
}

@media (max-width: 768px) {
    #scroll-curves-mobile {
        display: block;
    }
}

#scm-svg {
    position: absolute;
    bottom: -185px;
    left: 0;
    width: 100%;
    height: 40vh;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 0 6px rgba(198, 166, 100, 0.5));
}

.scm-path { opacity: 0; }

/* Épaisseurs irrégulières — le gradient gère l'opacité variable le long de chaque courbe */
.scm-path:nth-child(1)  { stroke-width: 2.8; }
.scm-path:nth-child(2)  { stroke-width: 1.1; }
.scm-path:nth-child(3)  { stroke-width: 0.75; }
.scm-path:nth-child(4)  { stroke-width: 2.3; }
.scm-path:nth-child(5)  { stroke-width: 1.6; }
.scm-path:nth-child(6)  { stroke-width: 0.9; }
.scm-path:nth-child(7)  { stroke-width: 1.9; }
.scm-path:nth-child(8)  { stroke-width: 2.5; }
.scm-path:nth-child(9)  { stroke-width: 0.65; }
.scm-path:nth-child(10) { stroke-width: 1.7; }
.scm-path:nth-child(11) { stroke-width: 1.05; }
.scm-path:nth-child(12) { stroke-width: 1.4; }


/* ═══════════════════════════════════════════════════════════════════════
   PAGE TRANSITION — X brush-stroke overlay
   (elements are created dynamically by page-transition.js)
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * Setting a background-color on <html> prevents the browser from showing
 * a blank white screen during the brief moment between navigation and the
 * incoming page's first paint. Charcoal matches the overlay colour so the
 * flash is invisible to the user.
 */
html {
  background-color: #000000;
}

/* Charcoal overlay that covers the outgoing page */
#ox-overlay {
  will-change: opacity;
}

/* Optional: very subtle animated film-grain on the overlay.
   Uses a tiny SVG turbulence tile that shifts each frame. */
#ox-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  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.70' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  animation: ox-grain 0.6s steps(4) infinite;
}

@keyframes ox-grain {
  0%   { transform: translate(0,    0);    }
  25%  { transform: translate(-3px, -2px); }
  50%  { transform: translate(2px,   3px); }
  75%  { transform: translate(-2px,  1px); }
  100% { transform: translate(1px,  -3px); }
}

/* Next-page preview container (masked to X shape by JS) */
#ox-next-page {
  will-change: mask, -webkit-mask;
}

/* Incoming-page cover that fades out to reveal the new page */
#ox-enter-cover {
  will-change: opacity;
}

/* While any transition is in flight, hide the cursor */
body[style*="pointer-events: none"] {
  cursor: wait;
}

/* When arriving via page transition, skip every hero fade-in so the page
   appears fully rendered the instant the charcoal cover dissolves. */
.ox-via-transition .hero .hero-content,
.ox-via-transition .hero-content,
.ox-via-transition .hero-cta,
.ox-via-transition .hero-title,
.ox-via-transition .hero-subtitle,
.ox-via-transition .hero-quote,
.ox-via-transition .slow-fade {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ── Cookie Consent Banner ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #111;
  border-top: 1px solid rgba(198, 166, 100, 0.2);
  padding: 20px 0;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.cookie-banner.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.cookie-banner-text {
  color: #ccc;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.cookie-banner-link {
  color: #C6A664;
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 166, 100, 0.3);
  transition: border-color 0.3s ease;
}

.cookie-banner-link:hover {
  border-color: #C6A664;
}

.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-banner-btn {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  white-space: nowrap;
}

.cookie-banner-accept {
  background: #C6A664;
  color: #111;
  border: 1px solid #C6A664;
}

.cookie-banner-accept:hover {
  background: #d4b876;
  border-color: #d4b876;
}

.cookie-banner-decline {
  background: transparent;
  color: #C6A664;
  border: 1px solid #C6A664;
}

.cookie-banner-decline:hover {
  background: rgba(198, 166, 100, 0.1);
}

@media (max-width: 768px) {
  .cookie-banner-inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 16px;
    text-align: center;
  }

  .cookie-banner-actions {
    width: 100%;
    justify-content: center;
  }

  .cookie-banner-btn {
    flex: 1;
    max-width: 160px;
  }
}