/* Global MOTOMA logo-arc hero transition.
   The quadratic curve is derived from the blue underline in the supplied
   MOTOMA logo. Every page loads this one component, so the geometry and
   colour stay identical site-wide. */
:root {
  --site-hero-curve-height: 220px;
  --site-hero-curve-bottom: -78px;
  --site-hero-curve-surface: #f4f6f7;
  --site-hero-curve-blue: #1d2088;
}

.site-hero-curve {
  position: absolute !important;
  z-index: 12 !important;
  right: -5% !important;
  bottom: var(--site-hero-curve-bottom) !important;
  left: -5% !important;
  width: auto !important;
  height: var(--site-hero-curve-height) !important;
  overflow: visible !important;
  background: transparent url("../images/motoma-logo-hero-arc.svg") center bottom / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  :root {
    --site-hero-curve-height: 176px;
    --site-hero-curve-bottom: -62px;
  }
  .site-hero-curve { right: -12% !important; left: -12% !important; }
}

@media (max-width: 520px) {
  :root {
    --site-hero-curve-height: 138px;
    --site-hero-curve-bottom: -49px;
  }
  .site-hero-curve { right: -22% !important; left: -22% !important; }
}