/* ==========================================================================
   Offload Media — shared site header (internal pages)
   Copied verbatim from the homepage (index.html) header rules, which are the
   approved reference, in the same cascade order. Keep the two in sync: if
   the homepage header CSS changes, mirror it here. Custom properties that the homepage
   declares on :root are scoped to the header here so page :root values
   cannot leak into it.
   ========================================================================== */

/* Inherited text properties the homepage header picks up from its <body>. */
#glassHeader,#mobileNav{font-family:Arial,Helvetica,sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:normal;letter-spacing:normal;text-transform:none;text-align:start;color:#fff}
@media (max-width:767px){#glassHeader,#mobileNav{-webkit-text-size-adjust:100%;text-size-adjust:100%}}
/* Undo page-level element resets (e.g. button{font:inherit}, a{color:inherit}) so
   these elements match the homepage, which has no such resets. */
#glassHeader button,#mobileNav button{font:revert}
#brandLogo{color:revert;text-decoration:revert}

#glassHeader,#mobileNav{--red:#7e212b}
.header{position:fixed;top:28px;left:28px;right:28px;height:74px;z-index:10000;display:flex;align-items:center;justify-content:space-between;gap:22px;pointer-events:none;--gx:50%;--gy:0%;}
.header a,.header button,.header .brand{pointer-events:auto}
.brand,.navpill,.burger{position:relative;isolation:isolate;overflow:hidden;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.070) 38%,rgba(255,255,255,.034) 100%);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(38px) saturate(210%) contrast(1.06);-webkit-backdrop-filter:blur(38px) saturate(210%) contrast(1.06);box-shadow:0 22px 70px rgba(0,0,0,.46),0 4px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.52),inset 0 -1px 0 rgba(255,255,255,.10),inset 0 -18px 46px rgba(255,255,255,.045)}
.brand:before,.navpill:before,.burger:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:radial-gradient(120% 92% at var(--gx) -18%,rgba(255,255,255,.44),rgba(255,255,255,.13) 35%,rgba(255,255,255,0) 68%),linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.055) 44%,rgba(255,255,255,.03));opacity:.95}
.brand:after,.navpill:after,.burger:after{content:"";position:absolute;inset:1px;border-radius:inherit;z-index:-1;pointer-events:none;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 17px 32px rgba(255,255,255,.08),inset 0 -26px 42px rgba(0,0,0,.16)}
.brand{height:62px;display:flex;align-items:center;gap:13px;padding:0 30px;min-width:202px;transform:translateZ(0)}
.brand-logo{padding:0 28px;position:relative;display:flex;align-items:center;justify-content:center;min-width:206px}
.brand-logo .logo-stack{position:relative;display:block;width:145px;height:46px;z-index:100}
.brand-logo img{position:absolute;inset:0;margin:auto;display:block;height:46px;width:auto;max-width:170px;transition:opacity .28s ease, filter .28s ease}
.brand-logo .logo-original{opacity:1;filter:brightness(1.04) contrast(1.04)}
.brand-logo .logo-white{opacity:0;filter:drop-shadow(0 0 16px rgba(255,255,255,.18))}
.brand-logo.on-dark .logo-original{opacity:0}
.brand-logo.on-dark .logo-white{opacity:1}
.brand-logo.use-original .logo-original{opacity:1}
.brand-logo.use-original .logo-white{opacity:0}
.brand strong{font-size:20px;letter-spacing:-.02em;font-style:italic}
.navpill{height:62px;display:flex;align-items:center;gap:2px;padding:7px 7px 7px 12px;transform:translateZ(0)}
.navpill a{position:relative;z-index:2;height:48px;display:flex;align-items:center;justify-content:center;padding:0 17px;border-radius:999px;color:rgba(255,255,255,.86);font-size:14.5px;font-weight:560;letter-spacing:-.015em;text-decoration:none;white-space:nowrap;text-shadow:0 1px 15px rgba(0,0,0,.25);transition:background .24s ease,color .24s ease,transform .24s ease,box-shadow .24s ease}
.navpill a:hover{background:rgba(255,255,255,.105);color:#fff;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.navpill .cta{margin-left:3px;color:#06100d;font-weight:700;padding:0 24px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,255,248,.82) 42%,rgba(180,255,221,.58));border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 28px rgba(120,255,190,.18),inset 0 1px 0 rgba(255,255,255,.86),inset 0 -10px 20px rgba(7,90,70,.08);text-shadow:none}
.navpill .cta:hover{background:linear-gradient(135deg,rgba(255,255,255,1),rgba(91, 5, 18, 0.88) 42%,rgba(158,255,215,.68));transform:translateY(-1px)}
.burger{display:none;width:58px;height:58px;place-items:center;border:0}
.burger span{position:relative;z-index:2}
.burger span,.burger span:before,.burger span:after{content:"";width:25px;height:2px;background:#fff;display:block;border-radius:10px}
.burger span:before{transform:translateY(-7px)}
.burger span:after{transform:translateY(5px)}
@media(max-width:900px){
  .navpill{display:none}
  .burger{display:grid}
  .header{top:18px;left:16px;right:16px;height:60px}
  .brand{height:58px;padding:0 20px}
}
@media(max-width:560px){
  .brand strong{font-size:16px}
  .brand{padding:0 16px}
  .brand-logo img{height:40px;max-width:142px}
  .brand-logo{padding:0 20px;min-width:170px}
  .brand-logo .logo-stack{width:142px;height:40px}
}
#glassHeader,#mobileNav{--lg-tint:rgba(255,255,255,0.06);--lg-tint-hover:rgba(255,255,255,0.12);--lg-edge-bright:rgba(255,255,255,0.55);--lg-edge-dim:rgba(255,255,255,0.06);--lg-shadow:0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);--lg-accent-tint:rgba(126,33,43,0.82);--lg-accent-edge:rgba(255,210,216,0.54);--lg-accent-shadow:rgba(126,33,43,0.38);--lg-accent-tint-hover:rgba(126,33,43,0.94)}
.header{top: 28px !important; left: 28px !important; right: 28px !important; height: 76px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 22px !important; z-index: 2147483647 !important; pointer-events: none !important; transform: translateZ(0) !important; isolation: isolate !important;}
.header > *{pointer-events: auto;}
.glass-filter, .glass-overlay, .glass-specular{display: none !important;}
.glass-content{position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; height: 100% !important; width: 100% !important;}
.navpill, .liquid-pill.liquid-nav,
.burger,  .liquid-pill.liquid-burger{position: relative !important; isolation: isolate !important; border: 0 !important; border-radius: 999px !important; backdrop-filter: url(#offload-liquid-glass) blur(2px) saturate(1.85) !important; -webkit-backdrop-filter: blur(18px) saturate(1.85) !important; background: var(--lg-tint) !important; box-shadow: var(--lg-shadow) !important; overflow: visible !important; transition: background .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1) !important;}
.navpill::before, .liquid-pill.liquid-nav::before,
.burger::before,  .liquid-pill.liquid-burger::before{content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1.5px !important; background: conic-gradient( from 215deg at 50% 50%, var(--lg-edge-dim)    0deg, var(--lg-edge-bright) 90deg, var(--lg-edge-dim)    180deg, var(--lg-edge-bright) 290deg, var(--lg-edge-dim)    360deg ) !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; z-index: 0 !important;}
.navpill::after, .liquid-pill.liquid-nav::after,
.burger::after,  .liquid-pill.liquid-burger::after{content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18) 0%, rgba(255,255,255,0)   60% ) !important; opacity: 0 !important; transition: opacity .4s ease !important; pointer-events: none !important; z-index: 0 !important;}
.navpill:hover::after, .liquid-pill.liquid-nav:hover::after,
.burger:hover::after,  .liquid-pill.liquid-burger:hover::after{opacity: 1 !important;}
.navpill, .liquid-pill.liquid-nav{height: 64px !important; padding: 8px !important; display: flex !important; align-items: center !important; gap: 4px !important;}
.liquid-nav .nav-content{width: 100% !important; display: flex !important; align-items: center !important; gap: 4px !important; padding: 0 6px !important;}
.navpill a, .liquid-nav a{position: relative !important; z-index: 2 !important; height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 18px !important; border-radius: 999px !important; color: rgba(255,255,255,0.92) !important; font: 600 15px/1 -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', Arial, sans-serif !important; letter-spacing: -0.012em !important; text-decoration: none !important; text-shadow: 0 1px 10px rgba(0,0,0,0.35) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; white-space: nowrap !important; transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1) !important;}
.navpill a:hover, .liquid-nav a:hover{color: #fff !important; background: var(--lg-tint-hover) !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;}
.navpill .cta, .liquid-nav .cta{margin-left: 6px !important; color: #fff !important; font-weight: 650 !important; padding: 0 24px !important; text-shadow: none !important; background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 100%), var(--lg-accent-tint) !important; border: 1px solid rgba(255,255,255,0.18) !important; box-shadow: inset 0 1px 0 var(--lg-accent-edge), inset 0 0 0 1px rgba(255,255,255,0.12), 0 4px 18px var(--lg-accent-shadow) !important;}
.navpill .cta:hover, .liquid-nav .cta:hover{transform: translateY(-1px) !important; background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 100%), var(--lg-accent-tint-hover) !important;}
.burger, .liquid-pill.liquid-burger{display: none !important; width: 64px !important; height: 64px !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden !important; cursor: pointer !important;}
.burger .glass-content, .liquid-burger .glass-content{width: 100% !important; height: 100% !important; background: transparent !important; border-radius: inherit !important; justify-content: center !important; align-items: center !important;}
.burger .glass-content::before,
.burger .glass-content::after,
.liquid-burger .glass-content::before,
.liquid-burger .glass-content::after{content: none !important; display: none !important;}
.burger-lines{display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5.5px !important;}
.burger-lines i{display: block !important; width: 23px !important; height: 1.6px !important; background: rgba(255,255,255,.94) !important; border-radius: 999px !important; box-shadow: 0 1px 10px rgba(0,0,0,0.42), 0 0 12px rgba(255,255,255,.18) !important; transform-origin: center !important;}
.burger-lines i:nth-child(2){width: 18px !important;}
.burger > span:not(.glass-content), .burger > span:not(.glass-content):before, .burger > span:not(.glass-content):after{display: none !important;}
.brand-logo, .brand-logo.liquid-logo{background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; height: 64px !important; min-width: 200px !important; padding: 0 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important;}
.brand-logo::before, .brand-logo::after,
.brand-logo.liquid-logo::before, .brand-logo.liquid-logo::after{display: none !important; content: none !important;}
.brand-logo .logo-stack{position: relative !important; width: 145px !important; height: 46px !important; z-index: 2 !important;}
.brand-logo img{height: 46px !important; max-width: 170px !important;}
@media (max-width: 1100px){
  .navpill a, .liquid-nav a{padding: 0 14px !important; font-size: 14px !important;}
  .navpill .cta, .liquid-nav .cta{padding: 0 20px !important;}
}
@media (max-width: 900px){
  .header{top: 18px !important; left: 16px !important; right: 16px !important; height: 64px !important;}
  .navpill, .liquid-pill.liquid-nav{display: none !important;}
  .burger, .liquid-pill.liquid-burger{display: flex !important;}
  .brand-logo, .brand-logo.liquid-logo{height: 60px !important; min-width: 180px !important; padding: 0 18px !important;}
  .brand-logo img{height: 40px !important;}
  .brand-logo .logo-stack{width: 130px !important; height: 40px !important;}
}
@media (max-width: 560px){
  .brand-logo, .brand-logo.liquid-logo{min-width: 160px !important; padding: 0 14px !important;}
  .brand-logo img{height: 36px !important; max-width: 130px !important;}
  .brand-logo .logo-stack{width: 120px !important; height: 36px !important;}
  .burger, .liquid-pill.liquid-burger{width: 58px !important; height: 58px !important;}
}
@media (prefers-reduced-motion: reduce){
  .navpill, .liquid-nav, .burger, .liquid-burger,
  .navpill a, .liquid-nav a{transition-duration: 0.01ms !important;}
}
@media (prefers-reduced-transparency: reduce){
  .navpill, .liquid-pill.liquid-nav,
  .burger,  .liquid-pill.liquid-burger{background: rgba(20,20,25,0.85) !important; backdrop-filter: blur(20px) saturate(1.2) !important; -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;}
}
@media (prefers-contrast: more){
  .navpill, .liquid-pill.liquid-nav,
  .burger,  .liquid-pill.liquid-burger{background: rgba(0,0,0,0.7) !important; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9), 0 8px 24px rgba(0,0,0,0.6) !important;}
  .navpill a, .liquid-nav a{color: #fff !important;}
}
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))){
  .navpill, .liquid-pill.liquid-nav,
  .burger,  .liquid-pill.liquid-burger{background: rgba(30,32,34,0.82) !important;}
}
.mobile-nav{position:fixed; inset:0; z-index:2147483646; background:rgba(2,3,5,0.97); backdrop-filter:blur(28px) saturate(1.4); -webkit-backdrop-filter:blur(28px) saturate(1.4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; opacity:0; pointer-events:none; transition:opacity .32s ease;}
.mobile-nav.open{opacity:1;pointer-events:auto;}
.mobile-nav nav{display:flex; flex-direction:column; align-items:center; gap:clamp(22px,5vh,40px);}
.mobile-nav a{color:rgba(255,255,255,.78); font-family:'kaneda-gothic','Kaneda Gothik','Arial Black',Impact,sans-serif; font-size:clamp(42px,10vw,76px); font-style:italic; font-weight:800; line-height:.78; letter-spacing:0; text-transform:uppercase; text-decoration:none; transition:color .2s ease,transform .2s ease; display:block;}
.mobile-nav a:hover,.mobile-nav a:focus{color:#fff;transform:translateX(4px);outline:none;}
.mobile-nav .mobile-cta{margin-top:clamp(8px,2vh,18px); color:#7e212b; border:1.5px solid rgba(126,33,43,.7); padding:clamp(14px,2vh,20px) clamp(30px,6vw,54px); border-radius:999px; font-size:clamp(36px,8vw,62px); transition:background .22s ease,color .22s ease,transform .2s ease;}
.mobile-nav .mobile-cta:hover{background:rgba(126,33,43,.12);color:#ff2040;transform:none;}
.mobile-nav-close{position:absolute; top:clamp(18px,4vw,32px); right:clamp(18px,4vw,32px); width:48px;height:48px; display:flex;align-items:center;justify-content:center; background:none;border:0;cursor:pointer;padding:0;}
.mobile-nav-close i{display:block;width:24px;height:2px; background:#fff;border-radius:999px; position:absolute;}
.mobile-nav-close i:nth-child(1){transform:rotate(45deg);}
.mobile-nav-close i:nth-child(2){transform:rotate(-45deg);}
.burger-lines i{transition:width .22s ease,transform .25s ease,opacity .2s ease;}
.burger:hover .burger-lines i:nth-child(2){width:23px!important;}
.burger[aria-expanded="true"] .burger-lines i:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] .burger-lines i:nth-child(2){opacity:0;transform:scaleX(0);}
.burger[aria-expanded="true"] .burger-lines i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:767px){
  #glassHeader,#mobileNav{--m-safe-top:env(safe-area-inset-top,0px);--m-safe-bottom:env(safe-area-inset-bottom,0px);--m-safe-left:env(safe-area-inset-left,0px);--m-safe-right:env(safe-area-inset-right,0px)}
  html.mobile-nav-open,html.mobile-nav-open body{overflow:hidden}
  .header{top:calc(12px + var(--m-safe-top))!important; left:calc(14px + var(--m-safe-left))!important; right:calc(14px + var(--m-safe-right))!important; height:56px!important;}
  .header::before{content:""; position:absolute; z-index:-1; top:calc(-12px - var(--m-safe-top)); left:calc(-14px - var(--m-safe-left)); right:calc(-14px - var(--m-safe-right)); bottom:-22px; pointer-events:none; background:linear-gradient(180deg,rgba(2,3,5,.86) 0%,rgba(2,3,5,.62) 58%,rgba(2,3,5,0) 100%); opacity:0; transition:opacity .3s ease;}
  .header.is-scrolled::before{opacity:1}
  .brand-logo,.brand-logo.liquid-logo{height:52px!important;min-width:0!important;padding:0 6px!important}
  .brand-logo .logo-stack{width:112px!important;height:34px!important}
  .brand-logo img{height:34px!important;max-width:112px!important}
  .burger,.liquid-pill.liquid-burger{width:52px!important;height:52px!important}
  .mobile-nav{padding:calc(84px + var(--m-safe-top)) calc(24px + var(--m-safe-right)) calc(32px + var(--m-safe-bottom)) calc(24px + var(--m-safe-left)); justify-content:center; overflow-y:auto; overscroll-behavior:contain; visibility:hidden; transition:opacity .32s ease,visibility 0s linear .32s;}
  .mobile-nav.open{visibility:visible;transition:opacity .32s ease,visibility 0s linear 0s}
  .mobile-nav nav{gap:clamp(6px,1.6svh,14px)}
  .mobile-nav a{display:flex;align-items:center;justify-content:center; min-height:52px; font-size:clamp(40px,12.5vw,60px); line-height:1; color:rgba(255,255,255,.86);}
  .mobile-nav a:hover,.mobile-nav a:focus{transform:none}
  .mobile-nav a:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:4px;border-radius:8px}
  .mobile-nav .mobile-cta{margin-top:clamp(14px,3svh,26px); min-height:56px; padding:0 34px; font-size:clamp(26px,8vw,36px); color:#fff; background:var(--red); border-color:rgba(255,255,255,.16); box-shadow:0 12px 34px rgba(126,33,43,.4),inset 0 1px 0 rgba(255,255,255,.22);}
  .mobile-nav .mobile-cta:hover,.mobile-nav .mobile-cta:focus{color:#fff;background:#93303b}
  .mobile-nav-close{display:none}
}

/* ── Internal-page additions (not on the homepage) ──────────────────────────
   Active page: reuses the homepage's own hover treatment so the approved
   styling is unchanged, just persistent on the current page. */
.navpill a[aria-current="page"]:not(.cta),.liquid-nav a[aria-current="page"]:not(.cta){color:#fff !important;background:var(--lg-tint-hover) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.18) !important}
.mobile-nav a[aria-current="page"]:not(.mobile-cta){color:#fff}
@media (max-width:767px){
  #glassHeader a,#glassHeader button,#mobileNav a,#mobileNav button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
}