/* brand.css — Synthesys logo placement. Loaded last on every page.
   The logo files are white-on-transparent, so they sit on the dark surfaces as they are
   and are flipped to ink where the surface turns light (the open menu panel). */

/* Nav wordmark */
#vy-topbar_glide .vy-hdr-brand { display: inline-flex; align-items: center; }
#vy-topbar_glide .vy-hdr-brand img { height: 10px; width: auto; display: block; }
/* Open menu: the bar stays on the dark surface while the panel below it turns light, so the
   bar's icons and wordmark must stay light too. (parts.css flips them to ink, which made the
   close button invisible.) */
#vy-topbar_glide_frame.vy-is-panel-open #vy-topbar_glide { border-bottom-color: var(--color-line); }
#vy-topbar_glide_frame.vy-is-panel-open #vy-topbar_glide .vy-hdr-glyph svg { stroke: var(--color-text-primary); }
#vy-topbar_glide_frame.vy-is-panel-open #vy-topbar_glide .vy-hdr-brand { color: var(--color-text-primary); }
#vy-topbar_glide_frame.vy-is-panel-open #vy-topbar_glide .vy-hdr-burger svg { width: 26px; height: 26px; stroke-width: 2; }

/* Loader: mark, counter, wordmark */
.vy-door > span { display: inline-flex; align-items: center; }
.vy-door .sy-door-mark { height: 56px; width: auto; display: block; }
.vy-door .sy-door-word { height: 13px; width: auto; display: block; }

/* Footer lockup */
.vy-footer img.sy-tail-logo { display: block; height: 40px; width: auto !important; max-width: 100%; object-fit: contain; object-position: left center; margin-top: 48px; filter: none; }
.sy-tail-logo + .vy-tail-biz { margin-top: 28px; }
.vy-tail-biz a { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .vy-door { flex-direction: column; }
  .vy-door .sy-door-mark { height: 44px; }
  .vy-footer img.sy-tail-logo { height: 30px; }
}

/* Mobile hero. The nav bar is always docked on phones (16px + 64px tall), so the headline
   needs real clearance below it, and the three masthead pieces stack instead of wrapping
   with the tag stranded beside the first word. */
@media (max-width: 767px) {
  .vy-banner-band { height: 100vh; height: 100svh; }
  .vy-hud-ui { padding: 116px 20px 28px; }
  .vy-top-masthead { flex-direction: column; align-items: flex-start; gap: 0; flex-wrap: nowrap; }
  .vy-top-masthead .vy-mini-tag { order: 3; margin-top: 14px; }
  .vy-hud-low { gap: 16px; }
  .vy-low-ui-frame { margin-bottom: 8px; }
}