/* Fade, slow image movement, and scroll reveals inspired by the firm website. */
.portrait-carousel{min-width:0}
.portrait-viewport{position:relative;width:100%;overflow:hidden;aspect-ratio:3/4;background:#e1dfd9;touch-action:pan-y pinch-zoom}
.portrait-slide{position:absolute;inset:0;opacity:0;z-index:0;transition:opacity 1s ease;pointer-events:none}
.portrait-slide.is-active{opacity:1;z-index:1}
.about-image .portrait-slide img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;transform:scale(1);transform-origin:center}
.carousel-ready .portrait-slide img{transform:scale(1.035);transition:transform 6.5s linear}
.carousel-ready .portrait-slide.is-active img{transform:scale(1)}
/* Homepage: hold the outgoing photo underneath the arriving one, avoiding a
   flash of the viewport background during the dissolve. */
.hero-carousel .portrait-slide{transition:opacity 0s linear 2.4s}
.hero-carousel .portrait-slide.is-active{transition:opacity 2.4s ease-in-out}
.hero-carousel.carousel-ready .portrait-slide img{transform:scale(1);transform-origin:center 38%;transition:none;animation:none}
.hero-carousel.carousel-ready .portrait-slide:is(.is-active,.is-outgoing) img{animation:lele-hero-drift 10.4s linear both;animation-play-state:paused}
.hero-carousel.carousel-ready.is-playing .portrait-slide:is(.is-active,.is-outgoing) img{animation-play-state:running}
@keyframes lele-hero-drift{from{transform:scale(1)}to{transform:scale(1.04)}}
.portrait-caption{display:flex;justify-content:space-between;gap:20px;margin-top:18px;font-size:11px;letter-spacing:2px;color:var(--muted);line-height:1.7}
.portrait-caption>span:last-child{font-size:10px;letter-spacing:2px;color:#786341;font-family:Arial,sans-serif;white-space:nowrap}
.portrait-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:8px;border-top:1px solid var(--line)}
.portrait-controls[hidden]{display:none}
.portrait-controls button{display:grid;place-items:center;border:0;background:none;color:var(--navy);cursor:pointer;min-height:42px;padding:0}
.portrait-arrows{display:flex;gap:4px}
.portrait-arrows button{width:34px;font-size:22px}
.portrait-arrows button:hover,.portrait-toggle:hover{color:#786341}
.portrait-dots{display:flex;align-items:center}
.portrait-dots button{width:23px;min-height:42px}
.portrait-dots button:after{content:"";display:block;width:5px;height:5px;border-radius:4px;background:#bcb7ae;transition:width .3s,background-color .3s}
.portrait-dots button[aria-pressed="true"]:after{width:17px;background:#8c744e}
.portrait-controls .portrait-toggle{font-size:10px;letter-spacing:1px;min-width:56px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Keep content visible while awaiting the observer. Start decoration only on entry;
   never clip the same element whose intersection is needed to reveal it. */
[data-reveal].reveal-pending{opacity:1;transform:none;clip-path:none}
[data-reveal].is-visible{animation-duration:1s;animation-timing-function:cubic-bezier(.2,.65,.3,1);animation-delay:var(--reveal-delay,0ms);animation-fill-mode:backwards}
[data-reveal="up"].is-visible{animation-name:lele-reveal-up}
[data-reveal="left"].is-visible{animation-name:lele-reveal-left}
[data-reveal="image"].is-visible{animation-name:lele-reveal-image}
@keyframes lele-reveal-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes lele-reveal-left{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}
@keyframes lele-reveal-image{from{opacity:.55;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .portrait-carousel{width:100%}.portrait-viewport{aspect-ratio:3/4}
 .about-image .portrait-slide img{aspect-ratio:auto;object-position:center}
 .portrait-caption{font-size:10px;margin-top:14px}.portrait-controls{gap:6px;margin-top:10px}
}
@media(prefers-reduced-motion:reduce){
 .portrait-slide,.about-image .portrait-slide img,.portrait-dots button:after{transition:none!important}
 .about-image .portrait-slide img{transform:none!important}
 .hero-carousel .portrait-slide img{animation:none!important;transform:none!important;transition:none!important}
 [data-reveal].reveal-pending{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
}