/* Service graphics built as vectors, independent of client photographs. */
.revision-twelve .service-vector{inset:0 -2% 0 22%;display:flex;align-items:center;justify-content:flex-end;mask-image:linear-gradient(90deg,transparent,#000 28%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 94%,transparent)}
.revision-twelve .service-vector>svg{display:block;width:100%;height:100%;max-height:640px;mask-image:linear-gradient(180deg,transparent,#000 13%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 82%,transparent)}
.promo-frame{animation:promo-drift 10s ease-in-out infinite}.promo-orbit{animation:promo-dot 7s ease-in-out infinite}.social-front{animation:social-drift 8s ease-in-out infinite}.social-back{animation:social-drift 9s ease-in-out infinite reverse}.social-spark{transform-origin:882px 236px;animation:social-turn 22s linear infinite}
@keyframes promo-drift{50%{translate:0 -14px}}@keyframes promo-dot{50%{translate:-18px 16px}}@keyframes social-drift{50%{translate:0 -12px}}@keyframes social-turn{to{rotate:360deg}}
/* Fade the photographs as a single composition underneath the title. */
.revision-twelve .hero-diptych{inset:0 0 0 24%;padding:12px 2%;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 95%,transparent)}
.revision-twelve .hero-diptych .photo-diptych{height:auto;max-height:100%;width:100%;max-width:760px;border-radius:0;mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 74%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 74%,transparent 100%)}
.revision-twelve .hero-diptych .portrait-window{position:relative;overflow:hidden;min-width:0;height:100%;aspect-ratio:2/3}
.revision-twelve .portrait-window img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%;mask-image:none;-webkit-mask-image:none}
.revision-twelve .portrait-window-1 img{transform:scale(1.07);transform-origin:50% 28%}.revision-twelve .portrait-window-2 img{transform:none}
.revision-twelve .photography-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px;align-items:stretch}
.revision-twelve .photography-trio figure{margin:0;min-width:0;overflow:hidden;border-radius:6px}.revision-twelve .photography-trio img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;mask-image:none;-webkit-mask-image:none}
/* Preserve 9:16 sources with an exactly matching player, not a wider capped box. */
.revision-twelve #studio-marvelli .marvelli-reels{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:660px;margin:38px auto 0;padding:26px 0 0}
.revision-twelve #studio-marvelli .marvelli-reels .reel-heading{grid-column:1/-1}
.revision-twelve #studio-marvelli .marvelli-reels figure{width:100%;max-width:none;aspect-ratio:9/16;overflow:hidden;border-radius:8px;margin:0;background:transparent}
.revision-twelve #studio-marvelli .marvelli-reels video{display:block;width:100%;height:100%;max-height:none!important;aspect-ratio:9/16;object-fit:cover;border-radius:0;background:transparent}
/* Actual client logo with room to breathe. */
.home-editorial.revision-twelve .logo-project{background:#eeefea;border-color:#d4d9cd;color:#18221c}
.home-editorial.revision-twelve .logo-project .logo-media{display:flex;align-items:center;justify-content:center;padding:14% 20% 21%;background:radial-gradient(ellipse at 60% 20%,#fff,#e0e5dc)}
.home-editorial.revision-twelve .logo-project .logo-media img{position:static;width:100%;height:100%;object-fit:contain;filter:none;transform:none!important}
.home-editorial.revision-twelve .logo-project:after{background:linear-gradient(0deg,#e2e7dd,transparent 35%)}
.home-editorial.revision-twelve .logo-project .project-top{color:#18221c}.home-editorial.revision-twelve .logo-project .project-title h3{color:#18221c}
@media(max-width:700px){
.revision-twelve .service-vector{position:relative;inset:auto;display:block;width:111.12%;height:auto;aspect-ratio:16/10;margin:-12px -5.56% 0;mask-image:none;-webkit-mask-image:none}
.revision-twelve .service-vector>svg{width:100%;height:100%;max-height:none;mask-image:linear-gradient(180deg,transparent,#000 20%,#000 84%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 84%,transparent)}
.revision-twelve .hero-diptych{position:relative;inset:auto;padding:0;width:111.12%;aspect-ratio:4/3;margin:-62px -5.56% 0;mask-image:none;-webkit-mask-image:none}
.revision-twelve .hero-diptych .photo-diptych{width:100%;height:100%;max-height:none;mask-image:linear-gradient(180deg,transparent 0%,transparent 8%,#000 35%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 8%,#000 35%,#000 75%,transparent 100%)}
.revision-twelve main[data-service="fotografia"] .immersive-hero,.revision-twelve main[data-service="matrimoni"] .immersive-hero{padding-bottom:0}
.revision-twelve .hero-diptych .portrait-window{aspect-ratio:auto}
.revision-twelve .photography-trio{gap:9px;margin-top:20px}.revision-twelve .photography-trio figure{border-radius:3px}
.revision-twelve #studio-marvelli .marvelli-reels{grid-template-columns:1fr;max-width:300px;gap:24px;margin-top:28px}
}
@media(prefers-reduced-motion:reduce){.promo-frame,.promo-orbit,.social-front,.social-back,.social-spark{animation:none}}
/* Feather the fitted composition itself: no hard left or right edge. */
.revision-twelve .hero-diptych .photo-diptych{max-width:900px;mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 94%,transparent 100%),linear-gradient(180deg,transparent,#000 19%,#000 74%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 94%,transparent 100%),linear-gradient(180deg,transparent,#000 19%,#000 74%,transparent);-webkit-mask-composite:source-in}
.revision-twelve .portrait-window-2 img{transform:translateY(-6%) scale(1.05);transform-origin:50% 30%}
@media(max-width:700px){.revision-twelve .hero-diptych .photo-diptych{max-width:none;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent 0%,transparent 8%,#000 35%,#000 75%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent 0%,transparent 8%,#000 35%,#000 75%,transparent 100%);-webkit-mask-composite:source-in}}
