/* header v4 (Nov 4 2026): self-contained so it works on every page */
.nav.hdr4{--hn:#0B2545;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:20px;flex-wrap:nowrap;padding:12px max(4vw,16px);min-height:76px;background:rgba(11,37,69,.88);-webkit-backdrop-filter:saturate(170%) blur(16px);backdrop-filter:saturate(170%) blur(16px);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px -14px rgba(11,37,69,.6);font-family:Inter,system-ui,sans-serif;color:#fff;box-sizing:border-box}
.nav.hdr4 *{box-sizing:border-box}
.nav.hdr4 .logo{display:block;flex:none;position:relative;line-height:0}
.nav.hdr4 .logo img{height:50px;width:auto;display:block}
.nav.hdr4 .nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav.hdr4 .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:#fff;text-decoration:none;font:600 15.5px Inter,system-ui,sans-serif;letter-spacing:-.005em;background:none}
.nav.hdr4 .nav-links a:hover{background:rgba(255,255,255,.10)}
.nav.hdr4 .nav-links a.on{background:rgba(255,255,255,.16);box-shadow:inset 0 -2px 0 #FF7A00}
.nav.hdr4 .nav-links a:focus-visible,.nav.hdr4 .nav-cta a:focus-visible,.nav.hdr4 .nav-tog:focus-visible,.nav.hdr4 .logo:focus-visible{outline:2px solid #FFB46E;outline-offset:2px}
.nav.hdr4 .nav-tel-m{display:none!important}
.nav.hdr4 .nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav.hdr4 .nav-tel{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;font:700 15px Inter,system-ui,sans-serif;white-space:nowrap}
.nav.hdr4 .cta2{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;background:#FF7A00;color:#fff;text-decoration:none;font:800 15.5px Inter,system-ui,sans-serif;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px -6px rgba(255,122,0,.7)}
.nav.hdr4 .nav-tog{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav.hdr4 .nav-tog span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
.nav.hdr4 button:active,.nav.hdr4 .nav-cta a:active,.nav.hdr4 .nav-links a:active{transform:scale(.96)}
.nav.hdr4.compact{min-height:60px;padding-top:6px;padding-bottom:6px}.nav.hdr4.compact .logo img{height:38px}
@media(max-width:1100px){.nav.hdr4 .nav-tel{display:none}}
@media(max-width:900px){
.nav.hdr4{min-height:64px;padding:8px 16px;gap:10px}.nav.hdr4 .logo img{height:40px}.nav.hdr4.compact{min-height:56px}.nav.hdr4.compact .logo img{height:34px}
.nav.hdr4 .nav-cta{margin-left:auto}.nav.hdr4 .nav-tog{display:inline-flex}
.nav.hdr4 .nav-links{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:10px 12px 14px;background:rgba(11,37,69,.96);-webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 18px 30px -12px rgba(0,0,0,.5);max-height:calc(100vh - 64px);overflow:auto}
.nav.hdr4.open .nav-links{display:flex}
.nav.hdr4 .nav-links a{min-height:52px;font-size:17px;padding:0 16px}
.nav.hdr4 .nav-tel-m{display:flex!important;margin-top:6px;border:1px solid rgba(255,255,255,.3)}
}
@media(max-width:380px){.nav.hdr4 .logo img{height:34px}.nav.hdr4 .cta2{padding:0 12px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.nav.hdr4 *{transition:none!important}.nav.hdr4 button:active,.nav.hdr4 .nav-cta a:active,.nav.hdr4 .nav-links a:active{transform:none}}

/* shared: logo flick + scroll brush (also in glass.css) */
.nav .logo.wm-img{isolation:isolate}
.nav .logo b.wm-s:after,.nav .logo.wm-img:after{content:"";position:absolute;pointer-events:none;background:url(assets/brush-flick.svg) left center/100% 100% no-repeat;opacity:0;clip-path:inset(0 100% 0 0);animation:flick 7s cubic-bezier(.55,.02,.22,1) .25s infinite}
.nav .logo.wm-img:after{left:64%;width:42%;top:0%;height:82%}
@keyframes flick{0%{opacity:0;clip-path:inset(0 100% 0 0)}1.2%{opacity:1}12%{clip-path:inset(0 0 0 0);opacity:1}18%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}
.brush{position:absolute;left:0;right:0;bottom:-9px;height:9px;pointer-events:none;z-index:0}
.brush svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.brush .bh{position:absolute;top:0;left:0;width:9px;height:9px;margin-left:-6px;border-radius:2px 50% 50% 2px;background:radial-gradient(circle at 60% 38%,#9cc4f2 0,#3a78c4 45%,#1d4f8f 100%);opacity:.9;transform:translateX(0);will-change:transform}
@media(prefers-reduced-motion:reduce){.brush .bh{display:none}}
@media(prefers-reduced-motion:reduce){.nav .logo.wm-img:after{animation:none;opacity:0}.brush .bh{display:none}}
/* no layout shift when compacting: reserve the lost height */
html{scroll-padding-top:84px}
.nav.hdr4.compact{margin-bottom:16px}
@media (max-width:900px){html{scroll-padding-top:72px}.nav.hdr4.compact{margin-bottom:8px}}
.nav.hdr4 .logo{min-height:44px;display:inline-flex;align-items:center}
.pq-opt{min-height:44px}
@media (max-width:900px){.nav.hdr4 .nav-links{background:rgba(11,37,69,.985)}}
@media (max-width:440px){.nav.hdr4{padding:8px 12px;gap:8px}.nav.hdr4 .nav-cta{gap:8px}.nav.hdr4 .cta2{padding:0 12px;font-size:14px}.nav.hdr4 .logo{flex:0 1 auto;min-width:0}.nav.hdr4 .logo img{height:auto;max-height:36px;width:auto;max-width:100%}}
.pq-chip{min-height:44px;justify-content:center}.rm{min-width:44px;min-height:44px}
@media (max-width:600px){.row{gap:12px}.row b{white-space:normal;text-align:right;min-width:0;flex:0 1 58%}}
.area>*{min-width:0}.area iframe,.area img{max-width:100%}

/* header: emblem + Painter Hub wordmark + location line (Nov 11 2026) */
.nav.hdr4 .logo{display:inline-flex;align-items:center;gap:10px;line-height:normal}
.nav.hdr4 .logo img,.nav.hdr4 .logo img.logo-mark{height:50px;width:50px;object-fit:cover;object-position:left center;flex:none}
.nav.hdr4 .logo-word{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.15}
.nav.hdr4 .logo-name{font:800 16.5px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.nav.hdr4 .logo-loc{font:500 10.5px/1.2 Inter,system-ui,sans-serif;letter-spacing:.005em;color:rgba(255,255,255,.72);white-space:nowrap}
.nav.hdr4.compact .logo img{height:38px;width:38px}
.nav.hdr4.compact .logo-name{font-size:15px}
.nav.hdr4.compact .logo-loc{font-size:9.5px}
.nav.hdr4 .logo.wm-img:after{left:auto;right:-6%;width:58%;top:10%;height:42%}
@media(max-width:900px){
.nav.hdr4 .logo{gap:8px}
.nav.hdr4 .logo img{height:40px;width:40px}
.nav.hdr4 .logo-name{font-size:15px}
.nav.hdr4 .logo-loc{font-size:9.5px}
.nav.hdr4.compact .logo img{height:34px;width:34px}
}
@media(max-width:440px){
.nav.hdr4 .logo img{height:32px;width:32px;max-height:32px;max-width:32px}
.nav.hdr4 .logo-name{font-size:13.5px}
.nav.hdr4 .logo-loc{font-size:8.5px;white-space:normal;max-width:11.5em}
}
@media(max-width:380px){
.nav.hdr4 .logo img{height:30px;width:30px;max-height:30px;max-width:30px}
.nav.hdr4 .logo-name{font-size:13px}
.nav.hdr4 .logo-loc{font-size:8px}
}