/* BL Studios V23 — exact full-screen menu and metallic folds hero. */

/* MENU: self-contained, matching the approved reference. */
.menu{
  z-index:80!important;
  display:block!important;
  padding:0 clamp(28px,3vw,60px) clamp(32px,4vh,54px)!important;
  background:
    radial-gradient(ellipse 74% 130% at 96% 4%,rgba(50,47,255,.98) 0%,rgba(40,38,233,.82) 27%,rgba(25,25,124,.48) 50%,rgba(7,9,15,0) 76%),
    linear-gradient(104deg,#07090e 0%,#080a12 46%,#10113f 100%)!important;
  isolation:isolate;
}
.menu:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.22;
  pointer-events:none;
  background-image:linear-gradient(115deg,transparent 0 48%,rgba(149,155,255,.08) 50%,transparent 52%);
  background-size:16px 16px;
  mask-image:linear-gradient(90deg,transparent 34%,#000 100%);
}
.menu__top{
  height:clamp(172px,20vh,224px);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding-top:clamp(34px,4.2vh,56px);
}
.menu__brand{
  display:block;
  width:clamp(220px,16vw,326px);
}
.menu__brand img{
  display:block;
  width:100%;
  height:auto;
  max-height:76px;
  object-fit:contain;
  object-position:left center;
  filter:none!important;
}
.menu__close{
  min-width:clamp(112px,8.2vw,164px);
  height:clamp(50px,5.7vh,66px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(203,207,255,.48)!important;
  border-radius:999px;
  color:#f5f5f2;
  background:rgba(19,20,75,.16);
  backdrop-filter:blur(10px);
  font:10px/1 var(--mono)!important;
  letter-spacing:.14em;
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.menu__close:hover,.menu__close:focus-visible{
  background:rgba(109,113,255,.18);
  border-color:rgba(255,255,255,.8)!important;
  transform:scale(1.025);
}
.menu nav{
  width:100%!important;
  height:auto!important;
  display:block!important;
  border-top:0!important;
}
.menu nav a{
  position:relative!important;
  min-height:clamp(96px,12.15vh,137px)!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:clamp(84px,6.2vw,126px) minmax(0,1fr)!important;
  align-items:center!important;
  padding:0!important;
  border-bottom:1px solid rgba(255,255,255,.19)!important;
  color:#f4f4f1!important;
  font-size:clamp(62px,7.25vw,122px)!important;
  font-weight:300!important;
  line-height:.82!important;
  letter-spacing:-.07em!important;
  overflow:hidden;
}
.menu nav a:first-child{border-top:1px solid rgba(255,255,255,.19)!important}
.menu nav small{
  align-self:start;
  margin:clamp(24px,2.7vh,34px) 0 0!important;
  color:#aeb4ff!important;
  font:10px/1 var(--mono)!important;
  letter-spacing:.08em!important;
}
.menu nav a:hover,.menu nav a:focus-visible{
  padding-left:0!important;
  color:#fff!important;
}
.menu nav a:after{
  content:"";
  position:absolute;
  right:2px;
  width:clamp(38px,3vw,58px);
  height:1px;
  background:#b5bbff;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.menu nav a:hover:after,.menu nav a:focus-visible:after{opacity:1;transform:none}
.menu>p{
  right:clamp(28px,3vw,60px)!important;
  bottom:clamp(24px,3.6vh,46px)!important;
  color:rgba(255,255,255,.82)!important;
  font:11px/1.55 var(--mono)!important;
  letter-spacing:.075em!important;
  text-align:right!important;
}
body.menu-open .nav{
  visibility:hidden!important;
  pointer-events:none!important;
}

/* HERO: darker, cinematic surface; canvas contains the autonomous folds. */
.hero--reel{
  min-height:700px;
  background:#010205!important;
}
.hero__field{
  filter:saturate(.9) contrast(1.13)!important;
}
.hero__depth{
  background:
    linear-gradient(90deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.05) 43%,rgba(2,3,13,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08) 0%,transparent 48%,rgba(0,0,0,.52) 100%)!important;
}

@media(max-width:800px){
  .menu{padding:0 20px 24px!important}
  .menu__top{height:112px;padding-top:22px}
  .menu__brand{width:154px}
  .menu__close{min-width:94px;height:42px;font-size:8px!important}
  .menu nav a{
    min-height:clamp(72px,11.2vh,92px)!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    font-size:clamp(45px,13vw,70px)!important;
    line-height:.88!important;
  }
  .menu nav small{margin:21px 0 0!important;font-size:8px!important}
  .menu>p{right:20px!important;bottom:18px!important;font-size:8px!important}
  .hero--reel{min-height:100svh}
}

@media(max-height:760px) and (min-width:801px){
  .menu__top{height:116px;padding-top:26px}
  .menu__brand{width:220px}
  .menu__close{height:46px}
  .menu nav a{min-height:94px!important;font-size:74px!important}
  .menu nav small{margin-top:24px!important}
}

@media(prefers-reduced-motion:reduce){
  .menu__close,.menu nav a:after{transition:none!important}
}