/* ============================================================================
   COMPANY BAR — SINGLE SOURCE OF TRUTH
   Loaded by BOTH the home (public/index.html) and every Astro subpage
   (src/layouts/Base.astro). Identical markup in both places:

     <div class="page-hud">
       <div class="page-hud-row">
         <span class="page-hud-line"> 2026 © … · Creative Studio · EU · UK · … </span>
       </div>
     </div>

   Do NOT fork this into a per-page copy again — the duplicate copy is exactly
   what caused the bar to drift (home = wide pill, subpages = cramped 70ch box).
   The only per-context tweak lives in global.css: on mobile subpages the bar
   sits statically (they are scroll documents, unlike the home monolith).
   ============================================================================ */
.page-hud{position:fixed; inset:0; z-index:40; padding:1.5rem var(--pad-x);
  pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end}
.page-hud-row{display:flex; justify-content:space-between; align-items:center;
  pointer-events:none; gap:1rem}
.page-hud-row > *{pointer-events:auto}

/* the bar itself: black-glass pill, single line, spread across the width */
.page-hud-line{font-family:'JetBrains Mono',monospace; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  display:flex; align-items:center; gap:1rem;
  color:#fff; background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:.5rem .95rem; border-radius:999px; border:1px solid rgba(255,255,255,.08)}
.page-hud-line a{color:inherit; transition:color .3s ease}
.page-hud-line a:hover{color:#6cff0b}
.page-hud-gap{display:inline-block; width:2.6rem}

/* Arabic: keep the numbers/email/latin run left-to-right inside the RTL layout */
[dir="rtl"] .page-hud-line{direction:ltr; unicode-bidi:isolate}

@media (max-width:900px){
  .page-hud-line{font-size:.5rem; letter-spacing:.08em; line-height:1.7;
    max-width:100%; gap:.15rem .5rem; padding:.5rem .7rem}
}