/* ===== zintex26-header ===== */
.z26-header{
  /* Brand */
  --z-navy:#003366; --z-white:#FFFFFF; --z-yellow:#FFE500; --z-yellow-hover:#F5D800;
  /* Supporting (pending your decision on extra colors) */
  --z-navy-900:#0A1A2E; --z-blue:#1F5FA8; --z-ink:#1B2430; --z-muted:#5B6675;
  --z-line:#DDE3EA; --z-surface:#F4F7FA; --z-ivory:#FBF8F3; --z-ivory-line:#E7E1D7;

  position:sticky; top:0; z-index:1000;
  font-family:"Open Sans",system-ui,sans-serif; font-weight:500; color:var(--z-ink);
}
.z26-header *,.z26-header *::before,.z26-header *::after{box-sizing:border-box}
.z26-header a{text-decoration:none}
.z26-header :focus-visible{outline:3px solid var(--z-blue); outline-offset:2px; border-radius:6px}

/* ---------- Top bar ---------- */
.z26-header__bar{
  position:relative; z-index:1;
  max-width:1264px; margin:0 auto; height:60px; padding:0 16px;
  display:flex; align-items:center; gap:24px;
}
.z26-header__logo{display:flex; align-items:center; flex:none}
.z26-header__logo img{display:block; height:36px; width:auto}
.z26-header__logo-text{font-weight:800; font-size:22px; color:var(--z-navy)}

.z26-nav{display:none; flex:1}
.z26-header__actions{margin-left:auto; display:flex; align-items:center; gap:20px}
.z26-header__phone{display:flex; align-items:center; justify-content:center; gap:8px; width:44px; height:44px; border-radius:999px; background:var(--z-surface); color:var(--z-navy); font-weight:700; font-size:15px}
.z26-header__phone-text{display:none}
.z26-header__cta{display:none}

/* Buttons */
.z26-header .z26-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 22px;
  border-radius:999px; background:var(--z-yellow); color:var(--z-navy);
  font-weight:700; font-size:15px; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.z26-header .z26-btn:hover{background:var(--z-yellow-hover); transform:translateY(-1px)}
.z26-header .z26-btn--secondary{background:var(--z-navy); color:var(--z-white)}
.z26-header .z26-btn--secondary:hover{background:var(--z-navy-900)}

/* ---------- Mobile thumb bar (always pinned to the bottom of the screen) ---------- */
.z26-thumb{
  position:fixed; z-index:1001; left:12px; right:12px; top:auto;
  bottom:max(12px, env(safe-area-inset-bottom));
  height:64px; padding:0 8px; border-radius:20px;
  display:flex; align-items:center; gap:6px;
}
.z26-thumb__btn{
  flex:1; height:52px; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font:700 12px "Open Sans",sans-serif;
}
.z26-thumb__cta{
  flex:2; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--z-yellow); color:var(--z-navy); font-weight:700; font-size:16px;
}
/* Leave room at the bottom of the page for the thumb bar */
@media (max-width:959px){
  body:has(.z26-thumb){padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* ---------- Mobile menu panel ---------- */
.z26-drawer{position:fixed; inset:0; z-index:1100}
.z26-drawer[hidden]{display:none}
.z26-drawer__backdrop{position:absolute; inset:0; background:rgba(10,26,46,.5); opacity:0; transition:opacity .2s ease}
.z26-drawer__panel{
  position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow-y:auto;
  border-radius:24px 24px 0 0; background:var(--z-white);
  padding:16px 20px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .25s ease;
  box-shadow:0 -12px 40px rgba(10,26,46,.18);
}
.z26-drawer.is-open .z26-drawer__backdrop{opacity:1}
.z26-drawer.is-open .z26-drawer__panel{transform:translateY(0)}
.z26-drawer__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.z26-drawer__logo{height:32px; width:auto; display:block}
.z26-drawer__close{width:44px; height:44px; border:0; border-radius:999px; background:var(--z-surface); color:var(--z-navy); display:flex; align-items:center; justify-content:center; cursor:pointer}
.z26-drawer__list,.z26-drawer__sub{list-style:none; margin:0; padding:0}
.z26-drawer__list > li{border-bottom:1px solid var(--z-line)}
.z26-drawer__link{
  display:flex; align-items:center; justify-content:space-between; min-height:56px;
  font-weight:700; font-size:18px; color:var(--z-ink); cursor:pointer; list-style:none;
}
.z26-drawer__link::-webkit-details-marker{display:none}
.z26-drawer__chev{transition:transform .2s ease; color:var(--z-navy)}
.z26-drawer__group[open] .z26-drawer__chev{transform:rotate(180deg)}
.z26-drawer__sub{padding:0 0 12px 12px}
.z26-drawer__sublink{display:flex; align-items:center; min-height:44px; font-size:16px; color:var(--z-muted)}
.z26-drawer__sublink[aria-current="page"],.z26-drawer__link[aria-current="page"]{color:var(--z-navy)}
.z26-drawer__foot{display:flex; flex-direction:column; gap:10px; margin-top:20px}
.z26-drawer__foot .z26-btn{min-height:52px; font-size:16px}
html.z26-lock,html.z26-lock body{overflow:hidden}

/* ---------- Style: Clear Glass ---------- */
/* The frosted effect lives on a separate background layer (::before), never on the header itself.
   A blur filter on the header would make the thumb bar and menu panel pin to the header instead of the screen. */
.z26-header--glass{background:var(--z-white); border-bottom:1px solid var(--z-line); transition:background .2s ease, box-shadow .2s ease, border-color .2s ease}
.z26-header--glass::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  opacity:0; transition:opacity .2s ease;
}
.z26-header--glass.is-scrolled{
  background:transparent;
  border-bottom-color:rgba(221,227,234,.7);
  box-shadow:0 8px 24px rgba(10,26,46,.08);
}
.z26-header--glass.is-scrolled::before{opacity:1}
.z26-header--glass .z26-thumb{
  background:rgba(10,26,46,.62);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 40px rgba(10,26,46,.3);
}
.z26-header--glass .z26-thumb__btn{color:var(--z-white)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .z26-header--glass::before{background:var(--z-white)}
  .z26-header--glass .z26-thumb{background:rgba(10,26,46,.94)}
}

/* ---------- Style: Warm & Solid ---------- */
/* Warm uses brand colors only: navy text, yellow highlights, white/ivory grounds */
.z26-header--warm{--z-ink:var(--z-navy); color:var(--z-ink); background:var(--z-ivory); border-bottom:1px solid transparent; transition:box-shadow .2s ease, border-color .2s ease}
.z26-header--warm.is-scrolled{border-bottom-color:var(--z-ivory-line); box-shadow:0 6px 20px rgba(60,45,20,.08)}
.z26-header--warm .z26-btn{border-radius:12px; background:var(--z-navy); color:var(--z-white)}
.z26-header--warm .z26-btn:hover{background:var(--z-navy-900)}
.z26-header--warm .z26-btn--secondary{background:var(--z-white); color:var(--z-navy); box-shadow:inset 0 0 0 1px var(--z-navy)}
.z26-header--warm .z26-btn--secondary:hover{background:var(--z-ivory)}
.z26-header--warm .z26-header__phone{background:var(--z-white); box-shadow:inset 0 0 0 1px var(--z-ivory-line)}
.z26-header--warm .z26-thumb{
  left:0; right:0; bottom:0; height:auto; border-radius:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--z-white); border-top:1px solid var(--z-ivory-line);
}
.z26-header--warm .z26-thumb__btn{color:var(--z-navy)}
.z26-header--warm .z26-thumb__cta{border-radius:12px; background:var(--z-navy); color:var(--z-white)}
.z26-header--warm .z26-drawer__panel{background:var(--z-ivory)}
.z26-header--warm .z26-drawer__list > li{border-bottom-color:var(--z-ivory-line)}
.z26-header--warm .z26-drawer__close{background:var(--z-white)}

/* ---------- Desktop ---------- */
@media (min-width:960px){
  .z26-header__bar{height:76px; padding:0 32px; gap:32px}
  .z26-header__logo img{height:44px}

  .z26-nav{display:block}
  .z26-nav__list{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:4px}
  .z26-header--warm .z26-nav__list{justify-content:center}
  .z26-nav__item{position:relative}
  .z26-nav__link{
    display:flex; align-items:center; gap:6px; height:44px; padding:0 12px; border-radius:10px;
    color:var(--z-ink); font-weight:600; font-size:15px;
  }
  .z26-nav__link:hover,.z26-nav__item:focus-within > .z26-nav__link{color:var(--z-navy); background:rgba(0,51,102,.06)}
  .z26-nav__item.is-active > .z26-nav__link,.z26-nav__link[aria-current="page"]{color:var(--z-navy); font-weight:700}
  .z26-nav__chev{transition:transform .15s ease}
  .z26-nav__item--parent:hover .z26-nav__chev,.z26-nav__item--parent:focus-within .z26-nav__chev{transform:rotate(180deg)}

  .z26-nav__sub{
    list-style:none; margin:0; padding:8px; position:absolute; top:calc(100% + 8px); left:0; min-width:240px;
    background:var(--z-white); border:1px solid var(--z-line); border-radius:14px;
    box-shadow:0 12px 40px rgba(10,26,46,.18);
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .z26-nav__sub::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
  .z26-nav__item--parent:hover > .z26-nav__sub,
  .z26-nav__item--parent:focus-within > .z26-nav__sub{opacity:1; visibility:visible; transform:translateY(0)}
  .z26-nav__sublink{display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:var(--z-ink); font-size:15px; font-weight:600}
  .z26-nav__sublink:hover,.z26-nav__sublink[aria-current="page"]{background:var(--z-surface); color:var(--z-navy)}
  .z26-header--warm .z26-nav__sub{border-color:var(--z-ivory-line)}
  .z26-header--warm .z26-nav__sublink:hover{background:var(--z-ivory)}

  .z26-header__phone{width:auto; height:auto; background:none !important; box-shadow:none !important}
  .z26-header__phone-text{display:inline}
  .z26-header__cta{display:inline-flex}

  .z26-thumb,.z26-drawer{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  .z26-header,.z26-header *,.z26-header::before{transition:none !important}
  .z26-header .z26-btn:hover{transform:none}
}