.inner_banner {
  overflow: hidden;
  display: flex;
  align-items: center;
  /* revision 4: ONE fixed height on every inner page (client: all inner banners the same height). Content is
     centred in the area below the header; no variant may change the height. */
  box-sizing: border-box;
  height: 64rem;
  padding: 15rem 0px 7rem;
  background-color: var(--dark);
}
.inner_banner::before,
.inner_banner::after {
  content: '';
  position: absolute;
  left: 0px;
  z-index: -1;
  width: 100%;
  pointer-events: none;
}
.inner_banner::before {
  top: 0px;
  height: 100%;
  background: linear-gradient(90deg, rgba(4, 17, 45, 0.94) 0%, rgba(4, 17, 45, 0.82) 32%, rgba(4, 17, 45, 0.35) 62%, rgba(4, 17, 45, 0.1) 100%);
}
.inner_banner::after {
  top: 0px;
  height: 17.5rem;
  background: linear-gradient(180deg, rgba(4, 17, 45, 0.9) 0%, rgba(4, 17, 45, 0) 100%);
}
.inner_banner .content {
  width: 100%;
}
.inner_banner .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  line-height: 2rem;
}
.inner_banner .crumbs a {
  transition: color 0.3s;
}
.inner_banner .crumbs a:hover {
  color: #fff;
}
.inner_banner .crumbs a::after {
  content: '/';
  margin: 0px 1rem;
  color: rgba(255, 255, 255, 0.4);
}
.inner_banner .crumbs span {
  color: #fff;
}
.inner_banner .tcon {
  max-width: 76rem;
  margin-top: 2.4rem;
}
.inner_banner .tcon h1 {
  font-size: 6rem;
  line-height: 6.8rem;
}
.inner_banner .tcon p {
  max-width: 64rem;
  font-size: 2rem;
  line-height: 3.2rem;
}
.inner_banner .tcon h1 + p {
  margin-top: 2.2rem;
}
.inner_banner .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 4rem;
}
/* clear: product-shot banners (@products). The overlay covers the text side only and stops before the
   products, so they keep their true colours (revision 2: "products less dimmed"). */
.inner_banner.clear::before {
  background: linear-gradient(90deg, rgba(4, 17, 45, 0.92) 0%, rgba(4, 17, 45, 0.78) 30%, rgba(4, 17, 45, 0.3) 42%, rgba(4, 17, 45, 0) 50%);
}
/* ==========================================================================
   SLIM VARIANT  .inner_banner.slim  (product detail @pd, article detail @blogd)
   Same height and straight bottom edge as every inner banner (revision 4). Calmer gradient. Generic: crumbs + p.title (+ optional short p).
   ::after is not used (no lip); the top header gradient is in ::before.
   ========================================================================== */
.inner_banner.slim::before {
  background: linear-gradient(180deg, rgba(4, 17, 45, 0.86) 0%, rgba(4, 17, 45, 0) 18rem), linear-gradient(0deg, rgba(4, 17, 45, 0.5) 0%, rgba(4, 17, 45, 0) 45%), linear-gradient(90deg, rgba(4, 17, 45, 0.95) 0%, rgba(4, 17, 45, 0.84) 32%, rgba(4, 17, 45, 0.42) 62%, rgba(4, 17, 45, 0.14) 100%);
}
/* revision 4b: no white rounded lip any more - it took 48 px off the visible banner, so detail pages looked shorter
   than the other inner pages. The top header gradient is part of ::before. */
.inner_banner.slim::after {
  display: none;
}
.inner_banner.slim .tcon {
  max-width: 90rem;
  margin-top: 2rem;
}
.inner_banner.slim .tcon h1,
.inner_banner.slim .tcon .title {
  max-width: none;
  color: #fff;
  font-weight: 700;
  font-size: 5.2rem;
  line-height: 6.2rem;
}
.inner_banner.slim .tcon .title + p {
  max-width: 60rem;
  margin-top: 1.6rem;
  font-size: 1.8rem;
  line-height: 2.9rem;
}
/* short: slim banner over a light, generic photo (article detail @blogd - one banner shared by every
   article). Revision 3: image + mask (client: a plain gradient has no design). The brand-blue mask is dark
   behind the text and fades in even steps so the photo stays clear on the right. */
.inner_banner.slim.short {
  background-color: #0b3d87;
}
.inner_banner.slim.short::before {
  background: linear-gradient(180deg, rgba(6, 30, 72, 0.72) 0%, rgba(6, 30, 72, 0) 16rem), linear-gradient(90deg, rgba(8, 41, 98, 0.94) 0%, rgba(9, 47, 110, 0.86) 28%, rgba(10, 54, 122, 0.62) 45%, rgba(11, 61, 135, 0.28) 62%, rgba(11, 61, 135, 0.06) 80%, rgba(11, 61, 135, 0) 100%);
}
/* end of slim variant (media rules for .slim at the end of each media block) */

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .inner_banner {
    height: 54rem;
  }
  .inner_banner .tcon h1 {
    font-size: 5rem;
    line-height: 1.15;
  }
  /* slim variant */
  .inner_banner.slim .tcon .title {
    font-size: 4.6rem;
    line-height: 1.2;
  }
  .inner_banner.slim .tcon .title + p {
    font-size: 2rem;
    line-height: 1.55;
  }
}

@media screen and (max-width: 768px) {
  .inner_banner {
    height: auto;
    min-height: unset;
    padding: 110px 0px 50px;
  }
  .inner_banner::before {
    background: linear-gradient(90deg, rgba(4, 17, 45, 0.92) 0%, rgba(4, 17, 45, 0.7) 100%);
  }
  .inner_banner::after {
    height: 110px;
  }
  .inner_banner.clear::before {
    background: linear-gradient(90deg, rgba(4, 17, 45, 0.92) 0%, rgba(4, 17, 45, 0.72) 100%);
  }
  .inner_banner .crumbs {
    font-size: 13px;
    line-height: 18px;
  }
  .inner_banner .crumbs a::after {
    margin: 0px 8px;
  }
  .inner_banner .tcon {
    margin-top: 16px;
  }
  .inner_banner .tcon h1 {
    font-size: 32px;
    line-height: 1.2;
  }
  .inner_banner .tcon p {
    font-size: 15px;
    line-height: 1.65;
  }
  .inner_banner .tcon h1 + p {
    margin-top: 14px;
  }
  .inner_banner .btns {
    gap: 12px;
    margin-top: 26px;
  }
  /* slim variant */
  .inner_banner.slim::before {
    background: linear-gradient(180deg, rgba(4, 17, 45, 0.86) 0%, rgba(4, 17, 45, 0) 110px), linear-gradient(90deg, rgba(4, 17, 45, 0.92) 0%, rgba(4, 17, 45, 0.66) 100%);
  }
  .inner_banner.slim.short::before {
    background: linear-gradient(180deg, rgba(6, 30, 72, 0.75) 0%, rgba(6, 30, 72, 0) 110px), linear-gradient(90deg, rgba(8, 41, 98, 0.9) 0%, rgba(11, 61, 135, 0.62) 100%);
  }
  .inner_banner.slim .tcon {
    margin-top: 14px;
  }
  .inner_banner.slim .tcon h1,
  .inner_banner.slim .tcon .title {
    font-size: 27px;
    line-height: 1.25;
  }
  .inner_banner.slim .tcon .title + p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.65;
  }
}