/* ============================================================
   B3X GRAPHICS — THE global header (b3x-core assets/chrome.css)

   The signed-off HOMEPAGE header, nav panel and page transition, rebuilt as clean markup
   (inc/chrome.php b3x_header()) for EVERY page: homepage, about, contact, the-lab, projects,
   every /work/<slug>/ page, and the WooCommerce shop (a normal WordPress page that enqueues
   this file + chrome.js). Every value below was measured off the signed-off homepage
   (Elementor header 2529 + the refresh layer) and proven pixel-identical by
   tools/chrome-*.cjs (see tools/chrome-REPORT.md).

   Standalone on purpose:
   - no dependency on body.cc-page, the engine's root vars, styles.css or home.css;
   - its own font families (B3XH ...): the homepage redeclares 'Aileron'/'Safiro' with
     size-adjust, the inner pages do not, so the same family name renders differently per
     page. These aliases carry the homepage's size-adjust and point at the same files
     (assets/fonts/), so the header is identical everywhere;
   - every rule is scoped under the .b3xh root (specificity 0,2,0 or more) and sets each
     property a theme reset could touch (Hello Elementor: a, button, img, h4...), so page CSS
     around it cannot leak in.
   Breakpoints = the homepage's: phone <=767, tablet 768-1024, laptop 1025-1366, desktop 1367+.
   Editor (html.static): bar sits under the editor toolbar, never floats, glass always on (white
   logo stays readable on any canvas), nav panel + transition off, no pulse.
   ============================================================ */

@font-face{font-family:'B3XH Aileron';src:url('fonts/aileron-700.woff2') format('woff2');font-weight:600 900;font-style:normal;font-display:swap;size-adjust:98%;}
@font-face{font-family:'B3XH Aileron';src:url('fonts/aileron-400.woff2') format('woff2');font-weight:100 599;font-style:normal;font-display:swap;size-adjust:98%;}
@font-face{font-family:'B3XH FA';src:url('home/fonts/fa-solid-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:block;}   /* Font Awesome 5 Free solid: the status dot (fa-circle) */
@font-face{font-family:'B3XH Safiro';src:url('fonts/safiro-bold-webfont.woff2') format('woff2');font-weight:500 900;font-style:normal;font-display:swap;size-adjust:94%;}

/* ---- root: no box of its own (everything inside is fixed or absolute) ---- */
.b3xh{
  --b3xh-side:clamp(20px,2.2vw,50px);   /* the homepage gutter */
  --b3xh-max:1820px;                    /* the homepage bar max width */
  --b3xh-sky:#04b5ff;
  --b3xh-glass:linear-gradient(155deg,rgba(9,26,54,0.66) 0%,rgba(3,13,30,0.74) 100%);
  display:block;position:static;margin:0;padding:0;border:0;
  font-family:'B3XH Aileron',sans-serif;font-size:16px;font-weight:400;font-style:normal;line-height:1.5;
  color:#fff;letter-spacing:normal;text-transform:none;text-align:left;text-indent:0;
  text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.b3xh *,.b3xh *::before,.b3xh *::after{box-sizing:border-box;}
.b3xh .b3xh-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}

/* ---- skip link (the homepage's Hello theme screen-reader-text) ---- */
.b3xh .b3xh-skip{position:absolute!important;top:-10000em;left:auto;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0,0,0,0);word-wrap:normal!important;}
.b3xh .b3xh-skip:focus{top:5px;left:5px;z-index:100000;display:block;width:auto;height:auto;margin:0;padding:12px 24px;
  clip:auto!important;clip-path:none;background-color:#eee;color:#333;font-size:1rem;line-height:normal;text-decoration:none;}

/* =========================================================
   BAR (tablet + desktop; phones further down)
   ========================================================= */
.b3xh .b3xh-bar{position:fixed;top:0;right:var(--b3xh-side);bottom:auto;left:var(--b3xh-side);z-index:99;
  width:auto;max-width:var(--b3xh-max);height:auto;min-height:0;margin:0 auto;
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0;
  padding:6px 6px 6px 18px;border:1px solid transparent;border-radius:26px;
  background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible;
  transition:left .45s cubic-bezier(.16,1,.3,1),right .45s cubic-bezier(.16,1,.3,1),top .45s ease,
             max-width .45s ease,background-color .45s ease,box-shadow .45s ease,border-color .45s ease;}
/* floating glass once scrolled (chrome.js), and from the top on light project pages so the white
   logo stays legible on white */
.b3xh .b3xh-bar.is-float,body.proj-light .b3xh .b3xh-bar{top:12px;
  background:var(--b3xh-glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.14);box-shadow:0 18px 48px rgba(0,6,20,0.34);}
/* ...and from the top on EVERY project page, not just the light one. is-float is only added on
   scroll and proj-light is Spurs alone, so the other five project pages had a bare bar sitting on
   the artwork until you scrolled. Tablet and desktop only: the phone block below already paints
   the glass from the top sitewide, and must keep its own top:10px. */
@media (min-width:768px){
  body.cc-page-work .b3xh .b3xh-bar{top:12px;
    background:var(--b3xh-glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid rgba(255,255,255,0.14);box-shadow:0 18px 48px rgba(0,6,20,0.34);}
}

/* left group: logo + burger */
.b3xh .b3xh-left{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;
  gap:50px;width:40%;flex:0 1 auto;min-width:0;margin:0;padding:0;}
.b3xh .b3xh-logo{position:relative;display:flex;align-items:center;width:55px;max-width:55px;flex:0 1 auto;min-width:0;margin:0;padding:0;}
.b3xh .b3xh-logo a{display:flex;align-items:center;margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;text-decoration:none;}
.b3xh .b3xh-logo img{display:block;width:auto;height:54px;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;object-fit:contain;}

/* burger: two white lines 10px apart, to an X when open */
.b3xh .b3xh-burgerw{position:relative;z-index:100;align-self:center;flex:0 1 auto;min-width:0;width:60px;height:60px;margin:0 0 0 -34px;padding:0;}
.b3xh .b3xh-burger{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;margin:0;padding:15px;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#fff;font:inherit;line-height:1;cursor:pointer;-webkit-appearance:none;appearance:none;backface-visibility:hidden;transition:.4s;}
.b3xh .b3xh-burger:hover,.b3xh .b3xh-burger:focus,.b3xh .b3xh-burger:active{background:transparent;color:#fff;border:0;}
.b3xh .b3xh-lines{position:relative;display:flex;flex:none;width:100%;height:2px;margin:0;padding:0;background:transparent;transition:all .4s ease;}
.b3xh .b3xh-lines::before,.b3xh .b3xh-lines::after{content:'';position:absolute;z-index:1;left:0;bottom:auto;width:100%;height:2px;
  margin:0;background:#fff;transition:top .28s cubic-bezier(.4,0,.2,1),transform .28s cubic-bezier(.4,0,.2,1);}
.b3xh .b3xh-lines::before{top:-5px;}
.b3xh .b3xh-lines::after{top:5px;}
.b3xh.is-open .b3xh-lines::before{top:0;transform:rotate(45deg);}
.b3xh.is-open .b3xh-lines::after{top:0;transform:rotate(-45deg);}

/* right group: status, Creativity tag, Contact (or the page's own slot content) */
.b3xh .b3xh-right{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:flex-end;
  gap:0;width:60%;flex:0 1 auto;min-width:0;margin:0;padding:10px;}
.b3xh .b3xh-status{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:flex-end;
  gap:10px;width:100%;flex:0 1 auto;min-width:0;margin:0;padding:0 26px 0 0;text-align:right;}
.b3xh .b3xh-dotw{position:relative;display:block;align-self:center;flex:0 1 auto;min-width:0;max-width:100%;margin:0;padding:0;
  font-family:'B3XH Aileron',sans-serif;font-size:16px;font-weight:400;line-height:24px;}
.b3xh .b3xh-dotc{display:block;margin:0;padding:0;text-align:center;}
.b3xh .b3xh-doti{display:inline-block;margin:0;padding:0;font-size:16px;line-height:1;color:var(--b3xh-sky);text-align:center;vertical-align:baseline;}
.b3xh .b3xh-dot{position:relative;display:inline-block;width:1em;height:1em;vertical-align:baseline;transform-origin:center;
  animation:b3xh-pulse 1.5s ease-in-out infinite;}
.b3xh .b3xh-dot{font-family:'B3XH FA';font-weight:900;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased;}
.b3xh .b3xh-dot::before{content:'\f111';position:absolute;left:50%;transform:translateX(-50%);}
@keyframes b3xh-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.7);}}
.b3xh .b3xh-avail{position:relative;display:block;align-self:center;flex:0 1 auto;min-width:0;max-width:100%;margin:0;padding:0;
  font-family:'B3XH Aileron',sans-serif;font-size:16px;font-weight:700;font-style:normal;line-height:1;
  color:#fff;text-align:start;text-transform:none;letter-spacing:normal;white-space:normal;}
.b3xh .b3xh-tag{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:3px;width:592px;flex:0 1 auto;min-width:0;margin:0;padding:0;}
.b3xh .b3xh-crtag{display:block;width:auto;height:22px;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;}
.b3xh .b3xh-slot{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:flex-end;
  gap:3px;width:440px;flex:0 1 auto;min-width:0;min-height:54px;margin:0;padding:0;}
.b3xh .b3xh-slotw{position:relative;display:block;align-self:center;flex:0 1 auto;min-width:0;max-width:100%;margin:0;padding:0;
  font-family:'B3XH Aileron',sans-serif;font-size:16px;font-weight:400;line-height:24px;text-align:center;}

/* Contact: navy pill, sky edge, draw-around line on hover, trailing arrow */
.b3xh .b3xh-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:9px;margin:0;padding:14px 30px;
  border:1px solid rgba(4,181,255,.5);border-radius:100px;background:#031b3d;background-image:none;
  box-shadow:0 5px 20px rgba(0,0,0,.15);outline:0;
  font-family:'B3XH Safiro',sans-serif;font-size:16px;font-weight:700;font-style:normal;line-height:1.5;
  color:#fff;text-transform:capitalize;letter-spacing:.02em;text-decoration:none;text-align:center;white-space:normal;
  vertical-align:baseline;overflow:visible;cursor:pointer;transition:.5s;}
.b3xh .b3xh-cta:hover,.b3xh .b3xh-cta:focus,.b3xh .b3xh-cta:active,.b3xh .b3xh-cta:visited{color:#fff;background:#031b3d;text-decoration:none;}
.b3xh .b3xh-arrow{display:inline-flex;margin:0;padding:0;transition:transform .35s cubic-bezier(.16,1,.3,1);}
.b3xh .b3xh-arrow svg{display:block;width:15px;height:15px;}
.b3xh .b3xh-cta:hover .b3xh-arrow{transform:translateX(4px);}
.b3xh .b3xh-line{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;z-index:2;
  filter:drop-shadow(0 0 1.4px rgba(4,181,255,0.55));}
.b3xh .b3xh-line rect{fill:none;stroke:url(#b3xh-btnstroke);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:butt;
  stroke-dasharray:0 200;stroke-dashoffset:-50;
  transition:stroke-dasharray .72s cubic-bezier(.45,0,.25,1),stroke-dashoffset .72s cubic-bezier(.45,0,.25,1);}
.b3xh .b3xh-cta:hover .b3xh-line rect{stroke-dasharray:106 200;stroke-dashoffset:3;}

/* keyboard focus = the homepage's (Hello theme) ring */
.b3xh a:focus-visible,.b3xh button:focus-visible{outline:2px solid #000;outline-offset:2px;box-shadow:0 0 0 4px #fff;}
.b3xh .b3xh-cta:focus-visible{box-shadow:0 5px 20px rgba(0,0,0,.15);}

/* ---- laptop 1025-1366 ---- */
@media (max-width:1366px) and (min-width:768px){
  .b3xh .b3xh-right{width:90%;}
  .b3xh .b3xh-status{width:67%;}
}
/* ---- tablet 768-1024 ---- */
@media (max-width:1024px) and (min-width:768px){
  .b3xh .b3xh-left{width:25%;}
  .b3xh .b3xh-right{width:75%;gap:14px;}
  .b3xh .b3xh-status{width:694px;}
  .b3xh .b3xh-tag{width:550px;}
  .b3xh .b3xh-slot{width:350px;justify-content:center;min-height:41.5px;}
  .b3xh .b3xh-crtag{height:18px;}
  .b3xh .b3xh-cta{font-size:13px;padding:10px 20px;}
}
@media (max-width:1024px){
  .b3xh .b3xh-left{gap:30px;}
  .b3xh .b3xh-logo{width:40px;max-width:40px;}
  .b3xh .b3xh-logo img{height:44px;}
  .b3xh .b3xh-dotc{margin-top:-5px;}
  .b3xh .b3xh-doti{font-size:12px;}
}

/* =========================================================
   PHONE <=767: logo left, status, burger on the RIGHT. Glass from the top.
   (the two groups dissolve so the bar lays the items out itself)
   ========================================================= */
@media (max-width:767px){
  .b3xh .b3xh-bar,.b3xh .b3xh-bar.is-float,body.proj-light .b3xh .b3xh-bar{top:10px;right:10px;left:10px;z-index:999;
    justify-content:space-between;align-items:stretch;gap:10px;padding:12px 10px 12px 14px;
    background:var(--b3xh-glass);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid rgba(255,255,255,0.14);box-shadow:0 18px 48px rgba(0,6,20,0.34);
    transition:left .45s cubic-bezier(.16,1,.3,1),right .45s cubic-bezier(.16,1,.3,1),top .45s ease,
               background-color .45s ease,box-shadow .45s ease,border-color .45s ease;}
  .b3xh .b3xh-left,.b3xh .b3xh-right{display:contents;}
  .b3xh .b3xh-logo{order:0;align-self:center;}
  .b3xh .b3xh-logo a{justify-content:center;width:40px;}
  .b3xh .b3xh-logo img{height:40px;}
  .b3xh .b3xh-status{order:1;width:64%;padding:0;justify-content:center;}
  .b3xh .b3xh-tag{display:none;}
  .b3xh .b3xh-slot{display:none;}
  .b3xh .b3xh-slot.b3xh-slot--custom{display:flex;order:2;width:auto;min-height:0;}
  .b3xh .b3xh-burgerw{order:3;width:30px;height:30px;margin:0;}
  .b3xh .b3xh-burger{width:30px;height:30px;padding:4px;}
  .b3xh .b3xh-avail{font-size:14.6px;}
}

/* =========================================================
   NAV PANEL (glass dropdown under the bar; chrome.js sets top/left on open)
   ========================================================= */
.b3xh .b3xh-nav{position:fixed;top:0;left:0;z-index:9990;display:flex;flex-direction:column;gap:2px;
  min-width:300px;max-width:none;margin:0;padding:12px;border-radius:22px;border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(155deg,rgba(9,26,54,0.68) 0%,rgba(3,13,30,0.78) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 24px 60px rgba(0,6,20,0.5);
  opacity:0;transform:translateY(-10px) scale(.98);transform-origin:top left;pointer-events:none;visibility:hidden;
  transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s;}
.b3xh .b3xh-nav.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear 0s;}
.b3xh .b3xh-link{display:flex;align-items:center;margin:0;padding:13px 26px;border:0;border-radius:16px;background:transparent;box-shadow:none;
  font-family:'B3XH Aileron',sans-serif;font-size:32px;font-weight:700;font-style:normal;line-height:1;
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:#fff;text-shadow:0 1px 10px rgba(0,6,20,0.6),0 0 1px rgba(0,6,20,0.5);
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s ease,transform .3s ease,background-color .25s ease,color .25s ease,padding-left .25s ease;}
.b3xh .b3xh-nav.is-open .b3xh-link{opacity:1;transform:none;}
.b3xh .b3xh-nav.is-open .b3xh-link:nth-child(1){transition-delay:.04s,.04s,0s,0s,0s;}
.b3xh .b3xh-nav.is-open .b3xh-link:nth-child(2){transition-delay:.09s,.09s,0s,0s,0s;}
.b3xh .b3xh-nav.is-open .b3xh-link:nth-child(3){transition-delay:.14s,.14s,0s,0s,0s;}
.b3xh .b3xh-nav.is-open .b3xh-link:nth-child(4){transition-delay:.19s,.19s,0s,0s,0s;}
.b3xh .b3xh-nav.is-open .b3xh-link:nth-child(5){transition-delay:.24s,.24s,0s,0s,0s;}
.b3xh .b3xh-nav.is-open .b3xh-link:nth-child(6){transition-delay:.29s,.29s,0s,0s,0s;}
/* Contact row: every device. Paul, 12 Oct (was phones only; desktop keeps the bar button too, so Contact appears twice there by design). The --phone class is now just a hook, it hides nothing. */
.b3xh .b3xh-link--phone{display:flex;}
.b3xh .b3xh-link:visited,.b3xh .b3xh-link:active,.b3xh .b3xh-link:focus{color:#fff;text-decoration:none;}
.b3xh .b3xh-link[aria-current]{color:var(--b3xh-sky);}
.b3xh .b3xh-link:hover{background-color:rgba(4,181,255,.14);color:var(--b3xh-sky);padding-left:34px;}
@media (max-width:767px){
  .b3xh .b3xh-link{justify-content:center;text-align:center;}
  .b3xh .b3xh-link:hover{padding-left:26px;}
}

/* =========================================================
   PAGE TRANSITION (Elementor Pro's page swipe; 6 Oct sped up at Paul's request: kit was 850ms swipes + .5s hold, now 450ms + .15s)
   load: the overlay slides up off the page (CSS only, so it can never stay over the page);
   exit: chrome.js slides it in from below, then navigates.
   ========================================================= */
.b3xh .b3xh-pt{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;margin:0;padding:0;
  background-color:#022656;animation-fill-mode:both;animation-duration:450ms;animation-timing-function:cubic-bezier(.65,0,.35,1);}
.b3xh .b3xh-pt__logo{position:absolute;display:block;width:110px;height:auto;max-width:none;margin:0;opacity:0;}
.b3xh .b3xh-pt--entering{animation-name:b3xh-pt-out;animation-delay:.15s;}
.b3xh .b3xh-pt--entering .b3xh-pt__logo{animation:b3xh-pt-fade .25s both;transition:none;}
.b3xh .b3xh-pt--exiting{animation-name:b3xh-pt-in;animation-delay:0s;}
.b3xh .b3xh-pt--exiting .b3xh-pt__logo{opacity:1;transition:.25s all;transition-delay:450ms;}
.b3xh .b3xh-pt--entered{display:none;}
@keyframes b3xh-pt-out{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-100%,0);visibility:visible}}
@keyframes b3xh-pt-in{from{transform:translate3d(0,100%,0);visibility:visible}to{transform:translate3d(0,0,0)}}
@keyframes b3xh-pt-fade{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .b3xh .b3xh-pt{display:none;}
  .b3xh .b3xh-dot{animation:none;}
  .b3xh .b3xh-nav,.b3xh .b3xh-link{transition:none!important;}
  .b3xh .b3xh-nav .b3xh-link{opacity:1;transform:none;}
  .b3xh .b3xh-lines::before,.b3xh .b3xh-lines::after,.b3xh .b3xh-line rect{transition:none;}
}

/* =========================================================
   EDITOR (html.static): the bar scrolls with the page under the 54px editor toolbar, never
   floats, and keeps its glass so the white logo reads on any canvas. No menu, no swipe, no pulse.
   ========================================================= */
html.static .b3xh .b3xh-pt{display:none!important;}
html.static .b3xh .b3xh-nav{display:none!important;}
html.static .b3xh .b3xh-dot{animation:none!important;}
html.static .b3xh .b3xh-bar{position:absolute;top:54px;transition:none;
  background:var(--b3xh-glass);border:1px solid rgba(255,255,255,0.14);}
html.static body.proj-light .b3xh .b3xh-bar{top:66px;}
@media (max-width:767px){html.static .b3xh .b3xh-bar,html.static body.proj-light .b3xh .b3xh-bar{top:64px;}}

/* =========================================================
   QA 13-10-26: tap targets and the tablet status line
   ========================================================= */
/* phone burger: the visible two lines stay 22px, the tap target grows 30 -> 44
   by letting the absolutely positioned button overflow its 30px slot, so the
   bar layout does not move */
@media (max-width:767px){
  .b3xh .b3xh-burger{top:-7px;left:-7px;width:44px;height:44px;padding:11px;}
}
/* tablet portrait: "Available for new projects" was wrapping onto two lines */
@media (max-width:1024px) and (min-width:768px){
  .b3xh .b3xh-avail{white-space:nowrap;font-size:14px;}
}