.brand-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.brand-logo .brand-svg {
  display: block;
  height: 44px;
  width: auto;
}

.brand-logotype {
  display: block;
  height: 44px;
  width: auto;
  flex: 0 0 auto;
}

.logo-outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 28;
  pointer-events: none;
}

.logo-stage {
  grid-column: 1 / -1;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
}

/* brand-svg is in-flow so its aspect-ratio drives the container height -
    avoids iOS WebKit bug where overflow:hidden + absolute SVG + clip-path = invisible */
.logo-stage .brand-svg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.logo-stage .stage-splashes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive styles */
@media (max-width: 980px) {
  .logo-stage {
    grid-column: auto;
  }
}