/* ============================================
   V3 DESIGN TOKEN SYSTEM
   Include in every template: <link rel="stylesheet" href="tokens-v3.css">
   ============================================ */
:root {
  /* Backgrounds */
  --bg: #07070B;
  --bg-elevated: #0D0D12;
  --bg-surface: #111118;
  --bg-card: rgba(255,255,255,0.025);
  --bg-card-hover: rgba(255,255,255,0.045);

  /* Text: 4-tier hierarchy */
  --text-primary: #FAFAFA;
  --text-secondary: rgba(250,250,250,0.82);
  --text-tertiary: rgba(250,250,250,0.6);
  --text-quaternary: rgba(250,250,250,0.4);

  /* Gold: surgical accent */
  --gold: #C9A96E;
  --gold-muted: rgba(201,169,110,0.6);
  --gold-subtle: rgba(201,169,110,0.15);
  --gold-faint: rgba(201,169,110,0.08);

  /* Borders */
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --border-gold: rgba(201,169,110,0.2);
  --border-gold-hover: rgba(201,169,110,0.4);

  /* Status */
  --green: #4ADE80;
  --red: #F87171;

  /* Typography */
  --font-heading: 'Instrument Serif', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --h1: clamp(52px, 7vw, 96px);
  --h2: clamp(32px, 4.5vw, 60px);
  --h3: clamp(24px, 3vw, 40px);
  --h4: clamp(20px, 2vw, 28px);
  --body: 16px;
  --body-lg: 18px;
  --small: 14px;
  --micro: 12px;
  --label: 11px;
  --heading-weight: 400;
  --lh-heading: 1.06;
  --lh-body: 1.72;

  /* Spacing */
  --section-pad: clamp(80px, 10vw, 140px);
  --container: 1200px;
  --container-content: 860px;
  --container-narrow: 640px;
  --gutter: clamp(24px, 5vw, 80px);
  --gap-cards: 24px;

  /* Components */
  --nav-height: 80px;
  --ease: cubic-bezier(.25,.46,.45,.94);
  --ease-out: cubic-bezier(0,.55,.45,1);
}

/* Reset */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; background:var(--bg) }
body { background:var(--bg); color:var(--text-secondary); font-family:var(--font-body); font-size:var(--body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden }
a { color:inherit; text-decoration:none }
img { max-width:100%; height:auto; display:block }
::selection { background:var(--gold); color:var(--bg) }

/* Grain overlay */
body::after { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0.018; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' 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:100; height:var(--nav-height); padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; background:transparent; transition:background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease; border-bottom:1px solid transparent }
.nav--scrolled { background:rgba(7,7,11,0.88); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom-color:var(--gold-faint) }
.nav__logo { font-family:var(--font-heading); font-size:22px; font-weight:400; color:var(--text-primary); letter-spacing:-0.01em }
.nav__center { display:flex; align-items:center; gap:36px }
.nav__link { font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-tertiary); transition:color 0.3s ease; cursor:pointer }
.nav__link:hover, .nav__link--active { color:var(--text-primary) }
.nav__link--gold { color:var(--gold) }
.nav__link--gold:hover { color:#D4BA82 }
.nav__cta { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:12px 28px; border:1px solid var(--border-gold); color:var(--gold); background:transparent; transition:all 0.3s ease }
.nav__cta:hover { background:var(--gold-faint); border-color:var(--border-gold-hover) }
.nav__hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px }
.nav__hamburger span { display:block; width:22px; height:1.5px; background:var(--text-primary); transition:all 0.3s ease }

/* Mega menu */
.mega-menu { position:fixed; top:var(--nav-height); left:0; right:0; background:rgba(7,7,11,0.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--gold-faint); padding:48px var(--gutter); opacity:0; visibility:hidden; transform:translateY(-8px); transition:all 0.3s ease; z-index:99 }
.mega-menu--active { opacity:1; visibility:visible; transform:translateY(0) }
.mega-menu__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:48px; max-width:var(--container); margin:0 auto }
.mega-menu__col-label { font-size:var(--label); font-weight:600; text-transform:uppercase; letter-spacing:0.15em; color:var(--gold); margin-bottom:20px }
.mega-menu__link { display:block; padding:10px 0; font-size:15px; color:var(--text-tertiary); transition:color 0.2s ease }
.mega-menu__link:hover { color:var(--text-primary) }
.mega-menu__link-desc { display:block; font-size:var(--micro); color:var(--text-quaternary); margin-top:2px }

/* Layout */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--gutter) }
.container--content { max-width:var(--container-content); margin:0 auto; padding:0 var(--gutter) }
.container--narrow { max-width:var(--container-narrow); margin:0 auto; padding:0 var(--gutter) }

/* Shared elements */
.eyebrow { font-family:var(--font-body); font-size:var(--label); font-weight:600; text-transform:uppercase; letter-spacing:0.15em; color:var(--gold); margin-bottom:16px }
.section-heading { font-family:var(--font-heading); font-size:var(--h2); font-weight:var(--heading-weight); color:var(--text-primary); line-height:var(--lh-heading); letter-spacing:-0.02em }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:var(--small); font-weight:600; letter-spacing:0.04em; transition:all 0.3s ease; white-space:nowrap }
.btn--gold { padding:16px 36px; background:var(--gold); border:1px solid var(--gold); color:var(--bg) }
.btn--gold:hover { background:#D4BA82; border-color:#D4BA82; color:var(--bg); box-shadow:0 8px 32px rgba(201,169,110,0.2) }
.btn--outline { padding:16px 36px; background:transparent; border:1px solid var(--border); color:var(--text-secondary) }
.btn--outline:hover { border-color:var(--border-hover); color:var(--text-primary) }
.btn--gold-outline { padding:16px 36px; background:transparent; border:1px solid var(--border-gold); color:var(--gold) }
.btn--gold-outline:hover { background:var(--gold-faint); border-color:var(--border-gold-hover) }

/* GSAP animation state */
.gs { opacity:0; transform:translateY(40px) }
@media (prefers-reduced-motion:reduce) { .gs { opacity:1; transform:none } }

/* Footer */
.footer { padding:64px var(--gutter) 32px; border-top:1px solid var(--border) }
.footer__swoosh { text-align:center; margin-bottom:48px }
.footer__tagline { font-family:var(--font-heading); font-size:var(--small); color:var(--text-quaternary); font-style:italic }
.footer__grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:48px; max-width:var(--container); margin:0 auto; padding-bottom:48px; border-bottom:1px solid var(--border) }
.footer__brand { font-family:var(--font-heading); font-size:22px; color:var(--text-primary); margin-bottom:8px }
.footer__desc { font-size:var(--small); color:var(--text-tertiary) }
.footer__col-label { font-size:var(--label); font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold); margin-bottom:20px }
.footer__link { display:block; padding:6px 0; font-size:var(--small); color:var(--text-tertiary); transition:color 0.2s ease }
.footer__link:hover { color:var(--text-primary) }
.footer__bottom { display:flex; justify-content:space-between; align-items:center; max-width:var(--container); margin:24px auto 0; font-size:var(--micro); color:var(--text-quaternary) }
.footer__legal-links { display:flex; gap:24px }
.footer__legal-links a { color:var(--text-quaternary); transition:color 0.2s ease }
.footer__legal-links a:hover { color:var(--text-tertiary) }

/* Responsive */
@media (max-width:1024px) {
  .mega-menu__grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px) {
  :root { --nav-height:64px; --section-pad:clamp(48px,6vw,80px) }
  .nav__center { display:none }
  .nav__cta--desktop { display:none }
  .nav__hamburger { display:flex }
  .mega-menu { padding:32px var(--gutter) }
  .mega-menu__grid { grid-template-columns:1fr; gap:32px }
  .footer__grid { grid-template-columns:1fr 1fr; gap:32px }
  .footer__brand-col { grid-column:1/-1 }
  .footer__bottom { flex-direction:column; gap:12px; text-align:center }
}

/* Print */
@media print {
  body::after, .nav, .mega-menu { display:none }
  body { background:#fff; color:#000 }
}