/* =====================================================================
   OrbletiQ brand assets — shared by every page.
   Logo files live in /brand/logos and /brand/icons (see docs/brand-assets.md).
   Use these classes instead of re-styling logos per page.
   ===================================================================== */

:root {
  --brand-navy:  #0B1930;
  --brand-blue:  #0E95FF;
  --brand-cyan:  #22D3EE;
  --brand-white: #FFFFFF;
}

/* Logo link: <a class="site-logo site-logo--nav" href="./" aria-label="OrbletiQ – home">
   Images keep the SVG's own aspect ratio (height set, width auto) and are never cropped. */
.site-logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; }
.site-logo:hover { text-decoration: none; }
.site-logo img { display: block; width: auto; max-width: none; object-fit: contain; }

/* Navy navbar — brand/logos/01_header_dark_derived.svg */
.site-logo--nav img { height: 50px; }
/* Footer — same file, slightly smaller */
.site-logo--footer img { height: 44px; }
/* Light backgrounds — brand/logos/01_header_light_outlined.svg */
.site-logo--light img { height: 44px; }

@media (max-width: 1000px) { .site-logo--nav img { height: 46px; } }
@media (max-width: 640px)  { .site-logo--nav img, .site-logo--light img { height: 42px; } }