/* header */
#site-header{position:fixed;top:0;left:0;width:100%;height:var(--header-h);background:rgba(247,246,243,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--dyp84-line);z-index:var(--dyp84-z-header);overflow:hidden}
#site-header .container{height:100%}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--dyp84-space-3)}

.dyp84-logo{display:flex;align-items:center;flex-shrink:0}
.dyp84-logo img{max-width:var(--logo-w);max-height:var(--logo-h);width:auto;height:auto;display:block}

.nav-links{display:flex;align-items:center;gap:var(--dyp84-space-3)}
.nav-links a{font-size:.96rem;font-weight:500;color:var(--dyp84-ink-soft);position:relative;padding:.2rem 0;transition:color var(--dyp84-trans)}
.nav-links a:hover{color:var(--dyp84-ink)}
.nav-links a.active{color:var(--dyp84-ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:var(--dyp84-accent)}

.nav-actions{display:flex;align-items:center}

.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:0;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--dyp84-ink);transition:transform var(--dyp84-trans),opacity var(--dyp84-trans)}
.hamburger.dyp84-is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.dyp84-is-open span:nth-child(2){opacity:0}
.hamburger.dyp84-is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{position:fixed;top:var(--header-h);left:0;width:100%;background:var(--dyp84-bg);border-bottom:1px solid var(--dyp84-line);transform:translateY(-130%);transition:transform 280ms cubic-bezier(.2,.7,.3,1);z-index:var(--dyp84-z-menu);padding:var(--dyp84-space-3)}
.mobile-menu.dyp84-is-open{transform:translateY(0)}
.mobile-menu a{display:block;padding:.8rem 0;font-family:var(--dyp84-font-display);font-size:1.4rem;border-bottom:1px solid var(--dyp84-line)}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a.active{color:var(--dyp84-accent)}

/* header responsiveness: nav labels include "What We Build" (>12 chars) -> hide at 1024px */
@media (min-width:1025px){
  .nav-links{display:flex}
  .nav-actions{display:flex}
  .hamburger{display:none}
}
@media (max-width:1024px) and (min-width:861px){
  .nav-actions{display:none}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-actions{display:none}
  .hamburger{display:flex}
}