.hero-media {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 0%, rgba(248,253,255,.20) 36%, rgba(238,249,254,.72) 56%, rgba(225,246,255,.94) 100%),
    radial-gradient(circle at 18% 24%, rgba(132,205,240,.22), transparent 28%),
    radial-gradient(circle at 74% 12%, rgba(255,255,255,.88), transparent 34%),
    url("assets/editorial/office-hero.jpg"),
    repeating-linear-gradient(135deg, rgba(38,111,152,.075) 0 1px, transparent 1px 24px),
    linear-gradient(135deg, #ffffff 0%, #eef9fe 100%);
  background-position: center, center, center, left center, center, center;
  background-repeat: no-repeat;
  background-size: cover, cover, cover, auto 112%, auto, cover;
}

.hero-media::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(38,111,152,.10) 14% calc(14% + 1px), transparent calc(14% + 1px) 100%),
    linear-gradient(90deg, transparent 0 72%, rgba(38,111,152,.08) 72% calc(72% + 1px), transparent calc(72% + 1px) 100%);
  content: "";
}

.hero-media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.18) 32%, rgba(247,253,255,.64) 52%, rgba(244,252,255,.92) 68%, rgba(230,247,254,.90) 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(237,247,252,.34));
  content: "";
}

html[data-lang="en"] .hero-media {
  background-position: center, center, center, right center, center, center;
}

html[data-lang="en"] .hero-media::after {
  background:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(244,252,255,.90) 34%, rgba(255,255,255,.58) 66%, rgba(255,255,255,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(237,247,252,.34));
}

@media (max-width: 660px) {
  .hero-media {
    background:
      linear-gradient(180deg, rgba(255,255,255,.76) 0%, rgba(246,252,255,.90) 36%, rgba(237,248,253,.98) 100%),
      url("assets/editorial/office-hero.jpg"),
      repeating-linear-gradient(135deg, rgba(38,111,152,.06) 0 1px, transparent 1px 22px),
      linear-gradient(135deg, #ffffff 0%, #eef9fe 100%);
    background-position: center, top center, center, center;
    background-repeat: no-repeat;
    background-size: cover, 116% auto, auto, cover;
  }

  .hero-media::after,
  html[data-lang="en"] .hero-media::after {
    background:
      linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(246,252,255,.86) 40%, rgba(237,248,253,.99) 100%),
      linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.88));
  }
}