/* ================= Header ================= */
:root{
  --header-h: clamp(58px, calc(100 / 1440 * 100vw), 100px);
}
.header{
  position:fixed !important;
  inset:0 0 auto 0;
  width:100% !important;

  /* 65px min → 112px at 1440px → capped at 112 */

  height: var(--header-h) !important;
  background-color: #FFFFFF !important;
  backdrop-filter: blur(10px);
  z-index: 9999 !important;
  display:flex !important;
  align-items:center !important;
}

.header .header-container{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:1440px; margin:0 auto;

  /* Use consistent padding with main container */
  padding-left: clamp(47px, calc(117 / 1440 * 100vw), 117px);
  padding-right: clamp(37px, calc(44 / 1440 * 100vw), 44px);
  height: var(--header-h); /* keep the inner box as tall as the header */
}

.nav-brand{
  margin: 0;
  display: flex;
  align-items: center;
  height: var(--header-h);
  line-height: 0;
  padding: 0;
}
/* logo scales with header */
.logo{
  height: clamp(40px, calc(77 / 1440 * 100vw), 77px);
  width:auto;
  display:block;
}

.nav-menu{
    display:flex;
    gap:71px
}
.nav-link{
    color:#000;
    text-decoration:none;
    font-family:'Outfit',sans-serif;
    font-weight:500;
    font-size:clamp(10px,calc(15 / 1440 * 100vw),15px);
    line-height: 1.3 !important;
    letter-spacing:0.2em !important;
    text-transform:uppercase;
    transition:color .3s
}
.nav-link:hover{
    color:#666
}

.nav-toggle{
    display:none
}
.hamburger{
    display:none;
    cursor:pointer;
    margin-left:auto;
    position:relative;
    width:44px;
    height:44px
}
.hamburger span{
    position:absolute;
    left:8px;
    right:8px;
    height:2px;
    background:#000;
    transition:transform .25s ease,opacity .2s ease}
.hamburger span:nth-child(1){
    top:14px
}
.hamburger span:nth-child(2){
    top:50%;
    transform:translateY(-50%)
}
.hamburger span:nth-child(3){
    bottom:14px
}
.nav-toggle:checked ~ .hamburger span:nth-child(1){
    top:50%;
    transform:translateY(-50%) rotate(45deg)
}
.nav-toggle:checked ~ .hamburger span:nth-child(2){
    opacity:0
}
.nav-toggle:checked ~ .hamburger span:nth-child(3){
    bottom:auto;
    top:50%;
    transform:translateY(-50%) rotate(-45deg)
}

@media (max-width:768px){
  .header .container{
    flex-direction:row;gap:0
}
  .header .header-container{
    padding-left: clamp(40px, calc(117 / 1440 * 100vw), 117px) !important;
    padding-right: clamp(40px, calc(117 / 1440 * 100vw), 117px) !important;
}
  .nav-brand .logo{
    height:clamp(40px,calc(77 / 1440 * 100vw),77px)!important
}
  .hamburger{
    display:block
}

  .nav-menu{
    position:fixed;
    inset:var(--header-h) 0 auto 0;
    background:#FFFFFF;color:#000;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;padding:24px 0;
    z-index:9998;
    opacity:0;visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .2s ease,transform .25s ease;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-shadow:0 4px 6px rgba(0,0,0,.1)
  }
  .nav-toggle:checked ~ .hamburger + .nav-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)!important
  }
  .header .header-container .nav-menu .nav-link{color:#000}
}