/* ============================================================
   Velo Agents — shared core styles
   Tokens, nav (+ mobile menu), buttons, panels, reveal, footer.
   Page-specific styles live in each page's own <style> block.
   ============================================================ */

:root {
    --bg: #f4f3ef;
    --ink: #0b0b0c;
    --muted: #8f8d86;
    --line: rgba(11, 11, 12, 0.10);
    --gold-d: #474d56;
    --gold: #8b929c;
    --gold-l: #dfe4ea;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
/* NB: no global scroll-behavior:smooth — it fights Lenis on the homepage.
   In-page anchor smoothing is handled by core.js (Lenis or scrollIntoView). */
body { background: var(--bg); color: var(--ink); font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

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

/* ---- Nav ---- */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px clamp(20px, 5vw, 64px);
    transition: background 0.3s, backdrop-filter 0.3s, padding 0.3s;
}
.nav.scrolled { background: #ffffff; border-bottom: 1px solid var(--line); padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 22px; width: auto; }
.brand b { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; color: #f3f4f6; transition: color 0.3s; }
.nav.scrolled .brand b { color: var(--ink); }
.nav-right { display: flex; gap: 26px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; align-items: center; }
/* default: over a dark hero at the top of the page */
.nav-right a { color: rgba(255, 255, 255, 0.66); transition: color 0.3s; }
.nav-right a:hover, .nav-right a.active { color: #ffffff; }
/* scrolled: light glass bar over the light page below */
.nav.scrolled .nav-right a { color: #3a3a36; }
.nav.scrolled .nav-right a:hover, .nav.scrolled .nav-right a.active { color: var(--ink); }
.nav-cta { padding: 9px 18px; border-radius: 999px; background: #f4f4f5; color: #0a0a0c !important; transition: background 0.3s, color 0.3s; }
.nav.scrolled .nav-cta { background: var(--ink); color: var(--bg) !important; }

/* Mobile menu toggle: two bars, bottom slightly shorter than top */
.nav-toggle { display: none; flex-direction: column; gap: 6px; padding: 8px 0; margin: 0; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: #f3f4f6; transition: background 0.3s; }
.nav-toggle .b1 { width: 26px; }
.nav-toggle .b2 { width: 18px; }
.nav.scrolled .nav-toggle span { background: var(--ink); }
@media (max-width: 720px) {
    .nav-toggle { display: flex; }
    .nav-right {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 18px;
        background: #202127; padding: 20px clamp(20px, 5vw, 64px) 26px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.55);
    }
    .nav.open .nav-right { display: flex; }
    /* light nav items on the dark dropdown (overrides both the dark-hero and scrolled colours) */
    .nav-right a, .nav-right a.active, .nav.scrolled .nav-right a { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; }
    .nav-right a:hover, .nav-right a.active { color: #ffffff; }
    /* keep the CTA as its light pill regardless of scroll, so it stays the same and stays visible on dark
       (the scrolled selector is needed to outrank `.nav.scrolled .nav-cta`, which would darken it) */
    .nav-right a.nav-cta, .nav.scrolled .nav-right a.nav-cta {
        text-align: center; padding: 13px 18px; background: #f4f4f5; color: #0a0a0c !important;
    }
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 17px 32px; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
    transition: transform 0.25s var(--ease), box-shadow 0.3s;
}
.btn--light { background: #f4f4f5; color: #0a0a0c; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6); }
.btn--ink { background: var(--ink); color: var(--bg); box-shadow: 0 18px 40px -18px rgba(11, 11, 12, 0.5); }
.btn:hover { transform: translateY(-2px); }

/* ---- Panel system (light / white / dark chapters) ---- */
.panel { padding: clamp(72px, 13vh, 160px) clamp(20px, 5vw, 64px); position: relative; }
.panel--light { background: #f1f0ec; }
.panel--white { background: #fff; }
.panel--dark { background: #0a0a0c; color: #f4f4f5; }
.inner { max-width: 1120px; margin: 0 auto; }
.kicker { display: inline-block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(18px, 3vh, 30px); }
.panel--dark .kicker { color: #8b8d95; }
.title { font-weight: 300; font-size: clamp(1.5rem, 3.1vw, 2.5rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 18ch; }
.lede { margin-top: clamp(18px, 3vh, 28px); max-width: 56ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.65; color: #55544f; }
.panel--dark .lede { color: #b6b8c0; }

/* ---- Footer ---- */
.footer { background: #0a0a0c; color: #9a9ca4; padding: 40px clamp(20px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 0.85rem; }
.footer a:hover { color: #fff; }

/* ---- Reveal-on-scroll ---- */
.r { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .r { opacity: 1; transform: none; } html { scroll-behavior: auto; } }