.bus-brand-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  position: relative;
}

.bus-brand-copy { position: relative; z-index: 2; }

.bus-brand-copy h1 {
  max-width: 17ch;
  text-wrap: balance;
}

.bus-brand-signature {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.1rem;
  color: #075d70;
  font-weight: 850;
  letter-spacing: .04em;
}

.bus-brand-signature::before {
  content: "";
  width: 2.8rem;
  height: .25rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #008fa8, #16c8d6, #ffb443);
}

.bus-brand-visual {
  position: relative;
  margin: 0;
  border: 1px solid rgba(22, 139, 166, .2);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background: #f6fbff;
  box-shadow: 0 28px 70px rgba(5, 59, 88, .16);
  isolation: isolate;
}

.bus-brand-visual::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  background: radial-gradient(circle, rgba(24, 194, 213, .2), transparent 58%);
  animation: busBrandBreathe 6s ease-in-out infinite;
}

.bus-brand-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .72) 50%, transparent 62%);
  transform: translateX(-135%);
  animation: busBrandSweep 7.5s ease-in-out infinite;
  pointer-events: none;
}

.bus-brand-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.bus-brand-visual figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  max-width: 26rem;
  padding: .65rem .85rem;
  border: 1px solid rgba(7, 93, 112, .2);
  border-radius: .9rem;
  color: #06365a;
  background: rgba(255, 255, 255, .94);
  font-size: .86rem;
  font-weight: 750;
  box-shadow: 0 12px 28px rgba(5, 59, 88, .12);
}

.bus-brand-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.bus-brand-pillars li {
  padding: .5rem .75rem;
  border: 1px solid #b7dce5;
  border-radius: 999px;
  color: #06365a;
  background: #f4fcff;
  font-weight: 800;
  font-size: .88rem;
}

.bus-brand-gallery {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.bus-brand-gallery > p { max-width: 70ch; }

.bus-brand-gallery-grid {
  display: grid;
  grid-template-columns: minmax(18rem, .78fr) minmax(24rem, 1.22fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.bus-brand-gallery article {
  overflow: hidden;
  border: 1px solid #cfe1ea;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 18px 46px rgba(5, 59, 88, .1);
}

.bus-brand-gallery picture,
.bus-brand-gallery img { display: block; width: 100%; }
.bus-brand-gallery img { height: auto; }
.bus-brand-gallery-copy { padding: 1.25rem 1.35rem 1.5rem; }
.bus-brand-gallery-copy h3 { margin: 0 0 .5rem; color: #06365a; }
.bus-brand-gallery-copy p { margin: 0; color: #425b70; }

@keyframes busBrandBreathe {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes busBrandSweep {
  0%, 48% { transform: translateX(-135%); }
  70%, 100% { transform: translateX(135%); }
}

@media (max-width: 980px) {
  .bus-brand-hero { grid-template-columns: 1fr; }
  .bus-brand-copy h1 { max-width: none; }
  .bus-brand-visual { max-width: 56rem; }
  .bus-brand-gallery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .bus-brand-hero { gap: 1.5rem; }
  .bus-brand-visual figcaption { position: static; margin: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bus-brand-visual::before,
  .bus-brand-visual::after { animation: none; }
}