/* Decorative fragments reuse the original unmarked artwork.
   These layers never receive clicks and contain no storefront text or controls. */
.hero-foliage {
  position: absolute;
  top: -6px;
  left: calc((100% - 100vw) / 2);
  width: 88px;
  height: 335px;
  background: url('assets/homepage.jpg') 0 -76px / 1536px 1024px no-repeat;
  mask-image: linear-gradient(90deg, #000 45%, transparent 100%), linear-gradient(#000 78%, transparent);
  mask-composite: intersect;
  pointer-events: none;
}
.offer {
  width: 100%;
  min-height: 150px;
  padding: 25px 65px 25px clamp(260px, 30vw, 450px);
  border-radius: 0;
  background: #031b38;
  isolation: isolate;
}
.offer-decoration {
  position: absolute;
  bottom: 0;
  height: 121px;
  background-image: url('assets/homepage.jpg');
  background-size: 1536px 1024px;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
}
.offer-decoration-left {
  left: 0;
  width: min(490px, 36vw);
  background-position: left bottom;
  mask-image: linear-gradient(90deg, #000 76%, transparent);
}
.offer-decoration-right {
  right: 65px;
  width: 165px;
  background-position: -1184px bottom;
  mask-image: linear-gradient(90deg, transparent, #000 35%);
}
.offer-decoration-edge {
  right: 0;
  width: 49px;
  background-position: right bottom;
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}
.offer-copy { flex: 1; text-align: center; }
.offer h2 { font-size: clamp(23px, 1.9vw, 29px); }
.offer-tag { flex-shrink: 0; }
@media (max-width: 1200px) {
  .hero-foliage { width: 50px; opacity: .85; }
  .offer { padding-left: 245px; padding-right: 45px; gap: 20px; }
  .offer-decoration-left { width: 315px; }
  .offer h2 { font-size: 23px; }
}
@media (max-width: 960px) {
  .hero-foliage { width: 38px; }
  .offer { padding: 30px 80px 30px 220px; gap: 18px; }
  .offer-copy { flex-basis: 100%; }
  .offer-decoration-left { width: 270px; }
  .offer-decoration-right { right: 0; opacity: .7; }
}
@media (max-width: 600px) {
  .hero-foliage {
    top: calc(100vw * .4963 + 20px);
    width: 18px;
    height: 240px;
    background-size: 1100px auto;
    background-position: 0 -55px;
    opacity: .5;
  }
  .offer { padding: 30px 24px 103px; gap: 18px; }
  .offer-decoration-left {
    width: 220px;
    height: 86px;
    background-size: 1100px auto;
    mask-image: linear-gradient(90deg, #000 65%, transparent);
  }
  .offer-decoration-right {
    right: 0;
    width: 115px;
    height: 86px;
    background-size: 1100px auto;
    background-position: -848px bottom;
  }
  .offer-decoration-edge { height: 86px; width: 32px; background-size: 1100px auto; }
  .offer h2 { font-size: 25px; }
}