/* =========================================================
   00 — HEADER / NAVIGATION  (replace the whole file; no !important overrides needed)
   Transparent over the hero, turns solid dark once scrolled.
   ========================================================= */
#site-header{
  --hh:80px;
  position:absolute;top:0;height:var(--hh);z-index:100;color:#fff;
  /* neutralise any older/global header rules (pill shape, side offset, transforms) */
  left:0!important;right:0!important;width:100%!important;min-width:0!important;max-width:none!important;
  margin:0!important;padding:0!important;transform:none!important;translate:none!important;
  border:0!important;border-radius:0!important;box-sizing:border-box;
  background:transparent;
  transition:background .3s ease,box-shadow .3s ease;
}
/* soft dark scrim so white links stay readable over any hero image */
#site-header::before{
  content:"";position:absolute;inset:0 0 -34px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(3,7,13,.72),transparent);transition:opacity .3s ease;
}
#site-header.scrolled,#site-header.menu-open{
  position:fixed;top:0;
  background:rgba(4,8,15,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.35);
}
#site-header.scrolled::before,#site-header.menu-open::before{opacity:0}

/* same left/right gutters as the hero content */
#site-header .header-inner{
  width:min(1600px,calc(100% - 160px));height:100%;margin:0 auto;padding:0;
  display:flex;align-items:center;gap:32px;
}

#site-header .brand{flex:0 0 auto;display:flex;align-items:center;height:100%}
#site-header .brand-logo{display:block;height:46px;width:auto;object-fit:contain}
/* if your logo is dark-on-transparent, uncomment to turn it white:
#site-header .brand-logo{filter:brightness(0) invert(1)} */

#site-header .main-nav{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,34px)}
#site-header .main-nav a{
  position:relative;padding:8px 0;color:#fff;text-decoration:none;white-space:nowrap;
  font:500 clamp(14px,1.1vw,18px)/1 "DM Sans",Arial,sans-serif;letter-spacing:.01em;
}
#site-header .main-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#f5121b;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
#site-header .main-nav a:hover::after,
#site-header .main-nav a:focus-visible::after{transform:scaleX(1)}
#site-header a:focus-visible,#site-header button:focus-visible{outline:2px solid #fff;outline-offset:4px}

#site-header .header-tools{flex:0 0 auto;display:flex;align-items:center}
#site-header .header-cta{
  display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 22px;
  background:#f5121b;color:#fff;text-decoration:none;white-space:nowrap;
  font:700 12px/1 "Space Grotesk","DM Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  transition:background .25s ease,transform .25s ease,box-shadow .25s ease;
}
#site-header .header-cta:hover{background:#ff3d43;transform:translateY(-1px);box-shadow:0 10px 24px rgba(245,18,27,.35)}

/* hamburger (mobile only) */
#site-header .menu-toggle{display:none;flex:0 0 auto;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;position:relative}
#site-header .menu-toggle span{position:absolute;left:11px;right:11px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
#site-header .menu-toggle span:nth-child(1){top:14px}
#site-header .menu-toggle span:nth-child(2){top:21px}
#site-header .menu-toggle span:nth-child(3){top:28px}
#site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#site-header .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
#site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- laptop ---------- */
@media(max-width:1399px){#site-header .header-inner{width:calc(100% - 64px)}}

/* ---------- tablet / phone: links collapse into a drop-down panel ---------- */
@media(max-width:1100px){
  #site-header{--hh:68px}
  #site-header .brand{flex:1 1 auto}
  #site-header .brand-logo{height:40px}
  #site-header .menu-toggle{display:block}
  #site-header .main-nav{
    display:none;position:absolute;top:var(--hh);left:0;right:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:8px 32px 20px;background:rgba(4,8,15,.97);border-top:1px solid rgba(255,255,255,.08);
  }
  #site-header .main-nav.open{display:flex}
  #site-header .main-nav a{padding:16px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
  #site-header .main-nav a::after{display:none}
}
@media(max-width:600px){
  #site-header .header-inner{width:calc(100% - 40px);gap:12px}
  #site-header .header-cta{display:none}
  #site-header .main-nav{padding:8px 20px 20px}
}
@media(prefers-reduced-motion:reduce){#site-header *,#site-header::before{transition:none!important}}


/* =========================================================
   LEGACY-PROOF RESET (keep at the very END of this file)
   Neutralises old pill / offset / transform header rules that
   may still exist in other stylesheets.
   ========================================================= */
html body header.site-header#site-header{
  position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:auto !important;
  inset:0 0 auto 0 !important;
  width:100% !important;min-width:0 !important;max-width:none !important;
  height:var(--hh,80px) !important;margin:0 !important;padding:0 !important;
  transform:none !important;translate:none !important;
  border:0 !important;border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;box-shadow:none !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  color:#fff !important;
}
html body header.site-header#site-header.scrolled,
html body header.site-header#site-header.menu-open{
  position:fixed !important;
  background:rgba(4,8,15,.94) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.35) !important;
  -webkit-backdrop-filter:blur(10px) !important;backdrop-filter:blur(10px) !important;
}
html body header.site-header#site-header .header-inner{
  width:min(1600px,calc(100% - 160px)) !important;max-width:none !important;min-width:0 !important;
  height:100% !important;margin:0 auto !important;padding:0 !important;
  transform:none !important;border:0 !important;border-radius:0 !important;background:none !important;
  display:flex !important;align-items:center !important;gap:32px !important;
}
html body header.site-header#site-header .brand{margin:0 !important;flex:0 0 auto !important}
html body header.site-header#site-header .main-nav{
  flex:1 1 auto !important;margin:0 !important;transform:none !important;
  justify-content:center !important;
}
html body header.site-header#site-header .header-cta{
  position:static !important;margin:0 !important;border-radius:0 !important;
  min-width:0 !important;width:auto !important;height:44px !important;padding:0 22px !important;
  background:#f5121b !important;color:#fff !important;
}
@media(max-width:1399px){html body header.site-header#site-header .header-inner{width:calc(100% - 64px) !important}}
@media(max-width:1100px){
  html body header.site-header#site-header{--hh:68px}
  html body header.site-header#site-header .main-nav{
    position:absolute !important;top:var(--hh,68px) !important;left:0 !important;right:0 !important;
    width:auto !important;border-radius:0 !important;transform:none !important;
  }
}
@media(max-width:600px){html body header.site-header#site-header .header-inner{width:calc(100% - 40px) !important}}

/* FINAL VISIBILITY FIX: header must always sit above dynamically loaded sections */
html body #site-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:10000 !important;
  height:80px !important;
  visibility:visible !important;
  opacity:1 !important;
  display:block !important;
}
html body #site-header .header-inner{
  position:relative !important;
  z-index:2 !important;
}
html body #site-header:not(.scrolled):not(.menu-open){
  background:linear-gradient(180deg,rgba(3,10,18,.78),rgba(3,10,18,0)) !important;
}
@media(max-width:1100px){html body #site-header{height:68px !important}}