/* Transparent annotated PNG sits directly on the pale hero background. */
.hero {
  grid-template-columns: minmax(430px, .83fr) minmax(0, 1.17fr);
  gap: 22px;
  padding-right: max(44px, calc((100vw - 1536px) / 2));
  padding-left: max(44px, calc((100vw - 1536px) / 2));
}
.hero .hero-visual.hero-technical-plate {
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero .hero-visual.hero-technical-plate::before { content: none; }
.hero-diagram-head,
.hero-diagram-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 4px;
  color: #245b80;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero-diagram-head {
  border: 0;
  background: transparent;
}
.hero-diagram-head span:last-child {
  color: #7899ae;
  font-size: 10px;
  letter-spacing: .13em;
}
.hero-diagram-image {
  display: block;
  padding: 0;
  background: transparent;
}
.hero .hero-visual.hero-technical-plate .hero-speaker {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: none;
  transform: none;
  animation: none;
  will-change: auto;
  cursor: zoom-in;
}
.hero-diagram-foot {
  border: 0;
  background: transparent;
  color: #6b8ba1;
  font-size: 11px;
}
.hero-diagram-foot a { color: #176cad; }
.hero-diagram-foot a:hover { text-decoration: underline; }
.hero-diagram-image:focus-visible,
.hero-diagram-foot a:focus-visible { outline: 3px solid #176cad; outline-offset: -3px; }
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(350px, .8fr) minmax(0, 1.2fr); padding-right: 32px; padding-left: 32px; }
}
@media (max-width: 900px) {
  .hero { height: auto; max-height: none; grid-template-columns: 1fr; gap: 30px; padding: 48px 28px 86px; }
  .hero .hero-visual.hero-technical-plate { width: 100%; max-width: none; }
}
@media (max-width: 500px) {
  .hero { padding: 42px 20px 78px; }
  .hero-diagram-head,
  .hero-diagram-foot { padding: 8px 2px; font-size: 10px; }
  .hero-diagram-head span:last-child { font-size: 8px; }
  .hero-diagram-foot { font-size: 9px; }
  .hero-diagram-image { padding: 0; }
}