:root{
  --bg:#0a0c0b;
  --bg-2:#111513;
  --ink:#e9e6df;
  --muted:#8b8f88;
  --accent:#c8a94a;
  --accent-dim:rgba(200,169,74,.35);
  --line:rgba(233,230,223,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}

html { scroll-behavior: smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* LOADER */
#loader{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ text-align:center; width:min(420px,80vw); }
.loader-logo{
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(48px,10vw,96px); letter-spacing:.15em;
  color:var(--ink);
}
.loader-bar{
  height:1px; background:var(--line); margin:24px 0 12px; position:relative; overflow:hidden;
}
.loader-bar span{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--accent); transition:width .3s var(--ease);
}
.loader-text{
  font-size:11px; letter-spacing:.35em; color:var(--muted);
}

/* NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px clamp(20px,4vw,56px);
  background:linear-gradient(to bottom, rgba(10,12,11,.85), rgba(10,12,11,0));
  backdrop-filter:blur(8px);
}
.nav-logo{ display:flex; flex-direction:column; line-height:1; }
.nav-mark{
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:26px; letter-spacing:.14em; color:var(--ink);
}
.nav-sub{
  font-size:9px; letter-spacing:.4em; color:var(--muted); margin-top:4px;
}
.nav-links{ display:flex; gap:36px; }
.nav-links a{
  font-size:12px; letter-spacing:.24em; font-weight:500;
  color:var(--muted);
  position:relative;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px;
  width:0; height:1px; background:var(--accent);
  transition:width .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
@media (max-width:820px){
  .nav-links{ gap:18px; }
  .nav-sub{ display:none; }
}

/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
}
#hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1;
}
.hero-grid{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
  opacity:.5;
}
.hero-content{
  position:relative; z-index:3;
  padding:0 clamp(20px,4vw,56px);
  max-width:1200px;
}
.hero-eyebrow{
  font-size:11px; letter-spacing:.4em; color:var(--accent);
  margin-bottom:24px;
}
.hero-title{
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(48px,10vw,140px);
  line-height:.92; letter-spacing:.02em;
  text-transform:uppercase;
}
.hero-title span{ display:block; }
.hero-title .accent{ color:var(--accent); }
.hero-tag{
  font-size:clamp(14px,1.4vw,18px);
  color:var(--muted); margin-top:28px; font-style:italic;
}
.hero-cta{ margin-top:44px; display:flex; gap:18px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px;
  font-size:12px; letter-spacing:.28em; font-weight:600;
  border:1px solid var(--accent);
  transition:all .35s var(--ease);
  position:relative; overflow:hidden;
}
.btn-primary{ background:var(--accent); color:#0a0c0b; }
.btn-primary:hover{ background:transparent; color:var(--accent); }
.btn-ghost{ color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

.hero-scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.5em; color:var(--muted);
  writing-mode:vertical-rl;
  animation:bob 2.4s ease-in-out infinite;
  z-index:3;
}
@keyframes bob{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,10px); }
}

/* PILLARS */
.pillars{
  padding:160px clamp(20px,4vw,56px);
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.pillars-inner{
  max-width:1400px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;
  background:var(--line);
}
.pillar{
  background:var(--bg-2);
  padding:56px 36px;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.pillar:hover{ background:#161b18; }
.pillar-num{
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:14px; letter-spacing:.3em; color:var(--accent);
}
.pillar h3{
  font-family:'Oswald',sans-serif; font-weight:600;
  font-size:24px; letter-spacing:.06em; margin:20px 0 14px;
}
.pillar p{ font-size:14px; color:var(--muted); }

/* CTA STRIP */
.cta-strip{
  padding:160px clamp(20px,4vw,56px);
  text-align:center;
}
.cta-strip h2{
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(36px,6vw,80px);
  letter-spacing:.04em; margin-bottom:40px;
}

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  padding:80px clamp(20px,4vw,56px) 40px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:60px;
  max-width:1400px; margin:0 auto;
}
.footer-col h4{
  font-size:11px; letter-spacing:.35em; color:var(--muted);
  margin-bottom:20px; font-weight:500;
}
.footer-col a{ display:block; font-size:14px; padding:6px 0; color:var(--ink); }
.footer-col a:hover{ color:var(--accent); }
.footer-col p{ font-size:13px; color:var(--muted); margin-top:16px; }
.footer-bottom{
  grid-column:1/-1;
  display:flex; justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:24px; margin-top:40px;
  font-size:11px; letter-spacing:.15em; color:var(--muted);
}
@media (max-width:780px){
  .footer{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; gap:10px; }
}

/* AUDIO TOGGLE */
#audio-toggle{
  position:fixed; bottom:24px; right:24px; z-index:200;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:rgba(10,12,11,.7);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
  transition:border-color .3s var(--ease);
}
#audio-toggle:hover{ border-color:var(--accent); }
#audio-toggle .bars{
  display:flex; gap:3px; align-items:flex-end; height:16px;
}
#audio-toggle .bars i{
  display:block; width:2px; height:6px; background:var(--muted);
  animation:eq 1s ease-in-out infinite;
}
#audio-toggle .bars i:nth-child(2){ animation-delay:.15s; }
#audio-toggle .bars i:nth-child(3){ animation-delay:.3s; }
#audio-toggle.on .bars i{ background:var(--accent); }
#audio-toggle .label{ font-size:10px; letter-spacing:.3em; color:var(--muted); }
#audio-toggle.on .label{ color:var(--accent); }
@keyframes eq{
  0%,100%{ height:4px; }
  50%{ height:16px; }
}
#audio-toggle.paused .bars i{ animation-play-state:paused; height:4px; }

/* page enter animation */
main, .hero, .pillars, .cta-strip{ opacity:0; }
body.ready main, body.ready .hero, body.ready .pillars, body.ready .cta-strip{
  opacity:1; transition:opacity .6s var(--ease);
}

[data-anim="fade-up"]{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-anim="fade-up"].in{
  opacity:1; transform:none;
}

/* preloader crest draw */
.loader-crest svg{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 0 24px rgba(200,169,74,.12));
}
.pl{
  stroke-dasharray:var(--len,2000);
  stroke-dashoffset:var(--len,2000);
  transition:stroke-dashoffset 1.4s var(--ease),
             fill-opacity .6s var(--ease),
             opacity .5s var(--ease);
}
.pl-ring-1, .pl-ring-2{ --len:1600; }
.pl-a        { --len:1400; }
.pl-a-inner  { --len:340; }
.pl-arrow    { --len:800;  }
.pl-e        { --len:600;  }
.pl-star-l, .pl-star-r{ opacity:0; fill-opacity:0; transition:opacity .5s var(--ease); }
#loader.draw .pl-ring-1{ stroke-dashoffset:0; }
#loader.draw .pl-ring-2{ stroke-dashoffset:0; transition-delay:.2s; }
#loader.draw .pl-a     { stroke-dashoffset:0; transition-delay:.5s; }
#loader.draw .pl-a-inner{ stroke-dashoffset:0; transition-delay:.9s; }
#loader.draw .pl-e     { stroke-dashoffset:0; transition-delay:1.1s; }
#loader.draw .pl-arrow { stroke-dashoffset:0; transition-delay:1.35s; fill:#c8a94a; fill-opacity:.15; }
#loader.draw .pl-star-l,
#loader.draw .pl-star-r{ opacity:1; transition-delay:1.9s; }
#loader.draw .loader-text{ opacity:1; }
.loader-text{ opacity:0; transition:opacity .5s var(--ease) .3s; }