/* ==============================================
   SOJJ CONSULTING — UNIFIED STYLES
   Single source of truth for all pages
   ============================================== */

/* --- Section 1: Foundation --- */

:root {
    --cream:      #e8e6dc;
    --offwhite:   #faf9f5;
    --charcoal:   #141413;
    --stone-900:  #141413;
    --stone-800:  #3b3a38;
    --stone-700:  #62615c;
    --stone-600:  #898881;
    --stone-500:  #b0aea5;
    --stone-400:  #cccac1;
    --stone-300:  #e8e6dc;
    --stone-200:  #f1f0e9;
    --stone-100:  #faf9f5;
    --accent-orange: #d97757;
    --accent-blue:   #6a9bcc;
    --accent-green:  #788c5d;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--cream);
    color: var(--stone-800);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--stone-800);
    color: white;
}

::-webkit-scrollbar { width: 0; background: transparent; }

/* --- Section 2: Animations --- */

@keyframes revealFlow {
    0%   { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(12px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.reveal-item { opacity: 0; will-change: transform, opacity, filter; }
.reveal-active { animation: revealFlow 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) both; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }

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

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

.animate-scroll       { animation: scroll-marquee 40s linear infinite; }
.animate-scroll-cards { animation: scroll-cards 60s linear infinite; }
.animate-scroll-cards:hover { animation-play-state: paused; }

/* --- Section 3: Navigation --- */

.nav-bar {
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
    border-bottom: 1px solid transparent;
}

.nav-bar.scrolled-dark {
    background: rgba(20,20,19,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(255,255,255,0.05);
}

.nav-bar.scrolled-light {
    background: rgba(232,230,220,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: rgba(232,230,220,0.5);
}

.mega-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem; border-radius: 0.75rem;
    transition: background-color 0.2s;
}

.mega-link:hover { background: rgba(255,255,255,0.05); }

/* --- Section 4: Mobile Drawer (standardized 380px) --- */

.drawer-overlay {
    position: fixed; inset: 0; z-index: 45;
    background: rgba(20,20,19,0.6); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
}

.drawer-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }

.drawer-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
    width: min(380px, 90vw);
    background: rgba(20,20,19,0.98); backdrop-filter: blur(16px);
    border-left: 1px solid rgba(255,255,255,0.05);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; flex-direction: column;
}

.drawer-panel.open { transform: translateX(0); }

.drawer-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1rem; color: #cccac1;
    transition: all 0.3s; font-size: 0.875rem;
    border-radius: 0.5rem;
}

.drawer-link:hover, .drawer-link.active {
    color: #faf9f5;
    background: rgba(255,255,255,0.03);
}

.drawer-sub { padding-left: 2.5rem; }

.drawer-sub a {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; color: #b0aea5;
    font-size: 0.8125rem; transition: color 0.2s;
    border-radius: 0.375rem;
}

.drawer-sub a:hover { color: #faf9f5; }

/* --- Section 5: Components --- */

.noise-overlay {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 50;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}

.card-lift {
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1);
    will-change: transform, box-shadow;
}

.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.06), 0 8px 10px -6px rgba(0,0,0,0.04);
}

.img-scale { transition: transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.group:hover .img-scale { transform: scale(1.05); }

.principle-row { transition: background-color 0.3s; }
.principle-row:hover { background-color: rgba(59,58,56,0.3); }
.principle-row:hover .p-desc { color: #e8e6dc; }
.p-desc { transition: color 0.3s; }

/* --- Section 6: Utilities --- */

.mask-fade-x {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* --- Section 7: Page-specific --- */

/* FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.3s ease; }
.faq-answer.open { max-height: 2000px; padding-top: 1rem; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-chevron.rotate { transform: rotate(180deg); }
.section-label { font-family: 'DM Sans', sans-serif; letter-spacing: 0.2em; }

/* Contact form */
input:focus, textarea:focus, select:focus { outline: none; border-color: #3b3a38; }

/* --- Section 8: Accent System --- */

/* Footer accent line — auto-applies to all site footers */
footer {
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--accent-orange), var(--accent-blue), var(--accent-green));
}

/* CTA accent hover glow */
.cta-accent:hover {
    box-shadow: 0 12px 32px rgba(217, 119, 87, 0.15), 0 4px 12px rgba(217, 119, 87, 0.1);
}