/* style.css */
/* CROSSLEY STAFFING | SYSTEM STATE MANIFEST V7.7 | COMPILER MODE: PRINCIPAL RIGOR */

:root {
    --c-navy-deep: #0c1a2b;
    --c-slate-900: #0f172a; 
    --c-slate-600: #475569; 
    --c-slate-400: #94a3b8; 
    --c-slate-200: #e2e8f0; 
    --c-slate-100: #f1f5f9; 
    --c-blue: #007bff;      
    --c-bg-wash: #f1f5f9;
    
    --gap-section: 140px;
    --container-max: 840px;
    --t-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Inter', sans-serif; 
    color: var(--c-slate-600); 
    background-color: var(--c-bg-wash); 
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

@keyframes chromantic-bloom {
    0% { opacity: 0.5; filter: grayscale(100%); font-weight: 400; }
    25%, 75% { opacity: 1; filter: grayscale(0%); font-weight: 800; }
    100% { opacity: 0.5; filter: grayscale(100%); font-weight: 400; }
}

@supports (animation-timeline: view()) {
    .content-section {
        view-timeline-name: --section;
        view-timeline-axis: block;
        animation: chromantic-bloom linear both;
        animation-timeline: --section;
        animation-range: entry 10% exit 90%;
    }
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 32px; position: relative; }

.container::before {
    content: ''; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(to bottom, var(--c-slate-200), transparent);
    z-index: -1;
}

.site-header {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #f1f5f9;
    padding: 18px 0;
}

.nav-flex { display: flex; align-items: center; }
nav { margin-left: 60px; display: flex; gap: 8px; }

.nav-link { 
    text-decoration: none; color: var(--c-slate-600); 
    font-size: 0.9rem; font-weight: 500; 
    padding: 8px 16px; position: relative;
    letter-spacing: -0.01em;
    transition: color 0.3s var(--t-ease), font-weight 0.3s var(--t-ease);
    border-radius: 6px;
    z-index: 1;
}

.nav-link::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 0; height: 100%;
    background: rgba(0, 123, 255, 0.08);
    border-radius: 6px;
    transition: width 0.3s var(--t-ease);
    z-index: -1;
}

.nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    width: 0; height: 2px;
    background: var(--c-blue);
    transition: width 0.3s var(--t-ease), left 0.3s var(--t-ease);
}

.nav-link:hover { color: var(--c-navy-deep); font-weight: 800; }
.nav-link:hover::before { width: 100%; }
.nav-link:hover::after { width: 100%; left: 0; }

@media (max-width: 768px) {
    .nav-flex { flex-direction: column; align-items: flex-start; }
    nav { margin-left: 0; flex-wrap: wrap; justify-content: flex-start; }
    .nav-logo img { max-width: 160px; height: auto; }
}

.content-section { padding: var(--gap-section) 0; border-bottom: 1px solid var(--c-slate-200); position: relative; }
.hover-lift { transition: transform 0.4s var(--t-ease); will-change: transform; }
.hover-lift:hover { transform: translateY(-4px); }

h1 { font-size: 2.75rem; font-weight: 800; color: var(--c-slate-900); letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 24px; }
h1 span.dim { color: var(--c-slate-400); font-weight: 700; }

h2 { font-size: 1.75rem; color: var(--c-slate-900); margin-bottom: 16px; letter-spacing: -0.02em; font-weight: 700; }

.label-pill { 
    display: block; color: var(--c-blue); font-size: 0.75rem; font-weight: 800; 
    text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 12px; 
}

.lead-p { font-size: 1.25rem; color: var(--c-slate-600); margin-bottom: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }

.site-footer { 
    background: var(--c-slate-100); 
    border-top: 1px solid var(--c-slate-200); 
    padding: 0 0 var(--gap-section) 0; 
}
#contact { padding-top: 120px; }

.footer-grid { display: grid; grid-template-columns: 1fr 1fr; }
.footer-meta { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--c-slate-400); margin-bottom: 8px; }
.footer-email { 
    display: block; font-size: 1.25rem; color: var(--c-slate-900); 
    text-decoration: none; font-weight: 700; margin-bottom: 4px; 
    transition: color 400ms var(--t-ease); 
}
.footer-email:hover { color: var(--c-blue); }
.footer-brand { font-weight: 800; color: var(--c-slate-900); font-size: 1rem; margin-bottom: 4px; }
.footer-copyright { font-size: 0.75rem; color: var(--c-slate-400); margin-top: 32px; }