/* ==========================================================================
   THE CLIMB — HEADER / NAV / BURGER MENU
   One implementation, used identically on every page.
   Depends on tokens from global.css.
   ========================================================================== */

.site-header{
  position:fixed;z-index:100;top:0;left:0;right:0;
  height:var(--header-h);
  transition:background var(--ease-standard),backdrop-filter var(--ease-standard),border-color var(--ease-standard);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(17,17,15,.76);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:rgba(211,162,46,.18);
}

.nav-shell{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:32px;
  padding:0 var(--page-pad);
}
.nav-group{display:flex;align-items:center;gap:clamp(24px,3vw,56px)}
.nav-right{justify-content:flex-end}
.nav-group a,.footer-nav a{
  position:relative;
  font-size:12px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.92;
  transition:color var(--ease-soft),opacity var(--ease-soft);
}
.nav-group a:hover,.footer-nav a:hover{color:var(--gold);opacity:1}
.nav-group a.active-page,.footer-nav a.active-page{color:var(--gold);opacity:1}
.nav-group a.active-page::after{
  content:"";
  position:absolute;
  left:0;right:.22em;
  bottom:-12px;
  height:1px;
  background:var(--gold);
}

.brand{width:clamp(180px,20vw,300px);display:block}
.brand img,.footer-brand img{width:100%;height:auto}

.contact-link{
  border:1px solid rgba(211,162,46,.8);
  padding:12px 20px;
}

/* Burger menu — hidden on desktop/tablet, shown under mobile breakpoint */
.menu-toggle{display:none}

.menu-toggle{
  width:42px;height:42px;
  border:0;background:transparent;
  align-items:center;justify-content:center;
  flex-direction:column;gap:6px;
  cursor:pointer;
}
.menu-toggle span{
  display:block;width:24px;height:2px;
  background:var(--porcelain);
  transition:transform var(--ease-standard),opacity var(--ease-standard);
}
.menu-toggle[aria-expanded="true"] span:first-child{
  transform:translateY(4px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child{
  transform:translateY(-4px) rotate(-45deg);
}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:200;
  min-height:100svh;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:
    radial-gradient(circle at 13% 19%, rgba(255,255,255,.035) 0 1px, transparent 1.4px),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.025) 0 1px, transparent 1.6px),
    radial-gradient(circle at 55% 66%, rgba(255,255,255,.025) 0 1.2px, transparent 1.8px),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(130deg,#151512 0%,var(--onyx) 47%,#0c0c0b 100%);
  color:var(--porcelain);
  transform:translateX(0);
  transition:transform .38s cubic-bezier(.65,.05,.36,1);
}
.mobile-menu.closed{transform:translateX(100%)}

.mobile-menu::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(ellipse at 8% 40%, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(ellipse at 70% 4%, rgba(255,255,255,.03), transparent 24%),
    radial-gradient(ellipse at 91% 60%, rgba(0,0,0,.45), transparent 34%),
    radial-gradient(ellipse at 30% 92%, rgba(255,255,255,.025), transparent 23%);
  mix-blend-mode:screen;
}

.mobile-menu-inner{
  position:relative;
  width:100%;
  min-height:100svh;
  padding:
    calc(env(safe-area-inset-top) + clamp(28px,6vw,56px))
    var(--page-pad-mobile)
    calc(env(safe-area-inset-bottom) + 38px);
  display:flex;
  flex-direction:column;
  isolation:isolate;
}

.mobile-menu-top{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:86px;
}
.mobile-menu-top .brand{width:min(55vw,300px)}

.menu-close{
  width:clamp(44px,9vw,68px);
  height:clamp(44px,9vw,68px);
  border:0;
  background:transparent;
  position:absolute;
  right:0;
  top:-4px;
  cursor:pointer;
  padding:0;
  z-index:3;
}
.menu-close::before,
.menu-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:60%;
  height:2px;
  background:var(--porcelain);
  transform-origin:center;
  border-radius:2px;
}
.menu-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.menu-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Ghost text — vertical, bled along the right edge */
.mobile-menu-ghost{
  position:absolute;
  z-index:0;
  top:10.5%;
  right:3.5%;
  height:72%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  text-transform:uppercase;
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(54px,13vw,116px);
  line-height:.82;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.055);
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  margin:0;
}

.mobile-menu-nav{
  position:relative;
  z-index:2;
  margin-top:clamp(120px,16vh,230px);
  width:100%;
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:clamp(38px,5.2vh,72px);
}
.mobile-menu-nav a{
  display:inline-block;
  width:max-content;
  max-width:100%;
  color:var(--porcelain);
  text-transform:uppercase;
  font-family:var(--font-display);
  font-size:clamp(50px,11.5vw,100px);
  line-height:.88;
  letter-spacing:.035em;
  text-shadow:0 4px 0 rgba(0,0,0,.55);
  transition:transform .2s ease, opacity .2s ease;
}
.mobile-menu-nav a:hover,
.mobile-menu-nav a:focus-visible{
  transform:translateX(4px);
  opacity:.88;
  outline:none;
}
.mobile-menu-nav a[aria-current="page"]::after{
  content:"";
  display:block;
  width:clamp(36px,9vw,86px);
  height:4px;
  margin-top:clamp(16px,2.2vh,26px);
  background:var(--gold);
  box-shadow:0 1px 0 rgba(255,255,255,.16);
}
/* Add this class on longer labels ("The View From Here") so they don't
   overpower the shorter items */
.mobile-menu-nav a.long{
  font-size:clamp(44px,10.7vw,92px);
  white-space:nowrap;
}

.mobile-menu-divider{
  position:relative;
  z-index:2;
  width:100%;
  height:2px;
  border:0;
  background:var(--gold);
  margin-top:clamp(58px,7vh,92px);
  opacity:.95;
}

.mobile-menu-copyright{
  position:relative;
  z-index:2;
  margin:0;
  margin-top:auto;
  padding-top:clamp(95px,12vh,160px);
  font-size:clamp(14px,3vw,22px);
  letter-spacing:.35em;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
}

@media (max-width:420px){
  .mobile-menu-top .brand{width:min(57vw,220px)}
  .mobile-menu-nav{margin-top:clamp(100px,13vh,160px)}
  .mobile-menu-nav a{font-size:clamp(44px,12vw,56px)}
  .mobile-menu-nav a.long{font-size:clamp(36px,10.3vw,48px)}
  .mobile-menu-ghost{right:1%;top:11%;font-size:clamp(48px,14vw,72px)}
  .mobile-menu-copyright{padding-top:80px}
}

@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mobile-menu-nav a{transition:none}
}

/* ===== Mobile breakpoint ===== */
@media (max-width: 980px){
  :root{--header-h:var(--header-h-mobile)}
  .brand{width:176px}
  .nav-group{display:none}
  .nav-shell{grid-template-columns:1fr auto 1fr}
  .brand{grid-column:2}
  .menu-toggle{display:flex;grid-column:3;justify-self:end}
}