.hero-carousel .hero-stage{position:relative;aspect-ratio:4/3;perspective:1200px;border-radius:30px 0 30px 0;overflow:hidden;background:#123e35;border:1px solid #73ab96}
.hero-carousel .hero-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;border:0;border-radius:0;box-shadow:none;animation:none;opacity:0;transform:translateX(6%) rotateY(-16deg) scale(.96);transform-origin:center;transition:opacity 1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;pointer-events:none}
.hero-carousel .hero-stage img.is-active{opacity:1;transform:translateX(0) rotateY(0) scale(1);z-index:2}
.hero-carousel .hero-stage img.is-leaving{opacity:0;transform:translateX(-6%) rotateY(16deg) scale(.96);z-index:1}
.hero-carousel .carousel-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:16px}
.hero-carousel .carousel-dots{display:flex;gap:9px;align-items:center}
.hero-carousel .carousel-dot{width:28px;height:28px;border:1px solid #7aa58e;background:#e4f3e9;color:#174f40;border-radius:50%;font:700 12px 'DM Sans',sans-serif;cursor:pointer;padding:0}
.hero-carousel .carousel-dot[aria-pressed=true]{background:#07534a;color:white;border-color:#07534a}
.hero-carousel .carousel-pause{padding:7px 12px;font:600 13px 'DM Sans',sans-serif;border:1px solid #7aa58e;background:#e4f3e9;color:#174f40;cursor:pointer}
.hero-carousel figcaption{font-size:13px}
@media(prefers-reduced-motion:reduce){.hero-carousel .hero-stage img{transition:none;transform:none}.hero-carousel .hero-stage img.is-active,.hero-carousel .hero-stage img.is-leaving{transform:none}}
/* Unframed, uninterrupted project slideshow. */
.hero-carousel .carousel-controls{display:none}
.hero-carousel .hero-stage{border:0;border-radius:0;background:transparent;overflow:visible}
.hero-carousel:after{display:none}
.hero-carousel .hero-stage img{border:0;border-radius:0;box-shadow:none}
.hero-carousel figcaption{border:0}
/* Larger, wider homepage project images. */
@media(min-width:1051px){.hero{grid-template-columns:.9fr 1.25fr;gap:45px}.hero-carousel{margin-right:-20px}}
.hero-carousel .hero-stage{aspect-ratio:3/2}
.hero-carousel .hero-stage img{object-fit:cover;width:100%;height:100%}
@media(max-width:760px){.hero-carousel{margin-inline:-8px}.hero-carousel .hero-stage{aspect-ratio:3/2}}