/* indexB only: replace the perimeter foliage without changing content or layout.
   Preserve the existing friendly, light flyer design (variance 4 / motion 1 / density 6).
   Decorations use the existing background layers and never intercept interactions. */
:root {
  --metal-cookware: url("../images/decoration-metal-cookware.webp");
  --metal-recyclables: url("../images/decoration-metal-recyclables.webp");
}

.section::before,
.price-comparison::before,
.final-cta::before {
  background-image: var(--metal-leading, var(--metal-cookware));
  transform: rotate(var(--metal-leading-angle, -9deg)) scale(var(--metal-leading-scale, 1));
}

.section::after,
.price-comparison::after,
.final-cta::after {
  background-image: var(--metal-trailing, var(--metal-recyclables));
  transform: rotate(var(--metal-trailing-angle, 8deg)) scale(var(--metal-trailing-scale, 1));
}

.section::before,
.section::after,
.price-comparison::before,
.price-comparison::after,
.final-cta::before,
.final-cta::after {
  width: clamp(76px, calc((100vw - 1120px) / 2), 165px);
  opacity: .72;
}

/* Mix the motifs across the page rather than assigning an item to each side.
   Explicit section choices keep the composition stable when content is reordered. */
.examples,
.local-company,
.flow,
.access {
  --metal-leading: var(--metal-recyclables);
  --metal-trailing: var(--metal-cookware);
}

.examples,
.flow {
  --metal-leading-angle: 11deg;
  --metal-trailing-angle: -7deg;
  --metal-leading-scale: .88;
}

.reassurance,
.gift-offer,
.faq-section {
  --metal-leading-angle: 5deg;
  --metal-trailing-angle: -12deg;
  --metal-leading-scale: .9;
  --metal-trailing-scale: .96;
}

.local-company,
.access {
  --metal-leading-angle: -6deg;
  --metal-trailing-angle: 10deg;
  --metal-trailing-scale: .9;
}

.price-comparison,
.final-cta {
  --metal-leading-angle: -4deg;
  --metal-trailing-angle: 4deg;
  --metal-leading-scale: .94;
  --metal-trailing-scale: .86;
}

/* Keep the soft framing behind the hero and the smaller CTA-side accents. */
.hero::after {
  background-image: var(--metal-cookware), var(--metal-recyclables);
  filter: blur(1px);
  opacity: .4;
}

.hero .hero-side::before,
.hero .hero-side::after {
  width: 150px;
  height: 160px;
  background-color: #fffaf3;
  background-blend-mode: multiply;
  mix-blend-mode: normal;
  z-index: -1;
  opacity: .82;
}

.hero .hero-side::before {
  background-image: var(--metal-recyclables);
  transform: rotate(7deg) scale(.9);
}

.hero .hero-side::after {
  background-image: var(--metal-cookware);
  transform: rotate(-10deg);
}

/* The parking-section note has its own original foliage layer. */
.store-note::before {
  background-image: var(--metal-recyclables);
  transform: rotate(6deg) scale(.9);
}

.store-note::after {
  background-image: var(--metal-cookware);
  transform: rotate(-6deg);
}

.store-note::before,
.store-note::after {
  border-radius: 0;
  background-color: transparent;
  background-blend-mode: normal;
  mix-blend-mode: multiply;
  opacity: .8;
}

@media (max-width: 760px) {
  .section::before,
  .section::after,
  .price-comparison::before,
  .price-comparison::after,
  .final-cta::before,
  .final-cta::after {
    width: 64px;
    opacity: .32;
  }

  .hero::after {
    opacity: .22;
  }

  .hero .hero-side::before,
  .hero .hero-side::after {
    width: 68px;
    height: 76px;
    opacity: .4;
  }
}