.gold-inline-right {
    right: 0;
    top: -80px;
    z-index: 0;
    width: 30%;
    height: calc(100% + 260px);
        position: absolute;
}
.gold-inline-right.left{
  right: unset;
  left: 0;
}

.gold-inline-left {
    left: -5%;
    top: 40px;
    z-index: 0;
    width: 30%;
    height: 100%;
    position: absolute;
    transform: rotate(147deg);
}
.design-page,
.location,
.residences-page,
.amenity-page{
  overflow: hidden;

  .promo{
    z-index: 2;
    position: relative;
  }
}
.design-page{
  .promo h1,
  .promo h2 {
    font-size: 32px;
  }
  .gold-inline-right:not(.left) {
   transform: rotate(148deg);
   right: -34%;
  }
  .gold-inline-right.left{
    right: unset;
    left: -13%;
    transform: scale(-1);
    top: 300px;
  }
}

.residences-page{
  
  .gold-inline-right:not(.left) {
   width: auto;
   right: 0;
   height: 100vw;
   top: -50vw;
   transform: rotate(90deg);
  }
  
  .gold-inline-right.left{
    right: unset;
    left: -13%;
    transform: scale(-1);
    top: 0;
    height: 100%;
  }
}

.amenity{
  .gold-inline-right{
    
    transform: scale(-1);
    width: 30vw;
    right: -18%;
    height: 100%;
    top: 350vh;
  }
}

@media (max-width: 1199px) {
  .amenity .gold-inline-right{
    display: none;
  }
}
body:has(.location) .gold-inline-right:not(.left){
  top: -80px;
  right: -10%;
}

/* --- Promo fade-up on scroll ---
   Only applies once scroll-animations.js adds .scroll-anim-ready to <html>,
   so content stays visible if JS fails to load. The image and text fade up
   with a slight stagger when the promo enters the viewport. */
.scroll-anim-ready .promo .field-promoicon,
.scroll-anim-ready .promo .promo-text {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.scroll-anim-ready .promo.in-view .field-promoicon,
.scroll-anim-ready .promo.in-view .promo-text {
    opacity: 1;
    transform: translateY(0);
}

/* Text follows the image slightly for a layered reveal. */
.scroll-anim-ready .promo.in-view .promo-text {
    transition-delay: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-anim-ready .promo .field-promoicon,
    .scroll-anim-ready .promo .promo-text {
        opacity: 1;
        transform: none;
        transition: none;
    }
}