:root { --wx-blue: #0b62a3; }

.md-button.md-button--primary {
  background: var(--wx-blue);
  border-color: var(--wx-blue);
  color: #fff;
}
.md-button.md-button--primary:hover { filter: brightness(1.06); }

/* Container */
.wx-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(60vh, 72vh, 88vh);
  margin: 0 0 1.5rem 0;
  border-radius: .75rem;
  display: flex;
  align-items: center;
  isolation: isolate;
  box-shadow: var(--md-shadow-z2, 0 6px 18px rgba(0,0,0,.12));
}

/* Background LAYERS:
   1) gradient overlay (top)
   2) hero image from CSS var (bottom) */
.wx-hero__bg {
  position: absolute;
  inset: -20% -10% -10% -10%;
  z-index: 0;

  /* 🔑 Use the image variable you set in home.html */
  background-image:
    linear-gradient(135deg, rgba(11, 98, 163, 0.55), rgba(63, 81, 181, 0.55)),
    var(--wx-hero-img, none);

  /* First layer (gradient) sized to full box; second layer (photo) covers */
  background-size: 100% 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;

  /* Blend gradient on top of the photo */
  background-blend-mode: overlay, normal;

  /* Depth and subtle vignette */
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.18),
    inset 0 -40px 120px rgba(0,0,0,.12);
}

/* Decorative canvas */
.wx-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .85;
}

/* Content layer */
.wx-hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 4vw, 3rem) 1.25rem;
}

.wx-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .25rem 0;
}

.wx-hero__tag {
  font-size: 1.05rem;
  opacity: .9;
  margin: 0 0 1rem 0;
}

.wx-cta .md-button {
  margin-right: .5rem;
  margin-bottom: .5rem;
}