/* ============================================================
   VOCALISE — SHARED DESIGN SYSTEM
   Used by index.html and every page under work/*.html.
   Tokens, base elements, buttons, shared nav parts and the
   dark footer. Page-specific layout stays in each page's own
   stylesheet (see assets/css/work.css for case study pages).
   ============================================================ */

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

:root{
  --bg:            #ffffff;
  --bg-soft:       #fafafa;
  --bg-soft-2:     #f4f4f6;
  --bg-black:      #0a0a0c;
  --bg-black-2:    #131318;
  --ink:           #0a0a0c;
  --ink-soft:      #55565f;
  --ink-faint:     #8b8c96;
  --on-dark:       #f6f6f8;
  --on-dark-soft:  #9a9ba6;
  --line:          #e6e6ea;
  --line-dark:     rgba(255,255,255,0.12);
  --navy:          #0d0652;
  --accent:        #4f46e5;
  --accent-2:      #6366f1;
  --accent-soft:   rgba(79,70,229,0.10);
  --alt-bg:        #f3f4fb;
  --alt-border:    #e1e2ee;
  --alt-icon-bg:   #eaebf7;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:          'Space Mono', monospace;
  --radius:        10px;
  --container:     1160px;
}

html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
.container{max-width:var(--container);margin:0 auto;padding:0 32px;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
section{position:relative;}

/* ── EYEBROW / TAG ─────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}

/* ── BUTTONS ───────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:8px;font-weight:600;font-size:14.5px;border:1px solid transparent;white-space:nowrap;cursor:pointer;transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-2);}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}

/* ── NAV (shared parts — #navbar itself differs per page) ── */
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.nav-logo{display:flex;align-items:center;gap:10.8px;font-family:var(--mono);font-weight:700;font-size:18px;letter-spacing:.04em;}
.nav-logo-mark{width:26.4px;height:26.4px;object-fit:contain;}
.nav-right .btn{padding:10.2px 18.7px;font-size:12.3px;gap:6.8px;border-radius:6.8px;}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-soft);transition:color .15s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:18px;}
.mob-menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);}

/* ── FOOTER (dark, reversed out) ───────────────────── */
.footer-bottom-bar{padding:26px 0;background:var(--bg-black);border-top:1px solid var(--line-dark);}
.footer-nav-links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;list-style:none;margin-bottom:22px;}
.footer-nav-links a{font-size:13.5px;font-weight:500;color:var(--on-dark-soft);transition:color .15s ease;}
.footer-nav-links a:hover{color:var(--on-dark);}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.footer-bottom-inner span{font-size:13px;color:var(--on-dark-soft);}
.footer-socials{display:flex;gap:18px;}
.footer-socials a{font-size:14px;color:var(--on-dark-soft);transition:color .15s ease;}
.footer-socials a:hover{color:var(--on-dark);}
.footer-legal{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--on-dark);}
.footer-legal img{width:18px;height:18px;}

/* ── FOOTER: ACKNOWLEDGEMENT OF COUNTRY ─────────────── */
.footer-acknowledgement{font-size:12.5px;line-height:1.65;color:var(--on-dark-soft);text-align:center;max-width:640px;margin:0 auto 22px;}

/* ── SIMPLE CONTENT / LEGAL PAGES (privacy, terms) ──── */
.legal-hero{padding:150px 0 40px;background:var(--alt-bg);border-bottom:1px solid var(--line);}
.legal-hero h1{font-size:clamp(30px,4vw,44px);margin:12px 0 10px;}
.legal-hero .updated{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);}
.legal-content{padding:56px 0 80px;max-width:760px;margin:0 auto;}
.legal-content h2{font-size:clamp(19px,2.2vw,23px);margin:38px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:14px;}
.legal-content ul{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin:0 0 14px 22px;}
.legal-content li{margin-bottom:6px;}
.legal-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}