:root{--photo-radius:16px}
img,.hero,.asset,.wide-photo,.planning-image,.process-images,.photo-open,.film-media video{border-radius:var(--photo-radius)}
.brand img,.footer-top img{border-radius:0}
.hero,.asset,.wide-photo,.process-images,.photo-open{overflow:hidden;isolation:isolate}
.service h3,.service summary:hover h3{color:var(--orange)}
.planning{padding:65px 6vw;gap:7vw;grid-template-columns:.85fr 1.15fr;align-items:center}
.planning-copy{padding:0}
.planning-image{width:100%;max-width:365px;min-height:0;justify-self:center;align-self:center;overflow:visible}
.planning-image img{width:100%;height:auto;min-height:0;max-height:none;object-fit:contain;transform:none!important}
.photo-full{width:auto;height:auto;max-width:100%;max-height:65svh;margin-inline:auto;object-fit:contain}
.wide-photo img{transform:translate3d(0,var(--photo-shift,0px),0) scale(1.025);transition:transform .65s var(--ease)}
.reveal-ready[data-reveal="photo"]{clip-path:none;opacity:1;transform:translateY(0);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.reveal-ready.reveal-pending[data-reveal="photo"]{clip-path:none;opacity:.15;transform:translateY(18px)}
.reveal-ready[data-reveal="photo"]:not(.planning-image) img{transition:transform 1.1s var(--ease)}
.gallery figure.reveal-pending img{transform:scale(1.055)}
.reveal-ready[data-reveal="title"]{transition:opacity .65s var(--ease),transform .75s var(--ease)}
.reveal-ready.reveal-pending[data-reveal="title"]{transform:translateY(16px)}
.film-copy{min-height:250px}.film-copy h3{margin-bottom:22px}
.film-media{width:100%}.reel-stage{position:relative}.reel-stage video{width:100%}
.reel-arrow{position:absolute;top:50%;z-index:2;width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0;border:1px solid #ffffff70;border-radius:50%;background:#111329e8;color:#fff;font-size:23px;line-height:1;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.reel-prev{left:-23px}.reel-next{right:-23px}.reel-arrow:hover{background:var(--orange);color:var(--navy);border-color:var(--orange)}.reel-arrow:active{transform:scale(.96)}.reel-arrow:disabled{opacity:.35;cursor:default}
.reel-position{display:flex;justify-content:center;gap:8px;margin-top:16px}.reel-dot{height:3px;width:30px;border-radius:3px;background:#ffffff40;transition:background .2s}.reel-dot.is-current{background:var(--orange)}
.reel-updated{animation:reel-copy .3s ease-out}@keyframes reel-copy{from{opacity:.4}to{opacity:1}}
/* Preserve a gentle visual response when the OS asks for less motion. */
html.motion-off .reveal-ready{transition:opacity .32s ease-out!important;transform:none!important;clip-path:none!important}
html.motion-off .reveal-ready.reveal-pending{opacity:0!important;transform:none!important}
html.motion-off .reveal-ready.reveal-visible{opacity:1!important}
html.motion-off .process-frame{transition:opacity .22s ease-out!important;transform:none!important}
html.motion-off .wide-photo img,html.motion-off .gallery img{transform:none!important}
html.motion-off .hero-content h1,html.motion-off .hero-content .hero-description,html.motion-off .hero-content .actions{animation:gentle-fade .4s ease-out both!important}
@keyframes gentle-fade{from{opacity:.2}to{opacity:1}}
@media(hover:hover) and (pointer:fine){html.motion-on .wide-photo:hover img{transform:translate3d(0,var(--photo-shift,0px),0) scale(1.045)}html.motion-on .photo-open:hover img{transform:scale(1.035)}}
@media(max-width:1050px){.planning{gap:5vw;padding:60px 5vw}.planning-image{max-width:325px}.planning-copy{padding:0}}
@media(max-width:800px){.planning{grid-template-columns:1fr;padding:55px 24px;gap:38px}.planning-image{max-width:310px;min-height:0}.planning-image img{height:auto;min-height:0;object-fit:contain}.planning-copy{padding:0}.film-copy{min-height:0}.film-media{width:min(100%,350px);padding:0 6px}.reel-prev{left:-16px}.reel-next{right:-16px}.reel-arrow{width:44px;height:44px;min-height:44px}.wide-photo img{transform:scale(1.015)}.reveal-ready.reveal-pending[data-reveal="photo"]{transform:translateY(10px)}.photo-full{height:auto;max-height:58svh}}

/* Automatic, finite photo entrances: no continuous looping or layout shifts. */
html.motion-on .hero-photo{animation:photo-settle 1.6s var(--ease) both!important}
html.motion-on .reveal-visible[data-reveal="photo"]:not(.planning-image):not(.process-images) img{animation:photo-settle 1.25s var(--ease) both!important}
html.motion-on .planning-image.reveal-visible{animation:whole-photo-enter .9s var(--ease) both!important}
html.motion-on .hero-content h1{animation:hero-in .75s var(--ease) both!important}
html.motion-on .hero-content .hero-description{animation:hero-in .75s .12s var(--ease) both!important}
html.motion-on .hero-content .actions{animation:hero-in .75s .22s var(--ease) both!important}
@keyframes photo-settle{from{scale:1.045}to{scale:1}}
@keyframes whole-photo-enter{from{scale:.975;opacity:.25}to{scale:1;opacity:1}}
@media(max-width:800px){html.motion-on .hero-photo,html.motion-on .reveal-visible[data-reveal="photo"] img{animation-duration:.85s!important}}