/* =========================================================
   Photographic heroes for the renewed under pages.
   The supplied 3:1 images stay crisp. Only the title area gets
   a light veil so the copy remains readable without a white box.
   ========================================================= */

body#guide {
  --soft-hero-image: url("../images/hero/soft/01_sell-guide-index.png");
  --soft-hero-position: 50% 50%;
}
body#sell_check {
  --soft-hero-image: url("../images/hero/soft/02_sell-check.png");
  --soft-hero-position: 50% 50%;
}
body#high {
  --soft-hero-image: url("../images/hero/soft/03_sell-high.png");
  --soft-hero-position: 62% 50%;
}
body#guide2 {
  --soft-hero-image: url("../images/hero/soft/04_sell-guide.png");
  --soft-hero-position: 50% 50%;
}
body#home {
  --soft-hero-image: url("../images/hero/soft/05_property-home.png");
  --soft-hero-position: 50% 50%;
}
body#vacant {
  --soft-hero-image: url("../images/hero/soft/06_property-vacant.png");
  --soft-hero-position: 42% 50%;
}
body#building {
  --soft-hero-image: url("../images/hero/soft/07_property-building.png");
  --soft-hero-position: 42% 50%;
}
body#inheritance {
  --soft-hero-image: url("../images/hero/soft/08_situation-inheritance.png");
  --soft-hero-position: 50% 50%;
}
body#relocation {
  --soft-hero-image: url("../images/hero/soft/09_situation-relocation.png");
  --soft-hero-position: 50% 50%;
}
body#contact {
  --soft-hero-image: url("../images/hero/soft/10_contact.png");
  --soft-hero-position: 62% 50%;
}
body#news {
  --soft-hero-image: url("../images/hero/soft/11_news.png");
  --soft-hero-position: 50% 50%;
}
body#marketing {
  --soft-hero-image: url("../images/hero/soft/12_company-marketing.png");
  --soft-hero-position: 50% 50%;
}

body:is(#guide, #sell_check, #high, #guide2, #home, #vacant, #building, #inheritance, #relocation, #contact, #news, #marketing).design-a main #top_info {
  overflow: hidden;
  isolation: isolate;
  background-color: #eaf3f7;
  background-image: var(--soft-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--soft-hero-position);
}

/* Match the selling basics hero height to the other under pages. */
body#guide.design-a main #top_info {
  height: 410px;
}

body:is(#guide, #sell_check, #high, #guide2, #home, #vacant, #building, #inheritance, #relocation, #contact, #news, #marketing).design-a main #top_info::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 8%,
    rgba(255,255,255,.18) 22%,
    rgba(255,255,255,.66) 40%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.66) 60%,
    rgba(255,255,255,.18) 78%,
    rgba(255,255,255,0) 92%
  );
  opacity: 1;
  pointer-events: none;
}

/* Remove the former English title decoration. */
body:is(#guide, #sell_check, #high, #guide2, #home, #vacant, #building, #inheritance, #relocation, #contact, #news, #marketing).design-a main #top_info::after {
  content: none !important;
  display: none !important;
}

body:is(#guide, #sell_check, #high, #guide2, #home, #vacant, #building, #inheritance, #relocation, #contact, #news, #marketing).design-a main #top_info .inner {
  position: relative;
  z-index: 1;
}

body:is(#guide, #sell_check, #high, #guide2, #home, #vacant, #building, #inheritance, #relocation, #contact, #news, #marketing).design-a main #top_info h2 {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #18324d;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 0 18px rgba(255,255,255,.96),
    0 0 34px rgba(255,255,255,.78);
}

@media screen and (max-width: 750px) {
  body:is(#guide, #sell_check, #high, #guide2, #home, #vacant, #building, #inheritance, #relocation, #contact, #news, #marketing).design-a main #top_info {
    background-size: auto 100%;
    background-position: var(--soft-hero-position);
  }

  body#guide.design-a main #top_info {
    height: 300px;
  }

  body:is(#guide, #sell_check, #high, #guide2, #home, #vacant, #building, #inheritance, #relocation, #contact, #news, #marketing).design-a main #top_info::before {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.64) 24%,
      rgba(255,255,255,.76) 50%,
      rgba(255,255,255,.64) 76%,
      rgba(255,255,255,.04) 100%
    );
  }
}