/* ============================================================
   AMSS WORKS — Global Shell (Header + Footer)
   Palette: black (#000) / white (#fff) / gold (#d4af37)
   Scope: ONLY global tokens + header + footer + tiny utilities
   ============================================================ */

/* ---------- Design tokens */
/* ===== Global: hide all scrollbars, keep scrolling ===== */
/* Firefox */
html, body, * {
  scrollbar-width: none;        /* hides scrollbar */
}

/* IE 10+/Old Edge */
html, body, * {
  -ms-overflow-style: none;     /* hides scrollbar */
}

/* Chromium/WebKit (Chrome, Safari, new Edge, Opera) */
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;     /* hides scrollbar track + thumb */
}

:root{
    /* colors */
    --bg:#000;
    --ink:#fff;
    --muted:#cfcfcf;
    --muted-2:#a8a8a8;
    --line:#1f1f1f;
    --gold:#d4af37;
    --gold-strong:#b9922b;
  
    /* layout */
    --maxw:1160px;
    --pad:24px;
    --r:14px;
  
    /* effects */
    --shadow-sm:0 2px 10px rgba(0,0,0,.35);
    --shadow-md:0 8px 28px rgba(0,0,0,.35);
  
    /* motion */
    --t-fast:.12s;
    --t-med:.18s;
  }
  
  /* ---------- Base & accessibility (safe, minimal) */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
    font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
  a{color:var(--gold);text-decoration:none}
  a:hover{filter:brightness(1.07)}
  img{max-width:100%;display:block}
  .container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
  .visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}
  :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  }
  
  /* ---------- Buttons (used by header + footer only) */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:44px;padding:10px 14px;border-radius:12px;
    background:#0c0c0c;border:1px solid var(--line);color:var(--ink);
    transition:transform var(--t-fast) ease, background var(--t-med) ease, border-color var(--t-med) ease;
  }
  .btn:hover{background:#121212;transform:translateY(-1px)}
  .btn.primary{
    background:linear-gradient(180deg,var(--gold),#caa431);
    color:#111;border:none;font-weight:700;box-shadow:0 8px 18px rgba(212,175,55,.15);
  }
  .btn.ghost{background:transparent;border-color:var(--gold);color:var(--gold)}
  .btn.ghost:hover{background:rgba(212,175,55,.1)}
  
  /* ---------- Header */
  .header{
    position:sticky;top:0;z-index:1000;
    background:rgba(0,0,0,.86);backdrop-filter:saturate(120%) blur(8px);
    border-bottom:1px solid var(--line);
  }
  .header__bar{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:14px 5px;
  }
  .brand{
    display:flex;align-items:center;gap:12px;min-width:0;
  }
  .brand__logo{
    width:36px;height:36px;border-radius:8px;object-fit:cover;
    box-shadow:0 0 0 2px #0b0b0b, 0 6px 18px rgba(0,0,0,.5);
    background:
      radial-gradient(60% 60% at 70% 30%, rgba(212,175,55,.30), transparent 60%),
      radial-gradient(60% 60% at 30% 70%, rgba(212,175,55,.18), transparent 60%),
      linear-gradient(135deg,#1a1a1a,#0d0d0d);
  }
  .brand__name{
    font-weight:800;letter-spacing:.2px;white-space:nowrap;color:var(--ink)
  }
  
  /* Primary nav — desktop */
  .nav{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .nav__link{
    color:var(--ink);padding:10px 12px;border-radius:10px;border:1px solid transparent;
    line-height:1;display:inline-flex;align-items:center;min-height:40px;
  }
  .nav__link:hover{background:#0c0c0c;border-color:var(--line)}
  .nav__link[aria-current="page"]{background:#101010;border-color:#2a2a2a}
  .nav__cta{margin-left:6px}
  
  
  /* ---------- Footer */
  .footer{
    border-top:1px solid var(--line);background:#000;color:var(--ink);
  }
  .footer__top{
    padding:28px 10px;
  }
  .footer__grid{
    display:grid;gap:18px;align-items:start;
    grid-template-columns:2fr 1fr 1fr; /* brand | links1 | links2 */
  }
  .footer__brand{
    display:flex;gap:12px;align-items:center;
  }
  .footer__logo{width:40px;height:40px;border-radius:10px;object-fit:cover;
    box-shadow:0 0 0 2px #0b0b0b,0 6px 18px rgba(0,0,0,.5)}
  .footer__copy{color:var(--muted);margin-top:6px;max-width:52ch}
  .footer__title{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
  .footer__link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);padding:8px 0}
  .footer__link:hover{color:var(--gold)}
  
  .footer__bottom{
    border-top:1px solid var(--line);
    padding:16px 5px;display:flex;align-items:center;justify-content:space-between;gap:12px;
    color:var(--muted);
  }
  .footer__small a{color:var(--muted-2)}
  .footer__small a:hover{color:var(--ink)}
  
  /* ---------- Responsive */
  @media (max-width: 860px){
    .footer__grid{grid-template-columns:1fr}
    .footer__bottom{flex-direction:column;align-items:flex-start}
  }
  
  /* ===== Global side aurora + bottom bridge (no HTML changes) ===== */
:root { --amss-gold: #ffd700; }

/* Keep page background dark */
html, body { background:#000; }

/* Soft gold aurora on the LEFT & RIGHT gutters (stays behind content) */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none; z-index:0;
  /* two big off-canvas radial glows that only show in gutters */
  background:
    radial-gradient(60% 80% at -10% 25%, rgba(255,215,0,.10), transparent 60%),
    radial-gradient(60% 80% at 110% 35%, rgba(255,215,0,.08), transparent 60%);
  mix-blend-mode: screen;          /* subtle on dark themes */
  filter: blur(18px);
  opacity:.9;
}

/* Golden horizon behind the LAST section -> footer area */
body::after{
  content:"";
  position: fixed; left:0; right:0; bottom:0; height:40vh;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(65% 110% at 50% 0%,
      rgba(255,215,0,.18), rgba(255,215,0,.12) 25%, transparent 70%);
  filter: blur(28px);
  opacity:.9;
}

/* Optional: tone down on very small screens */
@media (max-width: 520px){
  body::before{ filter: blur(14px); opacity:.75; }
  body::after { height:32vh; filter: blur(22px); }
}

/* Respect reduced motion (keeps effects static and light) */
@media (prefers-reduced-motion: reduce){
  body::before, body::after { filter:none; }
}

/* Opt-out helper (add class="no-aurora" on <body> if you ever need to disable) */
body.no-aurora::before,
body.no-aurora::after { display:none !important; }

/* ================================
   AMSS WORKS — global side beams + bottom bridge
   No HTML/JS changes required
   ================================ */

   :root{
    --amss-gold: #ffd700;
    --amss-side-width: 160px;      /* width of side effect */
    --amss-side-offset: -54px;     /* how much it sticks off-screen */
    --amss-side-opacity: .85;      /* overall intensity */
  }
  
  /* Keep it behind all content */
  html, body { background:#000; }
  header.header { z-index: 10000 !important; }        /* above page */
  main, footer { z-index: 1; position: relative; } 
  /* LEFT & RIGHT animated beams (full height) */
  html::before,
  html::after{
    content:"";
    position: fixed;
    top: -12vh; bottom: -12vh;
    width: var(--amss-side-width);
    pointer-events: none;
    z-index: 0;
    opacity: var(--amss-side-opacity);
    mix-blend-mode: screen;           /* gorgeous on dark bg */
    filter: blur(24px);
    /* stacked gradients for depth + motion */
    background:
      radial-gradient(80% 40% at 50% 25%,
        rgba(255,215,0,.38),
        rgba(255,215,0,.00) 60%),
      conic-gradient(from 180deg at 50% 50%,
        rgba(255,215,0,0) 0 16%,
        rgba(255,215,0,.18) 28%,
        rgba(255,215,0,.38) 46%,
        rgba(255,215,0,.18) 64%,
        rgba(255,215,0,0) 82%);
    background-repeat: no-repeat;
    background-size: 220% 120%, 100% 100%;
    background-position: 0% 0%, 50% 50%;
    animation: amssSideFlow 18s ease-in-out infinite alternate;
  }
  html::before{ left: var(--amss-side-offset); transform: rotate(0.6deg); }
  html::after { right: var(--amss-side-offset); transform: rotate(-0.6deg); animation-duration: 22s; }
  
  @keyframes amssSideFlow{
    0%   { filter: blur(22px); background-position:   0%  0%, 50% 45%; }
    100% { filter: blur(30px); background-position: 100% 10%, 50% 65%; }
  }
  
  /* Bottom “bridge” glow that ties final CTAs to the footer */
  body::after{
    content:"";
    position: fixed;
    left: -12vw; right: -12vw; bottom: -8vh;
    height: 62vh;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(70% 120% at 50% 0%,
        rgba(255,215,0,.22),
        rgba(255,215,0,.10) 30%,
        rgba(255,215,0,0) 70%),
      linear-gradient(90deg, transparent 0%,
        rgba(255,215,0,.25) 40%,
        var(--amss-gold) 50%,
        rgba(255,215,0,.25) 60%,
        transparent 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 1px;     /* glow + crisp horizon line */
    background-position: center bottom, center calc(1px);
    filter: blur(28px);
    opacity: .9;
  }
  
  /* Tuning for tiny screens */
  @media (max-width: 520px){
    html::before, html::after { width: 120px; filter: blur(20px); opacity:.75; }
    body::after { height: 34vh; filter: blur(22px); }
  }
  
  /* Respect user preference */
  @media (prefers-reduced-motion: reduce){
    html::before, html::after { animation: none; }
  }

/* ===== Mobile Nav (<=1200px) — topmost, simple, reliable ===== */
:root{
  --pad: 24px;
  --gold: #ffd700;
  /* z-index ladder: toggle > drawer > scrim > site */
  --z-toggle: 2147483647;
  --z-drawer: 2147483646;
  --z-scrim:  2147483645;
}

/* Hide mobile UI on desktop */
@media (min-width:1200px){
  .nav__toggle{ display:none !important; }
  .drawer{ display:none !important; }
}

/* Toggle button (hidden by default; shown on mobile) */
.nav__toggle{
  display:none; appearance:none; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:12px;
  background:#0f0f0f; color:#fff;
  position:relative; z-index:var(--z-toggle);
}
.nav__toggle:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.nav__toggle .bar{
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  margin:5px auto;
  transition:transform .18s ease, opacity .18s ease;
}

/* “Break → X” on open, “Refix → ☰” on close */
.nav__toggle.is-active .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-active .bar:nth-child(2){ opacity:0; }
.nav__toggle.is-active .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Mobile layout */
@media (max-width:1199.98px){
  /* Hide desktop nav; show toggle */
  .nav{ display:none; }
  .nav__toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Drawer: full-screen, above EVERYTHING */
  .drawer{
    display:none;              /* no transitions; just appears */
    position:fixed; inset:0;   /* full screen */
    min-height:100dvh;
    background:#0b0b0b; color:#fff;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:var(--z-drawer);
  }
  .drawer.is-open{ display:block; }

  /* Optional scrim behind the drawer (kept below it) */
  body.menu-open::before{
    content:""; position:fixed; inset:0;
    background:rgba(0,0,0,.6);
    z-index:var(--z-scrim);
  }

  /* Keep the toggle accessible while menu is open (fixed at top-right) */
  body.menu-open .nav__toggle{
    position:fixed;
    right:var(--pad);
    top:calc(env(safe-area-inset-top) + 10px);
    z-index:var(--z-toggle);
  }

  .drawer__inner{
    padding: calc(env(safe-area-inset-top) + 72px) var(--pad)
             calc(env(safe-area-inset-bottom) + 36px);
  }
  .drawer__link{
    display:block; padding:16px 0;
    color:#fff; text-decoration:none;
    border-bottom:1px solid #1a1a1a;
  }
  .drawer__link:hover{ color:var(--gold); }

  .drawer__actions{ display:grid; gap:.7rem; margin-top:18px; }
  .drawer__actions .btn{ display:inline-block; text-align:center; }

  /* Lock page scroll while open */
  body.menu-open{ overflow:hidden; }
}

/* Mobile layout */
@media (max-width:1199.98px){
  /* Hide desktop nav; show toggle */
  .nav{ display:none; }

  /* Fix the toggle in one place on mobile, always */
  .nav__toggle{
    display:inline-flex; align-items:center; justify-content:center;
    position: fixed;                   /* <-- key change (was static) */
    right: var(--pad);
    top: calc(env(safe-area-inset-top) + 10px);
    z-index: var(--z-toggle);
    width:44px; height:44px; border-radius:12px;
    background:#0f0f0f; color:#fff; cursor:pointer; appearance:none; border:0;
    transform: translateZ(0);          /* reduce subpixel snapping on mobile */
  }

  /* No need to change position on open anymore (remove the old rule or let this override it) */
  body.menu-open .nav__toggle{
    position: fixed;
    right: var(--pad);
    top: calc(env(safe-area-inset-top) + 10px);
  }

  /* Drawer stays full-screen & fixed; no layout shift */
  .drawer{
    display:none;
    position:fixed; inset:0; min-height:100dvh;
    background:#0b0b0b; color:#fff;
    overflow:auto; -webkit-overflow-scrolling:touch;
    z-index:var(--z-drawer);
  }
  .drawer.is-open{ display:block; }

  /* Optional scrim behind the drawer */
  body.menu-open::before{
    content:""; position:fixed; inset:0;
    background:rgba(0,0,0,.6);
    z-index:var(--z-scrim);
  }

  .drawer__inner{
    padding: calc(env(safe-area-inset-top) + 72px) var(--pad)
             calc(env(safe-area-inset-bottom) + 36px);
  }

  /* Lock page scroll while open (no content width shift on mobile) */
  body.menu-open{ overflow:hidden; }
}

/* Desktop submenu */
.nav__item.has-submenu{ position:relative; display:inline-block; }
.nav__link--button{ background:none; border:0; font:inherit; color:inherit;
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
}
.nav__item .chev{ transition:transform .18s ease; }
.nav__item.open .chev{ transform:rotate(180deg); }

.submenu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:240px;
  background:var(--amss-bg); color:var(--amss-ink);
  border:1px solid var(--amss-line); border-radius:14px; padding:6px; margin:0;
  list-style:none; display:none; z-index:1000; box-shadow:var(--shadow-md);
}
.nav__item.open > .submenu{ display:block; }

.submenu__link{ display:block; padding:.6rem .85rem; border-radius:10px;
  color:var(--amss-ink); text-decoration:none; background-color: #1a1a1a ; margin-top: 1px;
}
.submenu__link:hover{ background:#111; border-color:var(--line)}

/* Mobile drawer submenu */
.drawer__group.has-submenu{ margin-top:.25rem; }
.drawer__toggle{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  background:none; border:0; color:inherit; font:inherit; padding:16px 0;
  border-bottom:1px solid #1a1a1a;
}
.drawer__group .chev{ transition:transform .18s ease; }
.drawer__group.open .chev{ transform:rotate(180deg); }

.drawer__submenu{
  display:none; margin:.35rem 0 0;
  border:1px solid var(--amss-line); border-radius:12px; padding:.35rem; background:#0b0b0b;
}
.drawer__group.open .drawer__submenu{ display:block; }

.drawer__sublink{ display:block; padding:.8rem .9rem; border-radius:10px;
  color:var(--amss-ink); text-decoration:none;
}
.drawer__sublink:hover{ background:#111; }

/* Safety: hide desktop dropdown when drawer is used */
@media (max-width:1199.98px){
  .nav__item.has-submenu .submenu{ display:none !important; }
}

/* Gold highlight ring for Companies (desktop + mobile) */
.nav__item.has-submenu.open > .nav__link--button { box-shadow: 0 0 0 2px var(--gold); border-radius:12px; }
.nav__item.has-submenu .nav__link--button:hover { box-shadow: 0 0 0 1px var(--gold); border-radius:12px; }
.nav__item.has-submenu .nav__link--button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.drawer__group.open > .drawer__toggle { box-shadow: 0 0 0 2px var(--gold); border-radius:12px; }


/* Give ALL top-level nav items the same gold-ring hover (Home, Guides, Report, Companies) */
.nav > .nav__link:hover,
.nav__item.has-submenu .nav__link--button:hover{
  box-shadow:0 0 0 1px var(--gold); border-radius:12px;
  padding-left: 10px;
}
@media (max-width:1199.98px), (hover:none) {
  .drawer__group.open > .drawer__toggle { box-shadow: none !important; }
  .drawer__toggle:hover { box-shadow: none !important; }
  .drawer__sublink:hover { box-shadow: none !important; }
}