/* ══════════════════════════════════════════════════════════════════════════
   UNIVERSAL SHELL STYLES: PrimeSpaceWorks

   Loaded ONLY by the hand-authored homepage (which ships styles.css instead
   of page.css). It renders the shared header/footer markup from shell.mjs
   with the same geometry as the generated pages, so the site has one
   consistent header and footer everywhere.
   ══════════════════════════════════════════════════════════════════════════ */

.topbar{
  position:sticky;top:0;z-index:40;height:86px;
  display:flex;align-items:center;
  background:rgba(1,20,37,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar>.wrap{
  width:min(1180px,calc(100% - 48px));margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.topbar .brand img,
footer .brand img{height:38px;width:auto}

.main-nav{
  display:flex;gap:28px;color:var(--steel-dim);
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
}
.main-nav a{padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.main-nav a:hover{color:var(--gold);border-color:rgba(200,159,93,.5)}
.main-nav a.active{color:var(--gold-bright);border-color:var(--gold-bright)}
.mobile-menu a.active{color:var(--gold-bright);border-left:2px solid var(--gold-bright);padding-left:12px}

.nav-cta{
  font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--gold);border:1px solid rgba(200,159,93,.5);
  padding:10px 18px;transition:.25s;white-space:nowrap;
}
.nav-cta:hover{background:var(--gold);color:var(--navy)}
.nav-cta span{margin-left:8px}

.menu{
  display:none;background:none;border:0;color:var(--steel);
  font-size:22px;line-height:1;cursor:pointer;padding:6px;
}

footer{border-top:1px solid var(--line);padding:45px 0 25px}
footer>.wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.footer-row{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:30px;color:var(--steel-dim);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.footer-row>div{max-width:520px}
.footer-links{display:flex;flex-wrap:wrap;gap:18px}
.footer-links a{padding-bottom:4px;border-bottom:1px solid transparent;transition:.2s}
.footer-links a:hover{color:var(--gold);border-color:rgba(200,159,93,.5)}

.social-row{display:flex;gap:12px;align-items:center}
.social-row a{
  display:grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line);color:var(--steel-dim);transition:.25s;
}
.social-row a:hover{color:var(--gold);border-color:rgba(200,159,93,.5)}

@media(max-width:900px){
  .main-nav,.nav-cta{display:none}
  .menu{display:block}
  .footer-row{display:grid;gap:22px}
}