/* Use the existing logo's visible area without changing the source artwork. */
.brand-logo,
.access-logo {
  height: auto;
  aspect-ratio: 512 / 282;
  object-fit: cover;
  object-position: 50% 44%;
}

.brand-logo {
  width: clamp(280px, 31vw, 460px);
  max-width: 100%;
  margin: 0 0 32px;
  filter: drop-shadow(0 10px 24px #22b9ed30);
}

.access-logo {
  width: 230px;
  max-width: 80%;
  margin: 0 auto 28px;
  filter: drop-shadow(0 6px 18px #22b9ed20);
}

.dashboard-header img {
  width: 112px;
  height: 60px;
  object-fit: cover;
  object-position: 50% 44%;
}

@media (max-width: 900px) and (min-width: 701px) {
  .brand-logo { width: 100%; max-width: 330px; }
  .access-logo { width: 210px; }
}

@media (max-width: 700px) {
  .access-logo { width: 260px; max-width: 85%; margin-bottom: 26px; }
  .dashboard-header img { width: 96px; height: 52px; }
}

@media (max-width: 700px) and (max-height: 720px) {
  .access-logo { width: 220px; margin-bottom: 20px; }
}

/* Keep a single visible logo at each screen size. */
@media (min-width: 701px) {
  .access-logo { display: none; }
}