@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('/assets/fonts/fraunces-italic-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

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

a, button, input, textarea, select, .card-interactive { -webkit-tap-highlight-color: transparent; }

:root {
    color-scheme: light;

    --ink:         #10151c;
    --ink-soft:    #29323d;
    --ink-muted:   #58657a;
    --surface:     #f5f7fa;
    --surface-2:   #ffffff;
    --surface-3:   #e4e9ef;
    --white:       #ffffff;
    --accent:      #2f5fa8;
    --accent-warm: #5b8fd6;
    --accent-dim:  rgba(47, 95, 168, 0.07);
    --accent-2:    #b5502f;

    --serif:   'Fraunces', Georgia, serif;
    --sans:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
    --mono:    'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --max-w:        1280px;
    --max-w-narrow: 820px;
    --radius:       6px;
    --radius-lg:    18px;
    --radius-xl:    26px;
    --radius-pill:  6px;

    --nav-h: 72px;

    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:   cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:  150ms;
    --dur-med:   300ms;
    --dur-slow:  600ms;
    --dur-exit:  180ms;

    --shadow-sm: 0 1px 4px rgba(16,21,28,0.06), 0 2px 8px rgba(16,21,28,0.04);
    --shadow-md: 0 4px 16px rgba(16,21,28,0.08), 0 8px 32px rgba(16,21,28,0.06);
    --shadow-lg: 0 8px 32px rgba(16,21,28,0.10), 0 24px 64px rgba(16,21,28,0.07);
    --shadow-xl: 0 24px 80px rgba(16,21,28,0.18);
}

html { 
    font-size: 16px; 
    width: 100%; 
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { 
    background-color: var(--surface-3); 
    border-radius: 4px; 
    border: 2px solid transparent; 
    background-clip: padding-box; 
}

::-webkit-scrollbar-thumb:hover { 
    background-color: var(--ink-muted); 
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

body {
    font-family: var(--sans); font-weight: 400; color: var(--ink);
    background: var(--surface); line-height: 1.55;
    -webkit-font-smoothing: antialiased; width: 100%; position: relative;
    font-optical-sizing: auto;
}

body.loading, body.modal-open { overflow: hidden; overscroll-behavior: none; }

body.modal-open { touch-action: none; }

img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}

a { color: inherit; text-decoration: none; }

button { border: none; background: none; font-family: var(--sans); cursor: pointer; }

.skip-link {
    position: absolute; top: 0; left: var(--space-4);
    transform: translateY(-150%);
    background: var(--ink); color: var(--white);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius);
    font-size: 0.875rem; z-index: 99999;
    transition: transform 0.2s;
}

.skip-link:focus { transform: translateY(var(--space-4)); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

svg.lucide { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

@media (min-width: 1024px) and (max-width: 1920px) {
    html { font-size: 15px; }
    :root {
        --max-w: 1080px;
        --space-24: 4rem;
        --space-16: 3rem;
        --nav-h: 64px;
    }
    .project-header h1 { font-size: clamp(2rem, 4vw, 3.5rem); }

    .next-title { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }

    .standard-quote { font-size: clamp(1.125rem, 2.5vw, 2rem); }
}

@media (min-width: 1440px) and (max-width: 1920px) {
    html { font-size: 16px; }
    :root {
        --max-w: 1152px;
        --nav-h: 68px;
    }
}

@media (max-width: 768px) {
    :root { --space-24: 4rem; }
    .hero-stats-centered { gap: var(--space-6); }
    .stat-num { font-size: 1.875rem; }
    .stat-divider { height: 36px; }
}

html, body {
    overflow-x: clip;
}

main {
    overflow-x: clip;
}

body.modal-open,
body.modal-open main,
body.modal-open .site-wrapper {
    overflow: hidden !important;
}

html:has(body.modal-open) { overflow: hidden; }

.modal-panel, .modal-scroll, .project-modal, .lightbox-modal { overscroll-behavior: contain; }

@supports not (scrollbar-gutter: stable) {
    body.modal-open { padding-right: var(--scroll-pad, 0px) !important; }
    body.modal-open .main-header { padding-right: var(--scroll-pad, 0px) !important; }
}

html:has(body.project-modal-open) {
    background-color: color-mix(in srgb, #0a0f17 40%, #f5f7fa);
}

.proof-label, .card-cat, .card-date, .insight-meta, 
.card-methodology, .card-tags span, .lab-pills span, .card-tag-btn, 
.modal-eyebrow, .modal-tags span, .pm-tag, 
.modal-methodology, .modal-section-num, 
.testimonial-badge, .testimonial-source, .archive-mode-text, 
.service-row-num, .service-row-tools span, .services-footer-bar p, 
.insight-upcoming-label, .viz-counter, .timeline-period, 
.hero-visual-tag, .project-breadcrumb, 
.thread-back-btn, .thread-post-meta {
    letter-spacing: 0.04em !important;
    font-weight: 500;
}

.section-eyebrow, .form-group label, .modal-section-label h3, 
.cap-block .cap-title, .footer-col .footer-title {
    letter-spacing: 0.02em !important;
    font-weight: 500;
    text-transform: none !important;
}