/* Vorp Energy site header. ONE header for every page (Andre, 2026-09-27): a static
   copy of the React navbar on the homepage (deploy/header/README in README.md).
   Values mirror the Tailwind classes in the bundle: h-20, container px-4, gap-6/8,
   text-sm/base, text-white/80, bg-[#0A0E14]/95 backdrop-blur-md, button h-11 px-8. */
.vh-wrap{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform .25s}
.vh-wrap.vh-hide{transform:translateY(-100%)}
.vh{font-family:Inter,system-ui,sans-serif;background:transparent;border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s;color:#fff}
.vh.vh-solid,.vh-open .vh{background:rgba(10,14,20,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.1)}
.vh-in{width:100%;max-width:1400px;margin:0 auto;padding:0 16px;height:80px;display:flex;align-items:center;justify-content:space-between}
.vh-logo{display:flex;align-items:center;transition:opacity .15s}
.vh-logo:hover{opacity:.8}
.vh-logo img{height:36px;width:auto;display:block}
@media(min-width:1024px){.vh-logo img{height:40px}}
.vh-links{display:none;align-items:center;gap:24px}
@media(min-width:768px){.vh-links{display:flex}}
@media(min-width:1024px){.vh-links{gap:32px}}
.vh-links a,.vh-ddbtn{font:500 14px/1.5 Inter,system-ui,sans-serif;color:rgba(255,255,255,.8);text-decoration:none;transition:color .15s;background:none;border:0;padding:0;cursor:pointer}
@media(min-width:1024px){.vh-links a,.vh-ddbtn{font-size:16px}}
.vh-links a:hover,.vh-ddbtn:hover{color:#fff}
.vh-links a.vh-cur,.vh-panel a.vh-cur{color:hsl(204 100% 44%)}
.vh-dd{position:relative}
.vh-ddbtn{display:flex;align-items:center;gap:4px}
.vh-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:16rem;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);padding:4px;z-index:50}
.vh-dd.open .vh-menu{display:block}
.vh-menu a{display:block;font-size:14px;color:#0A0E14;padding:6px 8px;border-radius:2px;white-space:nowrap}
.vh-menu a:hover{background:#f1f5f9;color:#0A0E14}
.vh-menu hr{border:0;border-top:1px solid #f1f5f9;margin:4px -4px}
.vh-tel{display:none;align-items:center;gap:8px;white-space:nowrap}
@media(min-width:1024px){.vh-tel{display:flex}}
.vh-links .vh-cta,.vh-panel .vh-cta{display:none;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 32px;border-radius:2px;background:hsl(204 100% 44%);color:#fff;font:500 14px/1 "Barlow Condensed",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:filter .15s}
.vh-links .vh-cta:hover,.vh-panel .vh-cta:hover{filter:brightness(1.1);color:#fff}
@media(min-width:1024px){.vh-links .vh-cta{display:inline-flex}}
.vh-mob{display:flex;align-items:center;gap:20px}
@media(min-width:768px){.vh-mob{display:none}}
.vh-mob a{color:#fff;display:flex}
.vh-mob a:hover{color:hsl(204 100% 44%)}
.vh-burger{background:none;border:0;padding:0;color:#fff;cursor:pointer;display:flex}
.vh-burger .vh-i-x{display:none}
.vh-open .vh-burger .vh-i-menu{display:none}
.vh-open .vh-burger .vh-i-x{display:block}
.vh-panel{padding:16px 16px;border-top:1px solid rgba(255,255,255,.1);background:rgba(10,14,20,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 80px);overflow-y:auto}
.vh-panel[hidden]{display:none}
@media(min-width:768px){.vh-panel{display:none}}
.vh-panel a{font:500 16px/1.5 Inter,system-ui,sans-serif;color:rgba(255,255,255,.8);text-decoration:none;padding:8px 0}
.vh-panel a:hover{color:#fff}
.vh-pprod{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;display:flex;flex-direction:column}
.vh-pprod p{margin:0 0 8px;font:500 16px/1.5 Inter,system-ui,sans-serif;color:#fff}
.vh-pprod a{padding:8px 0 8px 16px}
.vh-pprod hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:8px 0}
.vh-panel .vh-cta-full{display:inline-flex;width:100%}
/* pages without a full-bleed hero push their content below the fixed bar */
body.vh-pad{padding-top:80px}
