/* brand-logo-panels-v2 — readable dual logos on dark plates (no invert washout) */

.about-brand-grid {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

@media (max-width: 768px) {
  .about-brand-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-brand-grid .subtitle {
    text-align: center !important;
  }

  .about-brand-grid .btn {
    margin-left: auto;
    margin-right: auto;
  }
}

/*
  PNGs are designed for dark fields. Base CSS used filter:invert(1) on .brand-badge,
  which crushed the Commitment seal into the black plate — kill invert everywhere
  logos sit on charcoal/black.
*/
.brand-badge,
.brand-mark-sub img,
.brand-mark-sub .brand-badge,
.about-brand-logos .brand-badge,
.footer .brand-badge,
.site-footer .brand-badge,
.header .brand-badge,
.logo .brand-badge,
.team-hero-badge .brand-badge,
.page-hero-team .brand-badge,
.staff-login-panel .brand-badge {
  filter: none !important;
}

/* Outer about plate */
.about-brand-grid .brand-mark,
.team-hero-badge.brand-mark,
.brand-mark.about-brand-logos,
.page-hero-team .brand-mark {
  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px solid rgba(220, 220, 220, 0.22);
  border-radius: 22px;
  padding: clamp(1.15rem, 2.6vw, 1.7rem);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  justify-self: center;
  max-width: 100%;
}

/* Side-by-side with real gap — each mark in its own silver frame */
.about-brand-grid .brand-mark-inline,
.brand-mark.about-brand-logos.brand-mark-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  flex-wrap: nowrap;
}

.about-brand-logos .brand-mark-main,
.about-brand-logos .brand-mark-sub,
.about-brand-grid .brand-mark-main,
.about-brand-grid .brand-mark-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
  border: 1px solid rgba(200, 200, 200, 0.28);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.about-brand-logos .brand-mark-main,
.about-brand-grid .brand-mark-main {
  max-width: min(200px, 42vw);
  border-radius: 14px;
  padding: 0.65rem 0.75rem;
}

.about-brand-logos .brand-mark-sub,
.about-brand-grid .brand-mark-sub,
.team-hero-badge .brand-mark-sub {
  max-width: min(132px, 30vw);
  border-radius: 50%;
  padding: 0.55rem;
  aspect-ratio: 1 / 1;
}

.about-brand-grid .brand-logo,
.team-hero-badge .brand-logo,
.about-brand-logos .brand-logo,
.about-brand-logos .brand-badge,
.about-brand-grid .brand-badge {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
  filter: none !important;
}

.about-brand-grid .brand-mark-stacked {
  align-items: center;
  gap: 1.1rem;
}

.page-hero-team .brand-mark {
  margin: 0 auto 1.25rem;
}

/* Header / footer marks stay crisp on black chrome */
.header .logo .brand-logo,
.header .logo img,
.logo .brand-logo {
  filter: none !important;
}

.footer-brand .brand-mark,
.site-footer .brand-mark {
  gap: 0.85rem;
}

.footer-brand .brand-badge,
.site-footer .brand-badge {
  filter: none !important;
}

@media (max-width: 520px) {
  .about-brand-grid .brand-mark-inline,
  .brand-mark.about-brand-logos.brand-mark-inline {
    flex-direction: column;
  }

  .about-brand-logos .brand-mark-sub,
  .about-brand-grid .brand-mark-sub {
    max-width: min(148px, 46vw);
  }
}