/* V4 — real photographic foliage on the shared canvas, never section backdrops.
 * Full-width .botanical-stage wrappers contain section margins without clipping
 * the vertical silhouette. The botanical layer clips only at the page edges.
 */
.botanical-stage {
  position: relative;
  display: flow-root;
  width: 100%;
  min-width: 0;
}

.page-botanical {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-x: clip;
  overflow-y: visible;
  pointer-events: none;
  user-select: none;
}

.page-leaf {
  position: absolute;
  display: block;
  width: var(--botanical-size);
  height: auto;
  aspect-ratio: 3 / 2;
  transform: translate3d(0,var(--parallax-y,0px),0) rotate(var(--botanical-turn, 0deg));
  transform-origin: 50% 55%;
  pointer-events: none;
}

.page-leaf > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  transform: scaleX(var(--botanical-flip, 1));
  opacity: var(--botanical-opacity, .95);
  filter: saturate(.88) brightness(1.025) blur(var(--botanical-blur, .65px));
}

/* The hero branch enters from the right, in front of the photograph's edge. */
.page-leaf--hero {
  --botanical-size: 540px;
  --botanical-turn: -13deg;
  --botanical-blur: .75px;
  --botanical-opacity: .98;
  top: 166px;
  right: -278px;
}

/* Services foliage sits behind the opaque cards and clear of their headings. */
.botanical-stage--services { isolation: isolate; }
.botanical-stage--services > .page-botanical { z-index: 0; }
.botanical-stage--services > .services-section { position: relative; z-index: 1; }

/* A reversed, softer branch beside the first service photograph. */
.page-leaf--services {
  --botanical-size: 494px;
  --botanical-turn: 22deg;
  --botanical-flip: -1;
  --botanical-blur: 1.65px;
  --botanical-opacity: .91;
  top: 285px;
  left: -354px;
}

/* The last glimpse is smaller and turns upwards beside the contact card. */
.page-leaf--contact {
  --botanical-size: 458px;
  --botanical-turn: -37deg;
  --botanical-blur: .45px;
  --botanical-opacity: .94;
  top: 262px;
  right: -263px;
}

@media (min-width: 1600px) {
  .page-leaf--hero { --botanical-size: 640px; right: -300px; top: 155px; }
  .page-leaf--services { --botanical-size: 590px; left: -390px; top: 286px; }
  .page-leaf--contact { --botanical-size: 550px; right: -295px; }
}

@media (max-width: 1023px) {
  .page-leaf--hero { --botanical-size: 398px; right: -240px; top: 140px; }
  .page-leaf--services { --botanical-size: 386px; left: -292px; top: 277px; }
  .page-leaf--contact { --botanical-size: 378px; right: -235px; top: auto; bottom: 105px; }
}

@media (max-width: 767px) {
  /* On narrow screens this branch overlaps the first photo edge. Keep it
     in the foreground; the full-page layer remains non-interactive. */
  .botanical-stage--services > .page-botanical { z-index: 2; }
  .page-leaf--hero {
    --botanical-size: 312px;
    --botanical-turn: -18deg;
    --botanical-blur: .55px;
    top: auto;
    right: -212px;
    bottom: 135px;
  }
  .page-leaf--services {
    --botanical-size: 290px;
    --botanical-turn: 29deg;
    --botanical-blur: 1.15px;
    top: 270px;
    left: -240px;
  }
  .page-leaf--contact {
    --botanical-size: 300px;
    --botanical-turn: -42deg;
    top: auto;
    right: -194px;
    bottom: 86px;
  }
}

@media (max-width: 374px) {
  .page-leaf--hero { --botanical-size: 284px; right: -202px; bottom: 124px; }
  .page-leaf--services { --botanical-size: 268px; left: -228px; top: 270px; }
  .page-leaf--contact { --botanical-size: 278px; right: -190px; bottom: 80px; }
}