/* =========================================================
   Nav (piece A): fixed gunmetal bar, auto-hide, active section, mobile overlay
   ========================================================= */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 24px 0 0;
  transition: transform 700ms var(--ease-out), padding 600ms var(--ease-out);
  opacity: 0;
}
.is-hero-in .nav, html:not(.hero-js) .nav { opacity: 1; transition: transform 700ms var(--ease-out), padding 600ms var(--ease-out), opacity 900ms var(--ease-out) 500ms; }
.nav.is-hidden { transform: translateY(-110%); }

.nav__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 72px; max-width: calc(var(--maxw) + var(--side) * 2); margin-inline: auto; padding: 0 var(--side);   /* shared content grid */
  border-bottom: 1px solid transparent;
  transition: height 600ms var(--ease-out), background-color 500ms var(--ease-out), border-color 500ms, box-shadow 500ms;
}
/* the machined bar, faded in after scrolling */
.nav__inner::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); z-index: -1; pointer-events: none;   /* full-bleed bar */
  background:
    linear-gradient(105deg, transparent calc(var(--sheen-x, .5) * 100% - 30%), rgba(255, 255, 255, .07) calc(var(--sheen-x, .5) * 100%), transparent calc(var(--sheen-x, .5) * 100% + 30%)),
    linear-gradient(180deg, rgba(48, 50, 55, .82), rgba(24, 25, 28, .86)),
    url("../../assets/img/tex/brushed-dark.webp") center / 1024px repeat;
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 12px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0; transition: opacity 500ms var(--ease-out);
}
.nav.is-scrolled { padding: 0; }
.nav.is-scrolled .nav__inner { height: 64px; }
.nav.is-scrolled .nav__inner::before { opacity: 1; }

/* brand */
.nav__brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink-on-dark); }
.nav__mark { width: 40px; height: auto; color: var(--alu-50); flex: none; transition: color var(--dur-hover) var(--ease-out); }
.nav__brand:hover .nav__mark, .nav__brand:focus-visible .nav__mark { color: var(--ember-500); }
.nav__word { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.nav__amp { font-weight: 400; font-style: italic; color: var(--muted-on-dark); }
.nav__inc { font-weight: 400; color: var(--muted-on-dark); }

/* links */
.nav__links ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--muted-on-dark);
  transition: color var(--dur-hover) var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--ember-500); box-shadow: 0 0 8px var(--ember-glow);
  transform: scale(0); transition: transform 400ms var(--ease-out);
}
.nav__links a:hover { color: var(--ink-on-dark); }
.nav__links a.is-active { color: var(--ink-on-dark); }
.nav__links a.is-active::after { transform: scale(1); }

/* right side */
.nav__aside { display: flex; align-items: center; gap: 22px; }
.nav__phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ink-on-dark); }
.nav__phone:hover { color: var(--ember-400); }
.nav__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ember-500);
  box-shadow: 0 0 6px 1px var(--ember-glow), 0 0 14px 2px rgba(255, 102, 0, .25);
  animation: nav-led 2.4s ease-in-out infinite;
}
@keyframes nav-led { 50% { opacity: .5; box-shadow: 0 0 3px 0 var(--ember-glow); } }
.nav__cta {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid rgba(236, 238, 240, .32); border-radius: 2px;
  font-size: 13px; font-weight: 600; color: var(--ink-on-dark);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover), box-shadow var(--dur-hover);
}
.nav__cta:hover { border-color: var(--ember-500); color: var(--ember-400); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 18px rgba(255, 102, 0, .25); }

/* burger */
.nav__toggle { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(236, 238, 240, .28); border-radius: 2px; }
.nav__burger { position: relative; width: 18px; height: 8px; }
.nav__burger i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 500ms var(--ease-out), top 500ms var(--ease-out); }
.nav__burger i:first-child { top: 0; } .nav__burger i:last-child { top: 6.5px; }
.nav-open .nav__burger i:first-child { top: 3.25px; transform: rotate(45deg); }
.nav-open .nav__burger i:last-child { top: 3.25px; transform: rotate(-45deg); }

/* ---------- Mobile overlay ---------- */
.nav-overlay {
  position: fixed; inset: 0; z-index: 490;
  background:
    radial-gradient(70% 40% at 80% 100%, rgba(255, 102, 0, .14), transparent 70%),
    var(--gunmetal-900) url("../../assets/img/tex/brushed-dark.webp") center / 1024px repeat;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 800ms var(--ease-inout), visibility 0s linear 800ms;
  visibility: hidden;
}
.nav-overlay[hidden] { display: none; }
.nav-open .nav-overlay { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 800ms var(--ease-inout), visibility 0s; }
.nav-overlay__inner { height: 100%; display: flex; flex-direction: column; padding: 108px var(--side) 32px; overflow-y: auto; }
.nav-overlay__eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 20px; }
.nav-overlay__list { border-top: 1px solid var(--rule-dark); }
.nav-overlay__list li { border-bottom: 1px solid var(--rule-dark); overflow: hidden; }
.nav-overlay__list a { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; min-height: 44px; }
.nav-overlay__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ember-500); width: 2.4em; }
.nav-overlay__txt { font-size: clamp(40px, 11vw, 64px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.nav-overlay__txt em { font-weight: 400; }
.nav-overlay__list a > * { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--ease-out); }
.nav-open .nav-overlay__list a > * { transform: none; }
.nav-overlay__list li:nth-child(1) a > * { transition-delay: 160ms; }
.nav-overlay__list li:nth-child(2) a > * { transition-delay: 230ms; }
.nav-overlay__list li:nth-child(3) a > * { transition-delay: 300ms; }
.nav-overlay__list li:nth-child(4) a > * { transition-delay: 370ms; }
.nav-overlay__list li:nth-child(5) a > * { transition-delay: 440ms; }
.nav-overlay__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 10px; justify-items: start; opacity: 0; transition: opacity 700ms var(--ease-out) 450ms; }
.nav-open .nav-overlay__foot { opacity: 1; }
.nav-overlay__foot .link { font-size: 15px; min-height: 44px; align-items: flex-end; }
.nav-overlay__addr { font-size: 11px; letter-spacing: .18em; line-height: 1.7; text-transform: uppercase; color: var(--muted-on-dark); margin-top: 8px; }
.nav-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__phone { display: none; }
}
@media (max-width: 900px) {
  .nav { padding: 12px 0 0; }
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-grid; }
  .nav__inner { height: 64px; padding: 0 var(--side); }
  .nav__mark { width: 34px; }
  .nav__word { font-size: 14px; }
  .nav-open .nav { transform: none; }
  .nav-open .nav__inner::before { opacity: 0; }
}
@media (max-width: 360px) {
  .nav__inc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav { opacity: 1; }
  .nav__dot { animation: none; }
}