.site-header{
  position:sticky;top:0;left:0;right:0;
  z-index:500;
  background:#fff;
  border-bottom:1px solid var(--border);
  transition:box-shadow .4s ease, padding .4s ease;
}
.site-header.is-scrolled{box-shadow:0 8px 24px -14px rgba(10,27,46,.25);}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,4vw,48px);
  transition:padding .4s ease;
}
.site-header.is-scrolled .header-inner{padding-top:11px;padding-bottom:11px;}

.brand{display:flex;align-items:center;}
.brand-logo{height:52px;width:auto;transition:height .4s ease;}
.site-header.is-scrolled .brand-logo{height:42px;}

/* --- primary nav (Home / About Us / Products / Contact Us) --- */
.primary-nav{display:flex;align-items:center;gap:40px;}
.primary-nav > a:not(.btn){
  position:relative;
  font-family:var(--font-display);
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy-800);
  padding:6px 0;
  transition:color .3s ease;
}
.primary-nav > a:not(.btn)::after{
  content:"";
  position:absolute;left:0;right:100%;bottom:-2px;
  height:2px;background:var(--blue-500);
  transition:right .35s var(--ease);
}
.primary-nav > a:not(.btn):hover{color:var(--blue-500);}
.primary-nav > a:not(.btn):hover::after,
.primary-nav > a:not(.btn).is-active::after{right:0;}
.primary-nav > a:not(.btn).is-active{color:var(--navy-900);}
.nav-contact-btn{margin-left:4px;}

/* --- menu toggle button (mobile) --- */
.menu-toggle{
  display:none;
  align-items:center;justify-content:center;gap:12px;
  background:transparent;border:none;
  padding:11px;margin:-11px;
  min-width:44px;min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
.menu-icon{display:flex;flex-direction:column;gap:5px;width:26px;}
.menu-icon i{display:block;height:2px;width:100%;background:var(--navy-900);border-radius:2px;transition:transform .35s var(--ease),opacity .3s ease,width .3s ease;}
.menu-icon i:nth-child(2){width:70%;}
.menu-toggle:hover .menu-icon i:nth-child(2){width:100%;}

/* --- full screen menu (mobile only) --- */
.full-menu{
  position:fixed;inset:0;
  z-index:900;
  background:var(--navy-900);
  display:flex;flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  clip-path:circle(2% at calc(100% - 48px) 44px);
  transition:clip-path .65s var(--ease);
  visibility:hidden;
}
.full-menu.is-open{clip-path:circle(150% at calc(100% - 48px) 44px);visibility:visible;}
.full-menu-inner{
  width:100%;max-width:var(--container);
  /* margin:auto (vertical) centers the block when it fits, but — unlike
     align-items:center on the flex column above — still lets the browser
     scroll UP to the very top of the content when it's taller than the
     viewport (short/landscape phones, many nav links), instead of clipping
     the top of the menu with no way to reach it. */
  margin:auto auto;
  padding:96px clamp(24px,6vw,64px) 48px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:60px;flex-wrap:wrap;
}
.full-menu-links{display:flex;flex-direction:column;gap:6px;}
.full-menu-links a{
  display:flex;align-items:baseline;gap:18px;
  font-family:var(--font-display);
  font-size:clamp(30px,6vw,64px);
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
  padding:8px 0;
  transition:color .35s ease,transform .35s var(--ease);
  opacity:0;transform:translateY(24px);
}
.full-menu.is-open .full-menu-links a{opacity:1;transform:translateY(0);}
.full-menu.is-open .full-menu-links a:nth-child(1){transition:.5s var(--ease) .12s;}
.full-menu.is-open .full-menu-links a:nth-child(2){transition:.5s var(--ease) .18s;}
.full-menu.is-open .full-menu-links a:nth-child(3){transition:.5s var(--ease) .24s;}
.full-menu.is-open .full-menu-links a:nth-child(4){transition:.5s var(--ease) .3s;}
.full-menu-links a:hover,.full-menu-links a.is-active{color:#fff;}
.full-menu-links a.is-active{color:var(--blue-400);}
.fm-index{font-size:14px;color:var(--blue-400);font-family:var(--font-body);font-weight:600;}
.full-menu-side{max-width:280px;padding-bottom:12px;}
.fm-contact{display:block;color:#fff;font-size:18px;margin-top:14px;font-weight:500;}
.fm-contact:hover{color:var(--blue-400);}
.fm-social{display:flex;gap:12px;margin-top:24px;}
.fm-social a{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .3s ease,border-color .3s ease;
}
.fm-social svg{width:16px;height:16px;}
.fm-social a:hover{background:var(--blue-500);border-color:var(--blue-500);}
.full-menu-close{
  /* fixed (not absolute) so it stays reachable in one tap even if the menu's
     own content has to scroll — e.g. many links on a short/landscape phone
     screen, where .full-menu itself is the scrolling container */
  position:fixed;top:34px;right:clamp(20px,4vw,48px);
  z-index:1;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--ease),background .3s ease;
}
.full-menu-close svg{width:18px;height:18px;}
.full-menu-close:hover{transform:rotate(90deg);background:var(--blue-500);border-color:var(--blue-500);}

body.menu-open{
  position:fixed;
  left:0;right:0;
  overflow:hidden;
  width:100%;
}

@media (max-width:900px){
  .primary-nav{display:none;}
  .menu-toggle{display:flex;}
}
@media (max-width:640px){
  .brand-logo{height:40px;}
  .full-menu-inner{flex-direction:column;align-items:flex-start;gap:36px;padding-top:88px;}
}
@media (max-height:480px) and (max-width:900px){
  .full-menu-links a{font-size:clamp(24px,7vw,36px);padding:5px 0;}
  .full-menu-inner{gap:20px;padding-top:76px;padding-bottom:32px;}
  .full-menu-close{top:18px;width:38px;height:38px;}
}