/* ============================================================
   BRADY HUTCHINS — MEGA NAV PROTOTYPE (local design only)
   Superpower-style dropdown with image tiles, glass + gold.
   ============================================================ */
:root{
  --ink:#0b0a08; --ink-2:#14110c;
  --bone:#ede6d8; --bone-dim:rgba(237,230,216,.72); --bone-faint:rgba(237,230,216,.5);
  --gold:#c9a24e; --gold-bright:#e7c87c; --gold-deep:#8a6b26;
  --paper:#f7f5f2;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Archivo",system-ui,sans-serif;background:var(--ink);color:var(--bone)}
a{text-decoration:none;color:inherit}
img{display:block}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}

/* ---------- top bar ---------- */
/* bar floats with side margins so the BRADY left edge (margin 113px + inner padding 24px)
   lines up with the hero copy's 137px left edge */
.bhnav{
  position:fixed;inset:28px 113px auto;z-index:100;
  border-radius:18px;
  background:rgba(11,10,8,.62);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,253,248,.12);
  transition:background .35s var(--ease),border-color .35s var(--ease),border-radius .25s var(--ease);
}
.bhnav.open{border-radius:18px 18px 0 0}
.bhnav-inner{
  width:100%;padding:0 24px;
  height:60px;display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);
}
.bhnav .logo{font-weight:870;font-stretch:118%;letter-spacing:.12em;font-size:1.02rem;color:#fff;white-space:nowrap}
.bhnav .logo span{color:#fff}
.bhnav-links{display:flex;align-items:center;gap:clamp(4px,1vw,10px);margin-left:auto}
.bhnav-links>li{list-style:none}
.bhnav-link{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:100px;
  font-size:.86rem;font-weight:650;color:var(--bone-dim);
  transition:color .25s,background .25s;
}
.bhnav-link:hover,.bhnav-link[aria-expanded="true"]{color:var(--bone);background:rgba(255,253,248,.07)}
.bhnav-link[aria-current="page"]{color:#fff}
.bhnav-link[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:1px;height:2px;border-radius:2px;background:var(--gold-bright)}
.bhnav-link .chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.bhnav-link[aria-expanded="true"] .chev{transform:rotate(225deg) translateY(-1px)}
.bhnav-cta{
  margin-left:6px;padding:11px 20px;border-radius:100px;
  background:linear-gradient(120deg,#e7c87c,#c9a24e 75%,#b8923f 115%);
  color:#14110c;font-weight:750;font-size:.88rem;letter-spacing:.01em;
  white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.bhnav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(201,162,78,.55)}

/* ---------- mega panel ---------- */
.mega{
  position:absolute;left:-1px;right:-1px;top:100%;
  border-radius:0 0 18px 18px;overflow:hidden;
  background:rgba(11,10,8,.86);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,253,248,.12);border-top:0;
  max-height:0;opacity:0;visibility:hidden;
  transition:max-height .5s var(--ease),opacity .35s ease,visibility 0s linear .5s;
}
.bhnav.open .mega{max-height:560px;opacity:1;visibility:visible;transition:max-height .55s var(--ease),opacity .3s ease}
.mega-inner{width:100%;padding:clamp(22px,3vw,36px) 24px clamp(26px,3vw,40px)}
.mega-head{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin-bottom:20px}
.mega-title{font-size:.72rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-bright)}
.mega-all{font-size:.8rem;font-weight:650;color:var(--bone-faint);transition:color .25s}
.mega-all:hover{color:var(--gold-bright)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.tile{display:flex;flex-direction:column;gap:13px;opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s var(--ease)}
.bhnav.open .tile{opacity:1;transform:none}
.bhnav.open .tile:nth-child(1){transition-delay:.06s}
.bhnav.open .tile:nth-child(2){transition-delay:.12s}
.bhnav.open .tile:nth-child(3){transition-delay:.18s}
.bhnav.open .tile:nth-child(4){transition-delay:.24s}
.tile-img{
  position:relative;aspect-ratio:16/10.5;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,253,248,.1);background:#181511;
}
.tile-img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%);transition:transform .7s var(--ease)}
.tile:hover .tile-img img{transform:scale(1.06)}
.tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,10,8,.32),transparent 45%);opacity:.8}
.tile-name{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.04rem;letter-spacing:-.005em;color:var(--bone)}
.tile-name .go{font-size:1rem;color:var(--gold-bright);transform:translateX(0);transition:transform .3s var(--ease)}
.tile:hover .tile-name .go{transform:translateX(5px)}
.tile-desc{font-size:.86rem;line-height:1.5;color:var(--bone-faint);margin-top:-6px}

/* panel switching */
.mega-panel{display:none}
.mega-panel.active{display:block}

/* apply CTA card (no photo) */
.cta-card{
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  height:100%;min-height:180px;padding:24px;border-radius:14px;
  border:1px solid rgba(201,162,78,.35);
  background:linear-gradient(165deg,rgba(201,162,78,.15),rgba(201,162,78,.04) 70%);
}
.cta-card .cta-note{font-size:.9rem;line-height:1.55;color:var(--bone-dim)}
.cta-card .cta-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;align-self:flex-start;
  padding:13px 22px;border-radius:100px;white-space:nowrap;
  background:linear-gradient(120deg,#e7c87c,#c9a24e 75%,#b8923f 115%);color:#14110c;
  font-weight:750;font-size:.88rem;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.cta-card:hover .cta-btn{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(201,162,78,.55)}

/* mobile apply button row */
.mcta{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin:8px 6px 16px;padding:15px 22px;border-radius:100px;
  background:linear-gradient(120deg,#e7c87c,#c9a24e 75%,#b8923f 115%);color:#14110c;
  font-weight:750;font-size:1rem;
}

@media (max-width:1280px){
  .bhnav{inset:20px 16px auto}
}

/* ---------- mobile ---------- */
.burger{display:none;width:44px;height:44px;border-radius:12px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--bone);border-radius:2px;transition:.35s var(--ease)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
.burger.x span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){top:22px;transform:rotate(-45deg)}

.msheet{
  position:fixed;inset:0;z-index:99;background:rgba(11,10,8,.97);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  padding:110px 22px 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;
}
.msheet.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.macc{border-bottom:1px solid rgba(255,253,248,.1)}
.macc>button{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:18px 4px;font-weight:800;font-size:1.18rem;color:var(--bone);text-align:left;
}
.macc>button .chev{width:10px;height:10px;border-right:2px solid var(--gold-bright);border-bottom:2px solid var(--gold-bright);transform:rotate(45deg);transition:transform .3s var(--ease)}
.macc.open>button .chev{transform:rotate(225deg)}
.macc-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.macc.open .macc-body{max-height:600px}
.mtiles{display:flex;flex-direction:column;gap:4px;padding:2px 0 16px}
.mtiles .mrow{display:flex;align-items:center;gap:14px;padding:10px 6px;border-radius:14px;opacity:1;transform:none;transition:background .25s}
.mtiles .mrow:active{background:rgba(255,253,248,.06)}
.mtiles .mrow .thumb{width:64px;height:64px;border-radius:12px;overflow:hidden;flex:0 0 auto;border:1px solid rgba(255,253,248,.12)}
.mtiles .mrow .thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%)}
.mtiles .mrow .mt{font-weight:800;font-size:1.02rem;color:var(--bone);line-height:1.25}
.mtiles .mrow .ms{font-size:.8rem;color:var(--bone-faint);margin-top:3px;line-height:1.4}
.mtiles .mrow .go{margin-left:auto;color:var(--gold-bright);font-size:1.05rem;flex:0 0 auto}
.msheet .direct{display:block;padding:18px 4px;font-weight:800;font-size:1.18rem;color:var(--bone);border-bottom:1px solid rgba(255,253,248,.1)}
.msheet .bhnav-cta{display:block;text-align:center;margin-top:26px;padding:16px}

@media (max-width:1040px){
  .bhnav-links{display:none}
  .burger{display:block;margin-left:auto}
}

/* ---------- demo page filler ---------- */
.demo{max-width:900px;margin:0 auto;padding:160px 24px 80px}
.demo h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:850;letter-spacing:-.02em;line-height:1.05;margin-bottom:18px}
.demo h1 em{font-style:normal;color:var(--gold-bright)}
.demo p{color:var(--bone-dim);line-height:1.65;max-width:60ch;margin-bottom:14px}
.demo .note{margin-top:30px;padding:18px 22px;border-radius:14px;background:rgba(201,162,78,.1);border:1px solid rgba(201,162,78,.35);font-size:.92rem}
.demo .note b{color:var(--gold-bright)}
@media (prefers-reduced-motion:reduce){
  .mega,.tile,.tile-img img,.macc-body{transition:none!important}
}