/* Photo movement is isolated inside clipped frames; page geometry stays fixed. */
.np-frame { position: relative; isolation: isolate; overflow: hidden; }
.np-media { display: block; min-width: 0; width: 100%; background: #252923; }
.np-frame > .np-photo { display: block; width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--np-x, 0px), var(--np-y, 0px), 0) scale(var(--np-scale, 1.12)) rotate(var(--np-roll, 0deg)); transform-origin: center; }
.np-frame[data-motion="tilt"] > .np-photo { transform: perspective(1100px) translate3d(var(--np-x, 0px), var(--np-y, 0px), 0) rotateX(var(--np-rx, 0deg)) rotateY(var(--np-ry, 0deg)) scale(var(--np-scale, 1.1)); }
.lightbox .np-frame > .np-photo { object-fit: contain; }
.np-frame[data-motion="thumbnail"] > .np-photo { transition: transform .4s ease; }
.np-frame[data-motion="thumbnail"]:hover > .np-photo { transform: translateY(-2px) scale(1.15); }
.np-frame.np-active > .np-photo { will-change: transform; }
.hero.np-frame > .np-photo { position: absolute; inset: 0; height: 100%; }
.hero.np-frame .hero-copy { transform: translate3d(0, var(--np-copy-y, 0px), 0); }
.page-hero > .np-page-media { padding: 0; aspect-ratio: 16 / 9; height: auto; }
.np-renovation-media { aspect-ratio: 3 / 2; }
.renovation-feature .np-renovation-media { aspect-ratio: 3 / 2; }
.work-gallery-grid > .np-work-media { height: 300px; }
.project-thumbnails .np-frame { overflow: hidden; }
.np-logo { transition: transform .4s ease; animation: np-logo-in .8s ease both; }
.brand:hover .np-logo { transform: perspective(300px) rotateY(-12deg) scale(1.05); }

/* One-shot image reveals, independently from the continuous parallax. */
.np-seen[data-reveal="curtain"] { animation: np-curtain 1.15s cubic-bezier(.18,.65,.2,1) both; }
.np-seen[data-reveal="side"] { animation: np-side 1.15s cubic-bezier(.18,.65,.2,1) both; }
.np-seen[data-reveal="focus"] { animation: np-focus 1.15s cubic-bezier(.18,.65,.2,1) both; }
.np-seen[data-reveal="diagonal"] { animation: np-diagonal 1.15s cubic-bezier(.18,.65,.2,1) both; }
.np-seen[data-reveal="fade"] { animation: np-fade .8s ease both; }
.np-seen[data-reveal] { animation-delay: var(--np-delay, 0ms); }
@keyframes np-curtain { from { clip-path: inset(100% 0 0); } to { clip-path: inset(0); } }
@keyframes np-side { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes np-focus { from { clip-path: inset(15% 12%); opacity: .4; } to { clip-path: inset(0); opacity: 1; } }
@keyframes np-diagonal { from { clip-path: polygon(0 0, 12% 0, 0 100%, 0 100%); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes np-fade { from { opacity: .35; } to { opacity: 1; } }
@keyframes np-logo-in { from { opacity: .3; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lightbox[open] img { animation: np-viewer-in .45s ease both; }
@keyframes np-viewer-in { from { opacity: .25; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }

.motion-reduced .np-frame > .np-photo, .motion-reduced .hero.np-frame .hero-copy,
.motion-reduced .np-logo, .motion-reduced .lightbox[open] img { transform: none; animation: none; will-change: auto; }
.motion-reduced .np-frame { animation: none; clip-path: none; }
@media (min-width: 761px) {
  .page-hero > .np-page-media { height: 400px; aspect-ratio: auto; }
  .renovation-feature .np-renovation-media { min-height: 520px; height: 100%; }
  .work-gallery-grid > .np-work-media { height: 420px; }
}
@media (min-width: 761px) and (max-width: 999px) {
  .page-hero > .np-page-media { height: auto; aspect-ratio: 16 / 9; }
  .renovation-feature .np-renovation-media { min-height: 0; height: auto; }
}
@media (max-width: 760px) {
  .np-seen[data-reveal] { animation-duration: .85s; }
}
@media (prefers-reduced-motion: reduce) {
  .np-frame, .np-logo, .lightbox[open] img { animation: none !important; clip-path: none !important; }
  .np-frame > .np-photo, .hero.np-frame .hero-copy, .brand .np-logo { transform: none !important; will-change: auto; transition: none; }
}